修改bug

src/views/dashboard/admin/index.vue

@@ -45,11 +45,11 @@
                             <div class="topDataLi4">
                                 <div class="topDataMain">
                                     <span @click="goToList(6)">待审核行政通知</span>
-                                    <span @click="goToList(6)">{{noticeCount}}</span>
+                                    <span @click="goToList(6)">{{ noticeCount }}</span>
                                 </div>
                                 <div class="topDataMain">
                                     <span @click="goToList(7)">待审核行政投诉</span>
-                                    <span @click="goToList(7)">{{complaintCount}}</span>
+                                    <span @click="goToList(7)">{{ complaintCount }}</span>
                                 </div>
                             </div>
                         </div>
@@ -106,7 +106,7 @@
             </el-row>
             <el-row :gutter="32">
                 <el-col :xs="24" :sm="24" :lg="6">
-                    <div class="topWindowBox">
+                    <div class="topWindowBox ">
                         <div class="twbTitle">
                             <div class="twbIconbg bg5">
                                 <img src="@/assets/index/topIcon5.png" />
@@ -141,7 +141,7 @@
             </el-row>
             <el-row :gutter="32">
                 <el-col :xs="24" :sm="24" :lg="16">
-                    <div class="chartBox">
+                    <div class="chartBox otherheight">
                         <div class="chartTitle">
                             平台数据增长趋势
                             <el-select v-model="chatType" placeholder="请选择" class="chartSelectInput"
@@ -157,7 +157,7 @@
                     </div>
                 </el-col>
                 <el-col :xs="24" :sm="24" :lg="8">
-                    <div class="chartBox">
+                    <div class="chartBox otherheight">
                         <div class="chartTitle">用户类型占比</div>
                         <div class="chart-wrapper">
                             <ring-chart :chart-data="ringChartData" />
@@ -169,6 +169,7 @@
 
         <!--超级管理员10000× 个人会员1√ 政务会员2× 企业会员3 调研员4-->
         <div v-if="userType == 1">
+
             <el-row :gutter="32">
                 <el-col :xs="24" :sm="24" :lg="24">
                     <div class="topDataBox">
@@ -212,13 +213,16 @@
                                 </div> -->
                                 <div class="topDataMain">
                                     <span @click="goToList(7)">待审核行政投诉</span>
-                                    <span @click="goToList(7)">{{complaintCount}}</span>
+                                    <span @click="goToList(7)">{{ complaintCount }}</span>
                                 </div>
                             </div>
                         </div>
                     </div>
                 </el-col>
             </el-row>
+
+
+
             <el-row :gutter="32">
                 <el-col :xs="24" :sm="24" :lg="6">
                     <div class="topWindowBox">
@@ -253,7 +257,7 @@
                         <div class="twbNumber">{{ allBookCount }}</div>
                     </div>
                 </el-col>
-                <!-- <el-col :xs="24" :sm="24" :lg="6">
+                <el-col :xs="24" :sm="24" :lg="6">
                     <div class="topWindowBox">
                         <div class="twbTitle">
                             <div class="twbIconbg bg7">
@@ -261,10 +265,79 @@
                             </div>
                             求职发布数量
                         </div>
-                        <div class="twbNumber">{{allJobHuntingCount}}</div>
+                        <div class="twbNumber">{{ allJobHuntingCount }}</div>
                     </div>
-                </el-col> -->
+                </el-col>
             </el-row>
