消息及反馈对接接口

src/api/dashboard/apiNotice.js

@@ -0,0 +1,56 @@
+import Request from "@/utils/request";
+
+// 获取消息列表
+const getNoticeList = (param) => {
+    return Request.post('/notice/getNoticeList', param)
+}
+
+// 设置已读
+const readNotice = (param) => {
+    return Request.post('/notice/readNotice', param)
+}
+
+// 查看通知
+const getNotice = (param) => {
+    return Request.get('/notice/getNotice', param)
+}
+
+// 删除反馈
+const delNotice = (param) => {
+    return Request.post('/notice/delNotice', param)
+}
+
+// 获取反馈列表
+const getFeedBackList = (param) => {
+    return Request.post('/feedback/getFeedBackList', param)
+}
+
+// 反馈设置已读
+const readFeedBack = (param) => {
+    return Request.post('/feedback/readFeedBack', param)
+}
+
+// 查看反馈
+const getFeedBack = (param) => {
+    return Request.get('/feedback/getFeedBack', param)
+}
+
+// 删除反馈
+const delFeedBack = (param) => {
+    return Request.post('/feedback/delFeedBack', param)
+}
+
+
+export default {
+    getNoticeList,
+    readNotice,
+    getNotice,
+    delNotice,
+
+    getFeedBackList,
+    readFeedBack,
+    getFeedBack,
+    delFeedBack,
+
+
+}

src/components/notice/feedbackList.vue

