故障管理

src/api/fault.js

@@ -0,0 +1,9 @@
+import request from '@/utils/request'
+
+// 登录方法
+export function qFaultCode() {
+  return request({
+    url: '/car/fault/query',
+    method: 'get',
+  })
+}

src/views/fault/faultList.vue

@@ -1,14 +1,98 @@
-<script setup>
-
-</script>
-
 <template>
   <div>
-  <el-button type="warning">按钮</el-button>
-  <img src="https://ts1.cn.mm.bing.net/th/id/R-C.66d7b796377883a92aad65b283ef1f84?rik=sQ%2fKoYAcr%2bOwsw&riu=http%3a%2f%2fwww.quazero.com%2fuploads%2fallimg%2f140305%2f1-140305131415.jpg&ehk=Hxl%2fQ9pbEiuuybrGWTEPJOhvrFK9C3vyCcWicooXfNE%3d&risl=&pid=ImgRaw&r=0">
+    <ul v-if="mm">
+      <li v-for="item in list" :key="item.id">
+        <!-- 这里填充卡片的内容 -->
+        <div class="card">
+          <div class="card-header">
+            <i class="el-icon-user"></i>
+            <span style="color: #1ab394">{{ item.code }}</span>
+          </div>
+          <div class="card-content">
+            <p style="color: #7a6df0">故障码描述：{{  item.name}}</p>
+            <p style="color: #13ce66">可用状态：{{ item.status }}</p>
+          </div>
+          <div class="card-footer">
+            <el-button @click="doEdit(item.id)">编辑信息</el-button>
+            <el-button @click="doDelete(item.id)">删除信息</el-button>
+          </div>
+        </div>
+      </li>
+    </ul>
+    <ul v-else>
+      <li v-for="item in list" :key="item.id">
+        <!-- 这里填充列表的内容 -->
+        <div class="list-item">
+          <span>ID: {{ item.id }}</span>
+          <span>Code: {{ item.code }}</span>
+          <span>Name: {{ item.name }}</span>
+          <span>Status: {{ item.status }}</span>
+        </div>
+      </li>
+    </ul>
+    <button @click="faultCodeQuery">查询</button>
   </div>
 </template>
 
-<style scoped lang="scss">
+<script>
+import { qFaultCode } from "@/api/fault";
+import Layout from "@/layout/index.vue";
 
+export default {
+  name: "Fault",
+  components: { Layout },
+  data() {
+    return {
+      mm: true, // 默认为卡片风格，为false时切换成列表风格
+      list: []
+    };
+  },
+  methods: {
+    // 故障码查询
+    faultCodeQuery() {
+      qFaultCode().then(res => {
+        this.list = res.data;
+      });
+    },
+  },
+  created() {
+    this.faultCodeQuery();
+  }
+};
+</script>
+
+<style scoped lang="scss">
+/* 样式设置 */
+ul {
+  list-style: none;
+  padding: 0;
+  display: flex;
+  flex-wrap: wrap;
+}
+
+li {
+  flex: 0 0 25%; /* 每行显示4个卡片 */
+  margin: 10px;
+}
+
+.card {
+  border: 1px solid #ccc;
+  border-radius: 5px;
+  padding: 10px;
+  margin-bottom: 10px;
+}
+
+.card-header {
+  display: flex;
+  align-items: center;
+}
+
+.card-content {
+  margin-top: 10px;
+}
+
+.card-footer {
+  display: flex;
+  justify-content: space-between;
+}
 </style>