Merge branch 'main' of https://git.opencomputing.cn/yumoqing/kboss

f/web-kboss/src/components/Pagination/index.vue

@@ -1,101 +1,545 @@
 <template>
-  <div :class="{'hidden':hidden}" class="pagination-container">
+  <div v-loading="loading" class="customerGood">
-    <el-pagination
+    <!-- 搜索部分 -->
-      :background="background"
+    <div>
-      :current-page.sync="currentPage"
+      <ul class="search-box">
-      :page-size.sync="pageSize"
+        <li>
-      :layout="layout"
+          <el-input-group class="search-input">
-      :page-sizes="pageSizes"
+            <el-input
-      :total="total"
+              size="mini"
-      v-bind="$attrs"
+              placeholder="请输入关键词"
-      @size-change="handleSizeChange"
+              v-model="queryParams.productname"
-      @current-change="handleCurrentChange"
+              clearable
-    />
+              @keyup.enter.native="handleSearch"
+            ></el-input>
+            <el-button
+              slot="append"
+              icon="el-icon-search"
+              size="mini"
+              @click="handleSearch"
+            ></el-button>
+          </el-input-group>
+        </li>
+        <li>
+          <span class="search-label">创建日期:</span>
+          <el-date-picker
+            size="mini"
+            style="width: 220px;"
+            type="datetimerange"
+            align="right"
+            start-placeholder="开始日期"
+            end-placeholder="结束日期"
+            :default-time="['00:00:00', '23:59:59']"
+            format="yyyy-MM-dd"
+            value-format="yyyy-MM-dd"
+            v-model="dateRange"
+            @change="handleDateChange"
+          ></el-date-picker>
+        </li>
+        <li>
+          <el-button size="mini" @click="handleReset">重置</el-button>
+          <el-button type="primary" size="mini" @click="handleSearch">查询</el-button>
+        </li>
+      </ul>
+    </div>
+
+    <!-- 表格部分 -->
+    <el-card class="tableCard">
+      <el-table
+        :data="tableData"
+        style="width: 100%;font-size: 12px"
+        height="calc(100vh - 230px)"
+        border
+        v-loading="loading"
+      >
+        <el-table-column min-width="90px" align="center" prop="productname" label="产品名称"></el-table-column>
+        <el-table-column min-width="150px" align="center" prop="productdesc" label="产品描述" :show-overflow-tooltip="true">
+          <template slot-scope="{row}">
+            {{ row.productdesc ? row.productdesc : '-' }}
+          </template>
+        </el-table-column>
+        <el-table-column min-width="150px" align="center" prop="orderid" label="订单号" :show-overflow-tooltip="true"></el-table-column>
+        <el-table-column min-width="60px" align="center" prop="start_date" label="购买日期"></el-table-column>
+        <el-table-column prop="expire_date" label="到期日期">
+          <template slot-scope="scope">
+            {{ scope.row.expire_date == null ? '-' : scope.row.expire_date }}
+          </template>
+        </el-table-column>
+        <el-table-column prop="" label="操作" align="center" width="120px">
+          <template slot-scope="scope">
+            <el-button type="primary" size="mini" @click="goJiNanChaoSuan()" v-if="scope.row.providername === '济南超算'">
+              <div style="display: flex;justify-content: center;align-items: center">
+                <img style="width: 12px;margin-right: 5px;height: 12px;" src="./svg/跳转.svg" alt="">超算产品
+              </div>
+            </el-button>
+            <el-button type="primary" size="mini" @click="goBaiDu(scope.row.product_url)" v-else-if="(scope.row.providername === '百度智能云')">
+              <div style="display: flex;justify-content: center;align-items: center">
+                <img style="width: 12px;margin-right: 5px;height: 12px;" src="./svg/跳转.svg" alt="">实例使用
+              </div>
+            </el-button>
+            <el-button type="primary" size="mini" @click="goJd" v-else-if="(scope.row.providername === '京东云')">
+              <div style="display: flex;justify-content: center;align-items: center">
+                <img style="width: 12px;margin-right: 5px;height: 12px;" src="./svg/跳转.svg" alt="">京东产品
+              </div>
+            </el-button>
+            <el-button type="primary" size="mini" @click="goUcloud(scope.row.region)" v-else-if="(scope.row.providername === '优刻得科技股份有限公司')">
+              <div style="display: flex;justify-content: center;align-items: center">
+                <img style="width: 12px;margin-right: 5px;height: 12px;" src="./svg/跳转.svg" alt="">集群二
+              </div>
+            </el-button>
+            <el-button size="mini" @click="nodeThree(scope.row)" v-else-if="(scope.row.classify === 'E')">
+              详情
+            </el-button>
+            <div v-else-if="scope.row.classify === 'CPCC'">
+              <el-button size="mini" type="primary" @click="openCpccDetail(scope.row)">
+                容器化详情
+              </el-button>
+              <el-button size="mini" type="primary" @click="$router.push('/customer/SshTerminal')">
+                登录
+              </el-button>
+            </div>
+            <el-button type="primary" size="mini" @click="goCaption()" v-else-if="(scope.row.providername === '北京首都在线科技股份有限公司')">
+              <div style="display: flex;justify-content: center;align-items: center">
+                <img style="width: 12px;margin-right: 5px;height: 12px;" src="./svg/跳转.svg" alt="">集群一
+              </div>
+            </el-button>
+            <span v-else>-</span>
+          </template>
+        </el-table-column>
+      </el-table>
+
+      <!-- 分页组件 -->
+      <pagination
+        v-show="total > 0"
+        :total="total"
+        :page.sync="queryParams.page"
+        :limit.sync="queryParams.page_size"
+        @pagination="handlePagination"
+      />
+    </el-card>
+
+    <!-- 详情对话框 -->
+    <el-dialog title="详情" :visible.sync="dialogTableVisible">
+      <el-table :data="datailList">
+        <el-table-column min-width="200px" property="date" label="实例编号/名称">
+          <template slot-scope="scope">
+            {{ scope.row.id }}
+          </template>
+        </el-table-column>
+        <el-table-column min-width="200px" property="name" label="状态">
+          <template slot-scope="scope">
+            {{ scope.row.status === "1" ? '运行中' : '已关机' }}
+          </template>
+        </el-table-column>
+        <el-table-column min-width="200px" property="address" label="规格详情">
+          <template slot-scope="scope">
+            <div class="guige">
+              <span>{{ scope.row.productname }}* {{ scope.row.gpu }}卡</span>
+              <el-popover placement="top" title="" width="200" trigger="hover">
+                <span class="tipStyle" slot="reference">查看详情</span>
+                <div>
+                  <p>存储: {{ scope.row.storage }} G</p>
+                  <p>CPU: {{ scope.row.cpu }} 核</p>
+                  <p>内存: {{ scope.row.memory }} G</p>
+                  <p>GPU: {{ scope.row.gpu }} 卡</p>
+                  <p>显存: {{ scope.row.gpumem }} G</p>
+                </div>
+              </el-popover>
+            </div>
+          </template>
+        </el-table-column>
+        <el-table-column min-width="120px" property="address" label="健康状态">
+          <template slot-scope="scope">
+            正常
+          </template>
+        </el-table-column>
+        <el-table-column min-width="100px" property="address" label="付费方式">
+          <template slot-scope="scope">
+            核时
+          </template>
+        </el-table-column>
+        <el-table-column min-width="100px" property="address" label="登录指令">
+          <template slot-scope="scope">
+            <div class="itemOut">
+              <div>登录指令</div>
+              <div>ssh ****** <span class="copyBtn">
+                  <i @click="copyText('ssh -p ' + scope.row.port + ' ' + scope.row.loginname + '@' + scope.row.ip_region)" class="el-icon-copy-document"></i>
+                </span>
+              </div>
+            </div>
+            <div class="itemOut">
+              <div>密码</div>
+              <div>****** <span class="copyBtn"> <i @click="copyText(scope.row.loginpwd)" class="el-icon-copy-document"></i> </span></div>
+            </div>
+          </template>
+        </el-table-column>
+        <el-table-column min-width="150px" fixed="right" property="address" label="操作">
+          <template slot-scope="scope">
+            <el-popconfirm @confirm="shutDownThree(scope.row)" title="确定将该设备关机吗？">
+              <el-button slot="reference" :loading="deleteBtnLoading" type="danger" size="mini">
+                关机
+              </el-button>
+            </el-popconfirm>
+          </template>
+        </el-table-column>
+      </el-table>
+    </el-dialog>
+
+    <!-- 登录信息对话框 -->
+    <el-dialog title="登录信息" :visible.sync="rqyVisible" width="800">
+      <el-descriptions title="" direction="vertical" :column="4" border>
+        <el-descriptions-item label="实例id">{{ cpccDetail.id }}</el-descriptions-item>
+        <el-descriptions-item label="实例名称">{{ cpccDetail.source_name }}</el-descriptions-item>
+        <el-descriptions-item label="状态">进行中</el-descriptions-item>
+        <el-descriptions-item label="健康状态">
+          <el-tag type="success" effect="dark">
+            正常
+          </el-tag>
+        </el-descriptions-item>
+        <el-descriptions-item label="登录账号">{{ cpccDetail.source_authuser }}</el-descriptions-item>
+        <el-descriptions-item label="密码">
+          <div class="pasStyle">
+            <span v-if="!isShowPass"> **** </span>
+            <span v-if="isShowPass"> {{ cpccDetail.source_authpasswd }}</span>
+            <img @click="isShowPass = !isShowPass" v-if="!isShowPass" src="./svg/showEye.svg" alt="">
+            <img @click="isShowPass = !isShowPass" v-if="isShowPass" src="./svg/hidenEye.svg" alt="">
+          </div>
+        </el-descriptions-item>
+        <el-descriptions-item label="IP">{{ cpccDetail.source_externalip }}</el-descriptions-item>
+        <el-descriptions-item label="端口号">{{ cpccDetail.source_outsideport }}</el-descriptions-item>
+        <el-descriptions-item label="内存量">{{ cpccDetail.source_memrate }}</el-descriptions-item>
+        <el-descriptions-item label="核心数">{{ cpccDetail.source_cpurate }}</el-descriptions-item>
+        <el-descriptions-item label="数据盘">{{ cpccDetail.source_storagelimits }}</el-descriptions-item>
+        <el-descriptions-item label="系统盘">{{ cpccDetail.disk_sys_limit }}</el-descriptions-item>
+        <el-descriptions-item v-if="cpccDetail.source_gpu !== '0'" label="卡数">{{ cpccDetail.source_gpu }}
+        </el-descriptions-item>
+      </el-descriptions>
+      <span slot="footer" class="dialog-footer">
+        <el-button type="primary" @click="rqyVisible = false">关 闭</el-button>
+      </span>
+    </el-dialog>
   </div>
 </template>
 
 <script>