@@ -0,0 +1,223 @@
+<template>
+  <div class="ioc-notice-list">
+    <div class="ioc-notice-list-header">
+      <span v-if="type==='unReadFeedback'">未读反馈</span>
+      <span v-else-if="type==='readFeedback'">已读反馈</span>
+      <span v-else-if="type==='allFeedback'">全部反馈</span>
+      <span v-else></span>
+    </div>
+    <div class="ioc-notice-list-query">
+      <div style="display: inline-block;vertical-align: middle">
+        <a-button type="link" @click="setRead" v-if="type!='readNotice'">设为已读</a-button>
+        <a-popconfirm
+            title="确定要删除吗?"
+            ok-text="是"
+            cancel-text="否"
+            @confirm="del"
+        >
+          <a-button type="link">删除</a-button>
+        </a-popconfirm>
+      </div>
+
+      <div style="display: inline-block;vertical-align: middle;float: right;">
+        <a-form layout="inline" :form="formData">
+          <a-form-item>
+            <a-select v-model="formData.feedbackType" style="width: 120px" placeholder="反馈模块">
+              <a-select-option value="">全部</a-select-option>
+              <a-select-option v-for="(val, key, index) in moduleIds" :key="index" :value="key">{{ val }}</a-select-option>
+            </a-select>
+          </a-form-item>
+          <a-form-item>
+            <TimeRange :time-range.sync="formData.timeRange" ref="timeRange" style="width: 250px"></TimeRange>
+          </a-form-item>
+          <a-form-item>
+            <a-button size="small" @click="refresh">重置</a-button>
+            <a-button size="small" type="primary" @click="getFeedback">查询</a-button>
+          </a-form-item>
+        </a-form>
+      </div>
+    </div>
+    <div class="ioc-notice-list-content">
+      <a-table :rowKey="(record, index) => record.id"
+               style="height: 100%"
+               :columns="columns"
+               :data-source="tableData"
+               :pagination="false"
+               :row-selection="{ selectedRowKeys: selectedRowKeys, onChange: onSelectChange }"
+      >
+        <template #operation="text">
+          <a-button type="link">删除</a-button>
+          <a-button type="link">查看</a-button>
+        </template>
+        <template #type="text, record">
+          <span v-if="record.status==0" style="color: red;padding-right: 5px">•</span>
+          <span v-if="record.type==1">PC端</span>
+          <span v-if="record.type==2">APP</span>
+        </template>
+        <template #module="text, record">
+          <span v-if="record.module && record.module!=''">{{moduleIds[''+record.module]}}</span>
+          <span v-else></span>
+        </template>
+      </a-table>
+      <a-pagination
+          show-size-changer
+          v-model="page.current"
+          :page-size="page.pageSize"
+          :total="page.total"
+          style="float: right"
+      />
+      <br/>
+    </div>
+  </div>
+</template>
+
+<script>
+import TimeRange from "@/components/common/timeRange.vue";
+import ApiNotice from "@/api/dashboard/apiNotice";
+
+export default {
+  components: {TimeRange},
+  watch: {
+    type: function (val) {
+      this.refresh();
+    },
+    'page': {
+      handler: function (val) {
+        this.getFeedback();
+      },
+      deep: true,
+    }
+  },
+  data() {
+    let timeRange = this.$util.dateUtil.getNearlyMonthRange();
+    return {
+      formData: {
+        feedbackType: '',
+        timeRange: timeRange
+      },
+      selectedRowKeys: [],
+      page: {
+        current: 1,
+        pageSize: 10,
+        total: 20
+      },
+      moduleIds: {
+        '1': '智能看板',
+        '2': '智享生活',
+        '3': '智慧办公',
+        '4': '数智双碳',
+        '5': '智慧运营',
+        '6': '智慧安防',
+        '7': '智慧场景',
+        '8': '报表报告',
+        '9': '统一鉴权',
+      },
+      columns: [
+        {
+          title: '反馈来源',
+          dataIndex: 'type',
+          align: 'center',
+          width: 150,
+          key: 'type',
+          scopedSlots: { customRender: 'type' },
+        },
+        {
+          title: '反馈内容',
+          dataIndex: 'content',
+          align: 'center',
+          key: 'content'
+        },
+        {
+          title: '反馈模块',
+          dataIndex: 'module',
+          align: 'center',
+          minWidth: 240,
+          key: 'module',
+          scopedSlots: { customRender: 'module' },
+        },
+        {
+          title: '反馈时间',
+          dataIndex: 'create_time',
+          align: 'center',
+          width: 240,
+          key: 'create_time'
+        },
+        {
+          title: '操作',
+          dataIndex: 'operation',
+          key: 'operation',
+          width: 200,
+          align: 'center',
+          scopedSlots: {customRender: 'operation'},
+        }
+      ],
+      tableData: [],
+    }
+  },
+  props: {
+    type: String,
+    data: Array,
+  },
+  mounted() {
+    this.getFeedback();
+  },
+  methods: {
+    refresh() {
+      this.formData = {};
+      this.selectedRowKeys = [];
+      this.getFeedback();
+    },
+    onSelectChange(selectedRowKeys) {
+      this.selectedRowKeys = selectedRowKeys;
+    },
+    getFeedback() {
+      let status = this.type == 'unReadFeedback' ? '0' : this.type == 'readFeedback' ? '1' : '';
+      let param = {
+        type: this.formData.feedbackType,
+        status: status,
+        pageStart: (this.page.current-1)*this.page.pageSize,
+        pageSize: this.page.pageSize,
+      }
+      Object.assign(param, this.formData.timeRange)
+      ApiNotice.getFeedBackList(param).then(res => {
+        this.tableData = res.data;
+        this.page.total = res.total;
+      })
+    },
+    del() {
+      let param = this.selectedRowKeys;
+      ApiNotice.delFeedBack(param).then(res=>{
+        this.$message.success('删除成功');
+        this.getFeedback();
+        this.selectedRowKeys = []
+      })
+    },
+    setRead() {
+      let param = this.selectedRowKeys;
+      ApiNotice.readFeedBack(param).then(res=>{
+        this.$message.success('操作成功');
+        this.getFeedback();
+        this.selectedRowKeys = []
+      })
+    }
+  }
+}
+</script>
+
+<style lang="less" scoped>
+.ioc-notice-list {
+  width: 100%;
+  height: 100%;
+
+  .ioc-notice-list-header {
+    font-size: 16px;
+  }
+
+  .ioc-notice-list-query {
+    margin: 12px 0;
+  }
+  .ioc-notice-list-content {
+    height: 600px;
+  }
+}
+</style>

