全站通知:
Widget:资源计算器
刷
历
编
跳到导航
跳到搜索
<!DOCTYPE html> <html lang="en">
<head>
<meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no"> <script type="text/javascript" src="https://wiki.biligame.com/tools/MediaWiki:Flatpickr/4.6.13.js?action=raw&ctype=text/javascript"></script> <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/flatpickr/dist/flatpickr.min.css"> <script type="text/javascript" src="https://wiki.biligame.com/ys/MediaWiki:vue3-global.js?action=raw&ctype=text/javascript"></script> <link rel="stylesheet" href="//unpkg.com/element-plus/dist/index.css" /> <script src="//unpkg.com/element-plus"></script> <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
</head>
<body>
统计
<input type="text" id="date-range" placeholder="选择日期范围">
<el-loading v-if="isLoading" fullscreen></el-loading>
<template v-if="!isLoading"> <card-panel :card-list="cardList" :prop-list="propList" @add="addCard" @remove="removeCard" @update="updateCard" @clear="clearCards"> </card-panel>
<stats-panel :card-list="cardList" :prop-list="propList" :prop-counts="propCounts" :date-range="dateRange"> </stats-panel> </template>
<template id="date-range-template">
统计日期范围:
<input type="text" id="date-range" placeholder="选择日期范围">
</template>
<template id="card-panel-template">
<el-tabs v-model="activeTab"> <el-tab-pane label="每日" name="daily"></el-tab-pane> <el-tab-pane label="每周" name="weekly"></el-tab-pane> <el-tab-pane label="每月" name="monthly"></el-tab-pane> <el-tab-pane label="周期" name="cycle"></el-tab-pane> <el-tab-pane label="基础" name="basic"></el-tab-pane> </el-tabs>
<card v-for="(card, index) in filteredCards" :key="card.originalIndex" :card="card" :index="index" :prop-list="propList" @remove="handleRemove(index)" @edit="handleEdit"> </card>
<card-editor ref="editor" :type="activeTab" :prop-list="propList" :edit-card="editingCard" @add="$emit('add', $event)" @update="handleCardUpdate"> </card-editor>
<import-dialog ref="importDialog" @import="handleImportData"> </import-dialog>
<el-dialog v-model="exportVisible" title="导出数据" width="95%">
<el-input type="textarea" v-model="exportData" :rows="5" placeholder="导出的数据" readonly> </el-input>
<template #footer> <el-button @click="exportVisible = false">关闭</el-button> </template> </el-dialog> </template>
<template id="card-template">
<el-button size="small" circle text @click.stop="$emit('remove', index)" title="删除">
</el-button>
<img :src="propList[name]" :alt="name" class="prop-icon">
x模板:Count
</template>
<template id="card-editor-template"> <el-dialog v-model="visible" :title="isEdit ? '编辑卡片' : '添加卡片'" width="95%" @close="handleClose">
<el-form> <el-form-item label="备注"> <el-input v-model="form.remark" placeholder="请输入备注"></el-input> </el-form-item> <template v-if="type === 'basic'"> <el-form-item label="次数"> <el-input-number v-model="form.count" :min="1"></el-input-number> </el-form-item> </template> <template v-if="type === 'weekly'"> <el-form-item label="星期"> <el-checkbox-group v-model="form.days"> <el-checkbox v-for="day in weekDays" :key="day.value" :label="day.value"> 模板:Day.label </el-checkbox> </el-checkbox-group> </el-form-item> </template> <template v-if="type === 'monthly'"> <el-form-item label="每月"> <el-select v-model="form.days" multiple collapse-tags collapse-tags-tooltip placeholder="请选择日期" style="width: 100%"> <el-option v-for="day in monthDays" :key="day" :label="day + '日'" :value="day.toString()"> </el-option> </el-select> </el-form-item> </template> <template v-if="type === 'cycle'"> <el-form-item label="开始日期"> <el-date-picker v-model="form.startDate" type="date" placeholder="选择日期"></el-date-picker> </el-form-item> <el-form-item label="周期天数"> <el-input-number v-model="form.duration" :min="1"></el-input-number> </el-form-item> </template> </el-form>
<img :src="url" :alt="name" class="prop-icon">
模板:Name
<el-input-number v-model="selectedProps[name]" :controls="true" > </el-input-number>
<template #footer>
</template> </el-dialog> </template>
<template id="stats-panel-template">
<el-tabs v-model="activeTab"> <el-tab-pane label="汇总" name="summary"> </el-tab-pane> <el-tab-pane label="预设" name="props"> </el-tab-pane> </el-tabs>
<el-table :data="summaryData" :border="true" :max-height="400" fixed-header> <el-table-column label="道具" width="155" fixed="left" prop="name"> <template #default="{ row }">
<img :src="propList[row.name]" :alt="row.name" class="prop-icon">
模板:Row.name
empty </template> </el-table-column> <el-table-column label="总计" width="100" prop="total"> <template #default="{ row }"> 模板:Row.total </template> </el-table-column> <el-table-column label="初始值" width="100" prop="initial"> <template #default="{ row }"> 模板:Row.initial </template> </el-table-column> <el-table-column label="每日" width="100" prop="daily"> <template #default="{ row }"> 模板:Row.daily </template> </el-table-column> <el-table-column label="每周" width="100" prop="weekly"> <template #default="{ row }"> 模板:Row.weekly </template> </el-table-column> <el-table-column label="每月" width="100" prop="monthly"> <template #default="{ row }"> 模板:Row.monthly </template> </el-table-column> <el-table-column label="周期" width="100" prop="cycle"> <template #default="{ row }"> 模板:Row.cycle </template> </el-table-column> <el-table-column label="基础" width="100" prop="basic"> <template #default="{ row }"> 模板:Row.basic </template> </el-table-column> </el-table>
<img :src="url" :alt="name" class="prop-icon">
模板:Name
<el-input-number v-model="propCounts[name]" :controls="true" @change="handleCountChange(name)"> </el-input-number>
</template>
<template id="import-dialog-template"> <el-dialog v-model="visible" title="导入数据" width="95%">
<el-tabs v-model="activeCategory"> <el-tab-pane v-for="(templates, category) in templateData" :key="category" :label="category" :name="category">
</el-tab-pane> </el-tabs>
<el-input type="textarea" v-model="importData" :rows="3" placeholder="请输入或选择要导入的数据"> </el-input>
<template #footer> <el-button @click="handleClear">清空</el-button> <el-button type="primary" @click="handleImport">导入</el-button> </template> </el-dialog> </template>
<script src="calculator.js"></script>
</body>
</html>