zhouhui.jiang
...@@ -116,7 +116,7 @@ ...@@ -116,7 +116,7 @@
116 <th>异常类型</th> 116 <th>异常类型</th>
117 <th>严重程度</th> 117 <th>严重程度</th>
118 <th class="sortable">日期 ↕️</th> 118 <th class="sortable">日期 ↕️</th>
119 - <th>操作</th> 119 + <th class="action-header">操作</th>
120 </tr> 120 </tr>
121 </thead> 121 </thead>
122 <tbody> 122 <tbody>
...@@ -744,7 +744,7 @@ const handleExport = async () => { ...@@ -744,7 +744,7 @@ const handleExport = async () => {
744 744
745 ElMessage.info('正在导出数据,请稍候...') 745 ElMessage.info('正在导出数据,请稍候...')
746 746
747 - const response = await exceptionWorkorderApi.exportExceptionWorkorders(searchParams.value) 747 + const response = await exceptionWorkorderApi.exportExceptionWorkorders(searchParams)
748 748
749 // 创建下载链接 749 // 创建下载链接
750 const blob = new Blob([response as unknown as BlobPart], { 750 const blob = new Blob([response as unknown as BlobPart], {
...@@ -899,21 +899,20 @@ onMounted(() => { ...@@ -899,21 +899,20 @@ onMounted(() => {
899 899
900 <style scoped> 900 <style scoped>
901 .exception-workorder-container { 901 .exception-workorder-container {
902 - padding: 0px;
903 background: #f5f5f5; 902 background: #f5f5f5;
904 min-height: 100vh; 903 min-height: 100vh;
905 } 904 }
906 905
907 -/* 搜索区域样式 */ 906 +/* 搜索区域 */
908 .search-section { 907 .search-section {
909 background: white; 908 background: white;
910 - padding: 16px 20px; 909 + padding: 16px;
911 border-bottom: 1px solid #e0e0e0; 910 border-bottom: 1px solid #e0e0e0;
912 } 911 }
913 912
914 .search-row { 913 .search-row {
915 display: flex; 914 display: flex;
916 - gap: 25px; 915 + gap: 16px;
917 align-items: center; 916 align-items: center;
918 flex-wrap: wrap; 917 flex-wrap: wrap;
919 margin-bottom: 12px; 918 margin-bottom: 12px;
...@@ -927,127 +926,147 @@ onMounted(() => { ...@@ -927,127 +926,147 @@ onMounted(() => {
927 display: flex; 926 display: flex;
928 align-items: center; 927 align-items: center;
929 gap: 8px; 928 gap: 8px;
930 - flex: 0 0 auto;
931 } 929 }
932 930
933 .search-item label { 931 .search-item label {
934 - color: #666; 932 + font-size: 12px;
935 - font-size: 14px; 933 + color: #333;
936 - width: 90px;
937 white-space: nowrap; 934 white-space: nowrap;
938 - text-align: right;
939 } 935 }
940 936
941 -.search-input { 937 +.search-input, .search-select {
942 - width: 180px; 938 + padding: 6px 8px;
943 - height: 32px; 939 + border: 1px solid #d9d9d9;
944 - border: 1px solid #ddd;
945 border-radius: 4px; 940 border-radius: 4px;
946 - padding: 0 8px; 941 + font-size: 12px;
947 - font-size: 14px; 942 + width: 120px;
948 } 943 }
949 944
950 -.search-select { 945 +.search-input:focus, .search-select:focus {
951 - width: 160px; 946 + outline: none;
952 - height: 32px; 947 + border-color: #1890ff;
953 - border: 1px solid #ddd;
954 - border-radius: 4px;
955 - padding: 0 8px;
956 - font-size: 14px;
957 - background: white;
958 } 948 }
959 949
960 .search-actions { 950 .search-actions {
961 - margin-left: auto;
962 display: flex; 951 display: flex;
963 - gap: 10px; 952 + gap: 8px;
964 } 953 }
965 954
966 -.search-btn, .reset-btn { 955 +.search-btn {
967 - padding: 6px 16px; 956 + background: #1890ff;
957 + color: white;
968 border: none; 958 border: none;
969 - border-radius: 4px; 959 + padding: 4px 8px;
960 + border-radius: 3px;
961 + font-size: 11px;
970 cursor: pointer; 962 cursor: pointer;
971 - font-size: 14px;
972 - height: 32px;
973 } 963 }
974 964
975 -.search-btn { 965 +.search-btn:hover {
976 - background: #007bff; 966 + background: #40a9ff;
977 - color: white;
978 } 967 }
979 968
980 .reset-btn { 969 .reset-btn {
981 - background: #6c757d; 970 + background: #ff7875;
982 color: white; 971 color: white;
972 + border: none;
973 + padding: 4px 8px;
974 + border-radius: 3px;
975 + font-size: 11px;
976 + cursor: pointer;
977 + height: 24px;
978 + display: flex;
979 + align-items: center;
980 +}
981 +
982 +.reset-btn:hover {
983 + background: #ff9c99;
983 } 984 }
984 985
985 -/* 操作按钮区域样式 */ 986 +/* 操作区域 */
986 .action-section { 987 .action-section {
987 background: white; 988 background: white;
988 - padding: 12px 20px 12px 20px; 989 + padding: 12px 16px;
989 border-bottom: 1px solid #e0e0e0; 990 border-bottom: 1px solid #e0e0e0;
990 } 991 }
991 992
992 -.action-section .action-buttons { 993 +.action-buttons {
993 display: flex; 994 display: flex;
994 - gap: 10px; 995 + gap: 6px;
995 - justify-content: flex-start;
996 - align-items: center;
997 - margin: 0;
998 - padding: 0;
999 } 996 }
1000 997
1001 .action-btn { 998 .action-btn {
1002 - padding: 6px 16px; 999 + padding: 4px 8px;
1003 border: none; 1000 border: none;
1004 - border-radius: 4px; 1001 + border-radius: 3px;
1002 + font-size: 11px;
1005 cursor: pointer; 1003 cursor: pointer;
1006 - font-size: 14px; 1004 + transition: all 0.2s;
1007 - height: 32px;
1008 - font-weight: 500;
1009 } 1005 }
1010 1006
1011 .action-btn.primary { 1007 .action-btn.primary {
1012 - background: #007bff; 1008 + background: #1890ff;
1013 color: white; 1009 color: white;
1014 } 1010 }
1015 1011
1012 +.action-btn.primary:hover {
1013 + background: #40a9ff;
1014 +}
1015 +
1016 .action-btn.success { 1016 .action-btn.success {
1017 - background: #28a745; 1017 + background: #52c41a;
1018 color: white; 1018 color: white;
1019 } 1019 }
1020 1020
1021 +.action-btn.success:hover {
1022 + background: #73d13d;
1023 +}
1024 +
1021 .action-btn.secondary { 1025 .action-btn.secondary {
1022 - background: #6c757d; 1026 + background: #52c41a;
1023 color: white; 1027 color: white;
1024 } 1028 }
1025 1029
1026 -/* 表格区域样式 */ 1030 +.action-btn.secondary:hover {
1031 + background: #73d13d;
1032 +}
1033 +
1034 +/* 表格区域 */
1027 .table-section { 1035 .table-section {
1028 background: white; 1036 background: white;
1029 - margin-bottom: 0; 1037 + margin: 16px;
1038 + border-radius: 6px;
1039 + overflow: hidden;
1040 + box-shadow: 0 2px 8px rgba(0,0,0,0.1);
1030 } 1041 }
1031 1042
1032 .table-header { 1043 .table-header {
1033 - padding: 10px 20px; 1044 + padding: 8px 16px;
1034 - border-bottom: 1px solid #eee; 1045 + background: #fafafa;
1046 + border-bottom: 1px solid #e0e0e0;
1035 display: flex; 1047 display: flex;
1036 justify-content: flex-end; 1048 justify-content: flex-end;
1037 } 1049 }
1038 1050
1039 .table-controls { 1051 .table-controls {
1040 display: flex; 1052 display: flex;
1041 - gap: 5px; 1053 + gap: 4px;
1042 } 1054 }
1043 1055
1044 .control-btn { 1056 .control-btn {
1045 - padding: 4px 8px;
1046 - border: 1px solid #ddd;
1047 background: white; 1057 background: white;
1048 - border-radius: 4px; 1058 + border: 1px solid #d9d9d9;
1059 + border-radius: 3px;
1060 + padding: 4px 8px;
1061 + font-size: 11px;
1049 cursor: pointer; 1062 cursor: pointer;
1050 - font-size: 12px; 1063 + transition: all 0.2s;
1064 +}
1065 +
1066 +.control-btn:hover {
1067 + background: #f0f8ff;
1068 + border-color: #1890ff;
1069 + color: #1890ff;
1051 } 1070 }
1052 1071
1053 .table-container { 1072 .table-container {
...@@ -1077,31 +1096,29 @@ onMounted(() => { ...@@ -1077,31 +1096,29 @@ onMounted(() => {
1077 .data-table { 1096 .data-table {
1078 width: 100%; 1097 width: 100%;
1079 border-collapse: collapse; 1098 border-collapse: collapse;
1080 - font-size: 14px;
1081 } 1099 }
1082 1100
1083 -.data-table th { 1101 +.data-table th,
1084 - background: #f8f9fa; 1102 +.data-table td {
1085 - border: 1px solid #ddd; 1103 + padding: 8px 12px;
1086 - padding: 12px 8px;
1087 text-align: left; 1104 text-align: left;
1105 + border-bottom: 1px solid #f0f0f0;
1106 + font-size: 12px;
1107 +}
1108 +
1109 +.data-table th {
1110 + background: #fafafa;
1088 font-weight: 600; 1111 font-weight: 600;
1089 color: #333; 1112 color: #333;
1090 white-space: nowrap; 1113 white-space: nowrap;
1091 } 1114 }
1092 1115
1093 -.data-table td { 1116 +.data-table th.action-header {
1094 - border: 1px solid #ddd; 1117 + text-align: center;
1095 - padding: 12px 8px;
1096 - vertical-align: middle;
1097 -}
1098 -
1099 -.data-table tbody tr:nth-child(even) {
1100 - background: #f8f9fa;
1101 } 1118 }
1102 1119
1103 .data-table tbody tr:hover { 1120 .data-table tbody tr:hover {
1104 - background: #e9ecef; 1121 + background: #f5f7fa;
1105 } 1122 }
1106 1123
1107 .sortable { 1124 .sortable {
...@@ -1109,26 +1126,31 @@ onMounted(() => { ...@@ -1109,26 +1126,31 @@ onMounted(() => {
1109 user-select: none; 1126 user-select: none;
1110 } 1127 }
1111 1128
1129 +.table-checkbox {
1130 + width: 14px;
1131 + height: 14px;
1132 + cursor: pointer;
1133 +}
1134 +
1112 .select-all, .row-select { 1135 .select-all, .row-select {
1113 margin: 0; 1136 margin: 0;
1114 } 1137 }
1115 1138
1116 .status-badge, .severity-badge { 1139 .status-badge, .severity-badge {
1117 - padding: 2px 8px; 1140 + padding: 2px 6px;
1118 - border-radius: 12px; 1141 + border-radius: 3px;
1119 - font-size: 12px; 1142 + font-size: 10px;
1120 - font-weight: 500;
1121 display: inline-block; 1143 display: inline-block;
1122 } 1144 }
1123 1145
1124 .status-badge.pending { 1146 .status-badge.pending {
1125 - background: #fff3cd; 1147 + background: #fff7e6;
1126 - color: #856404; 1148 + color: #fa8c16;
1127 } 1149 }
1128 1150
1129 .status-badge.processing { 1151 .status-badge.processing {
1130 - background: #d1ecf1; 1152 + background: #e6f7ff;
1131 - color: #0c5460; 1153 + color: #1890ff;
1132 } 1154 }
1133 1155
1134 .status-badge.resolved { 1156 .status-badge.resolved {
...@@ -1200,24 +1222,24 @@ onMounted(() => { ...@@ -1200,24 +1222,24 @@ onMounted(() => {
1200 /* 表格内操作按钮容器 */ 1222 /* 表格内操作按钮容器 */
1201 .table-actions { 1223 .table-actions {
1202 display: flex; 1224 display: flex;
1203 - gap: 8px; 1225 + gap: 4px;
1204 justify-content: center; 1226 justify-content: center;
1205 align-items: center; 1227 align-items: center;
1206 flex-wrap: wrap; 1228 flex-wrap: wrap;
1207 padding: 0 4px; 1229 padding: 0 4px;
1208 } 1230 }
1209 1231
1210 -/* 操作按钮样式 */ 1232 +/* 表格内操作按钮样式 */
1211 -.action-btn { 1233 +.table-actions .action-btn {
1212 - padding: 4px 8px; 1234 + padding: 2px 6px;
1213 - font-size: 12px; 1235 + margin-right: 4px;
1214 - border-radius: 4px; 1236 + border: none;
1215 - font-weight: 500; 1237 + border-radius: 3px;
1216 - min-width: 60px; 1238 + font-size: 10px;
1217 - height: 28px; 1239 + cursor: pointer;
1218 display: inline-flex; 1240 display: inline-flex;
1219 align-items: center; 1241 align-items: center;
1220 - justify-content: center; 1242 + gap: 2px;
1221 white-space: nowrap; 1243 white-space: nowrap;
1222 } 1244 }
1223 1245
...@@ -1228,49 +1250,52 @@ onMounted(() => { ...@@ -1228,49 +1250,52 @@ onMounted(() => {
1228 1250
1229 /* 分页区域样式 */ 1251 /* 分页区域样式 */
1230 .pagination-section { 1252 .pagination-section {
1231 - background: white;
1232 - padding: 12px 20px;
1233 - border-top: 1px solid #e0e0e0;
1234 display: flex; 1253 display: flex;
1235 justify-content: space-between; 1254 justify-content: space-between;
1236 align-items: center; 1255 align-items: center;
1256 + padding: 8px 16px;
1257 + background: #fafafa;
1258 + border-top: 1px solid #e0e0e0;
1237 } 1259 }
1238 1260
1239 .pagination-info { 1261 .pagination-info {
1240 - display: flex; 1262 + font-size: 12px;
1241 - align-items: center;
1242 - gap: 10px;
1243 - font-size: 14px;
1244 color: #666; 1263 color: #666;
1245 } 1264 }
1246 1265
1247 .page-size-select { 1266 .page-size-select {
1248 - height: 28px; 1267 + padding: 4px 8px;
1249 - border: 1px solid #ddd; 1268 + border: 1px solid #d9d9d9;
1250 border-radius: 4px; 1269 border-radius: 4px;
1251 - padding: 0 8px; 1270 + font-size: 12px;
1252 - font-size: 14px; 1271 + background: white;
1272 + cursor: pointer;
1253 } 1273 }
1254 1274
1255 .pagination-controls { 1275 .pagination-controls {
1256 display: flex; 1276 display: flex;
1257 align-items: center; 1277 align-items: center;
1258 gap: 8px; 1278 gap: 8px;
1259 - font-size: 14px;
1260 } 1279 }
1261 1280
1262 .page-btn { 1281 .page-btn {
1263 - padding: 4px 12px; 1282 + padding: 4px 8px;
1264 - border: 1px solid #ddd; 1283 + border: 1px solid #d9d9d9;
1284 + border-radius: 3px;
1265 background: white; 1285 background: white;
1266 - border-radius: 4px;
1267 cursor: pointer; 1286 cursor: pointer;
1268 - font-size: 14px; 1287 + font-size: 11px;
1288 + transition: all 0.2s;
1289 +}
1290 +
1291 +.page-btn:hover:not(:disabled) {
1292 + background: #f0f8ff;
1293 + border-color: #1890ff;
1294 + color: #1890ff;
1269 } 1295 }
1270 1296
1271 .page-btn:disabled { 1297 .page-btn:disabled {
1272 - background: #f8f9fa; 1298 + opacity: 0.5;
1273 - color: #6c757d;
1274 cursor: not-allowed; 1299 cursor: not-allowed;
1275 } 1300 }
1276 1301
......
This diff is collapsed. Click to expand it.
This diff is collapsed. Click to expand it.