bugfix250107.1
全站通知：

Widget:资源计算器

来自恋与深空WIKI_BWIKI_哔哩哔哩
跳到导航 跳到搜索

<!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>

               <el-button circle text @click="handleImport" title="导入">
                   upload                        
               </el-button>
               <el-button circle text @click="handleExport" title="导出">
                   download                        
               </el-button>
               <el-button circle text @click="handleClear" title="清空">
                   delete                        
               </el-button>

           <card v-for="(card, index) in filteredCards" 
                 :key="card.originalIndex" 
                 :card="card"
                 :index="index"
                 :prop-list="propList"
                 @remove="handleRemove(index)"
                 @edit="handleEdit">
           </card>

           <el-button type="primary" @click="handleAdd">添加</el-button>

       <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">

                   模板:CardRemark

               <el-button size="small" circle text @click.stop="$emit('remove', index)" title="删除">
                   close
               </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>

                   <el-button @click="handleReset">重置</el-button>

                       <el-button @click="handleClose">取消</el-button>
                       <el-button type="primary" @click="handleConfirm">确定</el-button>

           </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-button circle text @click="handleReset" title="重置">
                   restart_alt
               </el-button>

           <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-button 
                               v-for="(template, key) in templates" 
                               :key="key"
                               @click="handleTemplateClick(template)">
                                
                           </el-button>

                   </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>

取自“https://wiki.biligame.com/lysk/index.php?title=Widget:资源计算器&oldid=81305”