home.vue 34 KB

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