You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
58 lines
3.1 KiB
58 lines
3.1 KiB
1 month ago
|
<svg width="400" height="300" viewBox="0 0 400 300" xmlns="http://www.w3.org/2000/svg">
|
||
|
|
<rect width="400" height="300" fill="#f5f5f5" rx="10" ry="10"/>
|
||
|
|
|
||
|
|
<!-- 仪表盘背景 -->
|
||
|
|
<circle cx="200" cy="150" r="100" fill="white" stroke="#e8e8e8" stroke-width="2"/>
|
||
|
|
<circle cx="200" cy="150" r="90" fill="#fafafa"/>
|
||
|
|
|
||
|
|
<!-- 刻度 -->
|
||
|
|
<g id="scale">
|
||
|
|
<line x1="200" y1="60" x2="200" y2="70" stroke="#333" stroke-width="2"/>
|
||
|
|
<line x1="265" y1="85" x2="275" y2="95" stroke="#333" stroke-width="2"/>
|
||
|
|
<line x1="285" y1="150" x2="275" y2="150" stroke="#333" stroke-width="2"/>
|
||
|
|
<line x1="265" y1="215" x2="275" y2="205" stroke="#333" stroke-width="2"/>
|
||
|
|
<line x1="200" y1="240" x2="200" y2="230" stroke="#333" stroke-width="2"/>
|
||
|
|
<line x1="135" y1="215" x2="125" y2="205" stroke="#333" stroke-width="2"/>
|
||
|
|
<line x1="115" y1="150" x2="125" y2="150" stroke="#333" stroke-width="2"/>
|
||
|
|
<line x1="135" y1="85" x2="125" y2="95" stroke="#333" stroke-width="2"/>
|
||
|
|
</g>
|
||
|
|
|
||
|
|
<!-- 刻度标签 -->
|
||
|
|
<text x="200" y="50" text-anchor="middle" font-size="14" fill="#666">0</text>
|
||
|
|
<text x="290" y="90" text-anchor="middle" font-size="14" fill="#666">45</text>
|
||
|
|
<text x="290" y="155" text-anchor="middle" font-size="14" fill="#666">90</text>
|
||
|
|
<text x="290" y="215" text-anchor="middle" font-size="14" fill="#666">135</text>
|
||
|
|
<text x="200" y="260" text-anchor="middle" font-size="14" fill="#666">180</text>
|
||
|
|
<text x="110" y="215" text-anchor="middle" font-size="14" fill="#666">225</text>
|
||
|
|
<text x="110" y="155" text-anchor="middle" font-size="14" fill="#666">270</text>
|
||
|
|
<text x="110" y="90" text-anchor="middle" font-size="14" fill="#666">315</text>
|
||
|
|
|
||
|
|
<!-- 指针 -->
|
||
|
|
<g id="pointer-group">
|
||
|
|
<circle cx="200" cy="150" r="8" fill="#1890ff"/>
|
||
|
|
<line id="pointer" x1="200" y1="150" x2="200" y2="70" stroke="#1890ff" stroke-width="3" stroke-linecap="round" transform="rotate(0 200 150)"/>
|
||
|
|
<circle cx="200" cy="150" r="4" fill="#fff"/>
|
||
|
|
</g>
|
||
|
|
|
||
|
|
<!-- 实时数据显示区域 -->
|
||
|
|
<rect x="100" y="220" width="200" height="40" rx="5" ry="5" fill="#e6f7ff" stroke="#91d5ff" stroke-width="1"/>
|
||
|
|
<text x="120" y="245" font-size="16" fill="#333">当前值:</text>
|
||
|
|
<text id="current-value" x="200" y="245" text-anchor="middle" font-size="18" font-weight="bold" fill="#1890ff">0</text>
|
||
|
|
<text x="260" y="245" font-size="16" fill="#333">%</text>
|
||
|
|
|
||
|
|
<!-- 阈值指示器 -->
|
||
|
|
<g id="thresholds">
|
||
|
|
<rect x="50" y="270" width="30" height="20" rx="3" ry="3" fill="#52c41a"/>
|
||
|
|
<text x="65" y="284" text-anchor="middle" font-size="12" fill="white">正常</text>
|
||
|
|
|
||
|
|
<rect x="110" y="270" width="30" height="20" rx="3" ry="3" fill="#faad14"/>
|
||
|
|
<text x="125" y="284" text-anchor="middle" font-size="12" fill="white">警告</text>
|
||
|
|
|
||
|
|
<rect x="170" y="270" width="30" height="20" rx="3" ry="3" fill="#ff4d4f"/>
|
||
|
|
<text x="185" y="284" text-anchor="middle" font-size="12" fill="white">危险</text>
|
||
|
|
|
||
|
|
<!-- 当前状态指示器 -->
|
||
|
|
<rect id="status-indicator" x="250" y="270" width="100" height="20" rx="3" ry="3" fill="#52c41a"/>
|
||
|
|
<text id="status-text" x="300" y="284" text-anchor="middle" font-size="12" fill="white">状态: 正常</text>
|
||
|
|
</g>
|
||
|
|
</svg>
|