home.vue 33 KB

1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556575859606162636465666768697071727374757677787980818283848586878889909192939495969798991001011021031041051061071081091101111121131141151161171181191201211221231241251261271281291301311321331341351361371381391401411421431441451461471481491501511521531541551561571581591601611621631641651661671681691701711721731741751761771781791801811821831841851861871881891901911921931941951961971981992002012022032042052062072082092102112122132142152162172182192202212222232242252262272282292302312322332342352362372382392402412422432442452462472482492502512522532542552562572582592602612622632642652662672682692702712722732742752762772782792802812822832842852862872882892902912922932942952962972982993003013023033043053063073083093103113123133143153163173183193203213223233243253263273283293303313323333343353363373383393403413423433443453463473483493503513523533543553563573583593603613623633643653663673683693703713723733743753763773783793803813823833843853863873883893903913923933943953963973983994004014024034044054064074084094104114124134144154164174184194204214224234244254264274284294304314324334344354364374384394404414424434444454464474484494504514524534544554564574584594604614624634644654664674684694704714724734744754764774784794804814824834844854864874884894904914924934944954964974984995005015025035045055065075085095105115125135145155165175185195205215225235245255265275285295305315325335345355365375385395405415425435445455465475485495505515525535545555565575585595605615625635645655665675685695705715725735745755765775785795805815825835845855865875885895905915925935945955965975985996006016026036046056066076086096106116126136146156166176186196206216226236246256266276286296306316326336346356366376386396406416426436446456466476486496506516526536546556566576586596606616626636646656666676686696706716726736746756766776786796806816826836846856866876886896906916926936946956966976986997007017027037047057067077087097107117127137147157167177187197207217227237247257267277287297307317327337347357367377387397407417427437447457467477487497507517527537547557567577587597607617627637647657667677687697707717727737747757767777787797807817827837847857867877887897907917927937947957967977987998008018028038048058068078088098108118128138148158168178188198208218228238248258268278288298308318328338348358368378388398408418428438448458468478488498508518528538548558568578588598608618628638648658668678688698708718728738748758768778788798808818828838848858868878888898908918928938948958968978988999009019029039049059069079089099109119129139149159169179189199209219229239249259269279289299309319329339349359369379389399409419429439449459469479489499509519529539549559569579589599609619629639649659669679689699709719729739749759769779789799809819829839849859869879889899909919929939949959969979989991000100110021003100410051006100710081009101010111012101310141015101610171018101910201021102210231024102510261027102810291030103110321033103410351036103710381039104010411042104310441045104610471048104910501051105210531054105510561057105810591060106110621063106410651066106710681069107010711072107310741075107610771078107910801081108210831084108510861087108810891090109110921093109410951096109710981099110011011102110311041105110611071108110911101111111211131114111511161117111811191120112111221123112411251126112711281129113011311132113311341135113611371138113911401141114211431144114511461147114811491150115111521153115411551156115711581159116011611162116311641165116611671168116911701171117211731174117511761177117811791180118111821183118411851186118711881189119011911192119311941195119611971198119912001201120212031204120512061207120812091210121112121213121412151216121712181219122012211222122312241225122612271228
  1. <template>
  2. <div class="all-box">
  3. <div class="home-dialog">
  4. <el-dialog
  5. style=""
  6. top="0"
  7. title="系统通知"
  8. :visible.sync="dialogVisible"
  9. width="30%">
  10. <el-tabs v-model="activeName" type="card" @tab-click="handleClick">
  11. <el-tab-pane v-for="(msgitem,index) in msgtype" :key="index" :label="msgitem.id+''" :name="msgitem.name">
  12. <span slot="label">
  13. {{ msgitem.name }}
  14. <el-badge :hidden="msgitem.unReadCount==0?true:false" :value="msgitem.unReadCount" :max="9999"></el-badge>
  15. </span>
  16. </el-tab-pane>
  17. <div class="msg-box">
  18. <div class="read-btn">
  19. <el-button type="primary" @click="taskclicks(2)" size="mini" :plain="tasknobtn" >未读</el-button>
  20. <el-button type="primary" @click="taskclicks(3)" size="mini" :plain="taskbtn" >已读</el-button>
  21. </div>
  22. <div class="scroll-box">
  23. <div class="news-box" v-for="(item,index) in msglist" :key="index">
  24. <div class="news-box-list">
  25. <div class="news-list-hade">
  26. <div v-if="type==1021">系统通知</div>
  27. <div v-if="type!=1021">{{item.title}}</div>
  28. <div v-if="type!=1021">所属部门: {{item.issuerDep}}</div>
  29. </div>
  30. <div class="news-list-content" v-html="item.content">
  31. </div>
  32. <div class="news-list-posts">
  33. <div v-if="type==1020">发布人: {{item.issuerUser}}</div>
  34. <div v-if="type==1020">发布时间: {{item.releaseTime}}</div>
  35. <div v-if="type!=1020">发送时间: {{item.releaseTime}}</div>
  36. </div>
  37. <div v-if="type==1020" class="news-list-btn" >
  38. <el-button @click="DeleMsg(index,item)" size="mini" v-if="item.isRead==0" type="primary">前往任务</el-button>
  39. <el-button v-if="item.isRead==1" size="mini" type="info">已读任务</el-button>
  40. </div>
  41. <div v-else class="news-list-btn" >
  42. <el-button @click="DeleMsg(index,item)" size="mini" v-if="item.isRead==0" type="primary">确认已读</el-button>
  43. <el-button v-if="item.isRead==1" size="mini" type="info">已读</el-button>
  44. </div>
  45. </div>
  46. </div>
  47. <div v-if="count>10&&msglist.length<count" class="loadmore">
  48. <el-button @click="loadadd" size="mini">加载更多</el-button>
  49. </div>
  50. <el-divider v-if="msglist.length>=count" style="">没有更多了!</el-divider>
  51. </div>
  52. </div>
  53. </el-tabs>
  54. </el-dialog>
  55. </div>
  56. <div class="gpt-dialog">
  57. <el-dialog top="3vh" width="1600px" title="请自行用手机号注册即可使用" :visible.sync="gptdialog">
  58. <iframe src="https://kimi.moonshot.cn" width="100%" height="800px"></iframe>
  59. </el-dialog>
  60. </div>
  61. <el-container class="all">
  62. <el-aside class="delwh menubar">
  63. <div ref="haeds" class="user">
  64. <div class="user-box">
  65. <div class="user-img">
  66. <img src="../assets/logo2.png" />
  67. </div>
  68. <div v-if="panduan" class="user-text">
  69. 泛美国际 - AI智能办公系统
  70. </div>
  71. </div>
  72. </div>
  73. <div ref="avatarhaeds" class="avatar-box">
  74. <div class="nei-avatar">
  75. <div class="avatar">
  76. <div class="avatar-img">
  77. <img v-if="sex==1" src="../assets/nv.png" alt="" />
  78. <img v-else src="../assets/nan.png" alt="" />
  79. </div>
  80. <div v-if="panduan" class="avatar-text">
  81. <div class="avatar-name">员工: {{ userinif.userInfo.cnName }}</div>
  82. <div class="avatar-division">职位: {{ userinif.userInfo.jobName }}</div>
  83. <div>部门: {{ userinif.userInfo.depName }}</div>
  84. </div>
  85. </div>
  86. </div>
  87. </div>
  88. <el-menu :style="gaodu" :default-active="indexs" class="el-menu-vertical-demo meun-ul" @open="handleOpen" @close="handleClose"
  89. :collapse="isCollapse">
  90. <el-menu-item v-for="(item, filindex) in filmenuList" :key="filindex + '/'"
  91. :index="item.modulid + '-' + item.pageList[0].pageid" @click="toURLs($event.index, item)">
  92. <i :class="iconfont+item.remark"></i>
  93. <span slot="title">{{ item.pageList[0].pageName }}</span>
  94. </el-menu-item>
  95. <el-submenu v-for="(item, index) in filmenuLists" :key="index" :index='item.modulid + ""'
  96. @click="toURL($event.index)">
  97. <template slot="title">
  98. <i :class="iconfont+item.remark"></i>
  99. <span>{{ item.modulName }}</span>
  100. </template>
  101. <el-menu-item-group>
  102. <el-menu-item @click="toURL($event.index, items)" v-for="(items, index) in item.pageList" :key="index"
  103. :index="items.modulid + '-' + items.pageid">{{ items.pageName }}</el-menu-item>
  104. </el-menu-item-group>
  105. </el-submenu>
  106. </el-menu>
  107. </el-aside>
  108. <el-container>
  109. <el-header>
  110. <div class="btnradio">
  111. <el-radio-group v-model="isCollapse" @change="radioChange($event)">
  112. <el-radio-button class="radiobox" :label="false"><span
  113. class="iconfont icon-caidanzhankai icon"></span></el-radio-button>
  114. <el-radio-button class="radiobox" :label="true"><span
  115. class="iconfont icon-caidanshouqi icon"></span></el-radio-button>
  116. </el-radio-group>
  117. <div class="header-title">首页</div>
  118. </div>
  119. <div class="name-box">
  120. <div class="instrument" @click="instrumentclick('.instrument-box', $event)">
  121. <i class="iconfont icon-shiyonggongju"></i>
  122. </div>
  123. <div class="message">
  124. <el-badge :value="unReadCount" class="item">
  125. <i class="iconfont icon-tongzhi" @click="dialogVisible= true"></i>
  126. </el-badge>
  127. </div>
  128. <div class="user-inif" @click="instrumentclick('.user-operate', $event)">
  129. <div class="user-inifs">
  130. <img v-if="sex==1" src="../assets/nv.png" alt="" />
  131. <img v-else src="../assets/nan.png" alt="" />
  132. </div>
  133. </div>
  134. </div>
  135. <div class="instrument-box">
  136. <div class="instrument-box-title">实用工具</div>
  137. <div class="instrument-box-inif">
  138. <div class="box-inif-ul">
  139. <div @click="gptdialog = true" class="box-inif-li">
  140. <div class="inif-li-img">
  141. <img src="../assets/QuNaEr.jpg" alt="" />
  142. </div>
  143. <div class="inif-li-text">KIMI</div>
  144. </div>
  145. <div @click="opengpt" class="box-inif-li">
  146. <div class="inif-li-img">
  147. <img src="../assets/QuNaEr.jpg" alt="" />
  148. </div>
  149. <div class="inif-li-text">GPT</div>
  150. </div>
  151. <!-- <div class="box-inif-li">
  152. <div class="inif-li-img">
  153. <img src="../assets/QuNaEr.jpg" alt="" />
  154. </div>
  155. <div class="inif-li-text">去哪儿</div>
  156. </div>
  157. <div class="box-inif-li">
  158. <div class="inif-li-img">
  159. <img src="../assets/QuNaEr.jpg" alt="" />
  160. </div>
  161. <div class="inif-li-text">去哪儿</div>
  162. </div>
  163. <div class="box-inif-li">
  164. <div class="inif-li-img">
  165. <img src="../assets/QuNaEr.jpg" alt="" />
  166. </div>
  167. <div class="inif-li-text">去哪儿</div>
  168. </div>
  169. <div class="box-inif-li">
  170. <div class="inif-li-img">
  171. <img src="../assets/QuNaEr.jpg" alt="" />
  172. </div>
  173. <div class="inif-li-text">去哪儿</div>
  174. </div>
  175. <div class="box-inif-li">
  176. <div class="inif-li-img">
  177. <img src="../assets/QuNaEr.jpg" alt="" />
  178. </div>
  179. <div class="inif-li-text">去哪儿</div>
  180. </div>
  181. <div class="box-inif-li">
  182. <div class="inif-li-img">
  183. <img src="../assets/QuNaEr.jpg" alt="" />
  184. </div>
  185. <div class="inif-li-text">去哪儿</div>
  186. </div>
  187. <div class="box-inif-li">
  188. <div class="inif-li-img">
  189. <img src="../assets/QuNaEr.jpg" alt="" />
  190. </div>
  191. <div class="inif-li-text">去哪儿</div>
  192. </div>
  193. <div class="box-inif-li">
  194. <div class="inif-li-img">
  195. <img src="../assets/QuNaEr.jpg" alt="" />
  196. </div>
  197. <div class="inif-li-text">去哪儿</div>
  198. </div>
  199. <div class="box-inif-li">
  200. <div class="inif-li-img">
  201. <img src="../assets/QuNaEr.jpg" alt="" />
  202. </div>
  203. <div class="inif-li-text">去哪儿</div>
  204. </div> -->
  205. </div>
  206. </div>
  207. </div>
  208. <div class="user-operate">
  209. <div class="operate-title">
  210. <div class="avatar">
  211. <div class="avatar-img">
  212. <img v-if="sex==1" src="../assets/nv.png" alt="" />
  213. <img v-else src="../assets/nan.png" alt="" />
  214. </div>
  215. <div class="avatar-text">
  216. <div class="avatar-name">姓名:{{ userinif.userInfo.cnName }} 部门: {{ userinif.userInfo.depName }}</div>
  217. <div class="avatar-division">职位: {{ userinif.userInfo.jobName }}</div>
  218. </div>
  219. </div>
  220. </div>
  221. <div class="operate-ul">
  222. <!-- <div class="operate-li">全屏</div>
  223. <div class="operate-li">修改密码</div>
  224. <div class="operate-li">个人资料</div> -->
  225. <div @click="logOut()" class="operate-li">退出</div>
  226. </div>
  227. </div>
  228. </el-header>
  229. <el-main>
  230. <keep-alive>
  231. <router-view v-if="$route.meta.keepAlive"/>
  232. </keep-alive>
  233. <router-view v-if="!$route.meta.keepAlive" />
  234. </el-main>
  235. </el-container>
  236. </el-container>
  237. </div>
  238. </template>
  239. <script>
  240. //import * as signalR from "@aspnet/signalr";
  241. // const signalR=require('@microsoft/signalr')
  242. // import * as signalR from "@microsoft/signalr";
  243. // import * as signalR from "../../node_modules/microso";
  244. // import child from '~/components/Finance/FeesPage';
  245. // const signalR=require('@microsoft/signalr')
  246. export default {
  247. data() {
  248. return {
  249. userId:'',
  250. token:'',
  251. menuList: [],
  252. isCollapse: false,
  253. panduan: "",
  254. username: "雷怡",
  255. indexs: "1",
  256. pdinstrument: true,
  257. userinif: '',
  258. dialogVisible: false ,
  259. newstasklist:[],
  260. newsgrouplist:[],
  261. activeName: '',
  262. tasknot:0,//任务未读条数
  263. groupnot:0,//团组未读条数
  264. tasknotlist:[],//任务未读
  265. taskReadlist:[],//任务以读
  266. groupnotlist:[],//团组未读
  267. groupReadlist:[],//团组以读
  268. taskbtn:true,//plain任务已读
  269. tasknobtn:false,//plain任务未读
  270. groupbtn:true,//plain团组已读
  271. groupnobtn:true,//plain团组未读
  272. unReadCount:0,//未读总条数
  273. msgtype:[],//未读总条数
  274. pageIndex:1,//页码
  275. pageSize:10,//条数
  276. type:0,//类型
  277. readStatus:2,//状态
  278. msglist:[],//list
  279. count:0,//list数量
  280. panduans:false,
  281. iconfont:'iconfont ',
  282. gaodu:'',
  283. gptdialog:false,
  284. sex:0
  285. };
  286. },
  287. // components: {
  288. // child
  289. // },
  290. methods: {
  291. handleOpen(key, keyPath) {
  292. console.log(key, keyPath);
  293. },
  294. handleClose(key, keyPath) {
  295. console.log(key, keyPath);
  296. },
  297. //移除element行内样式
  298. removal() {
  299. document.querySelector(".menubar").style.height = window.innerHeight + "px";
  300. document.querySelector(".all").style.height = window.innerHeight + "px";
  301. document.querySelector(".delwh").style.width = "";
  302. document.querySelector(".meun-ul").style.height=(window.innerHeight-(this.$refs.haeds.offsetHeight+this.$refs.avatarhaeds.offsetHeight))+'px';
  303. console.log(window.innerHeight-(this.$refs.haeds.offsetHeight+this.$refs.avatarhaeds.offsetHeight))
  304. },
  305. toURLs(val, item) {
  306. console.log(val)
  307. console.log(item)
  308. localStorage.setItem("indexs", val);
  309. localStorage.setItem("innhtml", item.pageList[0].pageName);
  310. localStorage.setItem("Permissions", JSON.stringify(item.pageAuth));
  311. this.$router.push({ path: "/home" + item.pageList[0].webUrl });
  312. document.querySelector(".header-title").innerHTML = item.pageList[0].pageName;
  313. },
  314. toURL(val, item) {
  315. console.log(val)
  316. console.log(item)
  317. localStorage.setItem("indexs", val);
  318. localStorage.setItem("innhtml", item.pageName);
  319. localStorage.setItem("Permissions", JSON.stringify(item.pageAuth));
  320. this.$router.push({ path: "/home" + item.webUrl });
  321. document.querySelector(".header-title").innerHTML = item.pageName;
  322. },
  323. //打开gpt
  324. opengpt(){
  325. window.open('https://chat.openai.com')
  326. },
  327. radioChange(val) {
  328. this.gaodu='height:'+ (window.innerHeight-(this.$refs.haeds.offsetHeight+this.$refs.avatarhaeds.offsetHeight))+'px'
  329. var radiobox = document.querySelectorAll(".radiobox");
  330. if (val == true) {
  331. this.panduan = false;
  332. document.querySelector(".user-text").style.display = "none";
  333. document.querySelector(".avatar-text").style.display = "none";
  334. radiobox[1].style.display = "none";
  335. radiobox[0].style.display = "inline-block";
  336. } else if (val == false) {
  337. this.panduan = true;
  338. radiobox[1].style.display = "inline-block";
  339. radiobox[0].style.display = "none";
  340. }
  341. },
  342. ifIndexValue() {
  343. this.indexs = localStorage.getItem('indexs');
  344. document.querySelector(".header-title").innerHTML = localStorage.getItem('innhtml');
  345. console.log(this.indexs)
  346. },
  347. //实用工具
  348. instrumentclick(val, evt) {
  349. if (document.querySelector(val).style.top != "60px") {
  350. evt.currentTarget.style.backgroundImage = "linear-gradient(rgba(29,33,41,.03),rgba(29,33,41,.1))";
  351. evt.currentTarget.firstElementChild.style.color = "#666";
  352. document.querySelector(val).style.top = 60 + "px";
  353. } else {
  354. evt.currentTarget.style.backgroundImage = "";
  355. evt.currentTarget.firstElementChild.style.color = "";
  356. document.querySelector(val).style.top = -570 + "px";
  357. }
  358. },
  359. getmenu() {
  360. this.menuList = JSON.parse(localStorage.getItem('userinif')).authData;
  361. console.log(this.menuList)
  362. },
  363. //登出
  364. logOut() {
  365. this.$confirm('此操作将退出此账号, 是否继续?', '提示', {
  366. confirmButtonText: '确定',
  367. cancelButtonText: '取消',
  368. type: 'warning'
  369. }).then(() => {
  370. this.$router.push({ name: 'Login' })
  371. localStorage.clear();
  372. this.$message({
  373. type: 'success',
  374. message: '已退出!'
  375. });
  376. }).catch(() => {
  377. this.$message({
  378. type: 'info',
  379. message: '已取消退出'
  380. });
  381. });
  382. // this.$router.push({name:'Login'})
  383. // localStorage.clear();
  384. },
  385. fatherMethod() {
  386. console.log('测试');
  387. },
  388. handleClick(tab, event) {
  389. this.pageIndex=1;
  390. this.pageSize=10;
  391. this.msglist=[];
  392. this.type=Number(tab.label);
  393. this.PotsMessagePageList();
  394. },
  395. //已读未读切换
  396. taskclicks(val){
  397. if(val==2){
  398. this.tasknobtn=false;
  399. this.taskbtn=true;
  400. }else{
  401. this.tasknobtn=true;
  402. this.taskbtn=false;
  403. }
  404. this.readStatus=val;
  405. this.pageIndex=1;
  406. this.pageSize=10;
  407. this.msglist=[];
  408. this.PotsMessagePageList();
  409. },
  410. //加载更多
  411. loadadd(){
  412. this.pageIndex++
  413. this.PotsMessagePageList()
  414. },
  415. //消息list
  416. PotsMessagePageList(){
  417. console.log(this.type)
  418. var url = "/api/System/PotsMessagePageList"
  419. var that = this
  420. this.$axios({
  421. method: 'post',
  422. url: url,
  423. headers: {
  424. Authorization: 'Bearer ' + that.token
  425. },
  426. data:{
  427. portType:1,
  428. pageIndex:that.pageIndex,
  429. pageSize:that.pageSize,
  430. type:that.type,
  431. userId:that.userId,
  432. readStatus:that.readStatus
  433. }
  434. }).then(function (res) {
  435. console.log(res)
  436. if(res.data.code==200){
  437. var magarr=res.data.data;
  438. that.count=res.data.count;
  439. for(let j=0;j<magarr.length;j++){
  440. that.msglist.push(magarr[j])
  441. }
  442. }else{
  443. that.$message.error(res.data.msg);
  444. }
  445. }).catch(function (error) {
  446. that.$message.error("获取消息列表失败!");
  447. });
  448. },
  449. //任务通知切换
  450. newstasklistclick(){
  451. console.log(this.newstasklist)
  452. },
  453. //消息类型
  454. PotsMsgTypeData(){
  455. this.msglist=[];
  456. var url = "/api/System/PotsMsgTypeData"
  457. var that = this
  458. this.$axios({
  459. method: 'post',
  460. url: url,
  461. headers: {
  462. Authorization: 'Bearer ' + that.token
  463. },
  464. data:{
  465. portType:1,
  466. userId:that.userId
  467. }
  468. }).then(function (res) {
  469. console.log(res)
  470. if(res.data.code==200){
  471. that.msgtype=res.data.data;
  472. if(!that.panduans){
  473. that.activeName=that.msgtype[0].name;
  474. that.type=that.msgtype[0].id;
  475. }
  476. that.panduans=false
  477. that.PotsMessagePageList()
  478. }else{
  479. that.$message.error(res.data.msg);
  480. }
  481. }).catch(function (error) {
  482. that.$message.error(error);
  483. });
  484. },
  485. //未读条数
  486. PotsMessageUnreadTotalCount(){
  487. var url = "/api/System/PotsMessageUnreadTotalCount"
  488. var that = this
  489. this.$axios({
  490. method: 'post',
  491. url: url,
  492. headers: {
  493. Authorization: 'Bearer ' + that.token
  494. },
  495. data:{
  496. userId:that.userId
  497. }
  498. }).then(function (res) {
  499. if(res.data.code==200){
  500. that.unReadCount=res.data.data.messageUnReadCount;
  501. if(that.unReadCount!=localStorage.getItem('unReadCount')){
  502. that.PotsMsgTypeData();
  503. window.localStorage.removeItem('unReadCount');
  504. localStorage.setItem('unReadCount', JSON.stringify(that.unReadCount));
  505. }else{
  506. console.log('没有新通知!')
  507. }
  508. // return res.data.data.unreadCount;
  509. }else{
  510. that.$message.error(res.data.msg);
  511. }
  512. }).catch(function (error) {
  513. that.$message.error(error);
  514. });
  515. },
  516. //消息确认已读
  517. DeleMsg(index,row){
  518. this.$confirm('此操作将认定你已知晓此通知?', '提示', {
  519. confirmButtonText: '确定',
  520. cancelButtonText: '取消',
  521. type: 'warning'
  522. }).then(() => {
  523. var url = "/api/System/SetMessageRead"
  524. var that = this
  525. this.$axios({
  526. method: 'post',
  527. url: url,
  528. headers: {
  529. Authorization: 'Bearer ' + that.token
  530. },
  531. data:{
  532. portType:1,
  533. msgId:row.id,
  534. userId:that.userId
  535. }
  536. }).then(function (res) {
  537. console.log(res)
  538. if(res.data.code==200){
  539. if(that.type==1020){
  540. that.$router.push({ path: "/home/TaskList"});
  541. that.dialogVisible=false;
  542. }
  543. that.panduans=true;
  544. that.PotsMsgTypeData();
  545. that.$message({
  546. type: 'success',
  547. message: res.data.msg
  548. });
  549. }else{
  550. that.$message.error(res.data.msg);
  551. }
  552. }).catch(function (error) {
  553. that.$message.error("确认已读失败!");
  554. });
  555. }).catch(() => {
  556. this.$message({
  557. type: 'info',
  558. message: '已取消确认已读'
  559. });
  560. });
  561. console.log(index,row)
  562. console.log(this.type)
  563. },
  564. //修改未读条数
  565. uplocal(){
  566. window.localStorage.removeItem('unReadCount');
  567. this.unReadCount--;
  568. localStorage.setItem('unReadCount', JSON.stringify(this.unReadCount));
  569. },
  570. //任务切换
  571. taskclick(text){
  572. if(text=='未读'){
  573. this.newstasklist=this.tasknotlist
  574. this.tasknobtn=false;
  575. this.taskbtn=true;
  576. }else{
  577. this.newstasklist=this.taskReadlist
  578. this.tasknobtn=true;
  579. this.taskbtn=false;
  580. }
  581. console.log(this.newstasklist)
  582. },
  583. //团组切换
  584. groupclick(text){
  585. if(text=='未读'){
  586. this.newsgrouplist=this.groupnotlist
  587. this.groupnobtn=false;
  588. this.groupbtn=true;
  589. }else{
  590. this.newsgrouplist=this.groupReadlist
  591. this.groupnobtn=true;
  592. this.groupbtn=false;
  593. }
  594. },
  595. //消息通知
  596. chatHub(){
  597. var url = "/api/chatHub"
  598. var that = this
  599. this.$axios({
  600. method: 'post',
  601. url: url,
  602. headers: {
  603. Authorization: 'Bearer ' + that.token
  604. },
  605. data:{
  606. userId:that.userId
  607. }
  608. }).then(function (res) {
  609. console.log(res)
  610. if(res.data.code==200){
  611. }else{
  612. that.$message.error(res.data.msg);
  613. }
  614. }).catch(function (error) {
  615. that.$message.error("获取数据源失败!");
  616. });
  617. },
  618. handleClosezz(done) {
  619. this.$confirm('确认关闭?')
  620. .then(_ => {
  621. done();
  622. })
  623. .catch(_ => {});
  624. },
  625. setIntervaltime(){
  626. }
  627. //实时通讯
  628. // async startConnection() {
  629. // this.connection = new signalR.HubConnectionBuilder()
  630. // .withUrl('/api/chatHub') // 替换为你的SignalR服务端URL
  631. // .build();
  632. // this.connection.on('ReceiveMessage', (message) => {
  633. // console.log('Received message:', message);
  634. // });
  635. // try {
  636. // await this.connection.start();
  637. // console.log('SignalR Connected.');
  638. // } catch (err) {
  639. // console.log('Error while starting SignalR connection:', err);
  640. // }
  641. // },
  642. // async sendMessage() {
  643. // if (this.connection) {
  644. // try {
  645. // await this.connection.invoke('SendMessage', 'Hello World'); // SendMessage是服务端定义的方法
  646. // } catch (err) {
  647. // console.error(err);
  648. // }
  649. // }
  650. // },
  651. },
  652. mounted() {
  653. // this.unReadCount=JSON.parse(localStorage.getItem('unReadCount'));
  654. this.removal();
  655. this.radioChange(false);
  656. this.ifIndexValue();
  657. this.getmenu();
  658. this.PotsMsgTypeData();
  659. let timer = setInterval(() => {
  660. this.PotsMessageUnreadTotalCount();
  661. }, 10000)
  662. this.$once('hook:beforeDestroy', () => {
  663. clearInterval(timer)
  664. timer = null
  665. })
  666. // setTimeout(this.PotsMessagePageList(),500)
  667. // this.setIntervaltime();
  668. // setInterval(this.PotsMessageUnreadTotalCount, 10000);
  669. // setInterval(this.PsotMsgPageList, 3000);
  670. // this.chatHub();
  671. },
  672. created() {
  673. this.userId=JSON.parse(localStorage.getItem('userinif')).userInfo.userId;
  674. this.sex=JSON.parse(localStorage.getItem('userinif')).userInfo.sex;
  675. this.token=JSON.parse(localStorage.getItem('userinif')).token;
  676. this.userinif = JSON.parse(localStorage.getItem('userinif'));
  677. this.PotsMessageUnreadTotalCount();
  678. // this.startConnection();
  679. },
  680. computed: {
  681. getWsMsg (){
  682. return this.$store.state.webSocketMsg
  683. },
  684. filmenuList: function () {
  685. return this.menuList.filter(function (item) {
  686. if (item.modulName == '主页') {
  687. return item
  688. }
  689. })
  690. },
  691. filmenuLists: function () {
  692. return this.menuList.filter(function (item) {
  693. if (item.modulName != '主页') {
  694. return item
  695. }
  696. })
  697. }
  698. },
  699. watch:{
  700. PotsMessageUnreadTotalCount:{
  701. handler(newVal,oldVal) {
  702. console.log(newVal,oldVal)
  703. }
  704. }
  705. }
  706. };
  707. </script>
  708. <style>
  709. *{
  710. font-family:"微软雅黑";
  711. }
  712. .all-box{
  713. font-family:"微软雅黑";
  714. }
  715. .el-menu .el-menu-item.is-active {
  716. color: #fff;
  717. background-color: rgba(0, 0, 0, 0.1);
  718. }
  719. body {
  720. margin: 0;
  721. padding: 0;
  722. }
  723. html {
  724. background-color: #fff;
  725. }
  726. .home-dialog .el-dialog{
  727. position: fixed;
  728. right: 0;
  729. height: 100%;
  730. margin: 0;
  731. }
  732. .el-menu-vertical-demo:not(.el-menu--collapse) {
  733. width: 260px;
  734. min-height: 400px;
  735. }
  736. .el-menu {
  737. border-right: none;
  738. }
  739. .delwh {
  740. border-right: solid 1px #e6e6e6;
  741. background-image: linear-gradient(270deg,
  742. rgba(178, 45, 226, 0.18),
  743. transparent);
  744. background-color: #0f619f;
  745. }
  746. .el-menu-vertical-demo {
  747. background-image: linear-gradient(270deg,
  748. rgba(178, 45, 226, 0.18),
  749. transparent);
  750. background-color: #0f619f;
  751. }
  752. .aligns{
  753. display: flex;
  754. justify-content: space-between;
  755. }
  756. .el-header {
  757. border-bottom: solid 1px #e6e6e6;
  758. display: flex;
  759. justify-content: space-between;
  760. align-items: center;
  761. position: relative;
  762. z-index: 3;
  763. }
  764. .instrument-box {
  765. position: absolute;
  766. z-index: 2;
  767. right: 20px;
  768. top: -400px;
  769. width: 350px;
  770. border-radius: 5px;
  771. overflow: hidden;
  772. box-shadow: 0 0 5px #0005;
  773. transition: all 0.5s;
  774. }
  775. .instrument-box-title {
  776. background: linear-gradient(250deg, #3e93d6, #8a75aa);
  777. padding: 20px;
  778. text-align: center;
  779. color: #fff;
  780. }
  781. .instrument-box-inif {
  782. background-color: #fff;
  783. height: 320px;
  784. overflow-y: auto;
  785. }
  786. .box-inif-ul {
  787. display: flex;
  788. flex-wrap: wrap;
  789. padding: 10px;
  790. }
  791. .inif-li-text {
  792. font-size: 12px;
  793. }
  794. .box-inif-li {
  795. width: 25%;
  796. height: 81px;
  797. display: flex;
  798. flex-direction: column;
  799. justify-content: center;
  800. align-items: center;
  801. border-radius: 50%;
  802. padding: 10px;
  803. margin: 0 3px;
  804. cursor: pointer;
  805. }
  806. .box-inif-li:hover {
  807. background-image: linear-gradient(rgba(29, 33, 41, 0.03),
  808. rgba(29, 33, 41, 0.04));
  809. color: #967bbd;
  810. }
  811. .btnradio {
  812. display: flex;
  813. align-items: center;
  814. }
  815. .home-dialog .el-dialog__body{
  816. padding: 0px 20px;
  817. }
  818. .name-box {
  819. display: flex;
  820. font-size: 14px;
  821. }
  822. .user-operate {
  823. position: absolute;
  824. z-index: 2;
  825. right: 20px;
  826. top: -300px;
  827. width: 310px;
  828. border-radius: 5px;
  829. overflow: hidden;
  830. box-shadow: 0 0 5px #0005;
  831. transition: all 0.5s;
  832. }
  833. .operate-title {
  834. background: linear-gradient(250deg, #3e93d6, #8a75aa);
  835. padding: 20px;
  836. text-align: center;
  837. color: #fff;
  838. }
  839. .operate-ul {
  840. background-color: #fff;
  841. }
  842. .operate-li {
  843. padding: 12px 24px;
  844. cursor: pointer;
  845. color: #555;
  846. }
  847. .operate-li:hover {
  848. background-image: linear-gradient(rgba(29, 33, 41, 0.03),
  849. rgba(29, 33, 41, 0.04));
  850. color: #967bbd;
  851. }
  852. .names {
  853. margin-right: 20px;
  854. }
  855. .quit {
  856. cursor: pointer;
  857. }
  858. .btnradio .el-radio-button:first-child .el-radio-button__inner {
  859. border: none;
  860. }
  861. .el-radio-button:last-child .el-radio-button__inner {
  862. border: none;
  863. }
  864. .icon {
  865. font-size: 20px;
  866. }
  867. .el-radio-button__inner {
  868. padding: 0;
  869. }
  870. .header-title {
  871. margin-left: 20px;
  872. }
  873. .icon-shouye {
  874. margin-right: 5px;
  875. width: 24px;
  876. text-align: center;
  877. font-size: 18px;
  878. vertical-align: middle;
  879. display: inline-block;
  880. font-weight: 600;
  881. }
  882. .icon-tongjitu {
  883. margin-right: 5px;
  884. width: 24px;
  885. text-align: center;
  886. font-size: 18px;
  887. vertical-align: middle;
  888. display: inline-block;
  889. font-weight: 600;
  890. }
  891. .user-img {
  892. width: 40px;
  893. height: 40px;
  894. }
  895. .user-img img {
  896. width: 100%;
  897. height: 100%;
  898. }
  899. .user-box {
  900. padding: 10px 0;
  901. display: flex;
  902. justify-content: center;
  903. align-items: center;
  904. }
  905. .user-text {
  906. /*margin-left: 15px;*/
  907. font-size: 16px;
  908. /*font-weight: 600;*/
  909. color: #fff;
  910. }
  911. .naem-box {
  912. font-size: 16px;
  913. }
  914. .naem-box div {
  915. padding-left: 20px;
  916. }
  917. .el-menu-vertical-demo .el-menu-item {
  918. color: #82c2f3;
  919. }
  920. .el-menu-vertical-demo .el-menu-item:focus,
  921. .el-menu-vertical-demo .el-menu-item:hover {
  922. background-color: rgba(0, 0, 0, 0.1);
  923. color: #fff;
  924. }
  925. .el-menu-vertical-demo .el-menu-item i {
  926. color: #2595ea;
  927. }
  928. .avatar-box {
  929. height: 9.53rem;
  930. background-image: url("../assets/cover-2-lg.png");
  931. background-repeat: no-repeat;
  932. }
  933. .nei-avatar {
  934. height: 100%;
  935. background-color: rgba(27, 92, 164, 0.5);
  936. display: flex;
  937. justify-content: center;
  938. align-items: center;
  939. transition: all 1.5s;
  940. }
  941. .nei-avatar:hover {
  942. background-color: rgba(27, 92, 164, 0);
  943. }
  944. .avatar {
  945. display: flex;
  946. align-items: center;
  947. justify-content: center;
  948. }
  949. .avatar-text {
  950. color: #fff;
  951. margin-left: 15px;
  952. font-size: 14px;
  953. text-align: left;
  954. }
  955. .avatar-text>div {
  956. line-height: 24px;
  957. }
  958. .avatar-img {
  959. width: 50px;
  960. height: 50px;
  961. border-radius: 50%;
  962. overflow: hidden;
  963. }
  964. .avatar-img img {
  965. width: 100%;
  966. }
  967. .user-inifs {
  968. width: 40px;
  969. height: 40px;
  970. border-radius: 50%;
  971. overflow: hidden;
  972. }
  973. .user-inif img {
  974. width: 100%;
  975. }
  976. i.icon-shiyonggongju {
  977. font-size: 32px;
  978. color: #2198f3;
  979. }
  980. i.icon-tongzhi {
  981. font-size: 32px;
  982. color: #2198f3;
  983. }
  984. .name-box>div {
  985. cursor: pointer;
  986. margin-left: 15px;
  987. display: flex;
  988. justify-content: center;
  989. align-items: center;
  990. width: 50px;
  991. height: 50px;
  992. border-radius: 50%;
  993. }
  994. .name-box i:hover {
  995. color: #666;
  996. }
  997. .el-main {
  998. background-color: #ebf6fd;
  999. }
  1000. .inif-li-img {
  1001. width: 50px;
  1002. height: 50px;
  1003. }
  1004. .inif-li-img img {
  1005. width: 100%;
  1006. }
  1007. .meun-ul{
  1008. overflow: auto;
  1009. }
  1010. .meun-ul::-webkit-scrollbar {
  1011. width: 5px;
  1012. height: 10px;
  1013. }
  1014. .meun-ul::-webkit-scrollbar-track {
  1015. border-radius: 10px;
  1016. }
  1017. .meun-ul::-webkit-scrollbar-thumb {
  1018. border-radius: 10px;
  1019. box-shadow: inset 0 0 0 rgba(0, 158, 255, 0.46);
  1020. background-color: rgba(0, 158, 255, 0.46);
  1021. }
  1022. /*消息*/
  1023. .news-box:last-child{
  1024. border-bottom: 1px solid #EBEEF5;
  1025. }
  1026. .news-box:hover{
  1027. background-color: #EBEEF5;
  1028. }
  1029. .news-box{
  1030. border-top: 1px solid #EBEEF5;
  1031. padding: 10px;
  1032. }
  1033. .news-list-hade{
  1034. display: flex;
  1035. justify-content: space-between;
  1036. font-size:15px;
  1037. font-weight: 600;
  1038. margin-bottom: 15px;
  1039. }
  1040. .news-list-posts{
  1041. text-align: right;
  1042. margin: 10px 0;
  1043. font-size: 15px;
  1044. font-weight: 600;
  1045. }
  1046. .instrument-box-inif::-webkit-scrollbar {
  1047. width: 5px;
  1048. height: 16px;
  1049. background-color: transparent;
  1050. }
  1051. .news-list-btn{
  1052. text-align: right;
  1053. }
  1054. .home-dialog .el-tabs__header{
  1055. margin-bottom: 0;
  1056. }
  1057. .read-btn{
  1058. margin: 10px 0;
  1059. }
  1060. .read-btn .el-badge{
  1061. margin-right: 15px;
  1062. }
  1063. .notyet{
  1064. height: 20px;
  1065. line-height: 20px;
  1066. font-size: 17px;
  1067. font-weight: 600;
  1068. text-align: center;
  1069. }
  1070. .home-dialog .el-dialog__header{
  1071. padding: 10px 20px;
  1072. }
  1073. .news-list-content{
  1074. line-height: 20px;
  1075. }
  1076. .loadmore{
  1077. margin-top: 20px;
  1078. text-align: center;
  1079. }
  1080. /*定义滚动条轨道
  1081. 内阴影+圆角*/
  1082. .instrument-box-inif::-webkit-scrollbar-track {
  1083. -webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0);
  1084. border-radius: 10px;
  1085. background-color: transparent;
  1086. }
  1087. /*定义滑块
  1088. 内阴影+圆角*/
  1089. .instrument-box-inif::-webkit-scrollbar-thumb {
  1090. border-radius: 10px;
  1091. -webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.3);
  1092. background-color: #b9bcc0;
  1093. }
  1094. .delwh .el-menu {
  1095. background-color: #0f619f;
  1096. }
  1097. .delwh .el-submenu__title:hover,
  1098. .delwh .el-submenu__title:focus {
  1099. background-color: rgba(0, 0, 0, 0.1);
  1100. color: #fff;
  1101. }
  1102. .delwh .el-submenu__title {
  1103. color: #82c2f3;
  1104. }
  1105. .delwh .el-submenu__title i {
  1106. color: #2595ea;
  1107. }
  1108. .delwh .el-menu-item-group__title {
  1109. padding: 0;
  1110. }
  1111. .el-menu-item-group .el-menu-item-group__title {
  1112. padding: 0;
  1113. }
  1114. .delwh::-webkit-scrollbar {display:none}
  1115. .scroll-box{
  1116. height: 750px;
  1117. overflow-y: auto;
  1118. }
  1119. .scroll-box::-webkit-scrollbar {
  1120. width: 6px;
  1121. }
  1122. .scroll-box::-webkit-scrollbar-track {
  1123. background: rgb(239, 239, 239);
  1124. border-radius: 2px;
  1125. }
  1126. .scroll-box::-webkit-scrollbar-thumb {
  1127. background: #40a0ff49;
  1128. border-radius: 10px;
  1129. }
  1130. .scroll-box::-webkit-scrollbar-thumb:hover {
  1131. background: #40a0ff;
  1132. }
  1133. .all-box .communal-box .el-autocomplete,.el-select{
  1134. margin-right: 0;
  1135. }
  1136. .all-box .el-table th.el-table__cell>.cell{
  1137. text-align: center;
  1138. }
  1139. .all-box .el-table--enable-row-transition .el-table__body td.el-table__cell{
  1140. text-align: center;
  1141. }
  1142. .gpt-dialog .el-dialog__body{
  1143. padding: 0 20px;
  1144. padding-bottom:10px;
  1145. }
  1146. </style>