应用详情代码更新

src/views/webSiteManagement/bannerSetting/index.vue

@@ -27,11 +27,15 @@
 
       <!-- 数据列表 -->
       <el-table :data="list" v-loading.body="listLoading" border fit highlight-current-row style="width: 100%">
-        <el-table-column align="center" type="index" label="序号" width="65"></el-table-column>
+        <el-table-column align="center" label="序号" width="65">
+          <template slot-scope="scope">
+            {{scope.row.index}}
+          </template>
+        </el-table-column>
         <el-table-column align="center" label="banner标题" prop="title"></el-table-column>
         <el-table-column align="center" label="banner图">
           <template slot-scope="scope">
-            <img class="cover" :src="scope.row.cover" />
+            <img class="cover" :src="scope.row.cover" @click.stop="showPreview(scope.row.cover)"/>
           </template>
         </el-table-column>
         <el-table-column align="center" label="状态">
@@ -59,6 +63,12 @@
         </el-pagination>
       </div>
 
+      <!-- 使用图片查看器预览当前缩略图 -->
+      <el-image-viewer
+        v-show="currentIcon.showPreview"
+        :on-close="closePreview"
+        :url-list="[currentIcon.url]"
+      />
 
       <!-- 添加、编辑弹窗 -->
        <el-dialog
@@ -79,6 +89,7 @@
 </template>
 
 <script>
+import ElImageViewer from "element-ui/packages/image/src/image-viewer";
 import { banner } from "@/utils/formDatas.js"//表单数据
 import { page, update } from "@/api/website/banner"//接口
 
