Просмотр исходного кода

元宇宙游戏进度页面调整

sunkean 3 лет назад
Родитель
Сommit
ed9c05748f
1 измененных файлов с 158 добавлено и 142 удалено
  1. 158 142
      src/main/vue/src/views/MetaGameProcessList.vue

+ 158 - 142
src/main/vue/src/views/MetaGameProcessList.vue

@@ -1,179 +1,195 @@
 <template>
-	<div class="list-view">
-		<page-title>
-			<el-button
-				@click="download"
-				icon="el-icon-upload2"
-				:loading="downloading"
-				:disabled="fetchingData"
-				class="filter-item"
-			>
-				导出
-			</el-button>
-		</page-title>
-		<div class="filters-container">
-			<el-input
-				placeholder="搜索..."
-				v-model="search"
-				clearable
-				class="filter-item search"
-				@keyup.enter.native="getData"
-			>
-				<el-button @click="getData" slot="append" icon="el-icon-search"> </el-button>
-			</el-input>
-		</div>
-		<el-table
-			:data="tableData"
-			row-key="id"
-			ref="table"
-			header-row-class-name="table-header-row"
-			header-cell-class-name="table-header-cell"
-			row-class-name="table-row"
-			cell-class-name="table-cell"
-			:height="tableHeight"
-			v-loading="fetchingData"
-		>
-			<el-table-column v-if="multipleMode" align="center" type="selection" width="50"> </el-table-column>
-			<el-table-column prop="id" align="center" label="ID" width="100"> </el-table-column>
+    <div class="list-view">
+        <page-title>
+            <el-button
+                @click="download"
+                icon="el-icon-upload2"
+                :loading="downloading"
+                :disabled="fetchingData"
+                class="filter-item"
+            >
+                导出
+            </el-button>
+        </page-title>
+        <div class="filters-container">
+            <el-input
+                placeholder="搜索..."
+                v-model="search"
+                clearable
+                class="filter-item search"
+                @keyup.enter.native="getData"
+            >
+                <el-button @click="getData" slot="append" icon="el-icon-search"> </el-button>
+            </el-input>
+        </div>
+        <el-table
+            :data="tableData"
+            row-key="id"
+            ref="table"
+            header-row-class-name="table-header-row"
+            header-cell-class-name="table-header-cell"
+            row-class-name="table-row"
+            cell-class-name="table-cell"
+            :height="tableHeight"
+            v-loading="fetchingData"
+        >
+            <el-table-column v-if="multipleMode" align="center" type="selection" width="50"> </el-table-column>
+            <el-table-column prop="id" align="center" label="ID" width="100"> </el-table-column>
             <el-table-column prop="userId" align="center" label="玩家id"> </el-table-column>
-			<el-table-column prop="metaGameCopyId" align="center" label="游戏副本id"> </el-table-column>
+            <el-table-column prop="metaGameCopyId" align="center" label="游戏副本id"> </el-table-column>
             <el-table-column prop="model" align="center" label="关卡"> </el-table-column>
             <el-table-column prop="playerPos" align="center" label="玩家坐标">
                 <template slot-scope="{ row }">
-					{{ 'x=' + row.playerPos.x + ' , ' + 'y=' + row.playerPos.y + ' , ' + 'z=' + row.playerPos.z }} 
-				</template>
+                    {{ 'x=' + row.playerPos.x + ' , ' + 'y=' + row.playerPos.y + ' , ' + 'z=' + row.playerPos.z }}
+                </template>
             </el-table-column>
             <el-table-column prop="point" align="center" label="当前积分"> </el-table-column>
-			<el-table-column prop="bulletCount" align="center" label="剩余子弹数"> </el-table-column>
-			<el-table-column prop="timeLeft" align="center" label="剩余时间(秒)"> </el-table-column>
+            <el-table-column prop="bulletCount" align="center" label="剩余子弹数"> </el-table-column>
+            <el-table-column prop="timeLeft" align="center" label="剩余时间(秒)"> </el-table-column>
             <el-table-column prop="remainingHP" align="center" label="玩家剩余血量"> </el-table-column>
             <el-table-column prop="hurt" align="center" label="是否收到伤害">
-				<template slot-scope="{ row }">
-					<el-tag :type="row.hurt ? '' : 'info'"> {{ row.hurt }} </el-tag>
-				</template>
-			</el-table-column>
+                <template slot-scope="{ row }">
+                    <el-tag :type="row.hurt ? '' : 'info'"> {{ row.hurt }} </el-tag>
+                </template>
+            </el-table-column>
             <el-table-column prop="disconnected" align="center" label="是否断线">