+
+            <!--lj 系统消息开始 -->
+            <el-row :gutter="32">
+                <el-col :xs="24" :sm="24" :lg="12">
+                    <div class="chartBox">
+                        <div class="chartTitle">系统消息</div>
+                        <div class="chart-wrapper">
+                            <div v-for="item in sys_msg" :key="item.id" class="sys_msg_item">
+                                <div class="sys_msg_class" :class="item.class">{{ item.class }}</div>
+                                <div @click="goToDetail(item.id, item.class)" class="sys_msg_title"> {{
+                                    truncateTitle(item.title) }}
+                                    <span class="tick">...提交了审核</span>
+                                </div>
+
+                                <div class="sys_msg_time">{{ item.formatted_updated_at }}</div>
+                            </div>
+
+                        </div>
+                    </div>
+                </el-col>
+                <el-col :xs="24" :sm="24" :lg="12">
+                    <div class="chartBox">
+
+                        <div class="chartBox">
+                            <div class="chartTitle">聊天消息</div>
+                            <div class="chart-wrapper">
+                                <div v-for="item in chat_msg" :key="item.id" class="sys_msg_item">
+                                    <div class="sys_msg_class" :class="item.class">{{ item.class }}</div>
+                                    <div @click="goToDetail(item.id, item.class)" class="sys_msg_title"> {{
+                                        truncateTitle(item.content) }}
+                                        <span class="tick" v-if="item.class == '群聊'">..收到了一条群消息</span>
+                                        <span class="tick" v-if="item.class == '单聊'">..收到了一条消息</span>
+                                        <span class="tick" v-if="item.class == '话题'">..收到了一条评论</span>
+                                    </div>
+                                    <div class="sys_msg_time">{{ item.formatted_updated_at }}</div>
+                                </div>
+
+                            </div>
+                        </div>
+                    </div>
+                </el-col>
+            </el-row>
+            <div style="height: 20px;" class="noticeTabs">
+            </div>
+
+            <el-row :gutter="32">
+                <el-col :xs="24" :sm="24" :lg="12">
+                    <div class="chartBox">
+
+                        <div class="chartBox">
+                            <div class="chartTitle">通知投诉</div>
+                            <div class="chart-wrapper">
+                                <div v-for="item in notice_msg" :key="item.id" class="sys_msg_item">
+                                    <div class="sys_msg_class" :class="item.class">{{ item.class }}</div>
+                                    <div @click="goToDetail(item.id, item.class)" class="sys_msg_title"> {{
+                                        truncateTitle(item.title) }}
+                                    </div>
+                                    <div class="sys_msg_time">{{ item.formatted_updated_at }}</div>
+                                </div>
+                            </div>
+                        </div>
+                    </div>
+                </el-col>
+            </el-row>
+            
+            <div style="height: 20px;" class="noticeTabs">
+            </div>
+            <!-- 系统消息结束 -->
+             
         </div>
 
         <!--超级管理员10000× 个人会员1× 政务会员2 √ 企业会员3× 调研员4×-->
@@ -298,17 +371,18 @@
                             <div class="topDataLi4">
                                 <div class="topDataMain">
                                     <span @click="goToList(6)">待审核行政通知</span>
-                                    <span @click="goToList(6)">{{noticeCount}}</span>
+                                    <span @click="goToList(6)">{{ noticeCount }}</span>
                                 </div>
                                 <div class="topDataMain">
                                     <span @click="goToList(7)">待审核行政投诉</span>
-                                    <span @click="goToList(7)">{{complaintCount}}</span>
+                                    <span @click="goToList(7)">{{ complaintCount }}</span>
                                 </div>
                             </div>
                         </div>
                     </div>
                 </el-col>
             </el-row>
+
             <el-row :gutter="32">
                 <el-col :xs="24" :sm="24" :lg="6">
                     <div class="topWindowBox">
@@ -346,25 +420,87 @@
                 <el-col :xs="24" :sm="24" :lg="6">
                     <div class="topWindowBox">
                         <div class="twbTitle">
-                            <div class="twbIconbg bg8">
-                                <img src="@/assets/index/topIcon8.png" />
+                            <div class="twbIconbg bg7">
+                                <img src="@/assets/index/topIcon7.png" />
+                            </div>
+                            求职发布数量
+                        </div>
+                        <div class="twbNumber">{{ allJobHuntingCount }}</div>
+                    </div>
+                </el-col>
+            </el-row>
+
+            <!--lj 系统消息开始 -->
+            <el-row :gutter="32">
+                <el-col :xs="24" :sm="24" :lg="12">
+                    <div class="chartBox">
+                        <div class="chartTitle">系统消息</div>
+                        <div class="chart-wrapper">
+                            <div v-for="item in sys_msg" :key="item.id" class="sys_msg_item">
+                                <div class="sys_msg_class" :class="item.class">{{ item.class }}</div>
+                                <div @click="goToDetail(item.id, item.class)" class="sys_msg_title"> {{
+                                    truncateTitle(item.title) }}
+                                    <span class="tick">...提交了审核</span>
+                                </div>
+
+                                <div class="sys_msg_time">{{ item.formatted_updated_at }}</div>
                             </div>
