From 852d952d77a36558834ede626aefceb6bf7f9067 Mon Sep 17 00:00:00 2001
From: Wangxin <wangxin@icanag.com>
Date: Wed, 10 Sep 2025 11:15:46 +0800
Subject: [PATCH] =?UTF-8?q?=E3=80=90web=E3=80=91=20=E9=97=AE=E7=AD=94?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../alops-ui/src/components/Qa/index.vue      | 261 +++++++
 .../src/views/QandA/Aiassistant/index.vue     | 728 ++++++------------
 .../src/views/QandA/Aiassistant/index2.vue    | 272 +++++++
 ALOps_sys_fe/alops-ui/src/views/index.vue     | 264 ++++---
 4 files changed, 940 insertions(+), 585 deletions(-)
 create mode 100644 ALOps_sys_fe/alops-ui/src/components/Qa/index.vue
 create mode 100644 ALOps_sys_fe/alops-ui/src/views/QandA/Aiassistant/index2.vue

diff --git a/ALOps_sys_fe/alops-ui/src/components/Qa/index.vue b/ALOps_sys_fe/alops-ui/src/components/Qa/index.vue
new file mode 100644
index 00000000..b9c9a318
--- /dev/null
+++ b/ALOps_sys_fe/alops-ui/src/components/Qa/index.vue
@@ -0,0 +1,261 @@
+<template>
+
+  <div id="app">
+    <el-card class="customer-service">
+      <!-- 客服头部 -->
+      <div class="service-header">
+        <h2>智能客服</h2>
+        <p>您好，我是智能助手，很高兴为您服务</p>
+      </div>
+      
+      <div class="service-container">
+        <!-- 左侧常见问题 -->
+        <div class="faq-section">
+          <h3>常见问题</h3>
+          <div 
+            v-for="(faq, index) in faqs" 
+            :key="index" 
+            class="faq-item"
+            @click="selectFaq(faq)"
+          >
+            {{ faq.question }}
+          </div>
+        </div>
+        
+        <!-- 右侧聊天区域 -->
+        <div class="chat-section">
+          <div class="chat-messages" ref="messagesContainer">
+            <div 
+              v-for="(message, index) in messages" 
+              :key="index" 
+              :class="['message', message.sender]"
+            >
+              <div class="message-content">
+                <div>{{ message.text }}</div>
+                <div class="timestamp">{{ message.time }}</div>
+              </div>
+            </div>
+          </div>
+          
+          <div class="chat-input">
+            <el-input 
+              v-model="newMessage" 
+              placeholder="请输入您的问题..." 
+              @keyup.enter.native="sendMessage"
+            ></el-input>
+            <el-button 
+              type="primary" 
+              @click="sendMessage"
+              :disabled="!newMessage.trim()"
+            >发送</el-button>
+          </div>
+        </div>
+      </div>
+    </el-card>
+  </div>
+</template>
+
+<script>
+import { listUser, getUser, delUser, addUser, updateUser, resetUserPwd, changeUserStatus, deptTreeSelect } from "@/api/inMonitoring/assessment"
+import { getToken } from "@/utils/auth"
+import Treeselect from "@riophae/vue-treeselect"
+import "@riophae/vue-treeselect/dist/vue-treeselect.css"
+import { Splitpanes, Pane } from "splitpanes"
+import "splitpanes/dist/splitpanes.css"
+
+export default {
+  name: "User",
+  dicts: ['sys_normal_disable', 'sys_user_sex'],
+  components: { Treeselect, Splitpanes, Pane },
+  data() {
+    return {
+      newMessage: '',
+      messages: [
+    {
+      text: '您好！我是智能客服，请问有什么可以帮您？',
+      sender: 'service',
+      time: this.formatTime(new Date())
+    }
+      ],
+      faqs: [
+        { question: '如何查询订单状态？', answer: '您可以在"我的订单"页面查看订单的当前状态和物流信息。' },
+        { question: '如何办理退货？', answer: '请在订单详情页点击"申请退货"，填写相关信息后提交申请。' },
+        { question: '支付方式有哪些？', answer: '我们支持支付宝、微信支付、银联等多种支付方式。' },
+        { question: '会员有哪些优惠？', answer: '会员可享受购物折扣、专属优惠券、生日特权等多重优惠。' },
+        { question: '商品何时发货？', answer: '一般情况下，我们会在订单支付成功后24小时内安排发货。' }
+      ]
+    };
+  },mounted() {
+        // 初始化时滚动到底部
+        this.scrollToBottom();
+      },
+      methods: {
+        sendMessage() {
+          if (!this.newMessage.trim()) return;
+          
+          // 添加用户消息
+          this.messages.push({
+            text: this.newMessage,
+            sender: 'customer',
+            time: this.formatTime(new Date())
+          });
+          
+          // 模拟自动回复
+          setTimeout(() => {
+            this.autoReply(this.newMessage);
+          }, 1000);
+          
+          this.newMessage = '';
+        },
+        autoReply(userMessage) {
+          let replyText = '';
+          
+          // 简单关键词匹配回复
+          if (userMessage.includes('订单') || userMessage.includes('物流')) {
+            replyText = '您可以在"我的订单"页面查看订单详情和物流信息。';
+          } else if (userMessage.includes('支付') || userMessage.includes('付款')) {
+            replyText = '我们支持支付宝、微信支付、银联等多种支付方式。';
+          } else if (userMessage.includes('退货') || userMessage.includes('退款')) {
+            replyText = '如需退货退款，请在订单详情页提交申请，客服会尽快处理。';
+          } else if (userMessage.includes('会员') || userMessage.includes('优惠')) {
+            replyText = '会员可享受专属折扣和优惠券，详情请查看会员中心。';
+          } else if (userMessage.includes('发票')) {
+            replyText = '您可以在下单时选择开具发票，我们提供电子发票和纸质发票两种方式。';
+          } else {
+            replyText = '抱歉，我没有完全理解您的问题。您可以尝试联系人工客服获得更详细的帮助。';
+          }
+          
+          // 添加客服回复
+          this.messages.push({
+            text: replyText,
+            sender: 'service',
+            time: this.formatTime(new Date())
+          });
+          
+          // 滚动到底部
+          this.scrollToBottom();
+        },
+        selectFaq(faq) {
+          // 添加用户选择的常见问题
+          this.messages.push({
+            text: faq.question,
+            sender: 'customer',
+            time: this.formatTime(new Date())
+          });
+          
+          // 添加对应的回答
+          setTimeout(() => {
+            this.messages.push({
+              text: faq.answer,
+              sender: 'service',
+              time: this.formatTime(new Date())
+            });
+            this.scrollToBottom();
+          }, 1000);
+        },
+        scrollToBottom() {
+          this.$nextTick(() => {
+            const container = this.$refs.messagesContainer;
+            container.scrollTop = container.scrollHeight;
+          });
+        },
+        formatTime(date) {
+          const hours = date.getHours().toString().padStart(2, '0');
+          const minutes = date.getMinutes().toString().padStart(2, '0');
+          return `${hours}:${minutes}`;
+        }
+      },
+      watch: {
+        messages: {
+          handler() {
+            this.scrollToBottom();
+          },
+          deep: true
+        }
+      }
+}
+</script>
+<style scoped>
+
+    #app {
+      font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
+      margin: 20px;
+    }
+    .customer-service {
+      max-width: 1000px;
+      margin: 0 auto;
+      box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
+      border-radius: 4px;
+    }
+    .service-header {
+      background-color: #409EFF;
+      color: white;
+      padding: 15px 20px;
+      border-top-left-radius: 4px;
+      border-top-right-radius: 4px;
+    }
+    .service-container {
+      display: flex;
+      height: 500px;
+    }
+    .faq-section {
+      width: 30%;
+      border-right: 1px solid #e6e6e6;
+      overflow-y: auto;
+      padding: 15px;
+    }
+    .chat-section {
+      width: 70%;
+      display: flex;
+      flex-direction: column;
+    }
+    .chat-messages {
+      flex: 1;
+      overflow-y: auto;
+      padding: 15px;
+    }
+    .message {
+      margin-bottom: 15px;
+      display: flex;
+    }
+    .message.customer {
+      justify-content: flex-end;
+    }
+    .message-content {
+      max-width: 70%;
+      padding: 10px 15px;
+      border-radius: 4px;
+    }
+    .message.customer .message-content {
+      background-color: #ecf5ff;
+      border: 1px solid #d9ecff;
+    }
+    .message.service .message-content {
+      background-color: #f4f4f5;
+      border: 1px solid #e9e9eb;
+    }
+    .chat-input {
+      padding: 15px;
+      border-top: 1px solid #e6e6e6;
+      display: flex;
+    }
+    .chat-input .el-input {
+      margin-right: 10px;
+    }
+    .faq-item {
+      padding: 10px;
+      margin-bottom: 10px;
+      border-radius: 4px;
+      cursor: pointer;
+      border: 1px solid #ebeef5;
+    }
+    .faq-item:hover {
+      background-color: #f5f7fa;
+    }
+    .timestamp {
+      font-size: 12px;
+      color: #909399;
+      margin-top: 5px;
+      text-align: right;
+    }
+</style>
\ No newline at end of file
diff --git a/ALOps_sys_fe/alops-ui/src/views/QandA/Aiassistant/index.vue b/ALOps_sys_fe/alops-ui/src/views/QandA/Aiassistant/index.vue
index 6582b28d..12316a09 100644
--- a/ALOps_sys_fe/alops-ui/src/views/QandA/Aiassistant/index.vue
+++ b/ALOps_sys_fe/alops-ui/src/views/QandA/Aiassistant/index.vue
@@ -1,174 +1,62 @@
 <template>