-				<template slot-scope="{ row }">
-					<el-tag :type="row.disconnected ? '' : 'info'"> {{ row.disconnected }} </el-tag>
-				</template>
-			</el-table-column>
+                <template slot-scope="{ row }">
+                    <el-tag :type="row.disconnected ? '' : 'info'"> {{ row.disconnected }} </el-tag>
+                </template>
+            </el-table-column>
             <el-table-column prop="completed" align="center" label="是否完成">
-				<template slot-scope="{ row }">
-					<el-tag :type="row.completed ? '' : 'info'"> {{ row.completed }} </el-tag>
-				</template>
-			</el-table-column>					
-			<el-table-column label="操作" align="center" fixed="right" width="150">
-				<template slot-scope="{ row }">
-					<el-button @click="zombie(row)" type="primary" size="mini" plain> 查看僵尸信息 </el-button>
-				</template>
-			</el-table-column>
-		</el-table>
-		<div class="pagination-wrapper">
-			<el-pagination
-				background
-				@size-change="onSizeChange"
-				@current-change="onCurrentChange"
-				:current-page="page"
-				:page-sizes="[10, 20, 30, 40, 50]"
-				:page-size="pageSize"
-				layout="total, sizes, prev, pager, next, jumper"
-				:total="totalElements"
-			>
-			</el-pagination>
-		</div>
+                <template slot-scope="{ row }">
+                    <el-tag :type="row.completed ? '' : 'info'"> {{ row.completed }} </el-tag>
+                </template>
+            </el-table-column>
+            <el-table-column prop="metaGameAward" align="center" label="获得奖励">
+                <template slot-scope="{ row }">
+                    <template v-if="row.metaGameAward && row.metaGameAward.awardType === 'NFT'">
+                        <el-image
+                            style="width: 30px; height: 30px"
+                            :src="row.metaGameAward.config"
+                            fit="cover"
+                            :preview-src-list="[row.pic]"
+                        >
+                        </el-image>
+                    </template>
+                    <template v-if="row.metaGameAward && row.metaGameAward.awardType === 'GOLD'">
+                        {{ '金币:' + row.metaGameAward.config }}
+                    </template>
+                </template>
+            </el-table-column>
+            <el-table-column label="操作" align="center" fixed="right" width="150">
+                <template slot-scope="{ row }">
+                    <el-button @click="zombie(row)" type="primary" size="mini" plain> 查看僵尸信息 </el-button>
+                </template>
+            </el-table-column>
+        </el-table>
+        <div class="pagination-wrapper">
+            <el-pagination
+                background
+                @size-change="onSizeChange"
+                @current-change="onCurrentChange"
+                :current-page="page"
+                :page-sizes="[10, 20, 30, 40, 50]"
+                :page-size="pageSize"
+                layout="total, sizes, prev, pager, next, jumper"
+                :total="totalElements"
+            >
+            </el-pagination>
+        </div>
         <el-dialog :visible.sync="showZombieDialog" title="僵尸信息" width="1000px">
             <el-table :data="zombieList" height="calc(100vh - 500px)">
-                <el-table-column prop="id" align="center" label="id" width="100"></el-table-column>
-                <el-table-column prop="metaZombieId" align="center" label="僵尸配置id"></el-table-column>
-                <el-table-column prop="createIndex" align="center" label="生成点id"></el-table-column>
-                <el-table-column prop="type" align="center" label="类型" :formatter="typeFormatter"></el-table-column>
-                <el-table-column prop="hp" align="center" label="剩余血量"></el-table-column>
+                <el-table-column prop="id" align="center" label="id" width="100"> </el-table-column>
+                <el-table-column prop="metaZombieId" align="center" label="僵尸配置id"> </el-table-column>
+                <el-table-column prop="createIndex" align="center" label="生成点id"> </el-table-column>
+                <el-table-column prop="type" align="center" label="类型" :formatter="typeFormatter"> </el-table-column>
+                <el-table-column prop="hp" align="center" label="剩余血量"> </el-table-column>
                 <el-table-column prop="killed" align="center" label="是否击杀">
                     <template slot-scope="{ row }">
