feat: 引入elementui部分组件

package.json

@@ -14,6 +14,7 @@
     "axios": "^1.7.9",
     "core-js": "^3.8.3",
     "echarts": "^5.6.0",
+    "element-plus": "^2.9.5",
     "moment": "^2.30.1",
     "moment-timezone": "^0.5.47",
     "pinia": "^2.2.2",
@@ -27,7 +28,8 @@
     "@vue/cli-plugin-eslint": "~5.0.0",
     "@vue/cli-service": "~5.0.0",
     "eslint": "^7.32.0",
-    "eslint-plugin-vue": "^8.0.3"
+    "eslint-plugin-vue": "^8.0.3",
+    "vite": "^6.2.1"
   },
   "eslintConfig": {
     "root": true,

src/main.js

@@ -17,6 +17,10 @@ import pinia from './store';
 import * as echarts from 'echarts';
 import MessagePlugin from './plugins/message';
 
+// element-plus
+import ElementPlus from 'element-plus'
+import 'element-plus/dist/index.css'
+
 // ix-siemens
 import '@siemens/ix/dist/siemens-ix/siemens-ix.css';
 import { ixPlugin } from '@siemens/ix-vue';
@@ -27,4 +31,4 @@ const app = createApp(App);
 app.config.globalProperties.$echarts = echarts;
 
 // 使用use将文件挂载上去
-app.use(router).use(pinia).use(ixPlugin).use(MessagePlugin).mount('#app');
+app.use(router).use(pinia).use(ixPlugin).use(ElementPlus).use(MessagePlugin).mount('#app');

src/stores/alarmStore.js

@@ -0,0 +1,15 @@
+import { defineStore } from 'pinia';
+import { ref } from 'vue';
+
+export const useAlarmStore = defineStore('alarm', () => {
+    const alarmCount = ref(0);
+
+    const setAlarmCount = (count) => {
+        alarmCount.value = count;
+    };
+
+    return {
+        alarmCount,
+        setAlarmCount
+    };
+});

src/views/Dashboard/index.vue

@@ -322,6 +322,7 @@ import { ref, onMounted, getCurrentInstance, onUnmounted, defineEmits } from 'vu
 import { IxChip, IxButton, IxDropdown, IxDropdownItem, IxDropdownHeader, IxDivider, IxTabItem, IxTabs } from '@siemens/ix-vue'; // 引入 Chip 组件
 import { getCurrentReport, getHistoryReport, getGanttData, getStopReason, setStopReason } from '@/api/dashboard.js';
 import ProcessGanttChart from '@/components/ProcessGanttChart.vue'
+import { useAlarmStore } from '@/stores/alarmStore'; // 引入 alarmStore
 
 const emit = defineEmits(['send-data']);
 
@@ -409,6 +410,17 @@ const showOtherReasonInput = ref(false);
 const otherReason = ref('');
 const stopReasons = ref([]); // 新增响应式变量
 
+const alarmStore = useAlarmStore(); // 使用 alarmStore
+
+const alarmCount = ref(0); // 新增报警计数
+
+// 更新报警计数的函数
+const updateAlarmCount = () => {
+    alarmCount.value = progressList.value.filter(item => item.rate < 10).length +
+                       innerProgressList.value.filter(item => item.rate > 90).length;
+    alarmStore.setAlarmCount(alarmCount.value); // 更新 alarmStore 中的报警计数
+};
+
 // 方法
 const removeStatus = (id) => {
     statuses.value = statuses.value.filter(status => status.id !== id);
@@ -612,6 +624,7 @@ const updateData = (processedData) => {
         };
     }
     if (processedData === undefined) showWarningMessage("未查询到主数据！");
+    updateAlarmCount(); // 更新报警计数
 };
 
 // 读取接口数据

src/views/layout/vueLayout.vue

@@ -4,8 +4,10 @@
       <!-- 添加实时显示时间 -->
       <div v-if="appSwitchConfig.currentAppId === 'mis-app'" class="time-display">{{ currentTime }}</div>
 
-      <!-- 确保图标按钮正确显示 -->
-      <IxIconButton v-if="appSwitchConfig.currentAppId === 'mis-app'" icon="alarm-bell-filled" variant="secondary" ghost></IxIconButton>
+      <!-- 确保图标按钮正确显示 -->      
+      <el-badge v-if="appSwitchConfig.currentAppId === 'mis-app'" :value="alarmCount" class="item">
+        <IxIconButton icon="alarm-bell-filled" variant="secondary" ghost></IxIconButton>
+      </el-badge>
       <IxIconButton v-if="appSwitchConfig.currentAppId === 'mis-app'" icon="calendar-filled" variant="secondary" ghost @click="toggleDatetimePicker"></IxIconButton>
       <IxIconButton v-if="appSwitchConfig.currentAppId === 'mis-app'" icon="alarm-clock-filled" variant="secondary" ghost @click="handleReset"></IxIconButton>
     </IxApplicationHeader>
@@ -36,9 +38,12 @@ import {
   IxDatetimePicker,
   IxDatePicker,
 } from '@siemens/ix-vue';
-import { ref, onMounted, onUnmounted, watch } from 'vue';
-import { useRoute } from 'vue-router';
-// 无语，或者直接不用这个
+import { ref, onMounted, onUnmounted, watch, computed } from 'vue';
+import { useAlarmStore } from '@/stores/alarmStore'; // 假设我们有一个 alarmStore
+
+const alarmStore = useAlarmStore(); // 使用 alarmStore
+const alarmCount = computed(() => alarmStore.alarmCount); // 从 alarmStore 中获取报警计数
+
 let appSwitchConfig = {
   i18nAppSwitch: '切换应用',
   i18nLoadingApps: '加载应用中...',
@@ -312,9 +317,13 @@ ix-application {
   /* --theme-color-ghost--selected:#23233C !重要; */
 }
 
-.debug-info {
-  color: red;
-  font-size: 1rem;
-  margin: 0.5rem 1rem;
+.item {
+  margin-right: 0.5rem;
+}
+
+.alarm-count {
+    color: red;
+    font-size: 1.2rem;
+    margin-right: 1rem;
 }
 </style>

vite.config.js

@@ -0,0 +1,14 @@
+import { defineConfig } from 'vite'
+import vue from '@vitejs/plugin-vue'
+
+export default defineConfig({
+  plugins: [vue()], // 移除 ElementPlus 和 Components 插件
+  css: {
+    preprocessorOptions: {
+      scss: {
+        // 保留 SCSS 配置（如果使用了自定义主题）
+        additionalData: `@use "element-plus/theme-chalk/src/index.scss" as *;`
+      }
+    }
+  }
+})