介面調整 | 歷史資料:sidebar搜尋篩選 | button-group加上樣式

.env.development

@@ -1,3 +1,3 @@
 VITE_API_BASEURL = "https://ibms-cvilux-api.production.mjmtech.com.tw"
 VITE_FILE_API_BASEURL = "https://cgems.cvilux-group.com:8088"
-VITE_FORGE_BASEURL = "http://localhost:5173"
+VITE_FORGE_BASEURL = "https://cgems.cvilux-group.com:8088/dist"

.env.production

@@ -1,3 +1,3 @@
 VITE_API_BASEURL = "https://ibms-cvilux-api.production.mjmtech.com.tw"
-VITE_FILE_API_BASEURL = "https://ibms-cvilux.production.mjmtech.com.tw"
+VITE_FILE_API_BASEURL = "https://cgems.cvilux-group.com:8088"
-VITE_FORGE_BASEURL = "http://202.39.218.221:8080/file/netzero"
+VITE_FORGE_BASEURL = "https://cgems.cvilux-group.com:8088/dist"

src/assets/index.css

@@ -65,4 +65,16 @@
   .btn-text-without-border {
     @apply active:border-0 focus:border-0 focus-visible:border-0 active:outline-none focus:outline-none focus-visible:outline-none;
   }
+
+  .btn-add {
+    @apply text-white border border-cyan-400 bg-cyan-400 hover:bg-[theme("colors.cyan.500")]
+  }
+
+  .btn-search {
+    @apply text-white border border-sky-400 bg-sky-400 hover:bg-[theme("colors.sky.500")]
+  }
+
+  .btn-export {
+    @apply text-white border border-emerald-400 bg-emerald-400 hover:bg-[theme("colors.emerald.500")]
+  }
 }

src/components/customUI/ButtonGroup.vue

@@ -5,24 +5,40 @@ import { twMerge } from "tailwind-merge";
 const props = defineProps({
   items: Array,
   withLine: Boolean,
+  withBtnClass: { type: Boolean, default: false },
   // this is for change active button
   onclick: Function,
-  className: String
+  className: String,
 });
 </script>
 
 <template>
   <div class="flex flex-wrap text-white items-center">
-    <button v-for="item in items" :class="twMerge(
+    <button
-      'btn my-1',
+      v-for="item in items"
-      item.active ? 'btn-success' : 'btn-outline-success',
+      :class="
-      withLine ? 'line' : 'mx-2 first:ml-0 ',
+        twMerge(
-      className
+          'btn my-1',
-    )
+          withBtnClass
-      " :disabled="item.disabled" :key="item.key" @click.stop.prevent="(e) => {
+            ? item.btn
+            : item.active
+            ? 'btn-success'
+            : 'btn-outline-success',
+          withLine ? 'line' : 'mx-2 first:ml-0 ',
+          className
+        )
+      "
+      :disabled="item.disabled"
+      :key="item.key"
+      @click.stop.prevent="
+        (e) => {
           item.onClick ? item.onClick(e, item) : onclick(e, item);
         }
-        ">
+      "
+    >
+      <span v-if="withBtnClass">
+        <font-awesome-icon :icon="['fas', item.icon]" class=" text-lg" />
+      </span>
       <slot name="buttonContent" v-bind="{ record: item }">
         {{ item.title }}
       </slot>

src/components/customUI/Pagination.vue