-  <div class="app-container">
-    <el-row :gutter="20">
-      <splitpanes :horizontal="this.$store.getters.device === 'mobile'" class="default-theme">
-       
-       
-        <!--类型类型管理-->
-        <pane size="84">
-          <el-col>
-            <el-form :model="queryParams" ref="queryForm" size="small" :inline="true" v-show="showSearch" label-width="68px">
-              <el-form-item label="类型名称" prop="userName">
-                <el-input v-model="queryParams.userName" placeholder="请输入类型名称" clearable style="width: 240px" @keyup.enter.native="handleQuery" />
-              </el-form-item>
-              <el-form-item label="状态" prop="status">
-                <el-select v-model="queryParams.status" placeholder="类型状态" clearable style="width: 240px">
-                  <el-option v-for="dict in dict.type.sys_normal_disable" :key="dict.value" :label="dict.label" :value="dict.value" />
-                </el-select>
-              </el-form-item>
-              <el-form-item label="创建时间">
-                <el-date-picker v-model="dateRange" style="width: 240px" value-format="yyyy-MM-dd" type="daterange" range-separator="-" start-placeholder="开始日期" end-placeholder="结束日期"></el-date-picker>
-              </el-form-item>
-              <el-form-item>
-                <el-button type="primary" icon="el-icon-search" size="mini" @click="handleQuery">搜索</el-button>
-                <el-button icon="el-icon-refresh" size="mini" @click="resetQuery">重置</el-button>
-              </el-form-item>
-            </el-form>
 