-                            待处理
+
                         </div>
-                        <div class="twbNumber2">
-                            <div class="twbNumber2Item">
-                                <div class="twbNumber2ItemNum">{{allNoticeCount}}</div>
-                                <div>行政通知</div>
+                    </div>
+                </el-col>
+                <el-col :xs="24" :sm="24" :lg="12">
+                    <div class="chartBox">
+
+                        <div class="chartBox">
+                            <div class="chartTitle">聊天消息</div>
+                            <div class="chart-wrapper">
+                                <div v-for="item in chat_msg" :key="item.id" class="sys_msg_item">
+                                    <div class="sys_msg_class" :class="item.class">{{ item.class }}</div>
+                                    <div @click="goToDetail(item.id, item.class)" class="sys_msg_title"> {{
+                                        truncateTitle(item.content) }}
+                                        <span class="tick" v-if="item.class == '群聊'">..收到了一条群消息</span>
+                                        <span class="tick" v-if="item.class == '单聊'">..收到了一条消息</span>
+                                        <span class="tick" v-if="item.class == '话题'">..收到了一条评论</span>
+                                    </div>
+                                    <div class="sys_msg_time">{{ item.formatted_updated_at }}</div>
+                                </div>
+
                             </div>
-                            <div class="twbNumber2Item">
-                                <div class="twbNumber2ItemNum">{{allComplaintCount}}</div>
-                                <div>行政投诉</div>
+                        </div>
+                    </div>
+                </el-col>
+            </el-row>
+            <div style="height: 20px;" class="noticeTabs">
+            </div>
+
+            <el-row :gutter="32">
+                <el-col :xs="24" :sm="24" :lg="12">
+                    <div class="chartBox">
+
+                        <div class="chartBox">
+                            <div class="chartTitle">通知投诉</div>
+                            <div class="chart-wrapper">
+                                <div v-for="item in notice_msg" :key="item.id" class="sys_msg_item">
+                                    <div class="sys_msg_class" :class="item.class">{{ item.class }}</div>
+                                    <div @click="goToDetail(item.id, item.class)" class="sys_msg_title"> {{
+                                        truncateTitle(item.title) }}
+                                    </div>
+                                    <div class="sys_msg_time">{{ item.formatted_updated_at }}</div>
+                                </div>
                             </div>
                         </div>
                     </div>
                 </el-col>
             </el-row>
 
+
+            <div style="height: 20px;" class="noticeTabs">
+            </div>
+
+            <!-- 系统消息结束 -->
+
+
             <!-- <div class="chartBox">
                 <div class="chartTitle">已审核文章</div>
                 <div class="chart-wrapper">
@@ -428,59 +564,86 @@
                                 </div> -->
                                 <div class="topDataMain">
                                     <span @click="goToList(7)">待审核行政投诉</span>
-                                    <span @click="goToList(7)">{{complaintCount}}</span>
+                                    <span @click="goToList(7)">{{ complaintCount }}</span>
                                 </div>
                             </div>
                         </div>
                     </div>
                 </el-col>
             </el-row>
+
+
+
+            <!--lj 系统消息开始 -->
             <el-row :gutter="32">