@@ -123,7 +123,7 @@ const pageInput = computed(() => {
 
     <span
       v-if="totalPage < 6"
-      class="absolute -bottom-8 -translate-x-1/2 text-base text-center"
+      class="absolute -bottom-8 text-base text-center"
     >
       {{ dataSource.length }} {{ $t("table.in_otal") }}</span
     >

src/components/customUI/Table.vue

@@ -161,7 +161,7 @@ watch(
   <div :class="withStyle ? 'content-box' : 'py-5'">
     <div class="content-decoration">
       <slot name="beforeTable"></slot>
-      <form ref="form">
+      <form ref="form " class="overflow-x-auto">
         <table
           :class="
             twMerge(
@@ -322,14 +322,17 @@ watch(
 <style lang="css" scoped>
 /**資料框**/
 .content-box {
-  @apply border border-info p-1 relative mb-4 bg-transparent;
+  @apply border border-info p-1 relative mb-4 bg-transparent ;
 }
 
 .content-box .table {
   @apply rounded-none;
 }
 
-.table th,
+.table th {
+  @apply bg-cyan-600 bg-opacity-30 border-r border-b border-white text-lg font-semibold text-white text-center px-2 py-3;
+}
+
 .table td {
   @apply border-r border-b border-white text-lg font-semibold text-white text-center px-2 py-3;
 }

src/components/navbar/NavbarItem.vue

@@ -5,10 +5,13 @@ import { getAuth, getAllSysSidebar } from "@/apis/building";
 import useBuildingStore from "@/stores/useBuildingStore";
 import useUserInfoStore from "@/stores/useUserInfoStore";
 import { useI18n } from "vue-i18n";
+import { useRoute } from "vue-router";
+import { twMerge } from "tailwind-merge";
+
 const { locale } = useI18n();
 const store = useUserInfoStore();
 const buildingStore = useBuildingStore();
-
+const route = useRoute();
 const openKeys = ref([]); // 追蹤當前打開的子菜單
 
 const iniFroList = async () => {
@@ -18,9 +21,9 @@ const iniFroList = async () => {
     res.data.map((d) =>
       AUTHPAGES.find(({ authCode }) => authCode === d.authCode)
         ? {
-          ...d,
+            ...d,
-          ...AUTHPAGES.find(({ authCode }) => authCode === d.authCode),
+            ...AUTHPAGES.find(({ authCode }) => authCode === d.authCode),
-        }
+          }
         : d
     )
   );
@@ -71,38 +74,93 @@ onMounted(() => {
 <template>
   <ul class="px-1 menu-box my-2">
     <li class="flex flex-col items-center justify-center">
-      <router-link :to="{ name: 'dashboard' }" class="flex flex-col justify-center items-center btn-group text-white">
+      <router-link
-        <font-awesome-icon :icon="['fas', 'home']" size="2x" class="w-10 m-auto" />
+        :to="{ name: 'dashboard' }"
+        class="flex flex-col justify-center items-center btn-group text-white"
+      >
+        <font-awesome-icon
+          :icon="['fas', 'home']"
+          size="2x"
+          class="w-10 m-auto"
+        />
         {{ $t("home") }}
       </router-link>
     </li>
-    <li v-for="page in authPages" class="flex flex-col items-center justify-center">
+    <li
-      <a v-if="page.authCode === 'PF1'" @click="showDrawer"
+      v-for="page in authPages"
-        class="flex flex-col justify-center items-center btn-group text-white cursor-pointer">
+      class="flex flex-col items-center justify-center"
-        <font-awesome-icon :icon="['fas', page.icon]" size="2x" class="w-10 m-auto" />
+    >
+      <a
+        v-if="page.authCode === 'PF1'"
+        @click="showDrawer"
+        :class="
+          twMerge(
+            'flex flex-col justify-center items-center btn-group text-white cursor-pointer',
+            route.fullPath.includes('/system')
+              ? 'router-link-active router-link-exact-active'
+              : ''
+          )
+        "
+      >
+        <font-awesome-icon
+          :icon="['fas', page.icon]"
+          size="2x"
+          class="w-10 m-auto"
+        />
         {{ page.subName }}
       </a>
-      <router-link v-else :to="page.navigate" type="link"
+      <router-link
-        class="flex flex-col justify-center items-center btn-group text-white">
+        v-else
-        <font-awesome-icon :icon="['fas', page.icon]" size="2x" class="w-10 m-auto" />
+        :to="page.navigate"
+        type="link"
+        class="flex flex-col justify-center items-center btn-group text-white"
+      >
+        <font-awesome-icon
+          :icon="['fas', page.icon]"
+          size="2x"
+          class="w-10 m-auto"
+        />
         {{ page.subName }}
       </router-link>
     </li>
   </ul>
-  <a-drawer :width="250" placement="left" :open="open" :closable="false" @close="onClose" class="sub-drawer"
+  <a-drawer
-    :maskStyle="{ opacity: 0 }" :bodyStyle="{ paddingLeft: 0, paddingRight: 0 }">
+    :width="250"
-    <a-menu mode="inline" theme="dark" class="text-lg bg-transparent" :openKeys="openKeys"
+    placement="left"
-      @openChange="handleOpenChange">
+    :open="open"
-      <a-sub-menu v-for="main in buildingStore.mainSubSys" :key="main.main_system_tag" :title="main.full_name">
+    :closable="false"
-        <a-menu-item v-for="sub in main.history_Sub_systems" :key="sub.sub_system_tag" @click="() => onClose()">
+    @close="onClose"
-          <router-link :to="{
+    class="sub-drawer"
-            name: 'sub_system',
+    :maskStyle="{ opacity: 0 }"
-            params: {
+    :bodyStyle="{ paddingLeft: 0, paddingRight: 0 }"
-              main_system_id: main.main_system_tag,
+  >
-              sub_system_id: sub.sub_system_tag,
+    <a-menu
-              floor_id: 'main'
+      mode="inline"
-            },
+      theme="dark"
-          }">
+      class="text-lg bg-transparent"
+      :openKeys="openKeys"
+      @openChange="handleOpenChange"
+    >
+      <a-sub-menu
+        v-for="main in buildingStore.mainSubSys"
+        :key="main.main_system_tag"
+        :title="main.full_name"
+      >
+        <a-menu-item
+          v-for="sub in main.history_Sub_systems"
+          :key="sub.sub_system_tag"
+          @click="() => onClose()"
+        >
+          <router-link
+            :to="{
+              name: 'sub_system',
+              params: {
+                main_system_id: main.main_system_tag,
+                sub_system_id: sub.sub_system_tag,
+                floor_id: 'main',
+              },
+            }"
+          >
             {{ sub.full_name }}
           </router-link>
         </a-menu-item>
@@ -115,24 +173,13 @@ onMounted(() => {
   color: #93c0dc;
 }
 
-:deep(.ant-menu-submenu-title:active) {
+:deep(.ant-menu-submenu-selected) {
-  color: #35759d !important;
+  .ant-menu-submenu-title {
-  background-color: transparent !important;
+    @apply text-blue-300 ;
-}
-
-:deep .ant-menu-item:not(.ant-menu-item-selected) {
-  &::before {
-    @apply absolute w-[15px] h-[15px] bottom-3.5 left-7 bg-no-repeat z-10 grayscale;
-    content: "";
-    background: url(@ASSET/img/chart-data-background03.svg) center center;
-  }
-
-  &:active {
-    background-color: transparent !important;
   }
 }
 
-:deep .ant-menu-item-selected {
+:deep(.ant-menu-item-selected) {
   @apply bg-transparent relative;
 
   &::before {

src/config/cn.json

@@ -180,7 +180,8 @@
     "new_category": "新类别",
     "index": "编号",
     "oriOrgName": "档案",
-    "operation": "功能"
+    "operation": "功能",
+    "upload": "图资上传"
   },
   "assetManagement": {
     "title": "资产管理",

src/config/tw.json

@@ -180,7 +180,8 @@
     "new_category": "新類別",
     "index": "編號",
     "oriOrgName": "檔案",
-    "operation": "功能"
+    "operation": "功能",
+    "upload": "圖資上傳"
   },
   "assetManagement": {
     "title": "資產管理",

src/config/us.json

@@ -22,9 +22,9 @@
     "category": "Category",
     "value": "Value",
     "date": "Record Time",
-    "point": "Point",
+    "point": "Character",
     "combinations": "Common combinations",
-    "date_range": "Date range",
+    "date_range": "Date Range",
     "time_range": "Time interval",
     "start_date": "Start date",
     "start_time": "Start time",
@@ -73,26 +73,26 @@
     "confirm": "Confirm"
   },
   "alert": {
-    "query_title": "Alarm record query",
+    "query_title": "Alarm Record Query",
-    "setting_title": "Alarm settings",
+    "setting_title": "Alarm Settings",
-    "offnormal": "off normal",
+    "offnormal": "Off Normal",
-    "normal": "normal",
+    "normal": "Normal",
-    "unacked": "unacked",
+    "unacked": "Unacked",
-    "acked": "acked",
+    "acked": "Acked",
-    "30days": "Last 30 days",
+    "30days": "Last 30 Days",
-    "start_date": "Start date",
+    "start_date": "Start Date",
-    "end_date": "End date",
+    "end_date": "End Date",
-    "building_and_floor": "Building - floor",
+    "building_and_floor": "Building - Floor",
     "uuid": "Exception ID",
     "alarmClass": "Exception Category",
-    "device_name": "Device name",
+    "device_name": "Device Name",
-    "device_number": "Device number",
+    "device_number": "Device Number",
-    "date": "Occurrence date",
+    "date": "Occurrence Date",
-    "time": "Occurrence time",
+    "time": "Occurrence Time",
-    "error_msg": "Abnormal cause",
+    "error_msg": "Abnormal Cause",
     "ack_state": "Ack Confirm",
-    "repair_order_number": "Repair order number",
+    "repair_order_number": "Repair Order Number",
-    "repair_order": "Repair order",
+    "repair_order": "Repair Order",
     "form_number": "Form Number",
     "start_time": "Estimated Start Time",
     "item": "Item",
@@ -102,59 +102,59 @@
     "repair_item_code": "Repair Item Code (Device Number)",
     "responsible_vendor": "Responsible Vendor",
     "status": "Status",
-    "not_completed": "Not completed",
+    "not_completed": "Not Completed",
     "completed": "Completed",
     "worker_id": "Worker ID",
     "notice": "Notice",
     "result_description": "Result Description",
     "upload_file": "Upload File",
     "enable": "Enable",
-    "not_enabled": "Not enabled",
+    "not_enabled": "Not Enabled",
     "qualifications": "Qualifications",
-    "upper_limit": "Upper limit",
+    "upper_limit": "Upper Limit",
-    "lower_limit": "Lower limit",
+    "lower_limit": "Lower Limit",
-    "highDelay": "Max duration (s)",
+    "highDelay": "Max Duration (s)",
-    "lowDelay": "Min duration (s)",
+    "lowDelay": "Min Duration (s)",
-    "warning_method": "Warning method",
+    "warning_method": "Warning Method",
-    "warning_time": "Warning time",
+    "warning_time": "Warning Time",
     "operation": "Function",
-    "alarm_settings": "Abnormal alarm settings",
+    "alarm_settings": "Abnormal Alarm Settings",
-    "time_setting": "Time setting",
+    "time_setting": "Time Setting",
-    "yes": "yes",
+    "yes": "Yes",
-    "no": "no",
+    "no": "No",
-    "no_notify": "No notification",
+    "no_notify": "No Notification",
     "notify_name": "Name",
-    "notify_phone": "Phone number",
+    "notify_phone": "Phone Number",
-    "notify_email": "email",
+    "notify_email": "Email",
-    "notify_items": "Notification items",
+    "notify_items": "Notification Items",
-    "notify_list": "Notification list",
+    "notify_list": "Notification List",
-    "choose": "choose"
+    "choose": "Choose"
   },
   "operation": {
-    "title": "Operation and maintenance management",
+    "title": "Operation And Maintenance Management",
     "project": "Project",
     "location": "Location",
     "uuid": "Exception ID",
     "form_number": "Form Number",
-    "device_name": "Device name",
+    "device_name": "Device Name",
     "status": "Status",
     "staff": "Staff",
-    "start_time": "Estimated start time",
+    "start_time": "Estimated Start Time",
-    "upload": "File upload",
+    "upload": "File Upload",
-    "finish_time": "Completion time",
+    "finish_time": "Completion Time",
     "operation": "Function",
-    "vendor": "company",
+    "vendor": "Company",
-    "contact_person": "Contact person",
+    "contact_person": "Contact Person",
     "phone": "Phone",
-    "email": "email",
+    "email": "Email",
-    "created_at": "Creation date",
+    "created_at": "Creation Date",
-    "maintainance": "Maintainance",
+    "maintenance": "Maintenance",
     "repair": "Repair",
     "company_info": "Company Info",
     "repair_item": "Repair Item",
     "repair_item_code": "Repair Item Code (Device Number)",
     "responsible_vendor": "Responsible Vendor",
-    "not_completed": "Not completed",
+    "not_completed": "Not Completed",
     "completed": "Completed",
     "worker_id": "Worker ID",
     "notice": "Notice",
@@ -163,36 +163,37 @@
     "name": "Name",
     "city": "City",
     "address": "Address",
-    "tax_id_number": "tax ID number",
+    "tax_id_number": "Tax ID Number",
     "remark": "Remark",
     "date": "Date",
-    "serial": "Order number",
+    "serial": "Order Number",
     "today": "Today",
     "yesterday": "Yesterday",
-    "start_created_at": "Start date",
+    "start_created_at": "Start Date",
-    "end_created_at": "End date",
+    "end_created_at": "End Date",
     "enter_text": "Please enter text",
     "enter_serial": "Please enter the order number"
   },
   "graphManagement": {
-    "title": "Data and Publication Management",
+    "title": "Data And Publication Management",
     "category": "Category",
-    "new_category": "New category",
+    "new_category": "New Category",
-    "index": "serial number",
+    "index": "Serial Number",
-    "oriOrgName": "file",
+    "oriOrgName": "File",
-    "operation": "Function"
+    "operation": "Function",
+    "upload": "Upload"
   },
   "assetManagement": {
     "title": "Asset Management",
-    "add_category": "Add category",
+    "add_category": "Add Category",
     "system_name": "Name",
     "system_value": "Code",
     "system_parent": "Category",
-    "device_number": "Device number",
+    "device_number": "Device Number",
-    "device_name": "Device name",
+    "device_name": "Device Name",
-    "asset_number": "Asset number",
+    "asset_number": "Asset Number",
     "floor": "Location",
-    "add_floor": "Add floor",
+    "add_floor": "Add Floor",
     "add_floor_text": "Floor map must be uploaded first",
     "device_coordinate": "Coordinate",
     "brand_and_modal": "Brand/Model",
@@ -200,44 +201,44 @@
     "modal": "Model",
     "company_and_contact": "Company/Contact Person",
     "company": "Company",
-    "buying_date": "Purchase time",
+    "buying_date": "Purchase Time",
-    "oriFile": "File upload",
+    "oriFile": "File Upload",
-    "created_at": "Creation time",
+    "created_at": "Creation Time",
     "operation": "Function",
-    "device_list": "Device list",
+    "device_list": "Device List",
-    "edit_device": "Edit device",
+    "edit_device": "Edit Device",
-    "add_device": "Add device",
+    "add_device": "Add Device",
     "operate_text": "Display name",
     "fill_text": "Please fill it in by system personnel",
-    "equipment_point": "Equipment point",
+    "equipment_point": "Equipment Point",
     "point": "Point",
-    "add_sensor": "Add new sensor",
+    "add_sensor": "Add New Sensor",
-    "associated_device": "Associated devices",
+    "associated_device": "Associated Devices",
     "choose": "Choose",
-    "index": "serial number",
+    "index": "Serial Number",
-    "floor_plan": "Floor plan"
+    "floor_plan": "Floor Plan"
   },
   "accountManagement": {
     "account_title": "Account Management",
     "role_title": "Role Management",
-    "index": "serial number",
+    "index": "Serial Number",
     "name": "Name",
     "account": "Account",
     "password": "Password",
     "role": "Role",
-    "role_name": "Role name",
+    "role_name": "Role Name",
-    "role_permissions": "Role permissions",
+    "role_permissions": "Role Permissions",
-    "role_permissions_setting": "Role permissions settings",
+    "role_permissions_setting": "Role Permissions Settings",
-    "permission_name": "Permission name",
+    "permission_name": "Permission Name",
-    "basic_permissions": "Basic permissions",
+    "basic_permissions": "Basic Ppermissions",
-    "production_permissions": "Production setting permissions",
+    "production_permissions": "Production Setting Permissions",
-    "email": "email",
+    "email": "Email",
     "phone": "Phone",
-    "created_at": "Created time",
+    "created_at": "Created Time",
     "operation": "Function",
     "name_placeholder": "Please enter user name",
     "role_placeholder": "Please enter the role name",
-    "change_password": "Change password",
+    "change_password": "Change Password",
     "choose": "Choose"
   },
   "button": {

src/fontawsomeIconRegister.js

@@ -56,7 +56,8 @@ import {
   faWind,
   faEye,
   faEyeSlash,
-  faGlobe
+  faGlobe,
+  faDownload
 } from "@fortawesome/free-solid-svg-icons";
 
 /* add icons to the library */
@@ -114,7 +115,8 @@ library.add(
   faWind,
   faEye,
   faEyeSlash,
-  faGlobe
+  faGlobe,
+  faDownload
 );
 
 export default library;

src/views/AssetManagement/components/AssetTableAddModal.vue

@@ -102,7 +102,7 @@ const closeModal = () => {
 </script>
 
 <template>
-  <button class="btn btn-sm btn-success mr-3" @click.stop.prevent="openModal">
+  <button class="btn btn-sm btn-add mr-3" @click.stop.prevent="openModal">
     <font-awesome-icon :icon="['fas', 'plus']" />{{ $t("button.add") }}
   </button>
   <Modal

src/views/AssetManagement/components/AssetTableModalLeftInfo.vue

@@ -193,9 +193,10 @@ const openCompanyAddModal = () => {
     <OperationTableModal type="asset" />
     <button
       type="button"
-      class="btn btn-success btn-sm ml-2 mt-7"
+      class="btn btn-add ml-2 mt-7"
       @click="openCompanyAddModal"
     >
+      <font-awesome-icon :icon="['fas', 'plus']" />
       {{ $t("button.add") }}
     </button>
   </div>

src/views/AssetManagement/components/AssetTableModalLeftInfoIoT.vue

@@ -192,9 +192,10 @@ const deleteItem = (value) => {
       </span>
       <button
         type="button"
-        class="btn btn-sm btn-success"
+        class="btn btn-sm btn-add"
         @click.stop.prevent="openModal"
       >
+      <font-awesome-icon :icon="['fas', 'plus']" />
         {{ $t("assetManagement.add_sensor") }}
       </button>
     </div>

src/views/AssetManagement/components/AssetTableModalRightInfo.vue

@@ -169,11 +169,8 @@ const onCancel = () => {
       >
         <template #topLeft>{{ $t("assetManagement.floor") }}</template>
       </Select>
-      <button
+      <button type="button" class="btn btn-add mt-10 ml-5" @click="openModal">
-        type="button"
+        <font-awesome-icon :icon="['fas', 'plus']" />
-        class="btn btn-success mt-10 ml-5"
-        @click="openModal"
-      >
         {{ $t("assetManagement.add_floor") }}
       </button>
     </div>

src/views/accountManagement/components/Account.vue

@@ -142,13 +142,6 @@ const removeAccount = async (id) => {
   <AccountPasswordModal :reset="resetModalForm" :account="formState" />
   <Table :columns="columns" :dataSource="dataSource" :loading="loading">
     <template #beforeTable>
-      <button
-        class="btn btn-success mr-3"
-        @click.stop.prevent="() => openModal(null)"
-      >
-        <font-awesome-icon :icon="['fas', 'plus']" />
-        {{ $t("button.add") }}
-      </button>
       <div class="flex items-center mb-8">
         <Input
           :placeholder="t('accountManagement.name_placeholder')"
@@ -161,18 +154,21 @@ const removeAccount = async (id) => {
           name="Role_full_name"
           :value="searchData"
         />
-        <button
+        <button class="btn btn-search ml-5" @click.stop.prevent="onSearch">
-          class="btn btn-outline-success ml-5"
+          <font-awesome-icon :icon="['fas', 'search']" />
-          @click.stop.prevent="onSearch"
-        >
           {{ $t("button.search") }}
         </button>
-        <button
+        <button class="btn btn-neutral mx-4" @click.stop.prevent="onReset">
-          class="btn btn-outline-success mx-4"
-          @click.stop.prevent="onReset"
-        >
           {{ $t("button.reset") }}
         </button>
+
+        <button
+          class="btn btn-add ml-10"
+          @click.stop.prevent="() => openModal(null)"
+        >
+          <font-awesome-icon :icon="['fas', 'plus']" />
+          {{ $t("button.add") }}
+        </button>
       </div>
     </template>
     <template #bodyCell="{ record, column, index }">

src/views/accountManagement/components/Role.vue

@@ -102,13 +102,11 @@ const onSearch = () => {
           name="Full_name"
           :value="searchRole"
         />
-        <button
+        <button class="btn btn-search mx-3" @click.stop.prevent="onSearch">
-          class="btn btn-outline-info mx-3"
+          <font-awesome-icon :icon="['fas', 'search']" />
-          @click.stop.prevent="onSearch"
-        >
           {{ $t("button.search") }}
         </button>
-        <button class="btn btn-success ml-10" @click.stop.prevent="add">
+        <button class="btn btn-add ml-10" @click.stop.prevent="add">
           <font-awesome-icon :icon="['fas', 'plus']" /> {{ $t("button.add") }}
         </button>
       </div>

src/views/alert/components/AlertQuery/AlertSearch.vue

@@ -15,7 +15,10 @@ const { search } = inject("alert_table");
       <AlertSearchNormalBtns />
       <AlertSearchAckBtns />
       <AlertSearchTimeRange />
-      <button class="btn btn-success ml-8" @click.stop.prevent="search">{{ $t("button.query")}}</button>
+      <button class="btn btn-search ml-8" @click.stop.prevent="search">
+        <font-awesome-icon :icon="['fas', 'search']" class=" text-lg" />
+        {{ $t("button.search")}}
+      </button>
     </div>
     <div class="w-full flex flex-wrap items-center justify-start">
       <AlertSearchTypesButton />

src/views/alert/components/AlertSetting/AlertNotifyTableAddModal.vue

@@ -88,7 +88,7 @@ const closeModal = () => {
 </script>
 
 <template>
-  <button class="btn btn-sm btn-success mr-3" @click.stop.prevent="openModal">
+  <button class="btn btn-sm btn-add mr-3" @click.stop.prevent="openModal">
     <font-awesome-icon :icon="['fas', 'plus']" />{{ $t("button.add") }}
   </button>
   <Modal

src/views/alert/components/AlertSetting/AlertOutliersTableAddModal.vue

@@ -127,7 +127,7 @@ const closeModal = () => {
 </script>
 
 <template>
-  <button class="btn btn-sm btn-success mr-3" @click.stop.prevent="openModal">
+  <button class="btn btn-sm btn-add mr-3" @click.stop.prevent="openModal">
     <font-awesome-icon :icon="['fas', 'plus']" />{{ $t("button.add") }}
   </button>
   <Modal

src/views/dashboard/components/DashboardSysCard.vue

@@ -1,6 +1,7 @@
 <script setup>
 import { ref } from "vue";
 import { useRouter } from "vue-router";
+import { twMerge } from "tailwind-merge";
 const router = useRouter();
 // 假資料
 const mockData = ref([
@@ -33,42 +34,42 @@ const mockData = ref([
     sub_system_tag: "ECP3",
   },
   {
-    title: "Elevator system",
+    title: "Elevator System",
     icon: "building",
     isError: false,
     main_system_tag: null,
     sub_system_tag: null,
   },
   {
-    title: "High voltage switchboard",
+    title: "High Voltage Switchboard",
     icon: "charging-station",
     isError: false,
     main_system_tag: null,
     sub_system_tag: null,
   },
   {
-    title: "Low voltage switchboard",
+    title: "Low Voltage Switchboard",
     icon: "charging-station",
     isError: false,
     main_system_tag: null,
     sub_system_tag: null,
   },
   {
-    title: "Water supply system",
+    title: "Water Supply System",
     icon: "tint",
     isError: false,
     main_system_tag: null,
     sub_system_tag: null,
   },
   {
-    title: "Sewage and wastewater equipment",
+    title: "Sewage And Wastewater Equipment",
     icon: "water",
     isError: false,
     main_system_tag: null,
     sub_system_tag: null,
   },
   {
-    title: "Emergency generator",
+    title: "Emergency Generator",
     icon: "car-battery",
     isError: false,
     main_system_tag: null,
@@ -82,35 +83,35 @@ const mockData = ref([
     sub_system_tag: null,
   },
   {
-    title: "CCTV system",
+    title: "CCTV System",
     icon: "video",
     isError: false,
     main_system_tag: null,
     sub_system_tag: null,
   },
   {
-    title: "Access control system",
+    title: "Access Control System",
     icon: "door-open",
     isError: false,
     main_system_tag: null,
     sub_system_tag: null,
   },
   {
-    title: "Shutdown system",
+    title: "Shutdown System",
     icon: "car",
     isError: false,
     main_system_tag: null,
     sub_system_tag: null,
   },
   {
-    title: "Emergency rescue system",
+    title: "Emergency Rescue System",
     icon: "exclamation-triangle",
     isError: false,
     main_system_tag: null,
     sub_system_tag: null,
   },
   {
-    title: "Air supply and exhaust system",
+    title: "Air Supply Aand Exhaust System",
     icon: "wind",
     isError: false,
     main_system_tag: null,
@@ -124,7 +125,7 @@ const navigateToSubSystem = (mainSystemId, subSystemId) => {
     params: {
       main_system_id: mainSystemId,
       sub_system_id: subSystemId,
-      floor_id: 'main'
+      floor_id: "main",
     },
   });
 };
@@ -135,10 +136,14 @@ const navigateToSubSystem = (mainSystemId, subSystemId) => {
     <div
       v-for="(item, index) in mockData"
       :key="index"
-      :class="[
+      :class="
-    'w-full sm:w-1/2 lg:w-1/4 relative my-2 cursor-pointer',
+        twMerge(
-    item.sub_system_tag ? '' : 'grayscale opacity-70 cursor-not-allowed'
+          'w-full sm:w-1/2 lg:w-1/4 relative my-2 ',
-  ]"
+          item.sub_system_tag
+            ? 'saturate-200 cursor-pointer text-base'
+            : 'grayscale opacity-70 cursor-not-allowed text-sm'
+        )
+      "
       @click="navigateToSubSystem(item.main_system_tag, item.sub_system_tag)"
     >
       <img
@@ -155,7 +160,9 @@ const navigateToSubSystem = (mainSystemId, subSystemId) => {
           ></FontAwesomeIcon>
         </div>
         <div class="icon-text">
-          <div class="text-slate-300 text-sm">{{ item.title }}</div>
+          <div class="text-slate-300">
+            {{ item.title }}
+          </div>
         </div>
       </div>
     </div>

src/views/graphManagement/components/GraphModal.vue

@@ -8,6 +8,8 @@ import {
   addGraphTableDataWithoutSubSys,
   editGraphTableDataWithoutSubSys,
 } from "@/apis/graph";
+import { useI18n } from "vue-i18n";
+const { t } = useI18n();
 const BASEURL = import.meta.env.VITE_FILE_API_BASEURL;
 
 const props = defineProps({
@@ -121,10 +123,10 @@ watch(
 </script>
 
 <template>
-  <button class="btn btn-success mr-3" @click.stop.prevent="openModal">
+  <button class="btn btn-add mr-3" @click.stop.prevent="openModal">
     <font-awesome-icon :icon="['fas', 'plus']" />{{ $t("button.add") }}
   </button>
-  <Modal id="graph_add_item" title="圖資上傳" :onCancel="onCancel" width="800">
+  <Modal id="graph_add_item" :title="t('graphManagement.upload')" :onCancel="onCancel" width="800">
     <template #modalContent>
       <form ref="form" class="mt-5">
         <div class="mb-2">

src/views/history/components/HistoryActionButton.vue

@@ -76,15 +76,19 @@ const isSearchButtonDisabled = computed(() => {
 
 const submitBtns = computed(() => [
   {
-    title: t("button.query"),
+    title: t("button.search"),
     key: "submit",
     active: false,
     onClick: submit,
+    icon: "search",
+    btn: "btn-search",
     disabled: isSearchButtonDisabled.value,
   },
   {
     title:  t("button.export"),
     key: "export",
+    icon: "download",
+    btn: "btn-export",
     active: false,
     onClick: (e) => submit(e, "export"),
     disabled: isSearchButtonDisabled.value,
@@ -120,7 +124,7 @@ watch(
     status="info"
     :cancel="cancelToastOpen"
   />
-  <ButtonGroup class="ml-5" :items="submitBtns" :withLine="false" />
+  <ButtonGroup class="ml-5" :items="submitBtns" :withLine="false" :withBtnClass="true"/>
 </template>
 
 <style lang="scss" scoped></style>

src/views/history/components/HistorySearchTime.vue

@@ -29,14 +29,14 @@ const initializeItems = () => {
         : true,
       Type: 1,
     },
-    {
+    // {
-      title: t("history.time_range"),
+    //   title: t("history.time_range"),
-      key: "startMonthTime",
+    //   key: "startMonthTime",
-      active: searchParams.value.Type
+    //   active: searchParams.value.Type
-        ? parseInt(searchParams.value.Type) === 2
+    //     ? parseInt(searchParams.value.Type) === 2
-        : false,
+    //     : false,
-      Type: 2,
+    //   Type: 2,
-    },
+    // },
   ]);
 
   itemsForStartTime.value = [

src/views/history/components/HistorySidebar.vue

@@ -10,6 +10,8 @@ const { searchParams, changeParams } = useSearchParam();
 
 const selectedBuilding = ref([]);
 const deviceData = ref([]);
+const searchTerm = ref(""); //搜尋文字
+const activeSearchTerm = ref(""); 
 
 const getDeviceData = async (sub_tag, renew) => {
   const res = await getHistorySideBar(sub_tag);
@@ -162,6 +164,28 @@ const changeSelected = (Device_list, renew = false) => {
     });
   }
 };
+
+const filteredDeviceData = computed(() => {
+  if (!activeSearchTerm.value) return deviceData.value;
+  return deviceData.value.map((building) => ({
+    ...building,
+    floors: building.floors.map((floor) => ({
+      ...floor,
+      devices: floor.devices.filter((device) =>
+        device.device_name.includes(activeSearchTerm.value)
+      ),
+    })).filter(floor => floor.devices.length > 0)
+  })).filter(building => building.floors.length > 0);
+});
+
+const handleSearch = (e) => {
+  e.preventDefault();
+  activeSearchTerm.value = searchTerm.value;
+};
+
+const handleInput = (e) => {
+  searchTerm.value = e.target.value;
+};
 </script>
 
 <template>
@@ -175,12 +199,15 @@ const changeSelected = (Device_list, renew = false) => {
       />
       <input
         type="text"
+        :value="searchTerm"
+        @input="handleInput"
         :placeholder="t('button.enter_text')"
         class="text-white bg-transparent w-full"
+        @keyup.enter="handleSearch"
       />
     </label>
     <ul class="menu text-lg">
-      <template v-for="building in deviceData" :key="building.building_tag">
+      <template v-for="building in filteredDeviceData" :key="building.building_tag">
         <li>
           <details :open="selectedBuilding.includes(building.building_tag)">
             <summary>

src/views/operation/components/OperationActionButton.vue

@@ -29,8 +29,10 @@ const exportFile = async () => {
 
 const submitBtns = computed(() => [
   {
-    title: t("button.query"),
+    title: t("button.search"),
     key: "submit",
+    icon: "search",
+    btn: "btn-search",
     active: false,
     onClick: search,
     disabled: isSearchDisabled.value,
@@ -38,6 +40,8 @@ const submitBtns = computed(() => [
   {
     title: t("button.export"),
     key: "export",
+    icon: "download",
+    btn: "btn-export",
     active: false,
     onClick: exportFile,
     disabled: isSearchDisabled.value,
@@ -84,10 +88,11 @@ watch(
   <ButtonGroup
     :items="submitBtns"
     :withLine="false"
+    :withBtnClass="true"
     class="ml-5 mr-8 xl:mr-10"
   />
 
-  <button class="btn btn-info" @click.stop.prevent="() => openModal()">
+  <button class="btn btn-add" @click.stop.prevent="() => openModal()">
     <font-awesome-icon :icon="['fas', 'plus']" />{{ $t("button.add") }}
   </button>
 </template>

src/views/operation/components/OperationSearch.vue

@@ -38,7 +38,7 @@ const setButtonItems = () => {
       params: ["work_type", "sub_system_tag"],
     },
     {
-      title: t('operation.maintainance'),
+      title: t('operation.maintenance'),
       key: "maintain",
       active: searchParams.value.work_type === "1",
       work_type: 1,

src/views/operation/components/OperationTableModal.vue

@@ -229,7 +229,7 @@ watch(
           "work_type"
         )
       ) {
-        const work_types = [t("operation.maintainance"), t("operation.repair")];
+        const work_types = [t("operation.maintenance"), t("operation.repair")];
         formState.value[searchParams.value?.work_type - 1].work_type =
           searchParams.value.work_type;
         formState.value[searchParams.value?.work_type - 1].work_type_name =