Fix Jinja2/Vue delimiter conflict by using ${ } for Vue

templates/index.html

@@ -35,7 +35,7 @@
                      class="p-3 rounded-lg cursor-pointer transition-all border"
                      :class="currentAsset?.id === asset.id ? 'bg-indigo-50 border-indigo-200 text-indigo-700' : 'bg-white border-transparent hover:bg-gray-50'">
                     <div class="flex justify-between items-center mb-1">
-                        <span class="font-medium truncate">{{ asset.name }}</span>
+                        <span class="font-medium truncate">${ asset.name }</span>
                         <span class="w-2 h-2 rounded-full" 
                               :class="{
                                   'bg-green-500': asset.status === 'operational',
@@ -44,8 +44,8 @@
                               }"></span>
                     </div>
                     <div class="text-xs text-gray-500 flex justify-between">
-                        <span>{{ asset.type }}</span>
-                        <span>健康度: {{ asset.health_score }}%</span>
+                        <span>${ asset.type }</span>
+                        <span>健康度: ${ asset.health_score }%</span>
                     </div>
                 </div>
             </div>
@@ -60,7 +60,7 @@
             <!-- Header -->
             <header class="h-16 bg-white border-b border-gray-200 flex justify-between items-center px-8 shadow-sm z-10">
                 <h1 class="text-lg font-semibold text-gray-700">
-                    {{ currentAsset ? currentAsset.name + ' - 仪表盘' : '仪表盘' }}
+                    ${ currentAsset ? currentAsset.name + ' - 仪表盘' : '仪表盘' }
                 </h1>
                 <div class="flex items-center gap-4">
                     <!-- Upload Button -->
@@ -95,7 +95,7 @@
                                       'text-yellow-600': currentAsset.health_score <= 80 && currentAsset.health_score > 50,
                                       'text-red-600': currentAsset.health_score <= 50
                                   }">
-                                {{ currentAsset.health_score }}%
+                                ${ currentAsset.health_score }%
                             </span>
                             <span class="text-sm text-gray-400 mb-1">vs 上周</span>
                         </div>
@@ -108,20 +108,20 @@
                             <span v-if="currentAsset.status === 'operational'" class="text-green-600">运行中</span>
                             <span v-else-if="currentAsset.status === 'warning'" class="text-yellow-600">警告</span>
                             <span v-else-if="currentAsset.status === 'critical'" class="text-red-600">危急</span>
-                            <span v-else>{{ currentAsset.status }}</span>
+                            <span v-else>${ currentAsset.status }</span>
                         </div>
                     </div>
                     
                     <!-- Temp -->
                     <div class="bg-white p-6 rounded-xl shadow-sm border border-gray-100">
                         <div class="text-gray-400 text-xs font-medium uppercase mb-2">平均温度 (Avg Temp)</div>
-                        <div class="text-2xl font-bold">{{ lastTemp }} °C</div>
+                        <div class="text-2xl font-bold">${ lastTemp } °C</div>
                     </div>
                     
                     <!-- Vibration -->
                     <div class="bg-white p-6 rounded-xl shadow-sm border border-gray-100">
                         <div class="text-gray-400 text-xs font-medium uppercase mb-2">峰值振动 (Peak Vib)</div>
-                        <div class="text-2xl font-bold">{{ lastVib }} mm/s</div>
+                        <div class="text-2xl font-bold">${ lastVib } mm/s</div>
                     </div>
                 </div>
 
@@ -155,11 +155,11 @@
                                               'bg-red-100 text-red-700': anomaly.severity === 'critical',
                                               'bg-yellow-100 text-yellow-700': anomaly.severity === 'warning'
                                           }">
-                                        {{ anomaly.severity === 'critical' ? '危急' : (anomaly.severity === 'warning' ? '警告' : anomaly.severity) }}
+                                        ${ anomaly.severity === 'critical' ? '危急' : (anomaly.severity === 'warning' ? '警告' : anomaly.severity) }
                                     </span>
-                                    <span class="ml-2 text-sm text-gray-500">{{ anomaly.timestamp }}</span>
+                                    <span class="ml-2 text-sm text-gray-500">${ anomaly.timestamp }</span>
                                     <div class="mt-1 font-medium text-gray-800">
-                                        {{ anomaly.metric === 'Vibration' ? '振动' : (anomaly.metric === 'Temperature' ? '温度' : anomaly.metric) }} 超出阈值 ({{ anomaly.value }} > {{ anomaly.threshold }})
+                                        ${ anomaly.metric === 'Vibration' ? '振动' : (anomaly.metric === 'Temperature' ? '温度' : anomaly.metric) } ���出阈值 (${ anomaly.value } > ${ anomaly.threshold })
                                     </div>
                                 </div>
                                 <button v-if="!anomaly.diagnosis" 
@@ -167,7 +167,7 @@
                                         class="bg-indigo-600 text-white px-4 py-2 rounded-lg text-sm font-medium hover:bg-indigo-700 transition flex items-center gap-2"
                                         :disabled="diagnosingId === anomaly.id">
                                     <i class="fas fa-stethoscope" :class="{'animate-pulse': diagnosingId === anomaly.id}"></i>
-                                    {{ diagnosingId === anomaly.id ? '分析中...' : 'AI 智能诊断' }}
+                                    ${ diagnosingId === anomaly.id ? '分析中...' : 'AI 智能诊断' }
                                 </button>
                                 <div v-else class="text-right">
                                     <span class="text-xs font-bold text-green-600 border border-green-200 px-2 py-1 rounded bg-green-50">已诊断</span>
@@ -179,11 +179,11 @@
                                 <div class="flex gap-4">
                                     <div class="flex-1">
                                         <div class="text-indigo-800 font-bold mb-1"><i class="fas fa-clipboard-check mr-1"></i> 根因分析 (Root Cause)</div>
-                                        <p class="text-indigo-700 leading-relaxed">{{ anomaly.diagnosis }}</p>
+                                        <p class="text-indigo-700 leading-relaxed">${ anomaly.diagnosis }</p>
                                     </div>
                                     <div class="flex-1 border-l border-indigo-200 pl-4">
                                         <div class="text-indigo-800 font-bold mb-1"><i class="fas fa-tools mr-1"></i> 维修建议 (Recommendation)</div>
-                                        <p class="text-indigo-700 leading-relaxed">{{ anomaly.recommendation }}</p>
+                                        <p class="text-indigo-700 leading-relaxed">${ anomaly.recommendation }</p>
                                     </div>
                                 </div>
                             </div>