-                <el-col :xs="24" :sm="24" :lg="6">
-                    <div class="topWindowBox">
-                        <div class="twbTitle">
-                            <div class="twbIconbg bg3">
-                                <img src="@/assets/index/topIcon3.png" />
-                            </div>
-                            资讯发布数量
-                        </div>
-                        <div class="twbNumber">{{ allWebsiteCount }}</div>
-                    </div>
-                </el-col>
-                <el-col :xs="24" :sm="24" :lg="6">
-                    <div class="topWindowBox">
-                        <div class="twbTitle">
-                            <div class="twbIconbg bg4">
-                                <img src="@/assets/index/topIcon4.png" />
+                <el-col :xs="24" :sm="24" :lg="12">
+                    <div class="chartBox">
+                        <div class="chartTitle">系统消息</div>
+                        <div class="chart-wrapper">
+                            <div v-for="item in sys_msg" :key="item.id" class="sys_msg_item">
+                                <div class="sys_msg_class" :class="item.class">{{ item.class }}</div>
+                                <div @click="goToDetail(item.id, item.class)" class="sys_msg_title"> {{
+                                    truncateTitle(item.title) }}
+                                    <span class="tick">...提交了审核</span>
+                                </div>
+
+                                <div class="sys_msg_time">{{ item.formatted_updated_at }}</div>
                             </div>
-                            商品发布数量
+
                         </div>
-                        <div class="twbNumber">{{ allGoodsCount }}</div>
                     </div>
                 </el-col>
-                <el-col :xs="24" :sm="24" :lg="6">
-                    <div class="topWindowBox">
-                        <div class="twbTitle">
-                            <div class="twbIconbg bg5">
-                                <img src="@/assets/index/topIcon5.png" />
+                <el-col :xs="24" :sm="24" :lg="12">
+                    <div class="chartBox">
+
+                        <div class="chartBox">
+                            <div class="chartTitle">聊天消息</div>
+                            <div class="chart-wrapper">
+                                <div v-for="item in chat_msg" :key="item.id" class="sys_msg_item">
+                                    <div class="sys_msg_class" :class="item.class">{{ item.class }}</div>
+                                    <div @click="goToDetail(item.id, item.class)" class="sys_msg_title"> {{
+                                        truncateTitle(item.content) }}
+                                        <span class="tick" v-if="item.class == '群聊'">..收到了一条群消息</span>
+                                        <span class="tick" v-if="item.class == '单聊'">..收到了一条消息</span>
+                                        <span class="tick" v-if="item.class == '话题'">..收到了一条评论</span>
+                                    </div>
+                                    <div class="sys_msg_time">{{ item.formatted_updated_at }}</div>
+                                </div>
+
                             </div>
-                            书刊音像发布数量
                         </div>
-                        <div class="twbNumber">{{ allBookCount }}</div>
                     </div>
                 </el-col>
-                <el-col :xs="24" :sm="24" :lg="6">
-                    <div class="topWindowBox">
-                        <div class="twbTitle">
-                            <div class="twbIconbg bg6">
-                                <img src="@/assets/index/topIcon6.png" />
+            </el-row>
+            <div style="height: 20px;" class="noticeTabs">
+            </div>
+
+            <el-row :gutter="32">
+                <el-col :xs="24" :sm="24" :lg="12">
+                    <div class="chartBox">
+
+                        <div class="chartBox">
+                            <div class="chartTitle">通知投诉</div>
+                            <div class="chart-wrapper">
+                                <div v-for="item in notice_msg" :key="item.id" class="sys_msg_item">
+                                    <div class="sys_msg_class" :class="item.class">{{ item.class }}</div>
+                                    <div @click="goToDetail(item.id, item.class)" class="sys_msg_title"> {{
+                                        truncateTitle(item.title) }}
+                                    </div>
+                                    <div class="sys_msg_time">{{ item.formatted_updated_at }}</div>
+                                </div>
                             </div>
-                            招聘发布数量
                         </div>
-                        <div class="twbNumber">{{allJobRecruitingCount}}</div>
                     </div>
                 </el-col>
             </el-row>
+
+
+            <div style="height: 20px;" class="noticeTabs">
+            </div>
+
+            <!-- 系统消息结束 -->
+
         </div>
 
         <!--超级管理员10000× 个人会员1× 政务会员2× 企业会员3× 调研员4√-->
@@ -518,7 +681,7 @@
                                 </div> -->
                                 <div class="topDataMain">
                                     <span @click="goToList(7)">待审核行政投诉</span>
-                                    <span @click="goToList(7)">{{complaintCount}}</span>
+                                    <span @click="goToList(7)">{{ complaintCount }}</span>
                                 </div>
                             </div>
                         </div>
