wuhu-torn-helper/src/vue/ForeignStock.vue
2023-06-02 19:34:48 +08:00

61 lines
2.1 KiB
Vue

<template>
<div v-if="commonUtils.getScriptEngine() === UserScriptEngine.RAW" class="wh-f-item">
<el-image :src="staticImageSrc"/>
</div>
<el-table v-else-if="!loading" :data="tableData" style="width: 100%">
<el-table-column label="区域" prop="area"/>
<el-table-column label="更新时间" prop="updateTime"/>
<el-table-column label="库存" prop="stock"/>
</el-table>
<el-skeleton v-if="loading" :rows="13" animated/>
</template>
<script lang="ts" setup>
import { CommonUtilsKey } from "../ts/class/utils/CommonUtils";
import { inject, onMounted, ref } from "vue";
import UserScriptEngine from "../ts/enum/UserScriptEngine.js";
import { TravelItemKey } from "../ts/class/action/TravelItem";
import { LoggerKey } from "../ts/class/Logger";
const commonUtils = inject(CommonUtilsKey);
const travelItem = inject(TravelItemKey);
const logger = inject(LoggerKey);
const loading = ref(true);
const staticImageSrc = 'https://jjins.github.io/t2i/stock.png?' + Date.now();
const tableData = ref([]);
let travelItemData = null;
onMounted(async () => {
travelItemData = await travelItem.get();
loading.value = false;
travelItem.itemFiler.forEach(item => {
const update = (new Date().getTime() - new Date(travelItemData.stocks[item.name]['update'] * 1000).getTime()) / 1000 | 0;
const tableItem = {
area: item.show,
updateTime: `${ update / 60 | 0 }${ update % 60 | 0 }秒前`,
stock: [],
};
travelItemData.stocks[item.name]['stocks'].forEach(stock => {
if (item.stocks[stock.name]) {
tableItem.stock.push(`${ item.stocks[stock.name] }(${ stock['quantity'] })`);
// table += `<td${ stock['quantity'] === 0 ? ' style="background-color:#f44336;color:white;border-color:#000;"' : '' }>${ el.stocks[stock.name] } (${ stock['quantity'] })</td>`;
}
});
tableData.value.push(tableItem);
});
});
</script>
<script lang="ts">
export default {
name: "Test2"
}
</script>
<style scoped>
.wh-f-item .el-image {
display: block;
margin: 0 auto;
}
</style>