交互诊断页面完成

src/views/InteractiveDiagnosis/components/Chat.vue

@@ -0,0 +1,251 @@
+<template>
+  <div>
+    <!-- 聊天内容 -->
+    <div class="flex flex-col chat-box">
+      <div class="message flex items-center">
+        <div class="header-box">
+          <i class="el-icon-service header-icon"></i>
+        </div>
+        <div class="ml-4">
+          <div class="name mb-2">诊断助手</div>
+          <div class="content p-4">请查看常见问题中是否包含您遇到的问题？</div>
+        </div>
+      </div>
+      <div class="message my-message flex items-center">
+        <div class="my-header-box">
+          <i class="el-icon-s-custom header-icon"></i>
+        </div>
+        <div class="mr-4">
+          <div class="name mb-2">我</div>
+          <div class="content p-4">
+            请查看常见问题中是否包含您遇到的问题？请查看常见
+          </div>
+        </div>
+      </div>
+      <div class="message flex items-center">
+        <div class="header-box">
+          <i class="el-icon-service header-icon"></i>
+        </div>
+        <div class="ml-4">
+          <div class="name mb-2">诊断助手</div>
+          <div class="content p-4">根据您的输入我们判断的故障</div>
+        </div>
+      </div>
+
+      <div class="message flex items-center">
+        <div class="header-box">
+          <i class="el-icon-service header-icon"></i>
+        </div>
+        <div class="ml-4">
+          <div class="name mb-2">诊断助手</div>
+          <div class="content p-4">根据您的输入我们判断的故障</div>
+        </div>
+      </div>
+
+      <div class="message flex items-center">
+        <div class="header-box">
+          <i class="el-icon-service header-icon"></i>
+        </div>
+        <div class="ml-4">
+          <div class="name mb-2">诊断助手</div>
+          <div class="content p-4">根据您的输入我们判断的故障</div>
+        </div>
+      </div>
+
+      <div class="message flex items-center">
+        <div class="header-box">
+          <i class="el-icon-service header-icon"></i>
+        </div>
+        <div class="ml-4">
+          <div class="name mb-2">诊断助手</div>
+          <div class="content p-4">根据您的输入我们判断的故障</div>
+        </div>
+      </div>
+
+      <div class="message flex items-center">
+        <div class="header-box">
+          <i class="el-icon-service header-icon"></i>
+        </div>
+        <div class="ml-4">
+          <div class="name mb-2">诊断助手</div>
+          <div class="content p-4">根据您的输入我们判断的故障</div>
+        </div>
+      </div>
+
+      <div class="message flex items-center">
+        <div class="header-box">
+          <i class="el-icon-service header-icon"></i>
+        </div>
+        <div class="ml-4">
+          <div class="name mb-2">诊断助手</div>
+          <div class="content p-4">根据您的输入我们判断的故障</div>
+        </div>
+      </div>
+
+      <div class="message flex items-center">
+        <div class="header-box">
+          <i class="el-icon-service header-icon"></i>
+        </div>
+        <div class="ml-4">
+          <div class="name mb-2">诊断助手</div>
+          <div class="content p-4">根据您的输入我们判断的故障</div>
+        </div>
+      </div>
+
+      <div class="message flex items-center">
+        <div class="header-box">
+          <i class="el-icon-service header-icon"></i>
+        </div>
+        <div class="ml-4">
+          <div class="name mb-2">诊断助手</div>
+          <div class="content p-4">根据您的输入我们判断的故障</div>
+        </div>
+      </div>
+
+      <div class="message flex items-center">
+        <div class="header-box">
+          <i class="el-icon-service header-icon"></i>
+        </div>
+        <div class="ml-4">
+          <div class="name mb-2">诊断助手</div>
+          <div class="content p-4">根据您的输入我们判断的故障</div>
+        </div>
+      </div>
+      <div class="message flex items-center">
+        <div class="header-box">
+          <i class="el-icon-service header-icon"></i>
+        </div>
+        <div class="ml-4">
+          <div class="name mb-2">诊断助手</div>
+          <div class="content p-4">根据您的输入我们判断的故障</div>
+        </div>
+      </div>
+      <div class="message flex items-center">
+        <div class="header-box">
+          <i class="el-icon-service header-icon"></i>
+        </div>
+        <div class="ml-4">
+          <div class="name mb-2">诊断助手</div>
+          <div class="content p-4">根据您的输入我们判断的故障</div>
+        </div>
+      </div>
+    </div>
+    <!-- 消息发送框 -->
+
+    <div class="send-message-box mt-1 flex items-center">
+      <div class="flex flex-col items-center justify-between pl-4 text-sm">
+        <span>中</span>
+        <span>英</span>
+      </div>
+      <div class="px-3">
+        <i class="el-icon-microphone" style="fontsize: 200%"></i>
+      </div>
+      <div class="flex-1">
+        <el-input
+          style="border: none"
+          v-model="input"
+          placeholder="请输入故障描述"
+        ></el-input>
+      </div>
+      <div>
+        <el-button type="primary">发送</el-button>
+      </div>
+    </div>
+  </div>
+</template>
+<script>
+export default {
+  name: "chat",
+  data() {
+    return {
+      input: "",
+    };
+  },
+};
+</script>
+<style scoped lang="scss">
+.chat-box {
+  max-height: 80vh;
+  //   height: auto;
+  overflow: auto;
+  &::-webkit-scrollbar {
+    // 直接修改样式就可以了
+    width: 1px;
+  }
+  // 	滚动条
+  &::-webkit-scrollbar {
+    width: 8px;
+  }
+  // 滚动条轨道
+  &::-webkit-scrollbar-track {
+    width: 8px;
+    border-radius: 40px;
+    background-color: #eee;
+  }
+  // 滚动条滑块
+  &::-webkit-scrollbar-thumb {
+    border: 5px solid rgb(153, 146, 146);
+    border-radius: 8px;
+  }
+}
+.header-box {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  height: 60px;
+  width: 60px;
+  border-radius: 50%;
+  border: 2px solid #0069d6;
+  .header-icon {
+    font-size: 200%;
+    font-weight: bold;
+    color: #0069d6;
+  }
+}
+.my-header-box {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  height: 60px;
+  width: 60px;
+  border-radius: 50%;
+  border: 2px solid #0069d6;
+  background-color: #0069d6;
+  .header-icon {
+    font-size: 200%;
+    font-weight: bold;
+    color: #fff;
+  }
+}
+.message {
+  margin-top: 20px;
+
+  .name {
+    font-size: 14px;
+    color: #333;
+  }
+  .content {
+    border-radius: 4px;
+    background: #f8f9fb;
+    border: 1px solid #e2e7e9;
+  }
+  &.my-message {
+    .name {
+      display: flex;
+      flex-direction: row-reverse;
+    }
+    flex-direction: row-reverse;
+    display: flex;
+    justify-content: flex-start;
+  }
+}
+.send-message-box {
+  height: 60px;
+  border: 1px solid #eee;
+  border-radius: 10px;
+  // background:red;
+}
+::v-deep .el-input__inner {
+  border: none !important;
+}
+</style>