-            <el-row :gutter="10" class="mb8">
-              <el-col :span="1.5">
-                <el-button type="primary" plain icon="el-icon-plus" size="mini" @click="handleAdd" v-hasPermi="['device:deviceType:add']">新增</el-button>
-              </el-col>
-              <el-col :span="1.5">
-                <el-button type="success" plain icon="el-icon-edit" size="mini" :disabled="single" @click="handleUpdate" v-hasPermi="['device:deviceType:edit']">修改</el-button>
-              </el-col>
-              <el-col :span="1.5">
-                <el-button type="danger" plain icon="el-icon-delete" size="mini" :disabled="multiple" @click="handleDelete" v-hasPermi="['device:deviceType:remove']">删除</el-button>
-              </el-col>
-              <el-col :span="1.5">
-                <el-button type="info" plain icon="el-icon-upload2" size="mini" @click="handleImport" v-hasPermi="['device:deviceType:import']">导入</el-button>
-              </el-col>
-              <el-col :span="1.5">
-                <el-button type="warning" plain icon="el-icon-download" size="mini" @click="handleExport" v-hasPermi="['device:deviceType:export']">导出</el-button>
-              </el-col>
-              <right-toolbar :showSearch.sync="showSearch" @queryTable="getList" :columns="columns"></right-toolbar>
-            </el-row>
-
-            <el-table v-loading="loading" :data="userList" @selection-change="handleSelectionChange">
-              <el-table-column type="selection" width="50" align="center" />
-              <el-table-column label="类型编号" align="center" key="userId" prop="userId" v-if="columns[0].visible" />
-              <el-table-column label="类型名称" align="center" key="userName" prop="userName" v-if="columns[1].visible" :show-overflow-tooltip="true" />
-              <el-table-column label="状态" align="center" key="status" v-if="columns[5].visible">
-                <template slot-scope="scope">
-                  <el-switch v-model="scope.row.status" active-value="0" inactive-value="1" @change="handleStatusChange(scope.row)"></el-switch>
-                </template>
-              </el-table-column>
-              <el-table-column label="创建时间" align="center" prop="createTime" v-if="columns[6].visible" width="160">
-                <template slot-scope="scope">
-                  <span>{{ parseTime(scope.row.createTime) }}</span>
-                </template>
-              </el-table-column>
-              <el-table-column label="操作" align="center" width="160" class-name="small-padding fixed-width">
-                <template slot-scope="scope" v-if="scope.row.userId !== 1">
-                  <el-button size="mini" type="text" icon="el-icon-edit" @click="handleUpdate(scope.row)" v-hasPermi="['device:deviceType:edit']">修改</el-button>
-                  <el-button size="mini" type="text" icon="el-icon-delete" @click="handleDelete(scope.row)" v-hasPermi="['device:deviceType:remove']">删除</el-button>
-                </template>
-              </el-table-column>
-            </el-table>
-
-            <pagination v-show="total > 0" :total="total" :page.sync="queryParams.pageNum" :limit.sync="queryParams.pageSize" @pagination="getList" />
-          </el-col>
-        </pane>
-      </splitpanes>
-    </el-row>
-
-    <el-dialog :title="title" :visible.sync="open" width="760px"  append-to-body>
-  <el-form ref="form" :model="form" :rules="rules" label-width="90px">
-    <el-row :gutter="20">
-      <!-- 类型昵称 + 手机号码 -->
-      <el-col :span="12">
-        <el-form-item label="类型昵称" prop="nickName">
-          <el-input v-model="form.nickName" placeholder="请输入类型昵称" maxlength="30" />
-        </el-form-item>
-      </el-col>
-      <el-col :span="12">
-        <el-form-item label="手机号码" prop="phonenumber">
-          <el-input v-model="form.phonenumber" placeholder="请输入手机号码" maxlength="11" />
-        </el-form-item>
-      </el-col>
-
-      <!-- 邮箱 + 类型名称 -->
-      <el-col :span="12">
-        <el-form-item label="邮箱" prop="email">
-          <el-input v-model="form.email" placeholder="请输入邮箱" maxlength="50" />
-        </el-form-item>
-      </el-col>
-      <el-col :span="12">
-        <el-form-item v-if="form.userId == undefined" label="类型名称" prop="userName">
-          <el-input v-model="form.userName" placeholder="请输入类型名称" maxlength="30" />
-        </el-form-item>
-      </el-col>
-
-      <!-- 类型密码（仅新增）+ 类型性别 -->
-      <el-col :span="12">
-        <el-form-item v-if="form.userId == undefined" label="类型密码" prop="password">
-          <el-input v-model="form.password" placeholder="请输入类型密码" type="password" maxlength="20" show-password />
-        </el-form-item>
-      </el-col>
-      <el-col :span="12">
-        <el-form-item label="类型性别">
-          <el-select v-model="form.sex" placeholder="请选择性别" style="width: 100%">
-            <el-option v-for="dict in dict.type.sys_user_sex" :key="dict.value" :label="dict.label" :value="dict.value"></el-option>
-          </el-select>
-        </el-form-item>
-      </el-col>
-
-      <!-- 状态 + 角色 -->
-      <el-col :span="12">
-        <el-form-item label="状态">
-          <el-radio-group v-model="form.status">
-            <el-radio v-for="dict in dict.type.sys_normal_disable" :key="dict.value" :label="dict.value">{{ dict.label }}</el-radio>
-          </el-radio-group>
-        </el-form-item>
-      </el-col>
-      <el-col :span="12">
-        <el-form-item label="角色">
-          <el-select v-model="form.roleIds" multiple placeholder="请选择角色" style="width: 100%">
-            <el-option v-for="item in roleOptions" :key="item.roleId" :label="item.roleName" :value="item.roleId" :disabled="item.status == 1"></el-option>
-          </el-select>
-        </el-form-item>
-      </el-col>
-
-      <!-- 备注（单独一行） -->
-      <el-col :span="24">
-        <el-form-item label="备注">
-          <el-input v-model="form.remark" type="textarea" :rows="3" placeholder="请输入内容" />
-        </el-form-item>
-      </el-col>
-    </el-row>
-
-  
-  </el-form>
-   <span slot="footer" class="dialog-footer">
-      <el-button type="primary" @click="submitForm">确 定</el-button>
-      <el-button @click="cancel">取 消</el-button>
-    </span>
-  
-</el-dialog>
-
-    <!-- 类型导入对话框 -->
-    <el-dialog :title="upload.title" :visible.sync="upload.open" width="400px" append-to-body>
-      <el-upload ref="upload" :limit="1" accept=".xlsx, .xls" :headers="upload.headers" :action="upload.url + '?updateSupport=' + upload.updateSupport" :disabled="upload.isUploading" :on-progress="handleFileUploadProgress" :on-success="handleFileSuccess" :auto-upload="false" drag>
-        <i class="el-icon-upload"></i>
-        <div class="el-upload__text">将文件拖到此处，或<em>点击上传</em></div>
-        <div class="el-upload__tip text-center" slot="tip">
-          <div class="el-upload__tip" slot="tip">
-            <el-checkbox v-model="upload.updateSupport" />是否更新已经存在的类型数据
+  <div id="app">
+    <el-card class="customer-service">
+      <!-- 客服头部 -->
+      <div class="service-header">
+        <h2>智能客服</h2>
+        <p>您好，我是智能助手，很高兴为您服务</p>
+      </div>
+      
+      <div class="service-container">
+        <!-- 左侧常见问题 -->
+        <div class="faq-section">
+          <h3>常见问题</h3>
+          <div 
+            v-for="(faq, index) in faqs" 
+            :key="index" 
+            class="faq-item"
+            @click="selectFaq(faq)"
+          >
+            {{ faq.question }}
+          </div>
+        </div>
+        
+        <!-- 右侧聊天区域 -->
+        <div class="chat-section">
+          <div class="chat-messages" ref="messagesContainer">
+            <div 
+              v-for="(message, index) in messages" 
+              :key="index" 
+              :class="['message', message.sender]"
+            >
+              <div class="message-content">
+                <div>{{ message.text }}</div>
+                <div class="timestamp">{{ message.time }}</div>
+              </div>
+            </div>
+          </div>
+          
+          <div class="chat-input">
+            <el-input 
+              v-model="newMessage" 
+              placeholder="请输入您的问题..." 
+              @keyup.enter.native="sendMessage"
+            ></el-input>
+            <el-button 
+              type="primary" 
+              @click="sendMessage"
+              :disabled="!newMessage.trim()"
+            >发送</el-button>
           </div>
-          <span>仅允许导入xls、xlsx格式文件。</span>
-          <el-link type="primary" :underline="false" style="font-size: 12px; vertical-align: baseline" @click="importTemplate">下载模板</el-link>
         </div>
