OpenI
/
aiforge
Not watched
1
0
Fork 0
Code
Releases 128 Wiki Activity
Issues 0 Pull Requests 0 Datasets Model Cloudbrain
You can not select more than 25 topics Topics must start with a chinese character,a letter or number, can include dashes ('-') and can be up to 35 characters long.
Tree: b1e95c666f
Branches Tags
${ item.name }
Create branch ${ searchTerm }
from 'b1e95c666f'
${ noResults }
aiforge/web_src/js/components/images/Images.vue

786 lines
35 kB
Raw Blame History 

  1. <template>

  2. <div>

  3.     <div class="header-wrapper">

  4.         <div class="ui container">

  5.             <el-row class="image_text">

  6.                 <h1>云脑镜像</h1>

  7.             </el-row>    

  8.         </div>

  9.     </div>

  10.     <div class="ui container" id="header">

  11.         <el-tabs v-model="activeName" @tab-click="handleClick">

  12.             <el-tab-pane label="公开镜像" name="first" v-loading="loadingPublic">

  13.             <template v-if="tableDataPublic.length!==0">

  14.                 <el-row style="align-items: center;display: flex;">

  15.                         <el-col :span="12">

  16.                             <div>

  17.                                 <el-checkbox v-model="checked">仅显示平台推荐</el-checkbox>

  18.                             </div>

  19.                         </el-col>

  20.                         <el-col :span="4"><div style="visibility: hidden;">TODO</div></el-col>

  21.                         <el-col :span="8">

  22.                             <div>

  23.                                 <el-input placeholder="搜镜像Tag/描述/标签..." v-model="search" class="input-with-select" @keyup.enter.native="searchName()">

  24.                                     <el-button id="success" slot="append" icon="el-icon-search" @click="searchName()">搜索</el-button>

  25.                                 </el-input>

  26.                             </div>

  27.                         </el-col>

  28.                 </el-row>

  29.                 <el-row style="margin-top:15px;">

  30. 

  31.                         <el-table

  32.                         :data="tableDataPublic"

  33.                         style="width: 100%"

  34.                         :header-cell-style="tableHeaderStyle"

  35.                         >

  36.                         <el-table-column

  37.                             label="镜像Tag"

  38.                             min-width="19%"

  39.                             align="left"

  40.                             prop="tag"

  41.                             >

  42.                             <template slot-scope="scope">

  43.                                 <div style="display: flex;align-items: center;">

  44.                                     <a class="text-over image_title" :title="scope.row.tag">{{ scope.row.tag }}</a>

  45.                                     <img v-if="scope.row.type==5"  src="/img/jian.svg" style="margin-left: 0.5rem;">

  46.                                 </div>

  47.                             </template>

  48.                         </el-table-column>

  49.                         <el-table-column

  50.                             label="镜像描述"

  51.                             min-width="28%"

  52.                             align="left"

  53.                             prop="description"

  54.                             >

  55.                             <template slot-scope="scope">

  56.                                 <div class="image_desc" :title="scope.row.description">{{ scope.row.description}}</div>

  57.                                 <div v-if="!!scope.row.topics">

  58.                                     <span v-for="(topic,index) in scope.row.topics" class="ui repo-topic label topic" style="cursor: default;">{{topic}}</span>

  59.                                 </div>

  60.                                 

  61.                             </template>

  62.                         </el-table-column>

  63.                         <el-table-column

  64.                             prop="cloudbrainType"

  65.                             label="可用集群"

  66.                             min-width="10%"

  67.                             align="center"

  68.                             >

  69.                             <template slot-scope="scope">

  70.                                 {{scope.row.cloudbrainType | transformType}}

  71.                             </template>

  72.                         </el-table-column>

  73.                         <el-table-column

  74.                             prop="creator"

  75.                             label="创建者"

  76.                             min-width="8%"

  77.                             align="center"

  78.                             >

  79.                             <template slot-scope="scope">

  80.                                 

  81.                                 <a v-if="scope.row.userName||scope.row.relAvatarLink" :href="'/' + scope.row.userName" :title="scope.row.userName">

  82.                                     <img :src="scope.row.relAvatarLink" class="ui avatar image">

  83.                                 </a>

  84.                                 <a v-else><img class="ui avatar image" title="Ghost" src="/user/avatar/ghost/-1"></a>

  85.                             </template>

  86.                         </el-table-column>

  87.                         <el-table-column

  88.                             prop="createdUnix"

  89.                             label="创建时间"

  90.                             align="center"

  91.                             min-width="14%"

  92.                             >

  93.                             <template slot-scope="scope">

  94.                                 {{scope.row.createdUnix | transformTimestamp}}

  95.                             </template>

  96.                         </el-table-column>

  97.                         <el-table-column

  98.                             align="center"

  99.                             min-width="21%"

  100.                             label="操作"

  101.                             >

  102.                             <template slot-scope="scope">

  103.                                     <div style="display: flex;justify-content: flex-end;align-items: center;">

  104.                                         <div style="display: flex;align-items: center;cursor:pointer;padding: 0 1rem;" @click="imageStar(scope.$index,scope.row.id,scope.row.isStar)">

  105.                                             <svg width="1.4em" height="1.4em" viewBox="0 0 32 32" class="heart-stroke" :class='{stars_active:scope.row.isStar}'><path d="M4.4 6.54c-1.761 1.643-2.6 3.793-2.36 6.056.24 2.263 1.507 4.521 3.663 6.534a29110.9 29110.9 0 0010.296 9.633l10.297-9.633c2.157-2.013 3.424-4.273 3.664-6.536.24-2.264-.599-4.412-2.36-6.056-1.73-1.613-3.84-2.29-6.097-1.955-1.689.25-3.454 1.078-5.105 2.394l-.4.319-.398-.319c-1.649-1.316-3.414-2.143-5.105-2.394a7.612 7.612 0 00-1.113-.081c-1.838 0-3.541.694-4.983 2.038z"></path></svg>    

  106.                                             <span style="line-height: 2;margin-left:0.3rem;">{{scope.row.numStars}}</span>

  107.                                         </div>

  108.                                         <span style="padding: 0 1rem;color:#0366d6;cursor:pointer;" @click="copyUrl(scope.row.place)">复制地址</span>

  109.                                     </div>

  110.                             </template>

  111.                         </el-table-column>

  112.                     </el-table>

  113.                 </el-row>

  114.                 <div class="ui container" style="margin-top:50px;text-align:center">

  115.                         <el-pagination

  116.                             background

  117.                             @size-change="handleSizeChangePublic"

  118.                             @current-change="handleCurrentChangePublic"

  119.                             :current-page="currentPagePublic"

  120.                             :page-size="pageSizePublic"

  121.                             :page-sizes="[5,10,15]"

  122.                             layout="total, sizes, prev, pager, next, jumper"

  123.                             :total="totalNumPublic">

  124.                         </el-pagination>

  125.                 </div>

  126.             </template>

  127.             <template v-else>

  128.                     <el-row style="align-items: center;display: flex;">

  129.                             <el-col :span="12">

  130.                                 <div>

  131.                                     <el-checkbox v-model="checked">仅显示平台推荐</el-checkbox>

  132.                                 </div>

  133.                             </el-col>

  134.                             <el-col :span="4"><div style="visibility: hidden;">TODO</div></el-col>

  135.                             <el-col :span="8">

  136.                                 <div>

  137.                                     <el-input placeholder="搜镜像Tag/描述/标签..." v-model="search" class="input-with-select" @keyup.enter.native="searchName()">

  138.                                         <el-button id="success" slot="append" icon="el-icon-search" @click="searchName()">搜索</el-button>

  139.                                     </el-input>

  140.                                 </div>

  141.                             </el-col>

  142.                     </el-row>

  143.                     <el-empty  :image-size="200"></el-empty>

  144.             </template>

  145.             

  146.             </el-tab-pane>

  147.             <el-tab-pane label="我的镜像" name="second" v-loading="loadingCustom">

  148.             <template v-if="tableDataCustom.length!==0">

  149.                 <el-row style="align-items: center;display: flex;">

  150.                     <el-col :span="12">

  151.                         <div style="visibility: hidden;">

  152.                             TODO

  153.                         </div>

  154.                     </el-col>

  155.                     <el-col :span="4"><div style="visibility: hidden;">TODO</div></el-col>

  156.                     <el-col :span="8">

  157.                         <div>

  158.                             <el-input placeholder="搜镜像Tag/描述/标签..." v-model="search" class="input-with-select" @keyup.enter.native="searchName()">

  159.                                 <el-button id="success" slot="append" icon="el-icon-search" @click="searchName()">搜索</el-button>

  160.                             </el-input>

  161.                         </div>

  162.                     </el-col>

  163.                 </el-row>

  164.                 <el-row style="margin-top:15px;">

  165.                     <el-table

  166.                         :data="tableDataCustom"

  167.                         style="width: 100%"

  168.                         :header-cell-style="tableHeaderStyle"

  169.                         >

  170.                         <el-table-column

  171.                             label="镜像Tag"

  172.                             min-width="19%"

  173.                             align="left"

  174.                             prop="tag"

  175.                             >

  176.                             <template slot-scope="scope">

  177.                                 <div style="display: flex;align-items: center;">

  178.                                     <a class="text-over image_title" :title="scope.row.tag">{{ scope.row.tag }}</a>&nbsp;&nbsp;&nbsp;

  179.                                     <i class="ri-lock-2-line" style="color: #fa8c16;" v-if="scope.row.isPrivate"></i>

  180.                                     <img v-if="scope.row.type==5"  src="/img/jian.svg" style="margin-left: 0.5rem;">

  181.                                 </div>

  182.                             </template>

  183.                         </el-table-column>

  184.                         <el-table-column

  185.                             label="镜像描述"

  186.                             min-width="27%"

  187.                             align="left"

  188.                             prop="description"

  189.                             >

  190.                             <template slot-scope="scope">

  191.                                 <div class="image_desc" :title="scope.row.description">{{ scope.row.description}}</div>

  192.                                 <div v-if="!!scope.row.topics">

  193.                                     <span v-for="(topic,index) in scope.row.topics" class="ui repo-topic label topic" style="cursor: default;">{{topic}}</span>

  194.                                 </div>

  195.                                 

  196.                             </template>

  197.                         </el-table-column>

  198.                         <el-table-column

  199.                             prop="cloudbrainType"

  200.                             label="可用集群"

  201.                             min-width="9%"

  202.                             align="center"

  203.                             >

  204.                             <template slot-scope="scope">

  205.                                 {{scope.row.cloudbrainType | transformType}}

  206.                             </template>

  207.                         </el-table-column>

  208.                         <el-table-column

  209.                             prop="isPrivate"

  210.                             label="状态"

  211.                             min-width="10%"

  212.                             align="center"

  213.                             >

  214.                             <template slot-scope="scope">

  215.                                 <div style="display:flex;align-items: center;justify-content: center;">

  216.                                     <span v-if="scope.row.isPrivate" style="color: rgb(250, 140, 22);">私有</span>

  217.                                     <span v-else style="color: rgb(19, 194, 141);">公开</span>

  218.                                     <el-tooltip class="item" effect="dark" content="镜像提交中..." placement="top">

  219.                                         <i v-if="scope.row.status===0" class="CREATING" style="margin-left:0.3rem"></i>

  220.                                     </el-tooltip>

  221.                                     

  222.                                     <el-tooltip class="item" effect="dark" content="检测提交镜像是否大小超过20G!" placement="top">

  223.                                         <i v-if="scope.row.status===2" class="FAILED" style="margin-left:0.3rem"></i>

  224.                                     </el-tooltip>

  225.                                     

  226.                                     <el-tooltip class="item" effect="dark" content="镜像提交成功" placement="top">

  227.                                         <i v-if="scope.row.status===1" class="SUCCEEDED" style="margin-left:0.3rem"></i>

  228.                                     </el-tooltip>

  229.                                     

  230.                                 </div>

  231.                                 

  232.                             </template>

  233.                         </el-table-column>

  234.                         <el-table-column

  235.                             prop="createdUnix"

  236.                             label="创建时间"

  237.                             align="center"

  238.                             min-width="14%"

  239.                             >

  240.                             <template slot-scope="scope">

  241.                                 {{scope.row.createdUnix | transformTimestamp}}

  242.                             </template>

  243.                         </el-table-column>

  244.                         <el-table-column

  245.                             align="center"

  246.                             min-width="21%"

  247.                             label="操作"

  248.                             >

  249.                             <template slot-scope="scope">

  250.                                     <div style="display: flex;justify-content: flex-end;align-items: center;">

  251.                                         <div style="display: flex;align-items: center;cursor: default;;padding: 0 1rem;">

  252.                                             <svg width="1.4em" height="1.4em" viewBox="0 0 32 32" class="heart-stroke"><path d="M4.4 6.54c-1.761 1.643-2.6 3.793-2.36 6.056.24 2.263 1.507 4.521 3.663 6.534a29110.9 29110.9 0 0010.296 9.633l10.297-9.633c2.157-2.013 3.424-4.273 3.664-6.536.24-2.264-.599-4.412-2.36-6.056-1.73-1.613-3.84-2.29-6.097-1.955-1.689.25-3.454 1.078-5.105 2.394l-.4.319-.398-.319c-1.649-1.316-3.414-2.143-5.105-2.394a7.612 7.612 0 00-1.113-.081c-1.838 0-3.541.694-4.983 2.038z"></path></svg>    

  253.                                             <span style="line-height: 2;margin-left:0.3rem;">{{scope.row.numStars}}</span>

  254.                                         </div>

  255.                                         <span style="padding: 0 1rem;color:#0366d6;cursor:pointer;" @click="copyUrl(scope.row.place)">复制地址</span>

  256.                                         <div style="padding-left:1rem;cursor:pointer;">

  257.                                             <el-dropdown size="medium">

  258.                                             <span class="el-dropdown-link">

  259.                                                 更多<i class="el-icon-arrow-down el-icon--right"></i>

  260.                                             </span>

  261.                                             <el-dropdown-menu slot="dropdown">

  262.                                                 <el-dropdown-item @click.native="eidtImage(scope.row.id)">编辑</el-dropdown-item>

  263.                                                 <el-dropdown-item style="color: red;" @click.native="deleteImage(scope.row.id)">删除</el-dropdown-item>

  264.                                             </el-dropdown-menu>

  265.                                             </el-dropdown>

  266.                                         </div>

  267.                                     </div>

  268.                             </template>

  269.                         </el-table-column>

  270.                     </el-table>

  271.                 </el-row>

  272.                 <div class="ui container" style="margin-top:50px;text-align:center">

  273.                         <el-pagination

  274.                             background

  275.                             @size-change="handleSizeChangeCustom"

  276.                             @current-change="handleCurrentChangeCustom"

  277.                             :current-page="currentPageCustom"

  278.                             :page-size="pageSizeCustom"

  279.                             :page-sizes="[5,10,15]"

  280.                             layout="total, sizes, prev, pager, next, jumper"

  281.                             :total="totalNumCustom">

  282.                         </el-pagination>

  283.                 </div>

  284.             </template>

  285.             <template v-else>

  286.                 <el-row style="align-items: center;display: flex;">

  287.                     <el-col :span="12">

  288.                         <div style="visibility: hidden;">

  289.                             TODO

  290.                         </div>

  291.                     </el-col>

  292.                     <el-col :span="4"><div style="visibility: hidden;">TODO</div></el-col>

  293.                     <el-col :span="8">

  294.                         <div>

  295.                             <el-input placeholder="搜镜像Tag/描述/标签..." v-model="search" class="input-with-select" @keyup.enter.native="searchName()">

  296.                                 <el-button id="success" slot="append" icon="el-icon-search" @click="searchName()">搜索</el-button>

  297.                             </el-input>

  298.                         </div>

  299.                     </el-col>

  300.                 </el-row>

  301.                 <el-empty  :image-size="200"></el-empty>

  302.             </template>

  303.             

  304.             </el-tab-pane>

  305.             <el-tab-pane label="我收藏的镜像" name="third">

  306.                 <template v-if="tableDataStar.length!==0">

  307.                     <el-row style="align-items: center;display: flex;">

  308.                         <el-col :span="12">

  309.                             <div style="visibility: hidden;">

  310.                                 TODO

  311.                             </div>

  312.                         </el-col>

  313.                         <el-col :span="4"><div style="visibility: hidden;">TODO</div></el-col>

  314.                         <el-col :span="8">

  315.                             <div>

  316.                                 <el-input placeholder="搜镜像Tag/描述/标签..." v-model="search" class="input-with-select" @keyup.enter.native="searchName()">

  317.                                     <el-button id="success" slot="append" icon="el-icon-search" @click="searchName()">搜索</el-button>

  318.                                 </el-input>

  319.                             </div>

  320.                         </el-col>

  321.                     </el-row>

  322.                     <el-row style="margin-top:15px;">

  323. 

  324.                             <el-table

  325.                             :data="tableDataStar"

  326.                             style="width: 100%"

  327.                             :header-cell-style="tableHeaderStyle"

  328.                             >

  329.                             <el-table-column

  330.                                 label="镜像Tag"

  331.                                 min-width="19%"

  332.                                 align="left"

  333.                                 prop="tag"

  334.                                 >

  335.                                 <template slot-scope="scope">

  336.                                     <div style="display: flex;align-items: center;">

  337.                                         <a class="text-over image_title" :title="scope.row.tag">{{ scope.row.tag }}</a>

  338.                                         <img v-if="scope.row.type==5"  src="/img/jian.svg" style="margin-left: 0.5rem;">

  339.                                     </div>

  340.                                 </template>

  341.                             </el-table-column>

  342.                             <el-table-column

  343.                                 label="镜像描述"

  344.                                 min-width="28%"

  345.                                 align="left"

  346.                                 prop="description"

  347.                                 >

  348.                                 <template slot-scope="scope">

  349.                                     <div class="image_desc" :title="scope.row.description">{{ scope.row.description}}</div>

  350.                                     <div v-if="!!scope.row.topics">

  351.                                         <span v-for="(topic,index) in scope.row.topics" class="ui repo-topic label topic" style="cursor: default;">{{topic}}</span>

  352.                                     </div>

  353.                                     

  354.                                 </template>

  355.                             </el-table-column>

  356.                             <el-table-column

  357.                                 prop="cloudbrainType"

  358.                                 label="可用集群"

  359.                                 min-width="10%"

  360.                                 align="center"

  361.                                 >

  362.                                 <template slot-scope="scope">

  363.                                     {{scope.row.cloudbrainType | transformType}}

  364.                                 </template>

  365.                             </el-table-column>

  366.                             <el-table-column

  367.                                 prop="creator"

  368.                                 label="创建者"

  369.                                 min-width="8%"

  370.                                 align="center"

  371.                                 >

  372.                                 <template slot-scope="scope">

  373.                                     <a v-if="scope.row.userName||scope.row.relAvatarLink" :href="'/' + scope.row.userName" :title="scope.row.userName">

  374.                                         <img :src="scope.row.relAvatarLink" class="ui avatar image">

  375.                                     </a>

  376.                                     <a v-else><img class="ui avatar image" title="Ghost" src="/user/avatar/ghost/-1"></a>

  377.                                 </template>

  378.                             </el-table-column>

  379.                             <el-table-column

  380.                                 prop="createdUnix"

  381.                                 label="创建时间"

  382.                                 align="center"

  383.                                 min-width="14%"

  384.                                 >

  385.                                 <template slot-scope="scope">

  386.                                     {{scope.row.createdUnix | transformTimestamp}}

  387.                                 </template>

  388.                             </el-table-column>

  389.                             <el-table-column

  390.                                 align="center"

  391.                                 min-width="21%"

  392.                                 label="操作"

  393.                                 >

  394.                                 <template slot-scope="scope">

  395.                                         <div style="display: flex;justify-content: flex-end;align-items: center;">

  396.                                             <div style="display: flex;align-items: center;cursor:pointer;padding: 0 1rem;" @click="imageUnstar(scope.row.id)">

  397.                                                 <svg width="1.4em" height="1.4em" viewBox="0 0 32 32" class="heart-stroke stars_active"><path d="M4.4 6.54c-1.761 1.643-2.6 3.793-2.36 6.056.24 2.263 1.507 4.521 3.663 6.534a29110.9 29110.9 0 0010.296 9.633l10.297-9.633c2.157-2.013 3.424-4.273 3.664-6.536.24-2.264-.599-4.412-2.36-6.056-1.73-1.613-3.84-2.29-6.097-1.955-1.689.25-3.454 1.078-5.105 2.394l-.4.319-.398-.319c-1.649-1.316-3.414-2.143-5.105-2.394a7.612 7.612 0 00-1.113-.081c-1.838 0-3.541.694-4.983 2.038z"></path></svg>    

  398.                                                 <span style="line-height: 2;margin-left:0.3rem;">{{scope.row.numStars}}</span>

  399.                                             </div>

  400.                                             <span style="padding: 0 1rem;color:#0366d6;cursor:pointer;" @click="copyUrl(scope.row.place)">复制地址</span>

  401.                                         </div>

  402.                                 </template>

  403.                             </el-table-column>

  404.                         </el-table>

  405.                     </el-row>

  406.                     <div class="ui container" style="margin-top:50px;text-align:center">

  407.                             <el-pagination

  408.                                 background

  409.                                 @size-change="handleSizeChangeStar"

  410.                                 @current-change="handleCurrentChangeStar"

  411.                                 :current-page="currentPageStar"

  412.                                 :page-size="pageSizeStar"

  413.                                 :page-sizes="[5,10,15]"

  414.                                 layout="total, sizes, prev, pager, next, jumper"

  415.                                 :total="totalNumStar">

  416.                             </el-pagination>

  417.                     </div>

  418.                 </template>

  419.                 

  420.                 <template v-else>

  421.                     <el-row style="align-items: center;display: flex;">

  422.                         <el-col :span="12">

  423.                             <div style="visibility: hidden;">

  424.                                 TODO

  425.                             </div>

  426.                         </el-col>

  427.                         <el-col :span="4"><div style="visibility: hidden;">TODO</div></el-col>

  428.                         <el-col :span="8">

  429.                             <div>

  430.                                 <el-input placeholder="搜镜像Tag/描述/标签..." v-model="search" class="input-with-select" @keyup.enter.native="searchName()">

  431.                                     <el-button id="success" slot="append" icon="el-icon-search" @click="searchName()">搜索</el-button>

  432.                                 </el-input>

  433.                             </div>

  434.                         </el-col>

  435.                     </el-row>

  436.                     <el-empty  :image-size="200"></el-empty>

  437.                 </template>

  438.             </el-tab-pane>

  439.         </el-tabs>

  440.   </div>

  441. </div>

  442. 

  443.   

  444. </template>

  445. 

  446. <script>

  447. 

  448. const {_AppSubUrl, _StaticUrlPrefix, csrf} = window.config;

  449. 

  450. 

  451. 

  452. 

  453. export default {

  454.   components: {

  455.     

  456.   },

  457.   data() {

  458.     return {

  459.       activeName: 'first',

  460.       search:'',

  461.       checked:false,

  462.       currentPagePublic:1,

  463.       pageSizePublic:10,

  464.       totalNumPublic:0,

  465.       paramsPublic:{page:1,pageSize:10,q:'',recommend:false},

  466.       tableDataPublic: [],

  467.       loadingPublic:false,

  468. 

  469.       currentPageCustom:1,

  470.       pageSizeCustom:10,

  471.       totalNumCustom:0,

  472.       paramsCustom:{page:1,pageSize:10,q:''},

  473.       tableDataCustom: [],

  474.       starCustom:[],

  475.       loadingCustom:false,

  476. 

  477.       currentPageStar:1,

  478.       pageSizeStar:10,

  479.       totalNumStar:0,

  480.       paramsStar:{page:1,pageSize:10,q:''},

  481.       tableDataStar: [],

  482.       loadingStar:false

  483.     };

  484.   },

  485.   methods: {

  486.     handleClick(tab, event) {

  487.         this.search = ''

  488.         if(tab.name=="first"){

  489.             this.paramsPublic.q = ''

  490.             this.getImageListPublic()

  491.         }

  492.         if(tab.name=="second"){

  493.             this.getImageListCustom()

  494.         }

  495.         if(tab.name=="third"){

  496.             this.getImageListStar()

  497.         }

  498.         

  499.       },

  500.     tableHeaderStyle({row,column,rowIndex,columnIndex}){

  501.         

  502.         if(rowIndex===0){

  503.             return 'background:#f5f5f6;color:#606266'

  504.         }

  505.         

  506.     },

  507.     handleSizeChangePublic(val){

  508.         this.paramsPublic.pageSize = val

  509.         this.getImageListPublic()

  510. 

  511. 

  512.     },

  513.     handleCurrentChangePublic(val){

  514.         this.paramsPublic.page = val

  515.         this.getImageListPublic()

  516. 

  517.     },

  518.     handleSizeChangeCustom(val){

  519.         this.paramsCustom.pageSize = val

  520.         this.getImageListCustom()

  521. 

  522. 

  523.     },

  524.     handleCurrentChangeCustom(val){

  525.         this.paramsCustom.page = val

  526.         this.getImageListCustom()

  527. 

  528.     },

  529.     handleSizeChangeStar(val){

  530.         this.paramsStar.pageSize = val

  531.         this.getImageListStar()

  532. 

  533. 

  534.     },

  535.     handleCurrentChangeStar(val){

  536.         this.paramsStar.page = val

  537.         this.getImageListStar()

  538. 

  539.     },

  540.     getImageListPublic(){

  541.         this.loadingPublic = true

  542.         this.$axios.get('/explore/images/public',{

  543.             params:this.paramsPublic

  544.         }).then((res)=>{

  545.             this.totalNumPublic = res.data.count

  546.             this.tableDataPublic = res.data.images

  547.             this.loadingPublic = false 

  548.         })

  549.     },

  550. 

  551.     getImageListCustom(){

  552.         this.loadingCustom = true

  553.         this.$axios.get('/explore/images/custom',{

  554.             params:this.paramsCustom

  555.         }).then((res)=>{

  556.             this.totalNumCustom = res.data.count

  557.             this.tableDataCustom = res.data.images

  558.             this.tableDataCustom.forEach(element => {

  559.                 this.starCustom.push({id:element.id,})

  560.                 

  561.             });

  562.             this.loadingCustom = false

  563.         })

  564.     },

  565. 

  566.     getImageListStar(){

  567.         this.loadingStar = true

  568.         this.$axios.get('/explore/images/star',{

  569.             params:this.paramsStar

  570.         }).then((res)=>{

  571.             this.totalNumStar = res.data.count

  572.             this.tableDataStar = res.data.images

  573.             this.loadingStar = false

  574.         })

  575.     },

  576. 

  577.     deleteImage(id){

  578.         let flag=1

  579.         let _this = this

  580.         $('.ui.basic.modal.images')

  581.         .modal({

  582.             onDeny: function() {

  583.                 flag = false

  584.             },

  585.             onApprove: function() {

  586.                 _this.$axios.delete('/image/'+id).then((res)=>{

  587.                     _this.getImageListCustom()

  588.                 })

  589.                 flag = true

  590.             },

  591.             onHidden: function() {

  592.                 if (flag == false) {

  593.                     $('.alert').html('您已取消操作').removeClass('alert-success').addClass('alert-danger').show().delay(1500).fadeOut();

  594.                 }else{

  595.                     $('.alert').html('删除成功').removeClass('alert-danger').addClass('alert-success').show().delay(1500).fadeOut();

  596.                 }

  597.             }

  598.         })

  599.         .modal('show')

  600.     },

  601.     eidtImage(id){

  602.         location.href = `/image/${id}/imageSquare`

  603.     },

  604.     imageStar(index,id,isStar){

  605.         if(isStar){

  606.             this.$axios.put(`/image/${id}/action/unstar`).then((res)=>{

  607.                 if(res.data.Code==0){

  608.                     this.tableDataPublic[index].numStars = this.tableDataPublic[index].numStars - 1

  609.                     this.tableDataPublic[index].isStar = false

  610.                 }else{

  611.                     console.log(res.data.Message)

  612.                 }

  613.                 

  614.             })

  615.         }else{

  616.             this.$axios.put(`/image/${id}/action/star`).then((res)=>{

  617.                 if(res.data.Code==0){

  618.                     this.tableDataPublic[index].numStars = this.tableDataPublic[index].numStars + 1

  619.                     this.tableDataPublic[index].isStar = true

  620.                 }else{

  621.                     console.log(res.data.Message)

  622.                 }

  623.                 

  624.             })

  625.         }

  626.         

  627.     },

  628.     imageUnstar(id){

  629.         this.$axios.put(`/image/${id}/action/unstar`).then((res)=>{

  630.                 if(res.data.Code==0){

  631.                     this.getImageListStar()

  632.                 }else{

  633.                     console.log(res.data.Message)

  634.                 }

  635.             })

  636.     },

  637.     copyUrl(url){

  638.         const cInput = document.createElement('input')

  639.         cInput.value = url

  640.         document.body.appendChild(cInput)

  641.         cInput.select()

  642.         document.execCommand('Copy')

  643.         cInput.remove()

  644.         $('body')

  645.         .toast({

  646.             message: '复制成功!',

  647.             showProgress: 'bottom',

  648.             showIcon:'check circle',

  649.             class: 'info',

  650.             position: 'top right',

  651.         })

  652.         ;

  653.     },

  654.     searchName(){

  655.         if(this.activeName=='first'){

  656.             this.paramsPublic.q = this.search

  657.             this.paramsPublic.page = 1

  658.             this.getImageListPublic()

  659.         }

  660.         if(this.activeName=='second'){

  661.             this.paramsCustom.q = this.search

  662.             this.paramsCustom.page = 1

  663.             this.getImageListCustom()

  664.         }

  665.         if(this.activeName=='third'){

  666.             this.paramsStar.q = this.search

  667.             this.paramsStar.page = 1

  668.             this.getImageListStar()

  669.         }

  670.         

  671.     },

  672.   },

  673.   filters:{

  674.       transformType(val){

  675.         if(val==0 || val==2){

  676.             return "GPU"

  677.         }

  678.       },

  679.       transformPravite(val){

  680.         if(val){

  681.             return "私有"

  682.         }else{

  683.             return "公开"

  684.         }

  685.       },

  686.       transformTimestamp(timestamp){

  687.                 const date = new Date(parseInt(timestamp) * 1000);

  688.                 const Y = date.getFullYear() + '-';

  689.                 const M = (date.getMonth() + 1 < 10 ? '0' + (date.getMonth() + 1) : date.getMonth() + 1) + '-';

  690.                 const D = (date.getDate() < 10 ? '0'+date.getDate() : date.getDate()) + '  ';

  691.                 const h = (date.getHours() < 10 ? '0'+date.getHours() : date.getHours()) + ':';

  692.                 const m = (date.getMinutes() <10 ? '0'+date.getMinutes() : date.getMinutes()) + ':' ;

  693.                 const s = (date.getSeconds() <10 ? '0'+date.getSeconds() : date.getSeconds()) ; // 秒 

  694.                 const dateString = Y + M + D + h + m + s;

  695.                 return dateString;

  696.             },

  697.   },

  698.   watch:{

  699.     checked(val){

  700.         this.paramsPublic.page = 1

  701.         this.paramsPublic.recommend = val

  702.         this.getImageListPublic()

  703.     }

  704.   },

  705.   mounted() {

  706.       

  707.       

  708.   },

  709.   created() {

  710.     const params = new URLSearchParams(location.search)

  711.       if(params.has('type')&&params.get('type')=='myimage'){

  712.           this.activeName = 'second'

  713.           this.getImageListCustom()

  714.       }

  715.       else{

  716.         this.getImageListPublic()

  717.       }

  718.   }

  719. 

  720. };

  721. </script>

  722. 

  723. <style scoped>

  724. .header-wrapper {

  725.     background-color: #f5f5f6;

  726.     padding-top: 15px;

  727. }

  728. .image_text{

  729.     padding:25px 0 55px 0 ;

  730. }

  731. #header{

  732.     position: relative;

  733.     top:-40px;

  734. }

  735. .el-dropdown-menu__item--divided{

  736.     border-top: 1px solid blue;

  737. }

  738. .el-table thead{

  739.     background-color: #f5f5f6;

  740. }

  741. /deep/ .el-tabs__item:hover{

  742.     color: #000;

  743.     font-weight: 500;

  744.     

  745. }

  746. /deep/ .el-tabs__item.is-active {

  747.     color: #000;

  748.     font-weight: 500;

  749. }

  750. /deep/ .el-tabs__active-bar{

  751.     background-color:#000

  752. }

  753. 

  754. #success{

  755.     background-color: #5bb973;

  756.     color: white;

  757. }

  758. .text-over{

  759.     overflow: hidden;

  760.     text-overflow: ellipsis;

  761.     vertical-align: middle;

  762.     white-space: nowrap;

  763. }

  764. .image_title{

  765.     display: inline-block;

  766.     cursor: default;

  767.     color: rgb(66, 98, 144);

  768. }

  769. .image_desc{

  770.     -webkit-line-clamp: 2;

  771.     -webkit-box-orient: vertical;

  772.     display: -webkit-box;

  773.     text-overflow: ellipsis;

  774.     overflow: hidden;

  775. }

  776. .heart-stroke{

  777.     stroke: #FA8C16;

  778.     stroke-width: 2;

  779.     fill: #fff

  780. }

  781. .stars_active{

  782.     fill: #FA8C16 !important;

  783.     stroke:#FA8C16 !important

  784. }

  785. </style>