miniQMT/web1.0/index.html at main · winkexp/miniQMT

Repository navigation

History

100

101

102

103

104

105

106

107

108

109

110

111

112

113

114

115

116

117

118

119

120

121

122

123

124

125

126

127

128

129

130

131

132

133

134

135

136

137

138

139

140

141

142

143

144

145

146

147

148

149

150

151

152

153

154

155

156

157

158

159

160

161

162

163

164

165

166

167

168

169

170

171

172

173

174

175

176

177

178

179

180

181

182

183

184

185

186

187

188

189

190

191

192

193

194

195

196

197

198

199

200

201

202

203

204

205

206

207

208

209

210

211

212

213

214

215

216

217

218

219

220

221

222

223

224

225

226

227

228

229

230

231

232

233

234

235

236

237

238

239

240

241

242

243

244

245

246

247

248

249

250

251

252

253

254

255

256

257

258

259

260

261

262

263

264

265

266

267

268

269

270

271

272

273

274

275

276

277

278

279

280

281

282

283

284

285

286

287

288

289

290

291

292

293

294

295

296

297

298

299

300

301

302

303

304

305

306

307

308

309

310

311

312

313

314

315

316

317

318

319

320

321

322

323

324

325

326

327

328

329

330

331

332

333

334

335

336

337

338

339

340

341

342

343

344

345

346

347

348

349

350

351

352

353

354

355

356

357

358

359

360

361

362

363

364

365

366

367

368

369

370

371

372

373

374

375

376

377

378

379

380

381

382

383

384

385

386

387

388

389

390

391

392

393

394

395

396

397

398

399

400

401

402

403

404

405

406

407

408

409

410

411

412

<!DOCTYPE html>

<head>

<title>交易监控面板</title>

<style>

/* 基础样式 */

body {

font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;

}

.main-container {

display: flex;

flex-direction: column;

height: calc(100vh - 40px);

min-height: 768px;

}

.content-area {

flex: 1;

display: flex;

flex-direction: column;

overflow: hidden;

}

@keyframes fadeOut {

from { opacity: 1; }

to { opacity: 0; }

}

.fade-out {

animation: fadeOut 0.3s ease-out forwards;

}

/* 优化刷新状态指示器 */

#refreshStatus {

animation: fadeOut 0.5s ease-in-out;

z-index: 1000;

}

/* 优化数据更新指示器 */

.highlight-update {

animation: highlight 1s ease-out;

}

@keyframes highlight {

0% { background-color: rgba(16, 185, 129, 0.2); }

100% { background-color: transparent; }

}

#orderLog {

height: 400px;

min-height: 400px;

max-height: 400px;

overflow-y: scroll;

overflow-y: overlay;

white-space: pre-wrap;

overflow-wrap: break-word;

}

#orderLog::-webkit-scrollbar {

width: 8px;

}

/* 状态消息样式 */

.status-message {

padding: 10px;

margin-bottom: 10px;

border-radius: 5px;

font-weight: bold;

}