-import { scrollTo } from '@/utils/scroll-to'
+import { getCustomerGoodsAPI, HpcAccessTimeAPI } from '@/api/customer/userResource'
+import { getJinanchaosuanSign } from '@/api/JiNanChaoSuan/jiNanChaoSuanUserList'
+import { goJdUrl } from "@/api/product/jdApi";
+import { reqDeleteK8sCloud, reqGetInstance } from "@/api/k8s";
+import { Terminal } from "xterm";
+import SshTerminal from "@/views/customer/userResource/SshTerminal.vue";
+import Pagination from '../../components/Pagination/index.vue';
 
 export default {
-  name: 'Pagination',
+  name: "userResource",
-  props: {
+  components: {
-    total: {
+    SshTerminal,
-      required: true,
+    Pagination
-      type: Number
-    },
-    page: {
-      type: Number,
-      default: 1
-    },
-    limit: {
-      type: Number,
-      default: 20
-    },
-    pageSizes: {
-      type: Array,
-      default() {
-        return [10, 20, 30, 50]
-      }
-    },
-    layout: {
-      type: String,
-      default: 'total, sizes, prev, pager, next, jumper'
-    },
-    background: {
-      type: Boolean,
-      default: true
-    },
-    autoScroll: {
-      type: Boolean,
-      default: true
-    },
-    hidden: {
-      type: Boolean,
-      default: false
-    }
   },
-  computed: {
+  data() {
-    currentPage: {
+    return {
-      get() {
+      isShowPass: false,
-        return this.page
+      cpccDetail: {},
-      },
+      rqyVisible: false,
-      set(val) {
+      deleteBtnLoading: false,
-        this.$emit('update:page', val)
+      visible: false,
+      detailBtnLoading: false,
+      userid: sessionStorage.getItem("userId"),
+      tableData: [],
+      loading: false,
+      dialogTableVisible: false,
+      datailList: [],
+      total: 0,
+      dateRange: [],
+      queryParams: {
+        productname: '',        // 搜索关键词
+        start_date: '',         // 开始时间
+        end_date: '',           // 结束时间
+        page: 1,                // 页码
+        page_size: 10,          // 每页数量
       }
-    },
+    };
-    pageSize: {
+  },
-      get() {
+  mounted() {
-        return this.limit
+    this.loading = true;
-      },
+    this.getCustomerGoods();
-      set(val) {
+    console.log("用户资源的路由信息是", this.$route);
-        this.$emit('update:limit', val)
-      }
-    }
   },
   methods: {
-    handleSizeChange(val) {
+    // 搜索处理
-      this.$emit('pagination', { page: this.currentPage, limit: val })
+    handleSearch() {
-      if (this.autoScroll) {
+      this.queryParams.page = 1; // 搜索时重置到第一页
-        scrollTo(0, 800)
+      this.getCustomerGoods();
+    },
+
+    // 重置搜索
+    handleReset() {
+      this.queryParams = {
+        productname: '',
+        start_date: '',
+        end_date: '',
+        page: 1,
+        page_size: 10,
+      };
+      this.dateRange = [];
+      this.getCustomerGoods();
+    },
+
+    // 日期选择处理
+    handleDateChange(value) {
+      if (value && value.length === 2) {
+        this.queryParams.start_date = value[0];
+        this.queryParams.end_date = value[1];
+      } else {
+        this.queryParams.start_date = '';
+        this.queryParams.end_date = '';
       }
     },
-    handleCurrentChange(val) {
+
-      this.$emit('pagination', { page: val, limit: this.pageSize })
+    // 分页处理
-      if (this.autoScroll) {
+    handlePagination(pagination) {
-        scrollTo(0, 800)
+      this.queryParams.page = pagination.page;
+      this.queryParams.page_size = pagination.limit;
+      this.getCustomerGoods();
+    },
+
+    // 获取用户资源列表
+    async getCustomerGoods() {
+      this.loading = true;
+      try {
+        const res = await getCustomerGoodsAPI(this.queryParams);
+        if (res.status === true) {
+          this.tableData = res.data;
+          this.total = res.pagination.total;
+        } else {
+          this.$message.error('获取数据失败');
+        }
+      } catch (error) {
+        console.error('获取用户资源失败:', error);
+        this.$message.error('获取数据失败');
+      } finally {
+        this.loading = false;
       }
-    }
+    },
-  }
+
-}
+    openCpccDetail(row) {
+      this.rqyVisible = true;
+      this.cpccDetail = row.instance_info;
+    },
+
+    copyText(value) {
+      const textarea = document.createElement('textarea');
+      textarea.value = value;
+      document.body.appendChild(textarea);
+      textarea.select();
+      document.execCommand('copy');
+      document.body.removeChild(textarea);
+      this.$message.success('已复制到剪贴板');
+    },
+
+    shutDownThree(item) {
+      this.deleteBtnLoading = true;
+      let ploay = {
+        id: item.id,
+        podname: item.podname,
+        pvcname: item.pvcname,
+        customer_goods_id: item.customer_goods_id
+      };
+      reqDeleteK8sCloud(ploay).then(res => {
+        this.deleteBtnLoading = false;
+        if (res.status) {
+          this.$message.success("删除成功~");
+          reqGetInstance({ customer_goods_id: item.id, orgid: sessionStorage.getItem('orgid') }).then(res => {
+            if (res.status) {
+              this.datailList = res.data;
+            }
+          });
+        } else {
+          this.$message.warning("删除失败~");
+        }
+      });
+    },
+
+    nodeThree(row) {
+      this.detailBtnLoading = true;
+      reqGetInstance({ customer_goods_id: row.id, orgid: sessionStorage.getItem('orgid') }).then(res => {
+        this.detailBtnLoading = false;
+        if (res.status) {
+          this.dialogTableVisible = true;
+          this.datailList = res.data;
+        }
+      });
+    },
+
+    goCaption() {
+      this.$router.push('/product/gpu/showGpu');
+    },
+
+    goUcloud(region) {
+      sessionStorage.setItem('region', region);
+      this.$router.push('/product/ucloudProduct/showCloudHost');
+    },
+
+    goJd() {
+      this.loading = true;
+      goJdUrl(this.userid).then(res => {
+        this.loading = false;
+        if (res.status) {
+          window.open(res.data);
+        } else {
+          this.$message.error('跳转京东界面失败');
+        }
+      });
+    },
+
+    goBaiDu(listUrl) {
+      this.$store.commit('setRedirectUrl', listUrl);
+      localStorage.setItem('redirectUrl', listUrl);
+      this.$router.push({
+        name: 'baiduProductShow',
+        params: {
+          listUrl: listUrl,
+        }
+      });
+    },
+
+    HpcAccessTime() {
+      HpcAccessTimeAPI({ orgid: sessionStorage.getItem("orgid") }).then(res => {
+        if (res.status == true) {
+          // 处理访问时间
+        }
+      });
+    },
+
+    goJiNanChaoSuan() {
+      this.HpcAccessTime();
+      var orgid = sessionStorage.getItem("orgid");
+      var username = sessionStorage.getItem("user");
+      let ploay = {
+        username: username
+      };
+      getJinanchaosuanSign(ploay).then(res => {
+        if (res.status && res.warn_msg == null) {
+          window.open(
+            'https://hpc.kaiyuancloud.cn/kyy_test/?key=' + res.data,
+            "_blank"
+          );
+        } else if (res.warn_msg != null) {
+          this.$message({
+            duration: 0,
+            showClose: true,
+            message: res.warn_msg,
+            type: 'warning'
+          });
+          window.open(
+            'https://hpc.kaiyuancloud.cn/kyy_test/?key=' + res.data,
+            "_blank"
+          );
+        }
+      });
+    },
+  },
+};
 </script>
 
-<style scoped>
+<style lang="less" scoped>
-.pagination-container {
+.tip {
+  color: #ff9120;
+  height: 35px;
+  img {
+    width: 15px;
+    height: 15px;
+    margin-right: 3px;
+  }
+  padding-left: 2px;
   background: #fff;
-  padding: 32px 16px;
+  font-size: 14px;
+  display: flex;
+  justify-content: flex-start;
+  align-items: center;
 }
-.pagination-container.hidden {
+
-  display: none;
+.guige {
+  display: flex;
+  flex-direction: column;
+}
+
+.tipStyle {
+  transition: all .3s ease-in-out;
+  cursor: pointer;
+  &:hover {
+    transition: all .3s ease-in-out;
+    color: #0a04e1;
+  }
+}
+
+.itemOut {
+  display: flex;
+  flex-direction: column;
+  align-items: flex-start;
+}
+
+.copyBtn {
+  transition: all .3s ease-in-out;
+  i {
+    color: blue;
+  }
+  &:hover {
+    transition: all .3s ease-in-out;
+    cursor: pointer;
+    color: #a3b3e8;
+  }
+}
+
+.pasStyle {
+  img {
+    width: 20px;
+    height: 20px;
+    cursor: pointer;
+    margin-left: 8px;
+    &:hover {
+      fill: blue;
+    }
+  }
+  display: flex;
+  justify-content: flex-start;
+  align-items: center;
+}
+
+.search-input {
+  display: flex;
+}
+
+.search-box {
+  display: flex;
+  align-items: center;
+  justify-content: flex-start;
+  background-color: white;
+  padding: 10px;
+  margin-bottom: 10px;
+  border-radius: 8px;
+}
+
+.search-box li {
+  margin-right: 15px;
+  display: flex;
+  align-items: center;
+  justify-content: flex-start;
+}
+
+.search-label {
+  margin-right: 8px;
+  font-size: 14px;
+  color: #606266;
+}
+
+.tableCard {
+  margin-top: 20px;
+  height: calc(100vh - 180px);
+}
+
+.pagination-container {
+  margin-top: 20px;
+  text-align: right;
 }
 </style>

f/web-kboss/src/views/customer/userResource/index.vue

@@ -1,49 +1,70 @@
 <template>
   <div v-loading="loading" class="customerGood">
-    <!--    <div class="tip"><img src="./svg/tip.svg" alt="">资源列表只展示未到期产品。</div>-->
+    <!-- 搜索部分 -->
-    <!--    <SshTerminal></SshTerminal>-->
     <div>
       <ul class="search-box">
         <li>
           <el-input-group class="search-input">
-            <el-input size="mini" placeholder="请输入关键词" clearable></el-input>
+            <el-input
-            <el-button slot="append" icon="el-icon-search" size="mini"></el-button>
+              size="mini"
+              placeholder="请输入关键词"
+              v-model="queryParams.productname"
+              clearable
+              @keyup.enter.native="handleSearch"
+            ></el-input>
+            <el-button
+              slot="append"
+              icon="el-icon-search"
+              size="mini"
+              @click="handleSearch"
+            ></el-button>
           </el-input-group>
         </li>
         <li>
           <span class="search-label">创建日期:</span>
-          <el-date-picker size="mini" style="width: 220px;" type="datetimerange" align="right" start-placeholder="开始日期"
+          <el-date-picker
-            end-placeholder="结束日期" :default-time="['00:00:00', '23:59:59']" format="yyyy-MM-dd"
+            size="mini"
-            value-format="yyyy-MM-dd"></el-date-picker>
+            style="width: 220px;"
+            type="datetimerange"
+            align="right"
+            start-placeholder="开始日期"
+            end-placeholder="结束日期"
+            :default-time="['00:00:00', '23:59:59']"
+            format="yyyy-MM-dd"
+            value-format="yyyy-MM-dd"
+            v-model="dateRange"
+            @change="handleDateChange"
+          ></el-date-picker>
         </li>
         <li>
-          <el-button size="mini">重置</el-button>
+          <el-button size="mini" @click="handleReset">重置</el-button>
-          <el-button type="primary" size="mini">查询</el-button>
+          <el-button type="primary" size="mini" @click="handleSearch">查询</el-button>
         </li>
       </ul>
     </div>
+
+    <!-- 表格部分 -->
     <el-card class="tableCard">
-      <el-table :data="tableData" style="width: 100%;font-size: 12px" height="calc(100vh - 130px)" border>
+      <el-table
+        :data="tableData"
+        style="width: 100%;font-size: 12px"
+        height="calc(100vh - 280px)"
+        border
+        v-loading="loading"
+      >
         <el-table-column min-width="90px" align="center" prop="productname" label="产品名称"></el-table-column>
         <el-table-column min-width="150px" align="center" prop="productdesc" label="产品描述" :show-overflow-tooltip="true">
           <template slot-scope="{row}">
             {{ row.productdesc ? row.productdesc : '-' }}
           </template>
         </el-table-column>
-        <el-table-column min-width="150px" align="center" prop="orderid" label="订单号"
+        <el-table-column min-width="150px" align="center" prop="orderid" label="订单号" :show-overflow-tooltip="true"></el-table-column>
-          :show-overflow-tooltip="true"></el-table-column>
         <el-table-column min-width="60px" align="center" prop="start_date" label="购买日期"></el-table-column>
         <el-table-column prop="expire_date" label="到期日期">
           <template slot-scope="scope">
             {{ scope.row.expire_date == null ? '-' : scope.row.expire_date }}
           </template>
         </el-table-column>
-        <!--
- <el-table-column prop="total_quantity" label="总量">
- <el-table-column prop="used_quantity" label="已用量">
- </el-table-column>
- <el-table-column prop="rest_quantity" label="剩余量">
- </el-table-column> -->
         <el-table-column prop="" label="操作" align="center" width="120px">
           <template slot-scope="scope">
             <el-button type="primary" size="mini" @click="goJiNanChaoSuan()" v-if="scope.row.providername === '济南超算'">
@@ -51,21 +72,17 @@
                 <img style="width: 12px;margin-right: 5px;height: 12px;" src="./svg/跳转.svg" alt="">超算产品
               </div>
             </el-button>
-            <el-button type="primary" size="mini" @click="goBaiDu(scope.row.product_url)"
+            <el-button type="primary" size="mini" @click="goBaiDu(scope.row.product_url)" v-else-if="(scope.row.providername === '百度智能云')">
-              v-else-if="(scope.row.providername === '百度智能云')">
               <div style="display: flex;justify-content: center;align-items: center">
                 <img style="width: 12px;margin-right: 5px;height: 12px;" src="./svg/跳转.svg" alt="">实例使用
               </div>
             </el-button>
             <el-button type="primary" size="mini" @click="goJd" v-else-if="(scope.row.providername === '京东云')">
-              <!--            <i class="el-icon-edit-outline"></i> -->
               <div style="display: flex;justify-content: center;align-items: center">
                 <img style="width: 12px;margin-right: 5px;height: 12px;" src="./svg/跳转.svg" alt="">京东产品
               </div>
             </el-button>
-            <el-button type="primary" size="mini" @click="goUcloud(scope.row.region)"
+            <el-button type="primary" size="mini" @click="goUcloud(scope.row.region)" v-else-if="(scope.row.providername === '优刻得科技股份有限公司')">
-              v-else-if="(scope.row.providername === '优刻得科技股份有限公司')">
-              <!--            <i class="el-icon-edit-outline"></i> -->
               <div style="display: flex;justify-content: center;align-items: center">
                 <img style="width: 12px;margin-right: 5px;height: 12px;" src="./svg/跳转.svg" alt="">集群二
               </div>
@@ -81,20 +98,7 @@
                 登录
               </el-button>
             </div>
-            <!--          <el-dropdown @command="handleCommand(scope.row, $event)" v-else-if="(scope.row.classify === 'E')"-->
+            <el-button type="primary" size="mini" @click="goCaption()" v-else-if="(scope.row.providername === '北京首都在线科技股份有限公司')">
-            <!--                       trigger="click">-->
-            <!--  <span style="cursor: pointer" class="el-dropdown-link">-->
-            <!--    集群三<i class="el-icon-arrow-down el-icon&#45;&#45;right"></i>-->
-            <!--  </span>-->
-            <!--            <el-dropdown-menu slot="dropdown">-->
-            <!--              <el-dropdown-item command="detail" icon="el-icon-warning-outline">详情</el-dropdown-item>-->
-            <!--              <el-dropdown-item command="shutDown" icon="el-icon-switch-button">关机</el-dropdown-item>-->
-            <!--            </el-dropdown-menu>-->
-            <!--          </el-dropdown>-->
-
-            <el-button type="primary" size="mini" @click="goCaption()"
-              v-else-if="(scope.row.providername === '北京首都在线科技股份有限公司')">
-              <!--            <i class="el-icon-edit-outline"></i> -->
               <div style="display: flex;justify-content: center;align-items: center">
                 <img style="width: 12px;margin-right: 5px;height: 12px;" src="./svg/跳转.svg" alt="">集群一
               </div>
@@ -103,9 +107,23 @@
           </template>
         </el-table-column>
       </el-table>
+
+      <!-- Element UI 分页组件 -->
+      <div class="pagination-container">
+        <el-pagination
+          @size-change="handleSizeChange"
+          @current-change="handleCurrentChange"
+          :current-page="queryParams.page"
+          :page-sizes="[10, 20, 50, 100]"
+          :page-size="queryParams.page_size"
+          layout="total, sizes, prev, pager, next, jumper"
+          :total="total"
+        >
+        </el-pagination>
+      </div>
     </el-card>
 
-
+    <!-- 详情对话框 -->
     <el-dialog title="详情" :visible.sync="dialogTableVisible">
       <el-table :data="datailList">
         <el-table-column min-width="200px" property="date" label="实例编号/名称">
@@ -122,10 +140,8 @@
           <template slot-scope="scope">
             <div class="guige">
               <span>{{ scope.row.productname }}* {{ scope.row.gpu }}卡</span>
-
               <el-popover placement="top" title="" width="200" trigger="hover">
                 <span class="tipStyle" slot="reference">查看详情</span>
-
                 <div>
                   <p>存储: {{ scope.row.storage }} G</p>
                   <p>CPU: {{ scope.row.cpu }} 核</p>
@@ -137,7 +153,6 @@
             </div>
           </template>
         </el-table-column>
-
         <el-table-column min-width="120px" property="address" label="健康状态">
           <template slot-scope="scope">
             正常
@@ -153,23 +168,16 @@
             <div class="itemOut">
               <div>登录指令</div>
               <div>ssh ****** <span class="copyBtn">
-                  <i @click="copyText('ssh -p ' + scope.row.port + ' ' + scope.row.loginname + '@' + scope.row.ip_region)"
+                  <i @click="copyText('ssh -p ' + scope.row.port + ' ' + scope.row.loginname + '@' + scope.row.ip_region)" class="el-icon-copy-document"></i>
-                    class="el-icon-copy-document"></i>
                 </span>
               </div>
             </div>
             <div class="itemOut">
               <div>密码</div>
-              <div>****** <span class="copyBtn"> <i @click="copyText(scope.row.loginpwd)"
+              <div>****** <span class="copyBtn"> <i @click="copyText(scope.row.loginpwd)" class="el-icon-copy-document"></i> </span></div>
-                    class="el-icon-copy-document"></i> </span></div>
             </div>
           </template>
         </el-table-column>
-        <!--        <el-table-column min-width="200px" property="address" label="创建时间/到期时间">-->
-        <!--          <template slot-scope="scope">-->
-        <!--            {{ scope.row.id }}-->
-        <!--          </template>-->
-        <!--        </el-table-column>-->
         <el-table-column min-width="150px" fixed="right" property="address" label="操作">
           <template slot-scope="scope">
             <el-popconfirm @confirm="shutDownThree(scope.row)" title="确定将该设备关机吗？">
@@ -177,52 +185,41 @@
                 关机
               </el-button>
             </el-popconfirm>
-
           </template>
         </el-table-column>
       </el-table>
     </el-dialog>
 
+    <!-- 登录信息对话框 -->
     <el-dialog title="登录信息" :visible.sync="rqyVisible" width="800">
       <el-descriptions title="" direction="vertical" :column="4" border>
         <el-descriptions-item label="实例id">{{ cpccDetail.id }}</el-descriptions-item>
         <el-descriptions-item label="实例名称">{{ cpccDetail.source_name }}</el-descriptions-item>
         <el-descriptions-item label="状态">进行中</el-descriptions-item>
         <el-descriptions-item label="健康状态">
-
           <el-tag type="success" effect="dark">
             正常
           </el-tag>
         </el-descriptions-item>
-
         <el-descriptions-item label="登录账号">{{ cpccDetail.source_authuser }}</el-descriptions-item>
         <el-descriptions-item label="密码">
           <div class="pasStyle">
             <span v-if="!isShowPass"> **** </span>
-
             <span v-if="isShowPass"> {{ cpccDetail.source_authpasswd }}</span>
-
-
             <img @click="isShowPass = !isShowPass" v-if="!isShowPass" src="./svg/showEye.svg" alt="">
             <img @click="isShowPass = !isShowPass" v-if="isShowPass" src="./svg/hidenEye.svg" alt="">
           </div>
-
         </el-descriptions-item>
         <el-descriptions-item label="IP">{{ cpccDetail.source_externalip }}</el-descriptions-item>
         <el-descriptions-item label="端口号">{{ cpccDetail.source_outsideport }}</el-descriptions-item>
-
         <el-descriptions-item label="内存量">{{ cpccDetail.source_memrate }}</el-descriptions-item>
         <el-descriptions-item label="核心数">{{ cpccDetail.source_cpurate }}</el-descriptions-item>
         <el-descriptions-item label="数据盘">{{ cpccDetail.source_storagelimits }}</el-descriptions-item>
         <el-descriptions-item label="系统盘">{{ cpccDetail.disk_sys_limit }}</el-descriptions-item>
-        <el-descriptions-item v-if="cpccDetail.source_gpu !== '0'" label="卡数">{{
+        <el-descriptions-item v-if="cpccDetail.source_gpu !== '0'" label="卡数">{{ cpccDetail.source_gpu }}
-          cpccDetail.source_gpu
-          }}
         </el-descriptions-item>
-
       </el-descriptions>
       <span slot="footer" class="dialog-footer">
-        <!--    <el-button @click="rqyVisible = false">取 消</el-button>-->
         <el-button type="primary" @click="rqyVisible = false">关 闭</el-button>
       </span>
     </el-dialog>
@@ -239,7 +236,9 @@ import SshTerminal from "@/views/customer/userResource/SshTerminal.vue";
 
 export default {
   name: "userResource",
-  components: { SshTerminal },
+  components: {
+    SshTerminal
+  },
   data() {
     return {
       isShowPass: false,
@@ -252,132 +251,181 @@ export default {
       tableData: [],
       loading: false,
       dialogTableVisible: false,
-      datailList: []
+      datailList: [],
+      total: 0,
+      dateRange: [],
+      queryParams: {
+        productname: '',        // 搜索关键词
+        start_date: '',         // 开始时间
+        end_date: '',           // 结束时间
+        page: 1,                // 页码
+        page_size: 10,          // 每页数量
+      }
     };
   },
   mounted() {
-    this.loading = true
+    this.loading = true;
-    this.getCustomerGoods()
+    this.getCustomerGoods();
-    console.log("用户资源的路由信息是", this.$route)
+    console.log("用户资源的路由信息是", this.$route);
-    // this.initTerminal()
   },
-
   methods: {
+    // 搜索处理
+    handleSearch() {
+      this.queryParams.page = 1; // 搜索时重置到第一页
+      this.getCustomerGoods();
+    },
+
+    // 重置搜索
+    handleReset() {
+      this.queryParams = {
+        productname: '',
+        start_date: '',
+        end_date: '',
+        page: 1,
+        page_size: 10,
+      };
+      this.dateRange = [];
+      this.getCustomerGoods();
+    },
+
+    // 日期选择处理
+    handleDateChange(value) {
+      if (value && value.length === 2) {
+        this.queryParams.start_date = value[0];
+        this.queryParams.end_date = value[1];
+      } else {
+        this.queryParams.start_date = '';
+        this.queryParams.end_date = '';
+      }
+    },
+
+    // 每页数量变化
+    handleSizeChange(val) {
+      this.queryParams.page_size = val;
+      this.getCustomerGoods();
+    },
+
+    // 当前页码变化
+    handleCurrentChange(val) {
+      this.queryParams.page = val;
+      this.getCustomerGoods();
+    },
+
+    // 获取用户资源列表
+    async getCustomerGoods() {
+      this.loading = true;
+      try {
+        const res = await getCustomerGoodsAPI(this.queryParams);
+        if (res.status === true) {
+          this.tableData = res.data;
+          this.total = res.pagination.total;
+        } else {
+          this.$message.error('获取数据失败');
+        }
+      } catch (error) {
+        console.error('获取用户资源失败:', error);
+        this.$message.error('获取数据失败');
+      } finally {
+        this.loading = false;
+      }
+    },
+
     openCpccDetail(row) {
-
+      this.rqyVisible = true;
-      this.rqyVisible = true
+      this.cpccDetail = row.instance_info;
-
-      this.cpccDetail = row.instance_info
-    },
-    initTerminal() {
-      let term = new Terminal();
-      term.open(document.getElementById('terminal'));
-      term.write('Hello from \x1B[1;3;31mxterm.js\x1B[0m $ ');
     },
+
     copyText(value) {
-      // 创建一个临时的textarea元素，用来执行复制操作
       const textarea = document.createElement('textarea');
       textarea.value = value;
       document.body.appendChild(textarea);
-
-      // 选中内容并执行复制
       textarea.select();
       document.execCommand('copy');
-
-      // 移除临时的textarea元素
       document.body.removeChild(textarea);
-
-      // 可以添加一个提示给用户，表示已经复制成功
       this.$message.success('已复制到剪贴板');
     },
+
     shutDownThree(item) {
-      this.deleteBtnLoading = true
+      this.deleteBtnLoading = true;
       let ploay = {
         id: item.id,
         podname: item.podname,
         pvcname: item.pvcname,
         customer_goods_id: item.customer_goods_id
-      }
+      };
       reqDeleteK8sCloud(ploay).then(res => {
-        this.deleteBtnLoading = false
+        this.deleteBtnLoading = false;
         if (res.status) {
-          this.$message.success("删除成功~")
+          this.$message.success("删除成功~");
           reqGetInstance({ customer_goods_id: item.id, orgid: sessionStorage.getItem('orgid') }).then(res => {
             if (res.status) {
-              this.datailList = res.data
+              this.datailList = res.data;
             }
-          })
+          });
         } else {
-          this.$message.warning("删除失败~")
+          this.$message.warning("删除失败~");
         }
-      })
+      });
     },
+
     nodeThree(row) {
-      this.detailBtnLoading = true
+      this.detailBtnLoading = true;
       reqGetInstance({ customer_goods_id: row.id, orgid: sessionStorage.getItem('orgid') }).then(res => {
-        this.detailBtnLoading = false
+        this.detailBtnLoading = false;
         if (res.status) {
-          this.dialogTableVisible = true
+          this.dialogTableVisible = true;
-          this.datailList = res.data
+          this.datailList = res.data;
         }
-      })
+      });
     },
+
     goCaption() {
-      this.$router.push('/product/gpu/showGpu')
+      this.$router.push('/product/gpu/showGpu');
     },
-    //去优客得
+
     goUcloud(region) {
-      sessionStorage.setItem('region', region)
+      sessionStorage.setItem('region', region);
-      this.$router.push('/product/ucloudProduct/showCloudHost')
+      this.$router.push('/product/ucloudProduct/showCloudHost');
     },
-    //去jd产品
+
     goJd() {
-      this.loading = true
+      this.loading = true;
-      //直接跳转到京东页面
       goJdUrl(this.userid).then(res => {
-        this.loading = false
+        this.loading = false;
         if (res.status) {
-          window.open(res.data)
+          window.open(res.data);
         } else {
-          this.$message.error('跳转京东界面失败')
+          this.$message.error('跳转京东界面失败');
         }
-
+      });
-      })
-
     },
