edit.html 31 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553554555556557558559560561562563
  1. {% extends 'base.html' %}
  2. {% block title %}编辑交易记录 - 期货数据管理系统{% endblock %}
  3. {% block styles %}
  4. <!-- 引入 Select2 CSS -->
  5. <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/select2@4.1.0-rc.0/dist/css/select2.min.css">
  6. <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@ttskch/select2-bootstrap4-theme@x.x.x/dist/select2-bootstrap4.min.css"> <!-- Select2 Bootstrap 4 主题 -->
  7. <style>
  8. .select2-container--bootstrap4 .select2-selection--multiple {
  9. min-height: calc(1.5em + .75rem + 2px);
  10. }
  11. </style>
  12. {% endblock %}
  13. {% block content %}
  14. <div class="container-fluid">
  15. <div class="row mb-3">
  16. <div class="col">
  17. <h2>编辑交易记录</h2>
  18. </div>
  19. <div class="col-auto">
  20. <a href="{{ url_for('transaction.index') }}" class="btn btn-secondary">
  21. <i class="fas fa-arrow-left"></i> 返回列表
  22. </a>
  23. </div>
  24. </div>
  25. <div class="card">
  26. <div class="card-body">
  27. <form id="editForm" class="needs-validation" novalidate>
  28. <input type="hidden" id="id" name="id">
  29. <div class="row">
  30. <!-- 第一列 -->
  31. <div class="col-md-6">
  32. <div class="mb-3">
  33. <label for="trade_id" class="form-label">交易 ID (Trade Record ID)</label>
  34. <input type="number" class="form-control" id="trade_id" name="trade_id">
  35. <div class="form-text">关联的交易汇总记录 ID。同一个 ID 最多出现两次。</div>
  36. </div>
  37. <div class="mb-3">
  38. <label for="transaction_time" class="form-label">成交时间 <span class="text-danger">*</span></label>
  39. <input type="datetime-local" class="form-control" id="transaction_time" name="transaction_time" required>
  40. <div class="invalid-feedback">请选择成交时间</div>
  41. </div>
  42. <div class="mb-3">
  43. <label for="operation_time" class="form-label">操作时间</label>
  44. <input type="datetime-local" class="form-control" id="operation_time" name="operation_time">
  45. </div>
  46. <div class="mb-3">
  47. <label for="contract_code" class="form-label">合约代码</label>
  48. <input type="text" class="form-control" id="contract_code" name="contract_code">
  49. </div>
  50. <div class="mb-3">
  51. <label for="name" class="form-label">名称</label>
  52. <input type="text" class="form-control" id="name" name="name" readonly>
  53. <div class="form-text">根据合约代码自动生成,不可编辑。</div>
  54. </div>
  55. <div class="mb-3">
  56. <label for="account" class="form-label">账户</label>
  57. <input type="text" class="form-control" id="account" name="account" value="华安期货"> <!-- 默认值 -->
  58. </div>
  59. <div class="mb-3">
  60. <label for="position_type" class="form-label">多空仓位 <span class="text-danger">*</span></label>
  61. <select class="form-select" id="position_type" name="position_type" required>
  62. <option value="0">开多</option>
  63. <option value="1">平多</option>
  64. <option value="2">开空</option>
  65. <option value="3">平空</option>
  66. </select>
  67. <div class="invalid-feedback">请选择多空仓位</div>
  68. </div>
  69. <div class="mb-3">
  70. <label for="price" class="form-label">成交价格 <span class="text-danger">*</span></label>
  71. <input type="number" class="form-control" id="price" name="price" required step="0.001"> <!-- 允许最多3位小数 -->
  72. <div class="invalid-feedback">请输入成交价格</div>
  73. </div>
  74. <div class="mb-3">
  75. <label for="volume" class="form-label">成交手数 <span class="text-danger">*</span></label>
  76. <input type="number" class="form-control" id="volume" name="volume" required step="1" min="0">
  77. <div class="invalid-feedback">请输入有效的整数成交手数</div>
  78. </div>
  79. <div class="mb-3">
  80. <label for="contract_multiplier" class="form-label">合约乘数</label>
  81. <input type="number" class="form-control" id="contract_multiplier" name="contract_multiplier" step="any">
  82. </div>
  83. <div class="mb-3">
  84. <label for="fee" class="form-label">手续费</label>
  85. <input type="number" class="form-control" id="fee" name="fee" step="any" min="0">
  86. </div>
  87. <div class="mb-3">
  88. <label for="amount" class="form-label">成交金额</label>
  89. <input type="number" class="form-control" id="amount" name="amount" readonly step="any">
  90. <div class="form-text">根据价格、手数、乘数自动计算,不可编辑。</div>
  91. </div>
  92. <div class="mb-3">
  93. <label for="margin" class="form-label">保证金</label>
  94. <input type="number" class="form-control" id="margin" name="margin" readonly step="any">
  95. <div class="form-text">根据成交金额和保证金率自动计算,不可编辑。</div>
  96. </div>
  97. </div>
  98. <!-- 第二列 -->
  99. <div class="col-md-6">
  100. <div class="mb-3">
  101. <label for="strategy_name" class="form-label">操作策略</label>
  102. <select class="form-control select2" id="strategy_name" name="strategy_name" multiple="multiple" data-placeholder="选择策略">
  103. <!-- 选项将通过API加载 -->
  104. </select>
  105. <input type="hidden" id="strategy_ids" name="strategy_ids">
  106. </div>
  107. <div class="mb-3">
  108. <label for="candle_pattern" class="form-label">K线形态</label>
  109. <select class="form-control select2" id="candle_pattern" name="candle_pattern" multiple="multiple" data-placeholder="选择K线形态">
  110. <!-- 选项将通过API加载 -->
  111. </select>
  112. <input type="hidden" id="candle_pattern_ids" name="candle_pattern_ids">
  113. </div>
  114. <div class="mb-3">
  115. <label for="trade_type" class="form-label">交易类别</label>
  116. <select class="form-select" id="trade_type" name="trade_type">
  117. <option value="0">模拟交易</option>
  118. <option value="1">真实交易</option>
  119. </select>
  120. </div>
  121. <div class="mb-3">
  122. <label for="trade_status" class="form-label">交易状态</label>
  123. <select class="form-select" id="trade_status" name="trade_status">
  124. <option value="0">进行中</option>
  125. <option value="1">已暂停</option>
  126. <option value="2">暂停进行</option>
  127. <option value="3">已结束</option>
  128. </select>
  129. </div>
  130. <div class="mb-3">
  131. <label for="latest_price" class="form-label">最新价格</label>
  132. <input type="number" class="form-control" id="latest_price" name="latest_price" step="0.001">
  133. </div>
  134. <div class="mb-3">
  135. <label for="actual_profit_rate" class="form-label">实际收益率</label>
  136. <input type="text" class="form-control" id="actual_profit_rate" name="actual_profit_rate" readonly>
  137. <div class="form-text">根据最新价格和成交价格计算,不可编辑。</div>
  138. </div>
  139. <div class="mb-3">
  140. <label for="actual_profit" class="form-label">实际收益</label>
  141. <input type="number" class="form-control" id="actual_profit" name="actual_profit" readonly step="any">
  142. <div class="form-text">根据最新价格和成交价格计算,不可编辑。</div>
  143. </div>
  144. <div class="mb-3">
  145. <label for="stop_loss_price" class="form-label">止损价格</label>
  146. <input type="number" class="form-control" id="stop_loss_price" name="stop_loss_price" step="0.001">
  147. </div>
  148. <div class="mb-3">
  149. <label for="stop_loss_rate" class="form-label">止损比例</label>
  150. <input type="text" class="form-control" id="stop_loss_rate" name="stop_loss_rate" readonly>
  151. <div class="form-text">根据止损价格和成交价格计算,不可编辑。</div>
  152. </div>
  153. <div class="mb-3">
  154. <label for="stop_loss_profit" class="form-label">止损收益</label>
  155. <input type="number" class="form-control" id="stop_loss_profit" name="stop_loss_profit" readonly step="any">
  156. <div class="form-text">根据止损价格和成交价格计算,不可编辑。</div>
  157. </div>
  158. <div class="mb-3">
  159. <label for="confidence_index" class="form-label">信心指数</label>
  160. <input type="number" class="form-control" id="confidence_index" name="confidence_index" step="1" min="0">
  161. </div>
  162. <div class="mb-3">
  163. <label for="similarity_evaluation" class="form-label">相似度评估 (%)</label>
  164. <input type="number" class="form-control" id="similarity_evaluation" name="similarity_evaluation" step="0.1">
  165. </div>
  166. <div class="mb-3">
  167. <label for="long_trend_name" class="form-label">长期趋势</label>
  168. <select class="form-control select2" id="long_trend_name" name="long_trend_name" multiple="multiple" data-placeholder="选择长期趋势">
  169. <!-- 选项将通过API加载 -->
  170. </select>
  171. <input type="hidden" id="long_trend_ids" name="long_trend_ids">
  172. </div>
  173. <div class="mb-3">
  174. <label for="mid_trend_name" class="form-label">中期趋势</label>
  175. <select class="form-control select2" id="mid_trend_name" name="mid_trend_name" multiple="multiple" data-placeholder="选择中期趋势">
  176. <!-- 选项将通过API加载 -->
  177. </select>
  178. <input type="hidden" id="mid_trend_ids" name="mid_trend_ids">
  179. </div>
  180. </div>
  181. </div>
  182. <div class="row mt-3">
  183. <!-- 按钮行 -->
  184. <div class="col-12 text-end">
  185. <button type="submit" class="btn btn-primary">保存更改</button>
  186. <button type="button" id="cancelBtn" class="btn btn-secondary">取消</button>
  187. </div>
  188. </div>
  189. </form>
  190. </div>
  191. </div>
  192. </div>
  193. {% endblock %}
  194. {% block scripts %}
  195. <!-- 引入 Select2 JS -->
  196. <script src="https://cdn.jsdelivr.net/npm/select2@4.1.0-rc.0/dist/js/select2.min.js"></script>
  197. <!-- 引入 dayjs 处理日期时间 -->
  198. <script src="https://cdn.jsdelivr.net/npm/dayjs@1/dayjs.min.js"></script>
  199. <script src="https://cdn.jsdelivr.net/npm/dayjs@1/plugin/utc.js"></script>
  200. <script src="https://cdn.jsdelivr.net/npm/dayjs@1/plugin/timezone.js"></script>
  201. <script src="https://cdn.jsdelivr.net/npm/dayjs@1/plugin/customParseFormat.js"></script>
  202. <script>
  203. dayjs.extend(dayjs_plugin_utc);
  204. dayjs.extend(dayjs_plugin_timezone);
  205. dayjs.extend(dayjs_plugin_customParseFormat);
  206. // 设置默认时区(如果需要)
  207. // dayjs.tz.setDefault("Asia/Shanghai");
  208. // --- 复用格式化函数 ---
  209. function formatNumber(num, precision = 3) {
  210. if (num === null || num === undefined || isNaN(num)) return '';
  211. let fixedNum = Number(parseFloat(num).toFixed(precision));
  212. return fixedNum.toString();
  213. }
  214. function formatPercentage(num, precision = 2) {
  215. if (num === null || num === undefined || isNaN(num)) return '';
  216. let percentage = parseFloat(num) * 100;
  217. return formatNumber(percentage, precision) + '%';
  218. }
  219. document.addEventListener('DOMContentLoaded', function() {
  220. const transactionId = "{{ transaction_id }}";
  221. const form = document.getElementById('editForm');
  222. // --- 辅助函数:加载 Select2 选项 ---
  223. function loadSelect2Options(selectElementId, apiUrl, idField = 'id', nameField = 'name', processResults = null) {
  224. // Return the fetch promise
  225. return fetch(apiUrl)
  226. .then(response => response.json())
  227. .then(data => {
  228. if (data.code === 0 && data.data) {
  229. const selectElement = $(`#${selectElementId}`);
  230. selectElement.empty(); // 清空现有选项
  231. let results = data.data;
  232. if (processResults) {
  233. results = processResults(results);
  234. }
  235. results.forEach(item => {
  236. // Ensure the option value is a string
  237. const option = new Option(item[nameField], String(item[idField]));
  238. selectElement.append(option);
  239. });
  240. selectElement.trigger('change'); // 更新 Select2 显示
  241. return true; // Indicate success
  242. } else {
  243. console.error(`加载 ${selectElementId} 选项失败:`, data.msg);
  244. return false; // Indicate failure
  245. }
  246. })
  247. .catch(error => {
  248. console.error(`加载 ${selectElementId} 选项请求失败:`, error);
  249. return false; // Indicate failure
  250. });
  251. }
  252. // --- 辅助函数:填充表单 ---
  253. function populateForm(data) {
  254. if (!data) return;
  255. console.log("Populating form with data:", data);
  256. document.getElementById('id').value = data.id || '';
  257. document.getElementById('trade_id').value = data.trade_id || '';
  258. // 处理日期时间 (从 YYYY-MM-DD HH:MM 转换为 datetime-local 需要的 YYYY-MM-DDTHH:mm)
  259. if (data.transaction_time) {
  260. const transactionTime = dayjs(data.transaction_time, 'YYYY-MM-DD HH:mm').format('YYYY-MM-DDTHH:mm');
  261. document.getElementById('transaction_time').value = transactionTime;
  262. }
  263. if (data.operation_time) {
  264. const operationTime = dayjs(data.operation_time, 'YYYY-MM-DD HH:mm').format('YYYY-MM-DDTHH:mm');
  265. document.getElementById('operation_time').value = operationTime;
  266. } else if (data.transaction_time) { // 如果操作时间为空,默认使用成交时间
  267. const transactionTime = dayjs(data.transaction_time, 'YYYY-MM-DD HH:mm').format('YYYY-MM-DDTHH:mm');
  268. document.getElementById('operation_time').value = transactionTime;
  269. }
  270. document.getElementById('contract_code').value = data.contract_code || '';
  271. document.getElementById('name').value = data.name || ''; // 名称不可编辑
  272. document.getElementById('account').value = data.account || '华安期货';
  273. document.getElementById('position_type').value = data.position_type !== null ? data.position_type.toString() : '0';
  274. document.getElementById('price').value = formatNumber(data.price, 3);
  275. document.getElementById('volume').value = formatNumber(data.volume, 0);
  276. document.getElementById('contract_multiplier').value = data.contract_multiplier || '';
  277. document.getElementById('amount').value = formatNumber(data.amount, 2); // 不可编辑
  278. document.getElementById('margin').value = formatNumber(data.margin, 2); // 不可编辑
  279. document.getElementById('fee').value = data.fee || '';
  280. document.getElementById('trade_type').value = data.trade_type !== null ? data.trade_type.toString() : '0';
  281. document.getElementById('trade_status').value = data.trade_status !== null ? data.trade_status.toString() : '0';
  282. document.getElementById('latest_price').value = formatNumber(data.latest_price, 3);
  283. document.getElementById('actual_profit_rate').value = formatPercentage(data.actual_profit_rate, 2); // 不可编辑
  284. document.getElementById('actual_profit').value = formatNumber(data.actual_profit, 2); // 不可编辑
  285. document.getElementById('stop_loss_price').value = formatNumber(data.stop_loss_price, 3);
  286. document.getElementById('stop_loss_rate').value = formatPercentage(data.stop_loss_rate, 2); // 不可编辑
  287. document.getElementById('stop_loss_profit').value = formatNumber(data.stop_loss_profit, 2); // 不可编辑
  288. document.getElementById('confidence_index').value = formatNumber(data.confidence_index, 0);
  289. document.getElementById('similarity_evaluation').value = data.similarity_evaluation !== null && data.similarity_evaluation !== undefined ? data.similarity_evaluation : '';
  290. // 填充 Select2 多选框 (在选项加载完成后进行)
  291. if (data.strategy_ids) {
  292. const ids = data.strategy_ids.split(',').map(id => String(id.trim())).filter(id => id);
  293. $('#strategy_name').val(ids).trigger('change');
  294. }
  295. if (data.candle_pattern_ids) {
  296. const ids = data.candle_pattern_ids.split(',').map(id => String(id.trim())).filter(id => id);
  297. $('#candle_pattern').val(ids).trigger('change');
  298. }
  299. if (data.long_trend_ids) {
  300. const ids = data.long_trend_ids.split(',').map(id => String(id.trim())).filter(id => id);
  301. $('#long_trend_name').val(ids).trigger('change');
  302. }
  303. if (data.mid_trend_ids) {
  304. const ids = data.mid_trend_ids.split(',').map(id => String(id.trim())).filter(id => id);
  305. $('#mid_trend_name').val(ids).trigger('change');
  306. }
  307. }
  308. // --- 初始化页面 ---
  309. function initializePage() {
  310. const transactionId = "{{ transaction_id }}";
  311. // 1. 初始化 Select2 (同步)
  312. $('.select2').select2({
  313. theme: 'bootstrap4',
  314. width: '100%',
  315. tags: false
  316. });
  317. // 2. 加载 Select2 选项 (异步)
  318. const loadStrategyOptions = loadSelect2Options('strategy_name', '/api/dimension/strategy/list_all', 'id', 'name');
  319. const loadCandleOptions = loadSelect2Options('candle_pattern', '/api/dimension/candle/list_all', 'id', 'name');
  320. const loadLongTrendOptions = loadSelect2Options('long_trend_name', '/api/dimension/trend/list_all', 'id', 'name');
  321. const loadMidTrendOptions = loadSelect2Options('mid_trend_name', '/api/dimension/trend/list_all', 'id', 'name');
  322. // 3. 等待所有选项加载完成后,加载并填充表单数据 (异步)
  323. Promise.all([loadStrategyOptions, loadCandleOptions, loadLongTrendOptions, loadMidTrendOptions])
  324. .then(loadResults => {
  325. console.log("All Select2 options loaded successfully:", loadResults);
  326. if (transactionId && transactionId !== '0') {
  327. console.log(`[Edit Page] Fetching data for transaction ID: ${transactionId}`);
  328. return fetch(`/transaction/api/detail/${transactionId}`);
  329. } else {
  330. console.log("[Edit Page] No valid transaction ID provided, treating as new or error.");
  331. // 设置默认值(如果不是编辑现有记录)
  332. document.getElementById('account').value = '华安期货';
  333. document.getElementById('operation_time').value = dayjs().format('YYYY-MM-DDTHH:mm');
  334. document.getElementById('transaction_time').value = dayjs().format('YYYY-MM-DDTHH:mm');
  335. return Promise.reject('No Transaction ID'); // Skip fetching and populating
  336. }
  337. })
  338. .then(response => response.json()) // 只在有 transactionId 时执行
  339. .then(responseData => {
  340. console.log("[Edit Page] Received data from API:", responseData);
  341. if (responseData.code === 0 && responseData.data) {
  342. console.log("[Edit Page] Data is valid, calling populateForm...");
  343. populateForm(responseData.data);
  344. } else if (responseData.code !== undefined) { // Check if it's a valid API response
  345. console.error('[Edit Page] API returned error or no data:', responseData.msg);
  346. alert('加载交易信息失败:' + (responseData.msg || '未知错误'));
  347. } // Else: 'No Transaction ID' case was handled by Promise.reject
  348. })
  349. .catch(error => {
  350. if (error === 'No Transaction ID') {
  351. // Expected case when creating a new record or ID is missing
  352. } else {
  353. console.error('[Edit Page] Error during initialization:', error);
  354. alert('页面初始化或加载交易信息时出错: ' + error.message);
  355. }
  356. });
  357. }
  358. initializePage(); // 执行初始化
  359. // --- 表单提交处理 ---
  360. form.addEventListener('submit', function(event) {
  361. event.preventDefault();
  362. if (!form.checkValidity()) {
  363. event.stopPropagation();
  364. form.classList.add('was-validated');
  365. return;
  366. }
  367. // 收集表单数据
  368. const formData = new FormData(form);
  369. const data = {};
  370. formData.forEach((value, key) => {
  371. // 处理 Select2 多选字段 (取 ID)
  372. if (key === 'strategy_name') {
  373. data['strategy_ids'] = $('#strategy_name').val() ? $('#strategy_name').val().join(',') : null;
  374. data['strategy_name'] = $('#strategy_name').select2('data').map(item => item.text).join('+');
  375. return; // 跳过原始 key
  376. }
  377. if (key === 'candle_pattern') {
  378. data['candle_pattern_ids'] = $('#candle_pattern').val() ? $('#candle_pattern').val().join(',') : null;
  379. data['candle_pattern'] = $('#candle_pattern').select2('data').map(item => item.text).join('+');
  380. return;
  381. }
  382. if (key === 'long_trend_name') {
  383. data['long_trend_ids'] = $('#long_trend_name').val() ? $('#long_trend_name').val().join(',') : null;
  384. data['long_trend_name'] = $('#long_trend_name').select2('data').map(item => item.text).join('+');
  385. return;
  386. }
  387. if (key === 'mid_trend_name') {
  388. data['mid_trend_ids'] = $('#mid_trend_name').val() ? $('#mid_trend_name').val().join(',') : null;
  389. data['mid_trend_name'] = $('#mid_trend_name').select2('data').map(item => item.text).join('+');
  390. return;
  391. }
  392. // 对于空字符串,根据需要转为 null 或保持空字符串
  393. // 这里我们将空字符串转为 null,除非它是某些特定字段 (如 account 可以为空但不能是 null)
  394. if (value === '' && key !== 'account' && key !== 'contract_code' /* Add other keys that can be empty string */) {
  395. data[key] = null;
  396. } else {
  397. // 转换数字类型
  398. if ([ 'trade_id', 'position_type', 'volume', 'trade_type', 'trade_status', 'confidence_index'].includes(key)) {
  399. data[key] = value ? parseInt(value) : null;
  400. } else if ([ 'price', 'contract_multiplier', 'fee', 'latest_price', 'stop_loss_price', 'similarity_evaluation'].includes(key)) {
  401. data[key] = value ? parseFloat(value) : null;
  402. } else {
  403. data[key] = value;
  404. }
  405. }
  406. });
  407. // 移除只读字段,防止提交
  408. delete data.amount;
  409. delete data.margin;
  410. delete data.actual_profit_rate;
  411. delete data.actual_profit;
  412. delete data.stop_loss_rate;
  413. delete data.stop_loss_profit;
  414. delete data.name; // 名称不可编辑
  415. // 移除隐藏的ID字段的键名,避免冲突
  416. delete data.strategy_ids;
  417. delete data.candle_pattern_ids;
  418. delete data.long_trend_ids;
  419. delete data.mid_trend_ids;
  420. console.log('Submitting data:', data);
  421. // 发送更新请求
  422. fetch(`/transaction/api/update/${transactionId}`, {
  423. method: 'PUT',
  424. headers: {
  425. 'Content-Type': 'application/json'
  426. },
  427. body: JSON.stringify(data)
  428. })
  429. .then(response => response.json())
  430. .then(responseData => {
  431. console.log('Server response:', responseData);
  432. if (responseData.code === 0) {
  433. alert('更新成功: ' + responseData.msg);
  434. window.location.href = "{{ url_for('transaction.index') }}";
  435. } else {
  436. alert('更新失败:' + responseData.msg);
  437. }
  438. })
  439. .catch(error => {
  440. console.error('Error:', error);
  441. alert('更新请求失败。');
  442. });
  443. });
  444. // --- Cancel Button Handler ---
  445. const cancelButton = document.getElementById('cancelBtn');
  446. if (cancelButton) {
  447. cancelButton.addEventListener('click', function() {
  448. window.location.href = "{{ url_for('transaction.index') | safe }}"; // Added safe filter just in case
  449. });
  450. }
  451. // --- 动态计算与更新 (可选,如果需要实时反馈) ---
  452. function updateCalculatedFields() {
  453. const price = parseFloat(document.getElementById('price').value) || 0;
  454. const volume = parseInt(document.getElementById('volume').value) || 0;
  455. const multiplier = parseFloat(document.getElementById('contract_multiplier').value) || 1;
  456. const latestPrice = parseFloat(document.getElementById('latest_price').value);
  457. const stopLossPrice = parseFloat(document.getElementById('stop_loss_price').value);
  458. const positionType = parseInt(document.getElementById('position_type').value);
  459. // 计算 Amount
  460. const amount = price * volume * multiplier;
  461. document.getElementById('amount').value = formatNumber(amount, 2);
  462. // 计算 Volume Change (用于后续计算)
  463. let volumeChange = 0;
  464. if (positionType === 0 || positionType === 3) volumeChange = volume;
  465. else if (positionType === 1 || positionType === 2) volumeChange = -volume;
  466. // 保证金计算需要异步获取费率,这里暂时不清空或显示 N/A
  467. // document.getElementById('margin').value = 'N/A';
  468. // 计算实际收益率和收益
  469. let actualProfitRate = null, actualProfit = null;
  470. if (!isNaN(latestPrice) && price !== 0) {
  471. const directionMultiplier = (positionType === 2 || positionType === 3) ? -1 : 1;
  472. actualProfitRate = directionMultiplier * (latestPrice - price) / price;
  473. actualProfit = (latestPrice - price) * volumeChange * multiplier;
  474. }
  475. document.getElementById('actual_profit_rate').value = formatPercentage(actualProfitRate, 2);
  476. document.getElementById('actual_profit').value = formatNumber(actualProfit, 2);
  477. // 计算止损比例和收益
  478. let stopLossRate = null, stopLossProfit = null;
  479. if (!isNaN(stopLossPrice) && price !== 0) {
  480. const directionMultiplier = (positionType === 2 || positionType === 3) ? -1 : 1;
  481. stopLossRate = directionMultiplier * (stopLossPrice - price) / price;
  482. stopLossProfit = (stopLossPrice - price) * volumeChange * multiplier;
  483. }
  484. document.getElementById('stop_loss_rate').value = formatPercentage(stopLossRate, 2);
  485. document.getElementById('stop_loss_profit').value = formatNumber(stopLossProfit, 2);
  486. }
  487. // 监听相关字段变化,触发计算更新
  488. ['price', 'volume', 'contract_multiplier', 'latest_price', 'stop_loss_price', 'position_type'].forEach(id => {
  489. const element = document.getElementById(id);
  490. if (element) {
  491. element.addEventListener('input', updateCalculatedFields);
  492. element.addEventListener('change', updateCalculatedFields); // For select
  493. }
  494. });
  495. // 合约代码变化时,尝试更新名称 (需要后端API支持)
  496. const contractCodeInput = document.getElementById('contract_code');
  497. if (contractCodeInput) {
  498. contractCodeInput.addEventListener('change', function() {
  499. const code = this.value.trim();
  500. if (code) {
  501. // 示例: /api/future_info/get_name_by_code?code=CU2305
  502. fetch(`/api/future_info/get_name_by_code?code=${encodeURIComponent(code)}`)
  503. .then(res => res.json())
  504. .then(resData => {
  505. if (resData.code === 0 && resData.data && resData.data.name) {
  506. document.getElementById('name').value = resData.data.name;
  507. // 如果还需要更新乘数等信息,可以在这里处理
  508. if (resData.data.contract_multiplier !== undefined) {
  509. document.getElementById('contract_multiplier').value = resData.data.contract_multiplier;
  510. updateCalculatedFields(); // 乘数变化,更新计算
  511. }
  512. } else {
  513. // 找不到或出错,可以清空名称或提示用户
  514. document.getElementById('name').value = '';
  515. }
  516. })
  517. .catch(err => {
  518. console.error('获取名称失败:', err);
  519. document.getElementById('name').value = '';
  520. });
  521. } else {
  522. document.getElementById('name').value = '';
  523. }
  524. });
  525. }
  526. });
  527. </script>
  528. {% endblock %}