.loading { background-color: #e0f2fe; color: #0c4a6e; border: 1px solid #7dd3fc;}

.error { background-color: #fee2e2; color: #991b1b; border: 1px solid #fca5a5; }

.success { background-color: #dcfce7; color: #166534; border: 1px solid #86efac; }

.warning { background-color: #fef3c7; color: #92400e; border: 1px solid #fcd34d; }

/* API连接状态指示器 */

.connection-status {

position: fixed;

top: 10px;

right: 10px;

padding: 5px 10px;

border-radius: 5px;

font-size: 12px;

font-weight: bold;

z-index: 1000;

}

.connected { background-color: #dcfce7; color: #166534; }

.disconnected { background-color: #fee2e2; color: #991b1b; }

/* 刷新状态动画 */

@keyframes fadeOut {

from { opacity: 1; }

to { opacity: 0; }

}

@keyframes pulse {

0% { opacity: 0.6; }

50% { opacity: 0.3; }

100% { opacity: 0.6; }

}

/* 加载图标淡入淡出 */

#holdingsLoading, #logLoading {

transition: opacity 0.3s ease;

}

#holdingsLoading.shown, #logLoading.shown {

opacity: 1;

}

#holdingsLoading:not(.shown), #logLoading:not(.shown) {

opacity: 0;

transition-delay: 0.3s;

}

.api-refreshing .text-blue-700 {

position: relative;

}

.api-refreshing .text-blue-700::after {

content: '';

position: absolute;

bottom: -3px;

left: 0;

width: 100%;

height: 2px;

background: linear-gradient(90deg, rgba(59, 130, 246, 0.5), rgba(96, 165, 250, 0.1));

animation: pulse 2s infinite;

}

.refreshing {

position: relative;

}

.refreshing::after {

content: '';

position: absolute;

top: 0;

right: 0;

bottom: 0;

left: 0;

background-color: rgba(255, 255, 255, 0.1);

pointer-events: none;

animation: pulse 1s infinite;

z-index: 5;

}

/* 低性能模式 */

.low-performance-mode .refreshing::after {

animation: none;

opacity: 0.1;

}

/* 参数验证错误提示 */

.param-error {

color: #ef4444;

font-size: 0.75rem;

margin-top: 0.25rem;

}

/* 模拟交易模式警告 */

.simulation-mode-warning {

background-color: #fef3c7;

border: 1px solid #f59e0b;

color: #92400e;

padding: 0.5rem;

border-radius: 0.25rem;

margin-bottom: 0.5rem;

font-weight: bold;

display: flex;

align-items: center;

}

.simulation-mode-warning svg {

margin-right: 0.5rem;

}

</style>

</head>

<div id="connectionStatus" class="connection-status disconnected">API未连接</div>

</svg>

<span>当前为模拟交易模式，所有买卖操作不会真实执行</span>

</div>

<label for="singleBuyAmount" class="text-sm whitespace-nowrap">单只单次买入金额:</label>

</div>

</div>

<label for="firstProfitSell" class="text-sm whitespace-nowrap">平仓盈利超过:</label>

</div>

</div>

<label for="stockGainSellPencent" class="text-sm whitespace-nowrap">首次盈利平仓卖出:</label>

</div>

</div>

</div>

<label for="stopLossBuy" class="text-sm whitespace-nowrap">补仓跌幅超过:</label>

</div>

</div>

<label for="stockStopLoss" class="text-sm whitespace-nowrap">平仓止损超过:</label>

</div>

</div>

<label for="singleStockMaxPosition" class="text-sm whitespace-nowrap">单只股票最大持仓:</label>

</div>

</div>

<label for="totalMaxPosition" class="text-sm whitespace-nowrap">最大总持仓:</label>

</div>

</div>

</div>

</div>

</div>

<label for="simulationMode" class="text-sm font-bold text-orange-600">模拟交易模式</label>

</div>

<label for="globalAllowBuySell" class="text-sm">全局监控总开关</label>

</div>

账号 <span id="accountId" class="font-bold">--</span>:

可用金额: <span id="availableBalance" class="font-bold text-green-600">--</span>

最高持股: <span id="maxHoldingValue" class="font-bold">--</span>

总资产: <span id="totalAssets" class="font-bold">--</span>

数据更新时间: <span id="last-update-timestamp">--</span>

</div>

未运行

</div>

开始执行监控

</button>

保存当前数据

</button>

清空日志

</button>

清空当前数据

</button>

清空买入/卖出数据

</button>

导入保存数据

</button>

初始化持仓数据

</button>

</div>

</section>

<label for="buyStrategy" class="text-sm font-medium whitespace-nowrap">1. 选股买入设置:</label>

<option value="random_pool">从备选池随机买入</option>

<option value="custom_stock">自定义股票买入</option>

</select>

一键买入

</button>

</div>

2. 当前持仓列表

</svg>

更新中

</span>

</h3>

</tr>

</thead>

</tbody>

</table>

</div>

3. 下单日志

</svg>

更新中

</span>

</h3>

</div>

</section>

</div>

</div>

</div>

</body>

</html>

FilesExpand file tree

index.html

Latest commit

History

index.html

File metadata and controls