-    //去百度产品
+
     goBaiDu(listUrl) {
-      this.$store.commit('setRedirectUrl', listUrl)
+      this.$store.commit('setRedirectUrl', listUrl);
-      localStorage.setItem('redirectUrl', listUrl)
+      localStorage.setItem('redirectUrl', listUrl);
       this.$router.push({
         name: 'baiduProductShow',
         params: {
           listUrl: listUrl,
         }
-      })
+      });
     },
+
     HpcAccessTime() {
       HpcAccessTimeAPI({ orgid: sessionStorage.getItem("orgid") }).then(res => {
-        if (rs.status == true) {
-
-        }
-      })
-    },
-    getCustomerGoods() {//获取用户资源
-      getCustomerGoodsAPI({}).then(res => {
-        this.loading = false
         if (res.status == true) {
-          this.tableData = res.data
+          // 处理访问时间
         }
-      })
+      });
     },
-    goJiNanChaoSuan() {//跳转济南超算平台
+
-      this.HpcAccessTime()
+    goJiNanChaoSuan() {
+      this.HpcAccessTime();
       var orgid = sessionStorage.getItem("orgid");
       var username = sessionStorage.getItem("user");
       let ploay = {
         username: username
-      }
+      };
       getJinanchaosuanSign(ploay).then(res => {
         if (res.status && res.warn_msg == null) {
           window.open(
@@ -396,33 +444,27 @@ export default {
             "_blank"
           );
         }
-      })
+      });
-
     },
   },
 };
 </script>
 