@@ -613,6 +776,11 @@ export default {
             allJobHuntingCount: 0,
             allNoticeCount: 0,
             allComplaintCount: 0,
+            sys_msg: {},//系统消息
+            chat_msg: {},
+            notice_msg: {},
+            originUrl: '', //网站地址
+
             //折线图
             chatType: '1', //用户选择的哪个数据
             indexDataOptions: [
@@ -635,6 +803,9 @@ export default {
         }
     },
     methods: {
+        truncateTitle(title) {
+            return title.length > 22 ? title.substring(0, 22) + '...' : title;
+        },
         handleClick(row) {
             //跳转
             this.$router.push({
@@ -657,6 +828,13 @@ export default {
             //获取首页数据
             this.$store.dispatch('public/getAdminIndex').then(res => {
                 if (res.code == 200) {
+                    //系统消息
+                    this.sys_msg = res.data.sys_msg;
+                    //聊天消息
+                    this.chat_msg = res.data.chat_msg;
+                    //通知消息
+                    this.notice_msg = res.data.notice_msg;
+                    this.originUrl = res.data.originUrl;
                     //待审核数据
                     this.articleCount = res.data.apply.article;
                     this.adCount = res.data.apply.order;
@@ -698,6 +876,45 @@ export default {
             if (typenumber == 7) { this.$router.push({ path: '/ncomplaintListApply' }) }
             if (typenumber == 8) { this.$router.push({ path: '/adList' }) }
         },
+        goToDetail(id, type) {
+            //跳转到详情页
+            switch (type) {
+                case '资讯':
+                    this.$router.push({ path: '/creatNews', query: { id: id } });
+                    break;
+                case "商品":
+                    this.$router.push({ path: '/addGood', query: { id: id } });
+                    break;
+                case '书刊':
+                    this.$router.push({ path: '/addBook', query: { id: id } });
+                case '招聘':
+                    this.$router.push({ path: '/creatJob', query: { id: id } });
+                    break;
+                case '求职':
+                    this.$router.push({ path: '/addJobHunting', query: { id: id } });
+                    break;
+                case '通知':
+                    this.$router.push({ path: '/addNotice', query: { id: id } });
+                    break;
+                case '投诉':
+                    this.$router.push({ path: '/addNcomplaint', query: { id: id } });
+                    break;
+                case '话题':
+                    // this.$router.push({ path: '/creatTopic', query: { id: id } });
+                    //判断是否有http，加上
+                    if (this.originUrl.indexOf('http') == -1) {
+                        this.originUrl = 'http://' + this.originUrl;
+                    }
+                    window.open(this.originUrl + '/topic/' + id, '_blank');
+                    break;
+                case '单聊':
+                    this.$router.push({ path: '/hall', query: { id: id } });
+                    break;
+                case '群聊':
+                    this.$router.push({ path: '/hall', query: { id: id } });
+                    break;
+            }
+        },
         //切换折线图数据
         changeLineChartData(type) {
             console.log(type)
@@ -958,7 +1175,7 @@ export default {
 
 .chartBox {
     width: 100%;
-    height: 440px;
+    height: 600px;
     border-radius: 20px;
     overflow: hidden;
     background-color: @bgColor;
@@ -970,6 +1187,10 @@ export default {
     }
 }
 
+.otherheight {
+    height: 450px;
+}
+
 .noData {
     color: #CCCCCC;
     font-size: 32px;
@@ -1012,4 +1233,175 @@ export default {
     width: 130px;
     margin-left: 20px;
 }
+
+.chartBox {
+    width: 100%;
+    border-radius: 20px;
+    overflow: hidden;
+    background-color: #FFFFFF;
+    /* Match the background color from .topWindowBox */
+    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
+    /* Add subtle shadow for depth */
+}
+
+.chartTitle {
+    color: #212227;
+    /* Match @title variable used elsewhere */
+    padding: 30px 30px 0 30px;
+    font-size: 24px;
+    font-weight: bold;
+}
+
+.chart-wrapper {
+    background: #fff;
+    padding: 16px;
+    margin-top: 0px;
+}
+
+.sys_msg_item {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    padding: 15px 30px;
+    border-bottom: 1px solid #E9F3FC;
+    /* Light border to separate items */
+}
+
+.sys_msg_class,
+.sys_msg_title,
+.sys_msg_time {
+    font-size: 16px;
+    color: #212227;
+    /* Consistent with other text colors */
+}
+
+.sys_msg_class {
+    font-weight: bold;
+    width: 6%;
+    border-radius: 5%;
+    display: flex;
+    align-items: center;
+    padding: 2px;
+    justify-content: center;
+    margin-right: 2px;
+    font-size: 12px;
+    line-height: 12px;
+    text-align: center;
+    vertical-align: middle;
+    border: 1px solid transparent; // 初始化边框，颜色由具体类决定
+}
+
+// 资讯
+.sys_msg_class.资讯 {
+    background-color: #66BFBF; // 资讯的背景色
+    border-color: #006666; // 资讯的边框色
+    color: #006666;
+}
+
+// 商品
+.sys_msg_class.商品 {
+    background-color: #FFCC99; // 商品的背景色
+    border-color: #FF9933; // 商品的边框色
+    color: #FF9933;
+}
+
+// 书刊
+.sys_msg_class.书刊 {
+    background-color: #FFCCCC; // 书刊的背景色
+    border-color: #FF6666; // 书刊的边框色
+    color: #FF6666;
+}
+
+// 招聘
+.sys_msg_class.招聘 {
+    background-color: #99CCFF; // 招聘的背景色
+    border-color: #3366CC; // 招聘的边框色
+    color: #3366CC;
+}
+
+// 求职
+.sys_msg_class.求职 {
+    background-color: #CCFFCC; // 求职的背景色
+    border-color: #669966; // 求职的边框色
+    color: #669966;
+}
+
+// 通知
+.sys_msg_class.通知 {
+    background-color: #FFCCFF; // 通知的背景色
+    border-color: #CC66CC; // 通知的边框色
+    color: #CC66CC;
+}
+
+// 投诉
+.sys_msg_class.投诉 {
+    background-color: #FFCCCC; // 投诉的背景色
+    border-color: #CC3333; // 投诉的边框色
+    color: #CC3333;
+}
+
+// 话题
+.sys_msg_class.话题 {
+    background-color: #FFFFCC; // 话题的背景色
+    border-color: #CCCC66; // 话题的边框色
+    color: #CCCC66;
+}
+
+//公告
+.sys_msg_class.公告 {
+    background-color: #CCFFFF; // 公告的背景色
+    border-color: #3399FF; // 公告的边框色
+    color: #3399FF;
+}
+
+// 单聊
+.sys_msg_class.单聊 {
+    background-color: #CCFFFF; // 单聊的背景色
+    border-color: #66CCCC; // 单聊的边框色
+    color: #66CCCC;
+}
+
+// 群聊
+.sys_msg_class.群聊 {
+    background-color: #FFCCFF; // 群聊的背景色
+    border-color: #CC66CC; // 群聊的边框色
+    color: #CC66CC;
+}
+
+// 通用样式，设置边框宽度和样式
+.sys_msg_class {
+    border: 1px solid transparent; // 初始化边框，颜色由具体类决定
+}
+
+// 根据 class 区分不同的边框颜色
+.sys_msg_class.zhaopin {
+    background-color: #7f93f7; // 通知的背景色
+    border-color: #2541cc; // 通知的边框色
+    color: #2541cc;
+}
+
+
+.tick {
+    width: 14%;
+    color: #797e96;
+    font-size: 14px;
+}
+
+.sys_msg_title {
+    width: 80%;
+    /* Adjust based on your preference */
+    white-space: nowrap;
+    overflow: hidden;
+    // text-overflow: ellipsis;
+    //点击图标
+    cursor: pointer;
+}
+
+.sys_msg_time {
+    width: 20%;
+    /* Adjust based on your preference */
+    text-align: right;
+    color: #707B81;
+    /* Softer color for dates */
+}
 </style>