157 lines
7.0 KiB
HTML
157 lines
7.0 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="zh-CN">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
<title>线缆型号语法设置</title>
|
|
<link rel="stylesheet" href="images/YFGZ.css">
|
|
<script src="images/vue.global.prod.js"></script>
|
|
<script src="images/index.full.min.js"></script>
|
|
<link rel="stylesheet" href="images/BJCPJXDR_XHYF.css">
|
|
</head>
|
|
<body>
|
|
<div id="app">
|
|
<div class="syntax-container">
|
|
<header class="syntax-header">
|
|
<div class="header-left">
|
|
<div class="app-icon">
|
|
<i class="el-icon-link"></i>
|
|
</div>
|
|
<div class="app-title">
|
|
<h1>{{title}}</h1>
|
|
</div>
|
|
</div>
|
|
</header>
|
|
|
|
<div class="syntax-body">
|
|
<div class="info-group">
|
|
<div class="info-group-title">
|
|
<h2>标记串</h2>
|
|
</div>
|
|
<div class="input-group">
|
|
<textarea
|
|
v-model="filteredMarkString"
|
|
class="input-field textarea"
|
|
placeholder="例如：[型号码=YJLW][后缀码=03][前缀码=ZC][后缀码=Z]"
|
|
readonly></textarea>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="info-group">
|
|
<div class="info-group-title">
|
|
<h2>语法串</h2>
|
|
</div>
|
|
<div class="input-group">
|
|
<div style="position: relative;">
|
|
<textarea
|
|
ref="syntaxEditor"
|
|
v-model="syntaxString"
|
|
class="input-field textarea"
|
|
placeholder="例如：[前缀码c][型号码a][后缀码b][后缀码d]"
|
|
@click="updateCursorPosition"
|
|
@keyup="updateCursorPosition"
|
|
@input="updateActualValue"></textarea>
|
|
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="info-group">
|
|
<div class="info-group-title">
|
|
<h2>标记控制</h2>
|
|
</div>
|
|
<div class="mark-controls">
|
|
<button class="mark-btn" @click="moveMarkForward">
|
|
<i class="el-icon-back"></i>前移标记字
|
|
</button>
|
|
<button class="mark-btn" @click="moveMarkBackward">
|
|
<i class="el-icon-right"></i>后移标记字
|
|
</button>
|
|
<!-- <button class="mark-btn" @click="openInsertMarkDialog">
|
|
<i class="el-icon-plus"></i>插入标记字
|
|
</button> -->
|
|
<el-popover trigger="hover" @show="openInsertMarkDialog" placement="bottom" :width="300">
|
|
<template #reference>
|
|
<el-button class="mark-btn">
|
|
<i class="el-icon-plus"></i>插入标记字</el-button>
|
|
</template>
|
|
<div class="mark-dialog-body">
|
|
<div class="input-group">
|
|
<div class="mark-options">
|
|
<div
|
|
v-for="(mark, index) in availableMarks"
|
|
:key="index"
|
|
class="mark-option"
|
|
@click="insertSelectedMark(mark)">
|
|
{{ mark }}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</el-popover>
|
|
|
|
<button class="mark-btn" @click="deleteMark">
|
|
<i class="el-icon-delete"></i>删除标记字
|
|
</button>
|
|
<!-- <button class="mark-btn" @click="openInsertConnectorDialog">
|
|
<i class="el-icon-connection"></i>插入链接符
|
|
</button> -->
|
|
|
|
<el-popover placement="bottom" :width="300">
|
|
<template #reference>
|
|
<el-button class="mark-btn">
|
|
<i class="el-icon-plus"></i>插入链接符</el-button>
|
|
</template>
|
|
<div class="mark-dialog-body">
|
|
<div class="input-group">
|
|
<div class="mark-options">
|
|
<div
|
|
v-for="mark in predefinedConnectors"
|
|
class="mark-option"
|
|
@click="insertSelectedConnector(mark)">
|
|
{{ mark }}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</el-popover>
|
|
|
|
<button class="mark-btn" @click="deleteConnector">
|
|
<i class="el-icon-remove"></i>删除链接符
|
|
</button>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="result-display">
|
|
<div class="info-group-title">
|
|
<h2>实际值</h2>
|
|
</div>
|
|
|
|
<div class="result-item">
|
|
<div class="result-label">当前实际值</div>
|
|
<div class="result-value">
|
|
<span class="highlight">{{ actualValue || '待生成...' }}</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="action-buttons">
|
|
<button class="action-btn btn-default" @click="resetForm">
|
|
<i class="el-icon-refresh"></i> 重置
|
|
</button>
|
|
<button class="action-btn btn-primary" @click="saveSyntax">
|
|
<i class="el-icon-document-checked"></i> 保存
|
|
</button>
|
|
</div>
|
|
</div>
|
|
|
|
</div>
|
|
|
|
<!-- 插入标记字对话框 -->
|
|
|
|
|
|
</div>
|
|
<script src='images/BJCPJXDR_XHYF.js?ver=<%=GThinking.N_MISPROAS.Web.ResFile.GetVer("Q_YCGL8") %>'></script>
|
|
<script>
|
|
</body>
|
|
</html> |