-					<el-tag :type="row.killed ? '' : 'info'"> {{ row.killed }} </el-tag>
-				</template>
+                        <el-tag :type="row.killed ? '' : 'info'"> {{ row.killed }} </el-tag>
+                    </template>
                 </el-table-column>
                 <el-table-column prop="pos" align="center" label="坐标">
                     <template slot-scope="{ row }">
-					{{ 'x=' + row.pos.x + ' , ' + 'y=' + row.pos.y + ' , ' + 'z=' + row.pos.z }} 
-				</template>
+                        {{ 'x=' + row.pos.x + ' , ' + 'y=' + row.pos.y + ' , ' + 'z=' + row.pos.z }}
+                    </template>
                 </el-table-column>
             </el-table>
         </el-dialog>
-	</div>
+    </div>
 </template>
 <script>
 import { mapState } from 'vuex';
 import pageableTable from '@/mixins/pageableTable';
 
 export default {
-	name: 'MetaGameProcessList',
-	mixins: [pageableTable],
-	data() {
-		return {
+    name: 'MetaGameProcessList',
+    mixins: [pageableTable],
+    data() {
+        return {
             typeOptions: [
-				{ label: '普通僵尸', value: 'COMMON' },
+                { label: '普通僵尸', value: 'COMMON' },
                 { label: '特殊僵尸', value: 'SPECIAL' }
-			],
+            ],
             zombieList: [],
             showZombieDialog: false,
-			multipleMode: false,
-			search: '',
-			url: '/metaGameProcess/all',
-			downloading: false
-		};
-	},
-	computed: {
-		selection() {
-			return this.$refs.table.selection.map(i => i.id);
-		}
-	},
-	methods: {
+            multipleMode: false,
+            search: '',
+            url: '/metaGameProcess/all',
+            downloading: false
+        };
+    },
+    computed: {
+        selection() {
+            return this.$refs.table.selection.map(i => i.id);
+        }
+    },
+    methods: {
         typeFormatter(row, column, cellValue, index) {
-			let selectedOption = this.typeOptions.find(i => i.value === cellValue);
-			if (selectedOption) {
-				return selectedOption.label;
-			}
-			return '';
-		},
-		beforeGetData() {
-			return { search: this.search, query: { del: false } };
-		},
-		toggleMultipleMode(multipleMode) {
-			this.multipleMode = multipleMode;
-			if (!multipleMode) {
-				this.$refs.table.clearSelection();
-			}
-		},
-		zombie(row) {
+            let selectedOption = this.typeOptions.find(i => i.value === cellValue);
+            if (selectedOption) {
+                return selectedOption.label;
+            }
+            return '';
+        },
+        beforeGetData() {
+            return { search: this.search, query: { del: false } };
+        },
+        toggleMultipleMode(multipleMode) {
+            this.multipleMode = multipleMode;
+            if (!multipleMode) {
+                this.$refs.table.clearSelection();
+            }
+        },
+        zombie(row) {
             this.zombieList = row.metaZombieDTOS;
             this.showZombieDialog = true;
-		},
-		download() {
-			this.downloading = true;
-			this.$axios
-				.get('/metaGameProcess/excel', {
-					responseType: 'blob',
-					params: { size: 10000 ,query: { del: false }},
-				})
-				.then(res => {
-					console.log(res);
-					this.downloading = false;
-					const downloadUrl = window.URL.createObjectURL(new Blob([res.data]));
-					const link = document.createElement('a');
-					link.href = downloadUrl;
-					link.setAttribute('download', res.headers['content-disposition'].split('filename=')[1]);
-					document.body.appendChild(link);
-					link.click();
-					link.remove();
-				})
-				.catch(e => {
-					console.log(e);
-					this.downloading = false;
-					this.$message.error(e.error);
-				});
-		}
-	}
+        },
+        download() {
+            this.downloading = true;
+            this.$axios
+                .get('/metaGameProcess/excel', {
+                    responseType: 'blob',
+                    params: { size: 10000, query: { del: false } }
+                })
+                .then(res => {
+                    console.log(res);
+                    this.downloading = false;
+                    const downloadUrl = window.URL.createObjectURL(new Blob([res.data]));
+                    const link = document.createElement('a');
+                    link.href = downloadUrl;
+                    link.setAttribute('download', res.headers['content-disposition'].split('filename=')[1]);
+                    document.body.appendChild(link);
+                    link.click();
+                    link.remove();
+                })
+                .catch(e => {
+                    console.log(e);
+                    this.downloading = false;
+                    this.$message.error(e.error);
+                });
+        }
+    }
 };
 </script>
 <style lang="less" scoped>