feat:站内信展示

src/api/breakdown/message.js

@@ -0,0 +1,24 @@
+import request from '@/utils/request'
+
+//查询
+export function listMessage(){
+  return request({
+    url:'/breakdown/message/list',
+    method:'get',
+
+  })
+}
+
+export function listStatusOne(){
+  return request({
+    url:'/breakdown/message/listStatusOne',
+    method:'get',
+  })
+}
+
+export function listStatusTwo(){
+  return request({
+    url:'/breakdown/message/listStatusTwo',
+    method:'get',
+  })
+}

src/views/breakdown/breakdown/index.vue

@@ -35,6 +35,43 @@
       </el-form-item>
     </el-form>
 
+    <el-radio-group v-model="direction">
+      <el-radio label="ltr">从左往右开</el-radio>
+      <el-radio label="rtl">从右往左开</el-radio>
+      <el-radio label="ttb">从上往下开</el-radio>
+      <el-radio label="btt">从下往上开</el-radio>
+    </el-radio-group>
+
+    <el-button @click="drawer = true" type="primary" style="margin-left: 16px;">
+      点我打开
+    </el-button>
+
+    <el-drawer title="通知" :visible.sync="drawer" :direction="direction" :before-close="handleClose">
+
+
+      <el-tabs v-model="activeName" @tab-click="handleClick">
+        <el-tab-pane label="全部" name="first">
+          <el-button type="primary" @click="handleRefresh">刷新</el-button>
+          <el-table v-loading="loading" :data="messageList" >
+            <el-table-column label="内容" align="center" prop="content" />
+            <el-table-column label="时间" align="center" prop="createTime" />
+          </el-table>
+        </el-tab-pane>
+        <el-tab-pane label="已读" name="second">
+          <el-table v-loading="loading" :data="messageListOne" >
+            <el-table-column label="内容" align="center" prop="content" />
+            <el-table-column label="时间" align="center" prop="createTime" />
+          </el-table>
+        </el-tab-pane>
+        <el-tab-pane label="未读" name="third">
+          <el-table v-loading="loading" :data="messageListTwo" >
+            <el-table-column label="内容" align="center" prop="content" />
+            <el-table-column label="时间" align="center" prop="createTime" />
+          </el-table>
+        </el-tab-pane>
+      </el-tabs>
+    </el-drawer>
+
     <el-row :gutter="10" class="mb8">
       <el-col :span="1.5">
         <el-button
@@ -209,12 +246,16 @@
 
 <script>
 import { listBreakdown, getBreakdown, delBreakdown, addBreakdown, updateBreakdown,enableWarningsById,disableWarningsById } from "/src/api/breakdown/breakdown";
+import { listMessage,listStatusOne,listStatusTwo } from '@/api/breakdown/message'
 
 export default {
   name: "Breakdown",
   dicts: ['sys_fault_rank', 'sys_fault_status','sys_warn_status','sys_fault_type'],
   data() {
     return {
+      activeName: 'second',
+      drawer: false,
+      direction: 'rtl',
       // 遮罩层
       loading: true,
       // 选中数组
@@ -229,6 +270,10 @@ export default {
       total: 0,
       // 车辆故障管理表格数据
       breakdownList: [],
+      // 站内信
+      messageList:[],
+      messageListOne:[],
+      messageListTwo:[],
       // 弹出层标题
       title: "",
       // 是否显示弹出层
@@ -253,8 +298,10 @@ export default {
   },
   created() {
     this.getList();
+    this.getMessageList()
   },
   methods: {
+
     /** 查询车辆故障管理列表 */
     getList() {
       this.loading = true;
@@ -380,7 +427,48 @@ export default {
         this.getList();
         this.$modal.msgSuccess("禁用成功");
       }).catch(()=>{});
+    },
+    handleClose(done) {
+      this.$confirm('确认关闭？')
+        .then(_ => {
+          done();
+        })
+        .catch(_ => {});
+    },
+
+    // 显示站内信
+    getMessageList() {
+      listMessage().then(response => {
+        this.messageList = response.data.rows;
+      });
+      listStatusOne().then(response=>{
+        this.messageListOne=response.data.rows
+      });
+      listStatusTwo().then(response=>{
+        this.messageListTwo=response.data.rows
+      });
+    },
+
+    handleRefresh(){
+      this.getMessageList()
+    },
+    handleClick(tab, event) {
+      console.log(tab, event);
     }
+
   }
 };
 </script>
+<style scoped>
+.card-container{
+  display: flex;
+  flex-wrap: wrap;
+  justify-content: space-around;
+}
+.box-card{
+  margin-bottom: 20px;
+}
+.card-content{
+  font-weight: bold;
+}
+</style>