-      </el-upload>
-      <div slot="footer" class="dialog-footer">
-        <el-button type="primary" @click="submitFileForm">确 定</el-button>
-        <el-button @click="upload.open = false">取 消</el-button>
       </div>
-    </el-dialog>
+    </el-card>
   </div>
 </template>
 
 <script>
-import { listUser, getUser, delUser, addUser, updateUser, resetUserPwd, changeUserStatus, deptTreeSelect } from "@/api/system/user"
+import { listUser, getUser, delUser, addUser, updateUser, resetUserPwd, changeUserStatus, deptTreeSelect } from "@/api/inMonitoring/assessment"
 import { getToken } from "@/utils/auth"
 import Treeselect from "@riophae/vue-treeselect"
 import "@riophae/vue-treeselect/dist/vue-treeselect.css"
@@ -181,341 +69,193 @@ export default {
   components: { Treeselect, Splitpanes, Pane },
   data() {
     return {
-      // 遮罩层
-      loading: true,
-      // 选中数组
-      ids: [],
-      // 非单个禁用
-      single: true,
-      // 非多个禁用
-      multiple: true,
-      // 显示搜索条件
-      showSearch: true,
-      // 总条数
-      total: 0,
-      // 类型表格数据
-      userList: null,
-      // 弹出层标题
-      title: "",
-      // 所有部门树选项
-      deptOptions: undefined,
-      // 过滤掉已禁用部门树选项
-      enabledDeptOptions: undefined,
-      // 是否显示弹出层
-      open: false,
-      // 部门名称
-      deptName: undefined,
-      // 默认密码
-      initPassword: undefined,
-      // 日期范围
-      dateRange: [],
-      // 岗位选项
-      postOptions: [],
-      // 角色选项
-      roleOptions: [],
-      // 表单参数
-      form: {},
-      defaultProps: {
-        children: "children",
-        label: "label"
-      },
-      // 类型导入参数
-      upload: {
-        // 是否显示弹出层（类型导入）
-        open: false,
-        // 弹出层标题（类型导入）
-        title: "",
-        // 是否禁用上传
-        isUploading: false,
-        // 是否更新已经存在的类型数据
-        updateSupport: 0,
-        // 设置上传的请求头部
-        headers: { Authorization: "Bearer " + getToken() },
-        // 上传的地址
-        url: process.env.VUE_APP_BASE_API + "/system/user/importData"
-      },
-      // 查询参数
-      queryParams: {
-        pageNum: 1,
-        pageSize: 10,
-        userName: undefined,
-        phonenumber: undefined,
-        status: undefined,
-        deptId: undefined
-      },
-      // 列信息
-    columns: [
-  { key: 0, label: '类型编号', visible: true, showInSelector: true },
-  { key: 1, label: '类型名称', visible: true, showInSelector: true },
-  { key: 2, label: '类型昵称', visible: true, showInSelector: true },
-  { key: 3, label: '部门', visible: false, showInSelector: false }, // 👈 不在显隐选择器中出现
-  { key: 4, label: '手机号码', visible: true, showInSelector: true },
-  { key: 5, label: '状态', visible: true, showInSelector: true },
-  { key: 6, label: '创建时间', visible: true, showInSelector: true }
-],
-
-      // 表单校验
-      rules: {
-        userName: [
-          { required: true, message: "类型名称不能为空", trigger: "blur" },
-          { min: 2, max: 20, message: '类型名称长度必须介于 2 和 20 之间', trigger: 'blur' }
-        ],
-        nickName: [
-          { required: true, message: "类型昵称不能为空", trigger: "blur" }
-        ],
-        password: [
-          { required: true, message: "类型密码不能为空", trigger: "blur" },
-          { min: 5, max: 20, message: '类型密码长度必须介于 5 和 20 之间', trigger: 'blur' },
-          { pattern: /^[^<>"'|\\]+$/, message: "不能包含非法字符：< > \" ' \\\ |", trigger: "blur" }
-        ],
-        email: [
-          {
-            type: "email",
-            message: "请输入正确的邮箱地址",
-            trigger: ["blur", "change"]
-          }
-        ],
-        phonenumber: [
-          {
-            pattern: /^1[3|4|5|6|7|8|9][0-9]\d{8}$/,
-            message: "请输入正确的手机号码",
-            trigger: "blur"
-          }
-        ]
-      }
-    }
-  },
-  watch: {
-    // 根据名称筛选部门树
-    deptName(val) {
-      this.$refs.tree.filter(val)
+      newMessage: '',
+      messages: [
+    {
+      text: '您好！我是智能客服，请问有什么可以帮您？',
+      sender: 'service',
+      time: this.formatTime(new Date())
     }
-  },
-  created() {
-    this.getList()
-    // this.getDeptTree()
-    this.getConfigKey("sys.user.initPassword").then(response => {
-      this.initPassword = response.msg
-    })
-  },
-  methods: {
-    /** 查询类型列表 */
-    getList() {
-      this.loading = true
-      listUser(this.addDateRange(this.queryParams, this.dateRange)).then(response => {
-          this.userList = response.rows
-          this.total = response.total
-          this.loading = false
-        }
-      )
-    },
-    // /** 查询部门下拉树结构 */
-    // getDeptTree() {
-    //   deptTreeSelect().then(response => {
-    //     this.deptOptions = response.data
-    //     this.enabledDeptOptions = this.filterDisabledDept(JSON.parse(JSON.stringify(response.data)))
-    //   })
-    // },
-    // 过滤禁用的部门
-    filterDisabledDept(deptList) {
-      return deptList.filter(dept => {
-        if (dept.disabled) {
-          return false
-        }
-        if (dept.children && dept.children.length) {
-          dept.children = this.filterDisabledDept(dept.children)
-        }
-        return true
-      })
-    },
-    // 筛选节点
-    filterNode(value, data) {
-      if (!value) return true
-      return data.label.indexOf(value) !== -1
-    },
-    // 节点单击事件
-    handleNodeClick(data) {
-      this.queryParams.deptId = data.id
-      this.handleQuery()
-    },
-    // 类型状态修改
-    handleStatusChange(row) {
-      let text = row.status === "0" ? "启用" : "停用"
-      this.$modal.confirm('确认要"' + text + '""' + row.userName + '"类型吗？').then(function() {
-        return changeUserStatus(row.userId, row.status)
-      }).then(() => {
-        this.$modal.msgSuccess(text + "成功")
-      }).catch(function() {
-        row.status = row.status === "0" ? "1" : "0"
-      })
-    },
-    // 取消按钮
-    cancel() {
-      this.open = false
-      this.reset()
-    },
-    // 表单重置
-    reset() {
-      this.form = {
-        userId: undefined,
-        deptId: undefined,
-        userName: undefined,
-        nickName: undefined,
-        password: undefined,
-        phonenumber: undefined,
-        email: undefined,
-        sex: undefined,
-        status: "0",
-        remark: undefined,
-        postIds: [],
-        roleIds: []
-      }
-      this.resetForm("form")
-    },
-    /** 搜索按钮操作 */
-    handleQuery() {
-      this.queryParams.pageNum = 1
-      this.getList()
-    },
-    /** 重置按钮操作 */
-    resetQuery() {
-      this.dateRange = []
-      this.resetForm("queryForm")
-      this.queryParams.deptId = undefined
-      this.$refs.tree.setCurrentKey(null)
-      this.handleQuery()
-    },
-    // 多选框选中数据
-    handleSelectionChange(selection) {
-      this.ids = selection.map(item => item.userId)
-      this.single = selection.length != 1
-      this.multiple = !selection.length
-    },
-    // 更多操作触发
-    handleCommand(command, row) {
-      switch (command) {
-        case "handleResetPwd":
-          this.handleResetPwd(row)
-          break
-        case "handleAuthRole":
-          this.handleAuthRole(row)
-          break
-        default:
-          break
-      }
-    },
-    /** 新增按钮操作 */
-    handleAdd() {
-      this.reset()
-      getUser().then(response => {
-        this.postOptions = response.posts
-        this.roleOptions = response.roles
-        this.open = true
-        this.title = "添加类型"
-        this.form.password = this.initPassword
-      })
-    },
-    /** 修改按钮操作 */
-    handleUpdate(row) {
-      this.reset()
-      const userId = row.userId || this.ids
-      getUser(userId).then(response => {
-        this.form = response.data
-        this.postOptions = response.posts
-        this.roleOptions = response.roles
-        this.$set(this.form, "postIds", response.postIds)
-        this.$set(this.form, "roleIds", response.roleIds)
-        this.open = true
-        this.title = "修改类型"
-        this.form.password = ""
-      })
-    },
-    /** 重置密码按钮操作 */
-    handleResetPwd(row) {
-      this.$prompt('请输入"' + row.userName + '"的新密码', "提示", {
-        confirmButtonText: "确定",
-        cancelButtonText: "取消",
-        closeOnClickModal: false,
-        inputPattern: /^.{5,20}$/,
-        inputErrorMessage: "类型密码长度必须介于 5 和 20 之间",
-        inputValidator: (value) => {
-          if (/<|>|"|'|\||\\/.test(value)) {
-            return "不能包含非法字符：< > \" ' \\\ |"
-          }
+      ],
+      faqs: [
+        { question: '如何查询订单状态？', answer: '您可以在"我的订单"页面查看订单的当前状态和物流信息。' },
+        { question: '如何办理退货？', answer: '请在订单详情页点击"申请退货"，填写相关信息后提交申请。' },
+        { question: '支付方式有哪些？', answer: '我们支持支付宝、微信支付、银联等多种支付方式。' },
+        { question: '会员有哪些优惠？', answer: '会员可享受购物折扣、专属优惠券、生日特权等多重优惠。' },
+        { question: '商品何时发货？', answer: '一般情况下，我们会在订单支付成功后24小时内安排发货。' }
+      ]
+    };
+  },mounted() {
+        // 初始化时滚动到底部
+        this.scrollToBottom();
+      },
+      methods: {
+        sendMessage() {
+          if (!this.newMessage.trim()) return;
+          
+          // 添加用户消息
+          this.messages.push({
+            text: this.newMessage,
+            sender: 'customer',
+            time: this.formatTime(new Date())
+          });
+          
+          // 模拟自动回复
+          setTimeout(() => {
+            this.autoReply(this.newMessage);
+          }, 1000);
+          
+          this.newMessage = '';
         },
-      }).then(({ value }) => {
-          resetUserPwd(row.userId, value).then(response => {
-            this.$modal.msgSuccess("修改成功，新密码是：" + value)
-          })
-        }).catch(() => {})
-    },
-    /** 分配角色操作 */
-    handleAuthRole: function(row) {
-      const userId = row.userId
-      this.$router.push("/system/user-auth/role/" + userId)
-    },
-    /** 提交按钮 */
-    submitForm: function() {
-      this.$refs["form"].validate(valid => {
-        if (valid) {
-          if (this.form.userId != undefined) {
-            updateUser(this.form).then(response => {
-              this.$modal.msgSuccess("修改成功")
-              this.open = false
-              this.getList()
-            })
+        autoReply(userMessage) {
+          let replyText = '';
+          
+          // 简单关键词匹配回复
+          if (userMessage.includes('订单') || userMessage.includes('物流')) {
+            replyText = '您可以在"我的订单"页面查看订单详情和物流信息。';
+          } else if (userMessage.includes('支付') || userMessage.includes('付款')) {
+            replyText = '我们支持支付宝、微信支付、银联等多种支付方式。';
+          } else if (userMessage.includes('退货') || userMessage.includes('退款')) {
+            replyText = '如需退货退款，请在订单详情页提交申请，客服会尽快处理。';
+          } else if (userMessage.includes('会员') || userMessage.includes('优惠')) {
+            replyText = '会员可享受专属折扣和优惠券，详情请查看会员中心。';
+          } else if (userMessage.includes('发票')) {
+            replyText = '您可以在下单时选择开具发票，我们提供电子发票和纸质发票两种方式。';
           } else {
-            addUser(this.form).then(response => {
-              this.$modal.msgSuccess("新增成功")
-              this.open = false
-              this.getList()
-            })
+            replyText = '抱歉，我没有完全理解您的问题。您可以尝试联系人工客服获得更详细的帮助。';
           }
+          
+          // 添加客服回复
+          this.messages.push({
+            text: replyText,
+            sender: 'service',
+            time: this.formatTime(new Date())
+          });
+          
+          // 滚动到底部
+          this.scrollToBottom();
+        },
+        selectFaq(faq) {
+          // 添加用户选择的常见问题
+          this.messages.push({
+            text: faq.question,
+            sender: 'customer',
+            time: this.formatTime(new Date())
+          });
+          
+          // 添加对应的回答
+          setTimeout(() => {
+            this.messages.push({
+              text: faq.answer,
+              sender: 'service',
+              time: this.formatTime(new Date())
+            });
+            this.scrollToBottom();
+          }, 1000);
+        },
+        scrollToBottom() {
+          this.$nextTick(() => {
+            const container = this.$refs.messagesContainer;
+            container.scrollTop = container.scrollHeight;
+          });
+        },
+        formatTime(date) {
+          const hours = date.getHours().toString().padStart(2, '0');
+          const minutes = date.getMinutes().toString().padStart(2, '0');
+          return `${hours}:${minutes}`;
         }
-      })
-    },
-    /** 删除按钮操作 */
-    handleDelete(row) {
-      const userIds = row.userId || this.ids
-      this.$modal.confirm('是否确认删除类型编号为"' + userIds + '"的数据项？').then(function() {
-        return delUser(userIds)
-      }).then(() => {
-        this.getList()
-        this.$modal.msgSuccess("删除成功")
-      }).catch(() => {})
-    },
-    /** 导出按钮操作 */
-    handleExport() {
-      this.download('system/user/export', {
-        ...this.queryParams
-      }, `user_${new Date().getTime()}.xlsx`)
-    },
-    /** 导入按钮操作 */
-    handleImport() {
-      this.upload.title = "类型导入"
-      this.upload.open = true
-    },
-    /** 下载模板操作 */
-    importTemplate() {
-      this.download('system/user/importTemplate', {
-      }, `user_template_${new Date().getTime()}.xlsx`)
-    },
-    // 文件上传中处理
-    handleFileUploadProgress(event, file, fileList) {
-      this.upload.isUploading = true
-    },
-    // 文件上传成功处理
-    handleFileSuccess(response, file, fileList) {
-      this.upload.open = false
-      this.upload.isUploading = false
-      this.$refs.upload.clearFiles()
-      this.$alert("<div style='overflow: auto;overflow-x: hidden;max-height: 70vh;padding: 10px 20px 0;'>" + response.msg + "</div>", "导入结果", { dangerouslyUseHTMLString: true })
-      this.getList()
-    },
-    // 提交上传文件
-    submitFileForm() {
-      this.$refs.upload.submit()
-    }
-  }
+      },
+      watch: {
+        messages: {
+          handler() {
+            this.scrollToBottom();
+          },
+          deep: true
+        }
+      }
 }
-</script>
\ No newline at end of file
+</script>
+<style scoped>
+
+    #app {
+      font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
+      margin: 20px;
+    }
+    .customer-service {
+      /* max-width: 1000px; */
+      margin: 0 auto;
+      box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
+      border-radius: 4px;
+    }
+    .service-header {
+      background-color: #409EFF;
+      color: white;
+      padding: 15px 20px;
+      border-top-left-radius: 4px;
+      border-top-right-radius: 4px;
+    }
+    .service-container {
+      display: flex;
+      min-height: 400px;
+    }
+    .faq-section {
+      width: 30%;
+      border-right: 1px solid #e6e6e6;
+      overflow-y: auto;
+      padding: 15px;
+    }
+    .chat-section {
+      width: 70%;
+      display: flex;
+      flex-direction: column;
+    }
+    .chat-messages {
+      flex: 1;
+      overflow-y: auto;
+      padding: 15px;
+    }
+    .message {
+      margin-bottom: 15px;
+      display: flex;
+    }
+    .message.customer {
+      justify-content: flex-end;
+    }
+    .message-content {
+      max-width: 70%;
+      padding: 10px 15px;
+      border-radius: 4px;
+    }
+    .message.customer .message-content {
+      background-color: #ecf5ff;
+      border: 1px solid #d9ecff;
+    }
+    .message.service .message-content {
+      background-color: #f4f4f5;
+      border: 1px solid #e9e9eb;
+    }
+    .chat-input {
+      padding: 15px;
+      border-top: 1px solid #e6e6e6;
+      display: flex;
+    }
+    .chat-input .el-input {
+      margin-right: 10px;
+    }
+    .faq-item {
+      padding: 10px;
+      margin-bottom: 10px;
+      border-radius: 4px;
+      cursor: pointer;
+      border: 1px solid #ebeef5;
+    }
+    .faq-item:hover {
+      background-color: #f5f7fa;
+    }
+    .timestamp {
+      font-size: 12px;
+      color: #909399;
+      margin-top: 5px;
+      text-align: right;
+    }
+</style>
\ No newline at end of file
diff --git a/ALOps_sys_fe/alops-ui/src/views/QandA/Aiassistant/index2.vue b/ALOps_sys_fe/alops-ui/src/views/QandA/Aiassistant/index2.vue
new file mode 100644
index 00000000..a3e70965
--- /dev/null
+++ b/ALOps_sys_fe/alops-ui/src/views/QandA/Aiassistant/index2.vue
@@ -0,0 +1,272 @@
+<template>
+  <div class="chat-container">
+    <!-- 消息列表区域 -->
+    <el-scrollbar 
+      ref="messageScroll" 
+      class="message-area"
+      @scroll.native="handleScroll">
+      <div 
+        v-for="(msg, index) in messages" 
+        :key="index"
+        :class="['message', msg.sender === 'user' ? 'user-msg' : 'customer-msg']">
+        <el-avatar :size="40" :src="msg.avatar"></el-avatar>
+        <div class="message-content">
+          <div class="sender">{{ msg.sender === 'user' ? '我' : '客服' }}</div>
+          <div class="content">{{ msg.content }}</div>
+          <div class="time">{{ formatTime(msg.timestamp) }}</div>
+        </div>
+      </div>
+      <!-- 加载中提示 -->
+      <div 
+        v-if="loading" 
+        class="loading-indicator">
+        <i class="el-icon-loading"></i> 加载中...
+      </div>
+    </el-scrollbar>
+
+    <!-- 输入区域 -->
+    <div class="input-area">
+      <el-input
+        v-model="inputMessage"
+        type="textarea"
+        placeholder="请输入消息..."
+        @keyup.enter.native="sendMessage"
+        :disabled="!connected">
+      </el-input>
+      <div class="action-buttons">
+        <el-button 
+          type="primary" 
+          @click="sendMessage"
+          :disabled="!connected || !inputMessage.trim()"
+          :loading="sending">
+          发送
+        </el-button>
+        <el-button @click="toggleConnection">
+          {{ connected ? '断开' : '连接' }}
+        </el-button>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+import { Loading } from 'element-ui';
+
+export default {
+  data() {
+    return {
+      messages: [],
+      inputMessage: '',
+      connected: false,
+      loading: false,
+      sending: false,
+      page: 1,
+      pageSize: 20
+    };
+  },
+  mounted() {
+    this.connect();
+    this.scrollToBottom();
+  },
+  methods: {
+    // 连接客服系统
+    connect() {
+      this.connected = true;
+      this.loadMessages();
+    },
+    
+    // 断开连接
+    toggleConnection() {
+      this.connected = !this.connected;
+      if (this.connected) {
+        this.loadMessages();
+      }
+    },
+    
+    // 加载历史消息
+    async loadMessages() {
+      this.loading = true;
+      try {
+        // 模拟API请求
+        const response = await this.mockApiCall();
+        this.messages = response.data;
+        this.page++;
+      } catch (error) {
+        console.error('加载消息失败:', error);
+      } finally {
+        this.loading = false;
+        this.$nextTick(this.scrollToBottom);
+      }
+    },
+    
+    // 发送消息
+    sendMessage() {
+      if (!this.inputMessage.trim()) return;
+      
+      this.sending = true;
+      
+      // 模拟发送延时
+      setTimeout(() => {
+        this.messages.push({
+          sender: 'user',
+          content: this.inputMessage,
+          timestamp: Date.now(),
+          avatar: 'https://via.placeholder.com/40?text=U'
+        });
+        
+        this.inputMessage = '';
+        this.sending = false;
+        this.scrollToBottom();
+        
+        // 模拟客服回复
+        this.simulateCustomerReply();
+      }, 500);
+    },
+    
+    // 模拟客服自动回复
+    simulateCustomerReply() {
+      setTimeout(() => {
+        this.messages.push({
+          sender: 'customer',
+          content: '您好，已收到您的消息，我们会尽快处理',
+          timestamp: Date.now(),
+          avatar: 'https://via.placeholder.com/40?text=C'
+        });
+        this.scrollToBottom();
+      }, 1000);
+    },
+    
+    // 滚动到底部
+    scrollToBottom() {
+      const scrollContainer = this.$refs.messageScroll.$el.querySelector('.el-scrollbar__wrap');
+      if (scrollContainer) {
+        scrollContainer.scrollTop = scrollContainer.scrollHeight;
+      }
+    },
+    
+    // 处理滚动事件
+    handleScroll(e) {
+      const { scrollTop, scrollHeight, clientHeight } = e.target;
+      const scrollBottom = scrollHeight - scrollTop - clientHeight;
+      
+      // 滚动到底部加载更多
+      if (scrollBottom < 50 && !this.loading) {
+        this.loadMoreMessages();
+      }
+    },
+    
+    // 加载更多消息
+    async loadMoreMessages() {
+      this.loading = true;
+      try {
+        // 模拟API请求更多消息
+        const response = await this.mockApiCall(this.page);
+        this.messages = [...response.data, ...this.messages];
+        this.page++;
+      } catch (error) {
+        console.error('加载更多消息失败:', error);
+      } finally {
+        this.loading = false;
+      }
+    },
+    
+    // 格式化时间
+    formatTime(timestamp) {
+      return new Date(timestamp).toLocaleTimeString();
+    },
+    
+    // 模拟API请求
+    mockApiCall(page = 1) {
+      return new Promise((resolve) => {
+        setTimeout(() => {
+          resolve({
+            data: Array(this.pageSize).fill().map((_, i) => ({
+              sender: Math.random() > 0.5 ? 'user' : 'customer',
+              content: `消息 ${(page-1)*this.pageSize + i + 1}`,
+              timestamp: Date.now() - i * 1000,
+              avatar: Math.random() > 0.5 
+                ? 'https://via.placeholder.com/40?text=U' 
+                : 'https://via.placeholder.com/40?text=C'
+            }))
+          });
+        }, 800);
+      });
+    }
+  }
+};
+</script>
+
+<style>
+.chat-container {
+  display: flex;
+  flex-direction: column;
+  height: 100vh;
+  border: 1px solid #ebeef5;
+  border-radius: 4px;
+}
+
+.message-area {
+  flex: 1;
+  padding: 20px;
+  overflow-y: auto;
+}
+
+.message {
+  display: flex;
+  margin-bottom: 20px;
+}
+
+.user-msg {
+  flex-direction: row-reverse;
+}
+
+.customer-msg {
+  flex-direction: row;
+}
+
+.message-content {
+  margin-left: 15px;
+  background: #f0f0f0;
+  padding: 12px;
+  border-radius: 8px;
+  max-width: 80%;
+}
+
+.user-msg .message-content {
+  background: #e1f0ff;
+}
+
+.sender {
+  font-weight: bold;
+  margin-bottom: 5px;
+}
+
+.content {
+  white-space: pre-wrap;
+}
+
+.time {
+  font-size: 0.8em;
+  color: #999;
+  text-align: right;
+  margin-top: 5px;
+}
+
+.input-area {
+  padding: 15px;
+  border-top: 1px solid #ebeef5;
+  background: #fff;
+}
+
+.action-buttons {
+  display: flex;
+  justify-content: flex-end;
+  margin-top: 10px;
+}
+
+.loading-indicator {
+  text-align: center;
+  padding: 15px;
+  color: #999;
+}
+</style>
\ No newline at end of file
diff --git a/ALOps_sys_fe/alops-ui/src/views/index.vue b/ALOps_sys_fe/alops-ui/src/views/index.vue
index fddf5a8d..88f6122d 100644
--- a/ALOps_sys_fe/alops-ui/src/views/index.vue
+++ b/ALOps_sys_fe/alops-ui/src/views/index.vue
@@ -1,105 +1,187 @@
 <template>
-  <div class="dashboard-container">
-    <div class="welcome-message">
-      <h1>欢迎进入中国烟草</h1>
-      <p>这里是中国烟草的主界面，您可以在这里进行各种操作和管理。</p>
-    </div>
+  <div class="dashboard">
+    <h1>唐山烟草智能网络设备运维与问答系统</h1>
+    
+    <el-row :gutter="20">
+      <!-- 设备状态监控 -->
+      <el-col :span="12">
+        <el-card>
+          <h2>设备状态监控</h2>
+          <!-- 这里可以添加设备状态监控的具体内容，例如表格或图表 -->
+          <el-table :data="deviceStatusData" style="width: 100%">
+            <el-table-column prop="name" label="设备名称"></el-table-column>
+            <el-table-column prop="location" label="设备位置"></el-table-column>
+            <el-table-column prop="cpuUsage" label="CPU使用率"></el-table-column>
+            <el-table-column prop="memoryUsage" label="内存使用率"></el-table-column>
+            <el-table-column prop="status" label="状态">
+              <template slot-scope="scope">
+                <el-tag :type="scope.row.status === '正常' ? 'success' : 'danger'">
+                  {{ scope.row.status }}
+                </el-tag>
+              </template>
+            </el-table-column>
+          </el-table>
+        </el-card>
+      </el-col>
+      
+      <!-- 设备状态统计图表 -->
+      <el-col :span="12">
+        <el-card>
+          <h2>检测设备信息 (按状态统计，饼状图)</h2>
+          <!-- 这里可以使用echarts或其他图表库来展示饼状图 -->
+          <div id="statusChart" style="width: 100%; height: 300px;"></div>
+        </el-card>
+        
+        <el-card>
+          <h2>检测设备信息 (按设备类型，饼状图)</h2>
+          <div id="typeChart" style="width: 100%; height: 300px;"></div>
+        </el-card>
+      </el-col>
+    </el-row>
+    
+    <el-row :gutter="20" style="margin-top: 20px;">
+      <!-- 设备预警信息 -->
+      <el-col :span="12">
+        <el-card>
+          <h2>设备预警信息</h2>
+          <el-table :data="alertData" style="width: 100%">
+            <el-table-column prop="time" label="预警时间"></el-table-column>
+            <el-table-column prop="device" label="设备名称"></el-table-column>
+            <el-table-column prop="location" label="设备位置"></el-table-column>
+            <el-table-column prop="level" label="预警等级">
+              <template slot-scope="scope">
+                <el-tag :type="getTagType(scope.row.level)">
+                  {{ scope.row.level }}
+                </el-tag>
+              </template>
+            </el-table-column>
+          </el-table>
+        </el-card>
+      </el-col>
+      
+      <!-- 预警信息统计 -->
+      <el-col :span="12">
+        <el-card>
+          <h2>预警信息统计</h2>
+          <div id="alertStatsChart" style="width: 100%; height: 300px;"></div>
+        </el-card>
+      </el-col>
+    </el-row>
   </div>
-</template><style scoped>
-.dashboard-container {
-  padding: 20px;
-  text-align: center;
-}
-
-.welcome-message {
-  margin-top: 50px;
-}
-
-.welcome-message h1 {
-  font-size: 36px;
-  color: #333;
-  margin-bottom: 20px;
-}
+</template>
 
-.welcome-message p {
-  font-size: 18px;
-  color: #666;
-  max-width: 800px;
-  margin: 0 auto;
-}
-</style><style scoped>
-.dashboard-container {
-  padding: 20px;
-  text-align: center;
-  background-color: #f8f9fa; /* 背景颜色 */
-  /* 或者使用背景图片 */
-  /* background-image: url('background.jpg');
-  background-size: cover;
-  background-position: center; */
-}
+<script>
+import * as echarts from 'echarts'
+require('echarts/theme/macarons') // echarts theme
 
-.welcome-message {
-  margin-top: 50px;
-  padding: 20px;
-  border-radius: 8px;
-  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
-  background-color: #fff; /* 欢迎信息背景颜色 */
-}
+export default {
+  data() {
+    return {
+      deviceStatusData: [
+        // 示例数据
+        { name: '设备1', location: '位置1', cpuUsage: '30%', memoryUsage: '40%', status: '正常' },
+        { name: '设备2', location: '位置2', cpuUsage: '70%', memoryUsage: '80%', status: '异常' },
+      ],
+      alertData: [
+        // 示例数据
+        { time: '2023-10-01 10:00:00', device: '设备2', location: '位置2', level: '高' },
+        { time: '2023-10-01 11:00:00', device: '设备3', location: '位置3', level: '中' },
+      ],
+    };
+  },
+  mounted() {
+    this.initCharts();
+  },
+  methods: {
+    getTagType(level) {
+      const types = { '高': 'danger', '中': 'warning', '低': 'success' };
+      return types[level] || 'info';
+    },
+    initCharts() {
+      // 初始化状态统计图表
+      const statusChart = echarts.init(document.getElementById('statusChart'));
+      statusChart.setOption({
+        title: { text: '设备状态统计', subtext: '按状态', left: 'center' },
+        tooltip: { trigger: 'item' },
+        series: [
+          {
+            name: '设备状态',
+            type: 'pie',
+            radius: '50%',
+            data: [
+              { value: 44, name: '自主房屋' },
+              { value: 33, name: '出租房屋' },
+              { value: 11, name: '空置房屋' },
+              { value: 11, name: '其他' },
+            ],
+          },
+        ],
+      });
 
-.welcome-message h1 {
-  font-size: 36px;
-  color: #333;
-  margin-bottom: 20px;
-}
+      // 初始化设备类型统计图表
+      const typeChart = echarts.init(document.getElementById('typeChart'));
+      typeChart.setOption({
+        title: { text: '设备类型统计', subtext: '按设备类型', left: 'center' },
+        tooltip: { trigger: 'item' },
+        series: [
+          {
+            name: '设备类型',
+            type: 'pie',
+            radius: '50%',
+            data: [
+              { value: 44, name: '自主房屋' },
+              { value: 33, name: '出租房屋' },
+              { value: 11, name: '空置房屋' },
+              { value: 11, name: '其他' },
+            ],
+          },
+        ],
+      });
 
-.welcome-message p {
-  font-size: 18px;
-  color: #666;
-  max-width: 800px;
-  margin: 0 auto;
-}
-</style><template>
-  <div class="dashboard-container">
-    <div class="welcome-message">
-      <h1><i class="el-icon-s-operation"></i> 欢迎进入中国烟草</h1>
-      <p>这里是中国烟草的主界面，您可以在这里进行各种操作和管理。</p>
-    </div>
-  </div>
-</template>
+      // 初始化预警信息统计图表
+      const alertStatsChart = echarts.init(document.getElementById('alertStatsChart'));
+      alertStatsChart.setOption({
+        title: { text: '预警信息统计', left: 'center' },
+        tooltip: {},
+        radar: {
+          indicator: [
+            { name: '火警类', max: 500 },
+            { name: '冲禁类', max: 500 },
+            { name: '灾害', max: 500 },
+            { name: '群体性', max: 500 },
+            { name: '行政类', max: 500 },
+            { name: '交通类', max: 500 },
+            { name: '重大', max: 500 },
+          ],
+        },
+        series: [{
+          name: '预警统计',
+          type: 'radar',
+          data: [
+            {
+              value: [75, 452, 64, 94, 44, 0, 29],
+              name: '预警次数',
+            },
+          ],
+        }],
+      });
+    },
+  },
+};
+</script>
 
-<style scoped>
-.dashboard-container {
+<style>
+.dashboard {
   padding: 20px;
-  text-align: center;
+  background-color: #f0f2f5;
+  min-height: 100vh;
 }
 
-.welcome-message {
-  margin-top: 50px;
-  animation: fadeIn 1s ease;
-}
-
-@keyframes fadeIn {
-  from {
-    opacity: 0;
-  }
-  to {
-    opacity: 1;
-  }
+h1, h2 {
+  text-align: center;
 }
 
-.welcome-message h1 {
-  font-size: 36px;
-  color: #333;
+.el-card {
   margin-bottom: 20px;
 }
-
-.welcome-message p {
-  font-size: 18px;
-  color: #666;
-  max-width: 800px;
-  margin: 0 auto;
-}
-</style>
-
-
- 
\ No newline at end of file
+</style>
\ No newline at end of file