@@ -87,10 +98,15 @@ import CustomForm from "@/components/CustomForm"//自定义表单组件
 export default {
   name: "bannerSetting",
   components: {
-    CustomForm
+    CustomForm,
+    ElImageViewer
   },
   data() {
     return {
+      currentIcon:{
+        showPreview: false,
+        url: ""
+      },
       data: null,//原数据
       list: null,//赋值数据 | 过滤数据
       total: null,//总个数
@@ -98,7 +114,7 @@ export default {
       //请求参数。页码页数等
       listQuery: {
         page: 1,
-        limit: 20
+        limit: 10
       },
       //搜索表单
       searchForm: {
@@ -124,6 +140,13 @@ export default {
     this.getList()//获取数据
   },
   methods: {
+    closePreview() {
+      this.currentIcon.showPreview = false;
+    },
+    showPreview(url){
+      this.currentIcon.showPreview = true
+      this.currentIcon.url = url
+    },
     //获取图片链接
     getSrc(val) {
       this.editForm.cover = val
@@ -276,6 +299,9 @@ export default {
       this.listLoading = true;
       page(this.listQuery).then(res => {
         this.list = res.data.data
+        this.list.forEach((element,index) => {
+          element.index = ((this.listQuery.page-1)*this.listQuery.limit)+(index+1)
+        });
         this.data = res.data.data
         this.total = res.data.totalCount;
         this.listLoading = false;
@@ -297,8 +323,10 @@ export default {
   border-bottom: 1px solid #e6e6e6;
 }
 .cover {
-  max-width: 200px;
-  height: auto;
+  width: 50px;
+  height: 50px;
+  object-fit: cover;
+  cursor: pointer;
 }
 .page-foot {
   display: flex;

src/views/webSiteManagement/industryApplication/applicationList/appList/index.vue

 <!--
  * @Author: your name
  * @Date: 2020-12-02 10:27:53
- * @LastEditTime: 2020-12-10 09:29:46
+ * @LastEditTime: 2020-12-11 11:02:51
  * @LastEditors: Please set LastEditors
  * @Description: In User Settings Edit
  * @FilePath: \rs-cloud-platform-ui\src\views\webSiteManagement\industryApplication\applicationList\index.vue
@@ -65,7 +65,7 @@
       <el-table :data="tableData" border fit highlight-current-row style="width: 100%">
         <el-table-column label="序号" width="100" align="center">
           <template slot-scope="scope">
-            <span>{{ scope.row.id }}</span>
+            <span>{{ scope.row.index }}</span>
           </template>
         </el-table-column>
         <el-table-column label="应用类别" width="200" align="center">
@@ -258,14 +258,16 @@ export default {
     // 筛选数据
     screenApplicationInfo(){
       this.tableData = []
+      let index = 0
       this.tableDataCache.forEach(element => {
         // 未被删除的
         if(element.isDel==0){
           this.tableData.push({
+            index: ((this.infoPagination.currentPage-1)*this.infoPagination.pageSize)+(++index),
+            id: element.id,
             attribute:element.attribute,
             examples:element.examples,
             examplesJson: element.examplesJson,
-            id: element.id,
             indexShow:element.indexShow,
             introduction:element.introduction,
             isDel:element.isDel,

src/views/webSiteManagement/satelliteIntroduction/list.vue

@@ -22,11 +22,15 @@
         </el-form>
       </div>
       <el-table :data="list" v-loading.body="listLoading" border fit highlight-current-row style="width: 100%">
-        <el-table-column align="center" type="index" label="序号" width="65"></el-table-column>
+        <el-table-column align="center" label="序号" width="65">
+          <template slot-scope="scope">
+            {{scope.row.index}}
+          </template>
+        </el-table-column>
         <el-table-column align="center" label="卫星名称" prop="name"></el-table-column>
         <el-table-column align="center" label="缩略图">
           <template slot-scope="scope">
-            <img class="cover" :src="scope.row.coverImg" />
+            <img class="cover" :src="scope.row.coverImg"  @click.stop="showPreview(scope.row.coverImg)"/>
           </template>
         </el-table-column>
         <el-table-column align="center" label="分辨率" prop="resolution"></el-table-column>
@@ -44,7 +48,12 @@
           </template>
         </el-table-column>
       </el-table>
-
+      <!-- 使用图片查看器预览当前缩略图 -->
+      <el-image-viewer
+        v-show="currentIcon.showPreview"
+        :on-close="closePreview"
+        :url-list="[currentIcon.url]"
+      />
       <div class="page-foot">
         <el-pagination
           background
@@ -59,13 +68,21 @@
 </template>
 
 <script>
+import ElImageViewer from "element-ui/packages/image/src/image-viewer";
 import { satelliteIntroduction } from "@/utils/formDatas.js"
 import { page, update } from "@/api/website/satelliteIntroduction"
 
 export default {
   name: "satelliteIntroduction",
+  components:{
+    ElImageViewer
+  },
   data() {
     return {
+      currentIcon:{
+        showPreview: false,
+        url: "",
+      },
       data: null,//原数据
       list: null,//赋值数据 | 过滤数据
       total: null,
@@ -98,6 +115,13 @@ export default {
     this.getList()
   },
   methods: {
+    closePreview() {
+      this.currentIcon.showPreview = false;
+    },
+    showPreview(url){
+      this.currentIcon.showPreview = true
+      this.currentIcon.url = url
+    },
     search() {
       this.listQuery = {
         status: this.searchForm.status || null,
@@ -190,6 +214,9 @@ export default {
       this.listLoading = true;
       page(this.listQuery).then(res => {
         this.list = res.data.data
+        this.list.forEach((element,index) => {
+          element.index = ((this.listQuery.page-1)*this.listQuery.limit)+(index+1)
+        });
         this.data = res.data.data
         this.total = res.data.totalCount;
         this.listLoading = false;
@@ -211,8 +238,10 @@ export default {
   border-bottom: 1px solid #e6e6e6;
 }
 .cover {
-  max-width: 200px;
-  height: auto;
+  width: 50px;
+  height: 50px;
+  object-fit: cover;
+  cursor: pointer;
 }
 .page-foot {
   display: flex;