-<style lang="less" scoped >
+<style lang="less" scoped>
-
 .tip {
   color: #ff9120;
   height: 35px;
-
   img {
     width: 15px;
     height: 15px;
     margin-right: 3px;
   }
-
   padding-left: 2px;
   background: #fff;
   font-size: 14px;
-  //border: 1px solid red;
   display: flex;
   justify-content: flex-start;
   align-items: center;
-
 }
 
 .guige {
@@ -433,7 +475,6 @@ export default {
 .tipStyle {
   transition: all .3s ease-in-out;
   cursor: pointer;
-
   &:hover {
     transition: all .3s ease-in-out;
     color: #0a04e1;
@@ -448,11 +489,9 @@ export default {
 
 .copyBtn {
   transition: all .3s ease-in-out;
-
   i {
     color: blue;
   }
-
   &:hover {
     transition: all .3s ease-in-out;
     cursor: pointer;
@@ -466,12 +505,10 @@ export default {
     height: 20px;
     cursor: pointer;
     margin-left: 8px;
-
     &:hover {
       fill: blue;
     }
   }
-
   display: flex;
   justify-content: flex-start;
   align-items: center;
@@ -497,8 +534,24 @@ export default {
   align-items: center;
   justify-content: flex-start;
 }
-.tableCard{
+
+.search-label {
+  margin-right: 8px;
+  font-size: 14px;
+  color: #606266;
+}
+
+.tableCard {
   margin-top: 20px;
   height: calc(100vh - 180px);
 }
+
+.pagination-container {
+  margin-top: 20px;
+  text-align: center;
+  padding: 10px 0;
+}
+.el-table{
+  height: 100%;
+}
 </style>