src/components/notice/notice.vue

@@ -26,7 +26,8 @@
       </a-layout-sider>
       <a-layout>
         <a-layout-content :style="{ margin: '12px', padding: '15px', background: '#fff', minHeight: '280px' }">
-          <NoticeList :type="type"></NoticeList>
+          <NoticeList :type="type" v-if="type.indexOf('Notice')>-1"></NoticeList>
+          <FeedbackList :type="type" v-if="type.indexOf('Feedback')>-1"></FeedbackList>
         </a-layout-content>
       </a-layout>
     </a-layout>
@@ -35,6 +36,8 @@
 
 <script>
 import NoticeList from "@/components/notice/noticeList.vue";
+import FeedbackList from "@/components/notice/feedbackList.vue";
+
 export default {
   data() {
     return {
@@ -43,7 +46,8 @@ export default {
     };
   },
   components: {
-    NoticeList
+    NoticeList,
+    FeedbackList,
   },
   mounted() {},
   methods: {

src/components/notice/noticeList.vue

@@ -4,38 +4,43 @@
       <span v-if="type==='unReadNotice'">未读通知</span>
       <span v-else-if="type==='readNotice'">已读通知</span>
       <span v-else-if="type==='allNotice'">全部通知</span>
-      <span v-else-if="type==='unReadFeedback'">未读反馈</span>
-      <span v-else-if="type==='readFeedback'">已读反馈</span>
-      <span v-else-if="type==='allFeedback'">全部反馈</span>
       <span v-else></span>
     </div>
     <div class="ioc-notice-list-query">
       <div style="display: inline-block;vertical-align: middle">
-        <a-button >设为已读</a-button>
-        <a-button >删除</a-button>
+        <a-button type="link" @click="setRead" v-if="type!='readNotice'">设为已读</a-button>
+        <a-popconfirm
+            title="确定要删除吗?"
+            ok-text="是"
+            cancel-text="否"
+            @confirm="del"
+        >
+          <a-button type="link">删除</a-button>
+        </a-popconfirm>
       </div>
 
       <div style="display: inline-block;vertical-align: middle;float: right;">
         <a-form layout="inline" :form="formData">
           <a-form-item>
-            <a-select style="width: 120px" placeholder="告警类别">
-              <a-select-option value="system">系统通知</a-select-option>
-              <a-select-option value="device">设备通知</a-select-option>
-              <a-select-option value="alarm">设备告警</a-select-option>
+            <a-select v-model="formData.noticeType" style="width: 120px" placeholder="消息类别">
+              <a-select-option value="">全部</a-select-option>
+              <a-select-option value="1">系统通知</a-select-option>
+              <a-select-option value="2">提醒消息</a-select-option>
+              <a-select-option value="3">设备告警</a-select-option>
             </a-select>
           </a-form-item>
           <a-form-item>
-            <TimeRange></TimeRange>
+            <TimeRange :time-range.sync="formData.timeRange" ref="timeRange" style="width: 250px"></TimeRange>
           </a-form-item>
           <a-form-item>
-            <a-button size="small">重置</a-button>
-            <a-button size="small">查询</a-button>
+            <a-button size="small" @click="refresh">重置</a-button>
+            <a-button size="small" type="primary" @click="getNotice">查询</a-button>
           </a-form-item>
         </a-form>
       </div>
     </div>
     <div class="ioc-notice-list-content">
-      <a-table :rowKey="(record, index) => index"
+      <a-table :rowKey="(record, index) => record.id"
                style="height: 100%"
                :columns="columns"
                :data-source="tableData"
@@ -44,41 +49,63 @@
       >
         <template #operation="text">
           <a-button type="link">删除</a-button>
-          <a-button type="link" >查看</a-button>
+          <a-button type="link">查看</a-button>
+        </template>
+        <template #type="text, record">
+          <span v-if="record.status==0" style="color: red;padding-right: 5px">•</span>
+          <span>{{text}}</span>
         </template>
       </a-table>
       <a-pagination
           show-size-changer
-          :default-current="3"
-          :total="500"
+          v-model="page.current"
+          :page-size="page.pageSize"
+          :total="page.total"
           style="float: right"
       />
-      <br />
+      <br/>
     </div>
   </div>
 </template>
 
 <script>
 import TimeRange from "@/components/common/timeRange.vue";
+import ApiNotice from "@/api/dashboard/apiNotice";
 
 export default {
   components: {TimeRange},
   watch: {
     type: function (val) {
       this.refresh();
+    },
+    'page': {
+      handler: function (val) {
+        this.getNotice();
+      },
+      deep: true,
     }
   },
   data() {
+    let timeRange = this.$util.dateUtil.getNearlyMonthRange();
     return {
-      formData: {},
+      formData: {
+        noticeType: '',
+        timeRange: timeRange
+      },
       selectedRowKeys: [],
+      page: {
+        current: 1,
+        pageSize: 10,
+        total: 20
+      },
       columns: [
         {
-          title: '告警类别',
+          title: '消息类别',
           dataIndex: 'type',
           align: 'center',
           width: 150,
-          key: 'type'
+          key: 'type',
+          scopedSlots: { customRender: 'type' },
         },
         {
           title: '事件内容',
@@ -87,14 +114,14 @@ export default {
           key: 'content'
         },
         {
-          title: '告警地点',
+          title: '地点',
           dataIndex: 'area',
           align: 'center',
           minWidth: 240,
           key: 'area'
         },
         {
-          title: '告警时间',
+          title: '通知时间',
           dataIndex: 'time',
           align: 'center',
           width: 240,
@@ -106,33 +133,58 @@ export default {
           key: 'operation',
           width: 200,
           align: 'center',
-          scopedSlots: { customRender: 'operation' },
-        }
-      ],
-      tableData: [
-        {
-          type: '设备告警',
-          content: '位于1层301的水浸设备出现告警，请尽快派人处理',
-          area: '1层301',
-          time: '2022年7月11日 12:01:00',
+          scopedSlots: {customRender: 'operation'},
         }
       ],
+      tableData: [],
     }
   },
   props: {
     type: String,
+    data: Array,
   },
   mounted() {
+    this.getNotice();
   },
   methods: {
     refresh() {
       this.formData = {};
       this.selectedRowKeys = [];
+      this.getNotice();
     },
     onSelectChange(selectedRowKeys) {
       this.selectedRowKeys = selectedRowKeys;
+    },
+    getNotice() {
+      let status = this.type == 'unReadNotice' ? '0' : this.type == 'readNotice' ? '1' : '';
+      let param = {
+        type: this.formData.noticeType,
+        status: status,
+        pageStart: (this.page.current-1)*this.page.pageSize,
+        pageSize: this.page.pageSize,
+      }
+      Object.assign(param, this.formData.timeRange)
+      ApiNotice.getNoticeList(param).then(res => {
+        this.tableData = res.data;
+        this.page.total = res.total;
+      })
+    },
+    del() {
+      let param = this.selectedRowKeys;
+      ApiNotice.delNotice(param).then(res=>{
+        this.$message.success('删除成功');
+        this.getNotice();
+        this.selectedRowKeys = []
+      })
+    },
+    setRead() {
+      let param = this.selectedRowKeys;
+      ApiNotice.readNotice(param).then(res=>{
+        this.$message.success('操作成功');
+        this.getNotice();
+        this.selectedRowKeys = []
+      })
     }
-
   }
 }
 </script>