src/views/InteractiveDiagnosis/components/FaultHelp.vue

@@ -0,0 +1,107 @@
+<template>
+  <div>
+    <el-tabs>
+      <el-tab-pane label="常见问题">
+        <div class="aip-cap">
+          KG01-1000B激光捷联惯组【152Gcp】产品供电电流异常
+        </div>
+        <div class="aip-cap">主被动雷达导引头方位向测角异常质量问题</div>
+        <div class="aip-cap">主被动雷达导引头被动分系统测试异常</div>
+        <div class="aip-cap">主被动雷达导引头自检结果异常</div>
+      </el-tab-pane>
+      <el-tab-pane label="故障单机">
+        <el-tree
+          :data="data"
+          :props="defaultProps"
+          @node-click="handleNodeClick"
+        ></el-tree>
+      </el-tab-pane>
+      <el-tab-pane label="角色管理">
+        <el-empty description="暂无数据"></el-empty>
+      </el-tab-pane>
+    </el-tabs>
+  </div>
+</template>
+<script>
+export default {
+  name: "faultHelp",
+  data() {
+    return {
+      data: [
+        {
+          label: "一级 1",
+          children: [
+            {
+              label: "二级 1-1",
+              children: [
+                {
+                  label: "三级 1-1-1",
+                },
+              ],
+            },
+          ],
+        },
+        {
+          label: "一级 2",
+          children: [
+            {
+              label: "二级 2-1",
+              children: [
+                {
+                  label: "三级 2-1-1",
+                },
+              ],
+            },
+            {
+              label: "二级 2-2",
+              children: [
+                {
+                  label: "三级 2-2-1",
+                },
+              ],
+            },
+          ],
+        },
+        {
+          label: "一级 3",
+          children: [
+            {
+              label: "二级 3-1",
+              children: [
+                {
+                  label: "三级 3-1-1",
+                },
+              ],
+            },
+            {
+              label: "二级 3-2",
+              children: [
+                {
+                  label: "三级 3-2-1",
+                },
+              ],
+            },
+          ],
+        },
+      ],
+      defaultProps: {
+        children: "children",
+        label: "label",
+      },
+    };
+  },
+};
+</script>
+<style scoped lang="scss">
+.aip-cap {
+  margin-top: 20px;
+  padding: 10px;
+  background: #f6f9ff;
+  font-weight: bold;
+  border: 1px solid transparent;
+  cursor: pointer;
+  &:hover {
+    border: 1px solid rgb(88, 122, 207);
+  }
+}
+</style>

src/views/InteractiveDiagnosis/index.vue

@@ -2,32 +2,34 @@
   <div>
     <el-row :gutter="20">
       <el-col :span="12">
-        <el-card></el-card>
+        <el-card>
+          <Chat></Chat>
+        </el-card>
       </el-col>
       <el-col :span="12">
         <el-card>
-          <el-tabs>
-            <el-tab-pane label="用户管理">常见问题</el-tab-pane>
-            <el-tab-pane label="配置管理">故障单机</el-tab-pane>
-            <el-tab-pane label="角色管理">
-              <el-empty description="暂无数据"></el-empty>
-            </el-tab-pane>
-          </el-tabs>
+          <FaultHelp></FaultHelp>
         </el-card>
       </el-col>
     </el-row>
   </div>
 </template>
 <script>
+import FaultHelp from "./components/FaultHelp.vue";
+import Chat from "./components/Chat.vue";
 export default {
-  name: "",
+  name: "interactiveDiagnosis",
+  components: {
+    FaultHelp,
+    Chat,
+  },
   data() {
     return {};
   },
 };
 </script>
 <style scoped lang="scss">
-  ::v-deep .el-card__body{
-    height: calc(100vh - 50px);
-  }
+::v-deep .el-card__body {
+  height: calc(100vh - 50px);
+}
 </style>