<!DOCTYPE html>
|
<html lang="zh-CN">
|
<head>
|
<meta charset="utf-8">
|
<title>仿真操作</title>
|
<meta name="renderer" content="webkit">
|
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
|
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
|
<link rel="stylesheet" href="../../static/vue/element/element.css">
|
<link rel="stylesheet" href="../../static/css/cool.css">
|
<style>
|
html, body {
|
height: 100%;
|
margin: 0;
|
background: linear-gradient(180deg, #eef4fa 0%, #e7edf5 100%);
|
}
|
body {
|
font-family: "PingFang SC", "Microsoft YaHei", sans-serif;
|
}
|
[v-cloak] {
|
display: none;
|
}
|
#app {
|
height: 100%;
|
box-sizing: border-box;
|
padding: 20px;
|
display: flex;
|
flex-direction: column;
|
gap: 16px;
|
}
|
.hero {
|
padding: 22px 24px;
|
border-radius: 20px;
|
border: 1px solid rgba(255,255,255,0.82);
|
background: linear-gradient(135deg, rgba(255,255,255,0.94), rgba(244,249,255,0.88));
|
box-shadow: 0 18px 44px rgba(62, 89, 120, 0.08);
|
}
|
.hero-title {
|
font-size: 26px;
|
font-weight: 700;
|
color: #213447;
|
}
|
.hero-desc {
|
margin-top: 8px;
|
color: #66788c;
|
font-size: 13px;
|
line-height: 1.8;
|
}
|
.panel {
|
flex: 1;
|
min-height: 0;
|
display: flex;
|
flex-direction: column;
|
border-radius: 20px;
|
border: 1px solid rgba(222, 231, 241, 0.92);
|
background: rgba(251, 253, 255, 0.9);
|
box-shadow: 0 18px 42px rgba(57, 84, 114, 0.08);
|
overflow: hidden;
|
}
|
.toolbar {
|
padding: 18px 22px;
|
display: flex;
|
align-items: center;
|
justify-content: space-between;
|
gap: 16px;
|
border-bottom: 1px solid rgba(225, 233, 243, 0.95);
|
background: rgba(255,255,255,0.74);
|
}
|
.toolbar-left {
|
display: flex;
|
align-items: center;
|
flex-wrap: wrap;
|
gap: 10px;
|
}
|
.toolbar-tip {
|
font-size: 12px;
|
color: #73879b;
|
}
|
.content {
|
flex: 1;
|
min-height: 0;
|
overflow: auto;
|
padding: 18px 22px 24px;
|
}
|
.group-card {
|
border: 1px solid rgba(222, 231, 241, 0.95);
|
border-radius: 18px;
|
background: linear-gradient(180deg, rgba(255,255,255,0.96), rgba(246,250,255,0.92));
|
box-shadow: 0 10px 24px rgba(75, 101, 130, 0.06);
|
padding: 18px;
|
margin-bottom: 16px;
|
}
|
.group-head {
|
display: flex;
|
align-items: flex-start;
|
justify-content: space-between;
|
gap: 12px;
|
margin-bottom: 12px;
|
}
|
.group-title {
|
font-size: 16px;
|
font-weight: 700;
|
color: #25384c;
|
}
|
.group-desc {
|
margin-top: 6px;
|
font-size: 12px;
|
line-height: 1.8;
|
color: #6f8297;
|
}
|
.config-grid {
|
display: grid;
|
grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
|
gap: 14px;
|
}
|
.config-item {
|
border-radius: 16px;
|
border: 1px solid rgba(225, 233, 243, 0.96);
|
background: rgba(255,255,255,0.88);
|
padding: 14px 14px 12px;
|
}
|
.config-name {
|
font-size: 14px;
|
font-weight: 700;
|
color: #223548;
|
}
|
.config-desc {
|
margin-top: 6px;
|
min-height: 38px;
|
font-size: 12px;
|
line-height: 1.7;
|
color: #71859a;
|
}
|
.config-control {
|
margin-top: 12px;
|
}
|
.config-meta {
|
margin-top: 10px;
|
display: flex;
|
flex-wrap: wrap;
|
gap: 8px;
|
}
|
.meta-chip {
|
padding: 4px 8px;
|
border-radius: 999px;
|
background: rgba(233, 240, 248, 0.92);
|
color: #60758b;
|
font-size: 12px;
|
}
|
.empty-box {
|
padding: 56px 16px;
|
text-align: center;
|
color: #7b8da0;
|
font-size: 14px;
|
}
|
.section-note {
|
margin-top: 8px;
|
font-size: 12px;
|
color: #8a9aab;
|
}
|
.el-tabs__item {
|
font-weight: 600;
|
}
|
.el-input-number,
|
.el-select {
|
width: 100%;
|
}
|
@media (max-width: 900px) {
|
#app {
|
padding: 14px;
|
}
|
.toolbar {
|
flex-direction: column;
|
align-items: stretch;
|
}
|
}
|
</style>
|
</head>
|
<body>
|
<div id="app" v-cloak>
|
<div class="hero">
|
<div class="hero-title">仿真操作</div>
|
<div class="hero-desc">
|
仅管理仿真专属参数和仿真节奏参数，不混入真实系统业务配置。保存后直接写入系统配置，并刷新仿真读取缓存。
|
</div>
|
</div>
|
|
<div class="panel">
|
<div class="toolbar">
|
<div class="toolbar-left">
|
<el-tag size="small" :type="statusInfo.isFake ? 'success' : 'info'">{{ statusInfo.isFake ? '仿真模式' : '非仿真模式' }}</el-tag>
|
<el-tag size="small" :type="statusInfo.running ? 'danger' : 'warning'">{{ statusInfo.running ? '运行中' : '未运行' }}</el-tag>
|
<span class="toolbar-tip">开关项保存为 Y/N，时间项单位均为毫秒</span>
|
</div>
|
<div>
|
<el-button size="small" @click="reloadData" :loading="loading">刷新</el-button>
|
<el-button type="primary" size="small" @click="saveConfig" :loading="saving" :disabled="!statusInfo.isFake">保存配置</el-button>
|
</div>
|
</div>
|
<div class="content" v-loading="loading">
|
<div v-if="!statusInfo.isFake && !loading" class="empty-box">当前不是仿真模式，仿真参数不可编辑。</div>
|
<template v-else>
|
<el-tabs v-model="activeTab">
|
<el-tab-pane label="基础参数" name="basic">
|
<div class="group-card" v-for="group in basicGroups" :key="group.key">
|
<div class="group-head">
|
<div>
|
<div class="group-title">{{ group.title }}</div>
|
<div class="group-desc">{{ group.desc }}</div>
|
</div>
|
</div>
|
<div class="config-grid">
|
<div class="config-item" v-for="item in group.items" :key="item.code">
|
<div class="config-name">{{ item.name }}</div>
|
<div class="config-desc">{{ item.desc }}</div>
|
<div class="config-control">
|
<el-switch
|
v-if="item.type === 'boolean'"
|
v-model="form[item.code]"
|
active-text="是"
|
inactive-text="否">
|
</el-switch>
|
<el-input-number
|
v-else
|
v-model="form[item.code]"
|
:min="item.min"
|
:max="item.max"
|
:step="item.step || 1"
|
controls-position="right">
|
</el-input-number>
|
</div>
|
<div class="config-meta">
|
<span class="meta-chip">{{ item.code }}</span>
|
<span class="meta-chip" v-if="item.unit">单位：{{ item.unit }}</span>
|
<span class="meta-chip" v-if="item.type !== 'boolean'">范围：{{ item.min }} - {{ item.max }}</span>
|
</div>
|
</div>
|
</div>
|
</div>
|
</el-tab-pane>
|
<el-tab-pane label="高级参数" name="advanced">
|
<div class="group-card" v-for="group in advancedGroups" :key="group.key">
|
<div class="group-head">
|
<div>
|
<div class="group-title">{{ group.title }}</div>
|
<div class="group-desc">{{ group.desc }}</div>
|
</div>
|
</div>
|
<div class="config-grid">
|
<div class="config-item" v-for="item in group.items" :key="item.code">
|
<div class="config-name">{{ item.name }}</div>
|
<div class="config-desc">{{ item.desc }}</div>
|
<div class="config-control">
|
<el-input-number
|
v-model="form[item.code]"
|
:min="item.min"
|
:max="item.max"
|
:step="item.step || 1"
|
controls-position="right">
|
</el-input-number>
|
</div>
|
<div class="config-meta">
|
<span class="meta-chip">{{ item.code }}</span>
|
<span class="meta-chip" v-if="item.unit">单位：{{ item.unit }}</span>
|
<span class="meta-chip">范围：{{ item.min }} - {{ item.max }}</span>
|
</div>
|
</div>
|
</div>
|
<div class="section-note" v-if="group.note">{{ group.note }}</div>
|
</div>
|
</el-tab-pane>
|
</el-tabs>
|
</template>
|
</div>
|
</div>
|
</div>
|
|
<script type="text/javascript" src="../../static/js/jquery/jquery-3.3.1.min.js"></script>
|
<script type="text/javascript" src="../../static/vue/js/vue.min.js"></script>
|
<script type="text/javascript" src="../../static/vue/element/element.js"></script>
|
<script type="text/javascript" src="../../static/js/common.js" charset="utf-8"></script>
|
<script type="text/javascript" src="../../static/js/watch/fakeOperationConfig.js" charset="utf-8"></script>
|
</body>
|
</html>
|
