Interacivemessage.vue 43 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553554555556557558559560561562563564565566567568569570571572573574575576577578579580581582583584585586587588589590591592593594595596597598599600601602603604605606607608609610611612613614615616617618619620621622623624625626627628629630631632633634635636637638639640641642643644645646647648649650651652653654655656657658659660661662663664665666667668669670671672673674675676677678679680681682683684685686687688689690691692693694695696697698699700701702703704705706707708709710711712713714715716717718719720721722723724725726727728729730731732733734735736737738739740741742743744745746747748749750751752753754755756757758759760761762763764765766767768769770771772773774775776777778779780781782783784785786787788789790791792793794795796797798799800801802803804805806807808809810811812813814815816817818819820821822823824825826827828829830831832833834835836837838839840841842843844845846847848849850851852853854855856857858859860861862863864865866867868869870871872873874875876877878879880881882883884885886887888889890891892893894895896897898899900901902903904905906907908909910911912913914915916917918919920921922923924925926927928929930931932933934935936937938939940941942943944945946947948949950951952953954955956957958959960961962963964965966967968969970971972973974975976977978979980981982983984985986987988989990991992993994995996997998999100010011002100310041005100610071008100910101011101210131014101510161017101810191020102110221023102410251026102710281029103010311032103310341035103610371038103910401041104210431044104510461047104810491050105110521053105410551056105710581059106010611062106310641065106610671068106910701071107210731074107510761077107810791080108110821083108410851086108710881089109010911092109310941095109610971098109911001101110211031104110511061107
  1. <!-- 委员会申请列表 -->
  2. <template>
  3. <div class="autoBox box1" style="position: relative; background: #f5f5f5">
  4. <div class="center" style="margin-top: 20px">
  5. <div class="left">
  6. <div class="centerLeft1">
  7. <div class="top">
  8. <div class="top1"></div>
  9. <div class="top2"></div>
  10. <div class="allApplication">
  11. <span v-if="!isDistinguish">{{
  12. $t("common.interactiveMessage")
  13. }}</span>
  14. <span v-else>{{ $t("common.myApplication") }}</span>
  15. </div>
  16. <div @click="back" class="more">
  17. <span>{{ "<" }}{{ $t("common.return") }}</span>
  18. </div>
  19. </div>
  20. <div class="content">
  21. <div class="content1">
  22. <div class="left_top">
  23. <div :class="[message_flat?'l_t_left':'l_t_right']" @click="message_click">
  24. <img v-if="message_flat" src="@/assets/img/nationaIntorduction/xiaoxi.png" alt="" style=" margin-left:10px;width: 15px;margin-left:40px;margin-right:4px">
  25. <img v-else src="@/assets/img/nationaIntorduction/xiaoxi1.png" alt="" style=" margin-left:10px;width: 15px;margin-left:40px;margin-right:4px">
  26. {{ $i18n.locale == 'en' ? 'Message ' : '消息' }}
  27. </div>
  28. <div :class="[message_flat?'l_t_right':'l_t_left']" @click="Organizational_click" >
  29. <img v-if="message_flat" src="@/assets/img/nationaIntorduction/zuzhi.png" alt="" style="width: 15px;margin-left:38px;margin-right:4px">
  30. <img v-else src="@/assets/img/nationaIntorduction/zuzhi1.png" alt="" style="width: 15px;margin-left:38px;margin-right:4px">
  31. {{ $i18n.locale == 'en' ? 'Organization ' : '组织架构' }}
  32. </div>
  33. </div>
  34. <div v-if="message_flat" class="left_bottom">
  35. <div v-for="(item,i) in page" @click="changecolor(item,i)" :class="[msg_click[i]?'l_b_div1':'l_b_div']" >
  36. <div style=" padding-top:22px;padding-left:22px" class="message2">
  37. <div style="margin-right:20px;width:auto">
  38. {{item.sendPeopleName}}
  39. </div>
  40. <div v-if="item.unReadCount&&flag[i]" >
  41. <span style="" class="people_num">{{item.unReadCount}}</span>
  42. </div>
  43. <div class="msg2_time" style="width:auto">{{item.sendTime}}</div>
  44. </div>
  45. <div style="padding-left:22px;margin-top:10px;font-weight: 300;">
  46. <div class="msg2_msg">{{item.content}}</div>
  47. </div>
  48. </div>
  49. </div>
  50. <div v-if="zuzhi_flat" class="left_bottom" style="overflow-y: auto;height: 740px;" >
  51. <!-- <div style="padding:20px;padding-left:20px;width:100%;">-->
  52. <!-- <input placeholder="请输入" style="width:90%"></input>-->
  53. <!-- </div>-->
  54. <div style="overflow-y:auto">
  55. <el-card>
  56. <el-tree
  57. style="font-size: 18px"
  58. :default-expand-all="true"
  59. :data="treeList"
  60. :props="defaultProps"
  61. @node-click="handleNodeClick"
  62. >
  63. <span
  64. class="custom-tree-node"
  65. slot-scope="{ node, data }"
  66. @mouseover="mouseover(data)"
  67. @mouseleave="mouseout(data)"
  68. >
  69. <span
  70. style="margin-right: 3px"
  71. v-if="data.types"
  72. class="group"
  73. ></span>
  74. <!-- 父级icon -->
  75. <span
  76. style="margin-right: 3px"
  77. v-if="data.param"
  78. ></span>
  79. <!-- 子集icon -->
  80. <span
  81. v-else
  82. class="renwu"
  83. ></span>
  84. <span>{{ node.label }}</span>
  85. <span v-if="data.type === '3'">
  86. <span v-show="data.dropdownShow">
  87. <i
  88. @click="toInformation()"
  89. style="margin-left: 10px; font-size: 22px"
  90. class="el-icon-s-home"
  91. ></i>
  92. <i
  93. @click="toInformation()"
  94. style="margin: 0 3px; font-size: 22px"
  95. class="el-icon-user"
  96. ></i>
  97. <i
  98. @click="edit1(data)"
  99. style="margin: 0 3px; font-size: 22px"
  100. class="el-icon-edit-outline"
  101. ></i>
  102. <i style="font-size: 22px" class="el-icon-delete"></i>
  103. </span>
  104. </span>
  105. </span>
  106. </el-tree>
  107. </el-card>
  108. </div>
  109. </div>
  110. </div>
  111. <div class="content2">
  112. <div class="right_one">{{card.name}}</div>
  113. <div style="height:calc(100% - 65px);" >
  114. <div class="right_two" id="chatdiv" v-if="refresh" style="overflow-y: auto;overflow-x:hidden">
  115. <div v-for="(item,i) in message" >
  116. <div class="r_two_time" style="">{{item.sendTime}}</div>
  117. <div class="r_two_content" v-if="item.sendBySelf==0">
  118. <div class="r_t_c_tx">
  119. </div>
  120. <div class="r_t_c_msg">
  121. {{item.content}}
  122. </div>
  123. </div>
  124. <div class="r_two2_content" v-if="item.sendBySelf==1" >
  125. <div class="r_t_c_msg" >
  126. {{item.content}}
  127. </div>
  128. <div class="r_t_c_tx" style="margin-left:20px">
  129. </div>
  130. </div>
  131. </div>
  132. </div>
  133. <div style="height:188px;" >
  134. <div class="inputDeep">
  135. <el-input
  136. type="textarea"
  137. :rows="5"
  138. :placeholder="$i18n.locale == 'zh'?'请输入内容':'Please enter content'"
  139. style="resize: none"
  140. v-model="textarea">
  141. </el-input>
  142. </div>
  143. <div class="send" style="cursor:pointer" @click="sendContent"> {{ $i18n.locale == 'en' ? 'Send ' : '发送' }}</div>
  144. </div>
  145. </div>
  146. </div>
  147. </div>
  148. </div>
  149. </div>
  150. </div>
  151. </div>
  152. </template>
  153. <script>
  154. import Screen from "@/components/screen";
  155. import {getAccept,getOrganize,sendcontent,getMessage} from '@/api/committee/interactive';
  156. export default {
  157. name: "Interacivemessage",
  158. props: ["isDistinguish"],
  159. components: {
  160. Screen,
  161. },
  162. data() {
  163. return {
  164. statusflag:0,//是否定时刷新左侧消息列表以及留言框
  165. timer:null,//定时器
  166. textarea:'',
  167. defaultProps: {
  168. children: "param",
  169. label: "name",
  170. },
  171. card:{
  172. name:'',
  173. englishname:'',
  174. belongCommittee:'',
  175. work:'',
  176. isoffice:'',
  177. nameid:'',
  178. },
  179. zuzhi_flat:false,
  180. defaultShowNodes:[],
  181. refresh:1,
  182. flag:[],
  183. message:[
  184. ],
  185. page:[
  186. ],
  187. message_flat:true,
  188. // page1: [
  189. // {
  190. // id: "01b68b502ebf11eb97968cec4bc03c2d",
  191. // committeeName: "非洲区域委员会",
  192. // committeeType: "区域委员会",
  193. // committeeTypeDict: "2",
  194. // committeeProfile: "非洲联盟委员会是<a href=\"https://baike.so.com/doc/3587325-3772124.html\" target=\"_blank\" style=\"color: rgb(19, 110, 194); text-decoration-line: none; font-family: arial, sans-serif; font-size: 14px; text-indent: 28px; white-space: normal; background-color: rgb(255, 255, 255);\">非洲联盟的权力执行机构。该组织由许多处理不同事务的委员组成。总部设于<a href=\"https://baike.so.com/doc/263985-279449.html\" target=\"_blank\" style=\"color: rgb(19, 110, 194); text-decoration-line: none; font-family: arial, sans-serif; font-size: 14px; text-indent: 28px; white-space: normal; background-color: rgb(255, 255, 255);\">埃塞俄比亚首都<a href=\"https://baike.so.com/doc/6318700-6532299.html\" target=\"_blank\" style=\"color: rgb(19, 110, 194); text-decoration-line: none; font-family: arial, sans-serif; font-size: 14px; text-indent: 28px; white-space: normal; background-color: rgb(255, 255, 255);\">亚的斯亚贝巴。",
  195. // committeeProfileUe: "<p><span style=\"color: rgb(51, 51, 51); font-family: arial, sans-serif; font-size: 14px; text-indent: 28px; background-color: rgb(255, 255, 255);\">非洲联盟委员会是</span><a href=\"https://baike.so.com/doc/3587325-3772124.html\" target=\"_blank\" style=\"color: rgb(19, 110, 194); text-decoration-line: none; font-family: arial, sans-serif; font-size: 14px; text-indent: 28px; white-space: normal; background-color: rgb(255, 255, 255);\">非洲联盟</a><span style=\"color: rgb(51, 51, 51); font-family: arial, sans-serif; font-size: 14px; text-indent: 28px; background-color: rgb(255, 255, 255);\">的权力执行机构。该组织由许多处理不同事务的委员组成。总部设于</span><a href=\"https://baike.so.com/doc/263985-279449.html\" target=\"_blank\" style=\"color: rgb(19, 110, 194); text-decoration-line: none; font-family: arial, sans-serif; font-size: 14px; text-indent: 28px; white-space: normal; background-color: rgb(255, 255, 255);\">埃塞俄比亚</a><span style=\"color: rgb(51, 51, 51); font-family: arial, sans-serif; font-size: 14px; text-indent: 28px; background-color: rgb(255, 255, 255);\">首都</span><a href=\"https://baike.so.com/doc/6318700-6532299.html\" target=\"_blank\" style=\"color: rgb(19, 110, 194); text-decoration-line: none; font-family: arial, sans-serif; font-size: 14px; text-indent: 28px; white-space: normal; background-color: rgb(255, 255, 255);\">亚的斯亚贝巴</a><span style=\"color: rgb(51, 51, 51); font-family: arial, sans-serif; font-size: 14px; text-indent: 28px; background-color: rgb(255, 255, 255);\">。</span></p>",
  196. // regional: "非洲",
  197. // regionalDict: "1",
  198. // nationalFlag: "",
  199. // orderNumber: "200003",
  200. // entityZh: "1",
  201. // entityEn: "1",
  202. // sonList: [
  203. // {
  204. // id: "2da19c16360c11eb97968cec4bc03c2d",
  205. // committeeName: "非洲",
  206. // committeeType: "国家委员会",
  207. // committeeTypeDict: "1",
  208. // committeeProfile: "非洲委员会主要聚焦撒哈拉以南非洲区域,覆盖49个国家和地区,秘书处设立在位于埃塞俄比亚的合作组织非洲办公室。首届委员会主席为埃塞俄比亚能源部部长塞拉西·贝克莱,副主席为非洲电力公用事业协会秘书长阿贝尔·泰拉。非洲委员会工作主要是凝聚区域内各方面力量,协调推动本区域能源互联网发展,组织区域内会员发展和服务等活动。",
  209. // committeeProfileUe: "<p>非洲委员会主要聚焦撒哈拉以南非洲区域,覆盖49个国家和地区,秘书处设立在位于埃塞俄比亚的合作组织非洲办公室。首届委员会主席为埃塞俄比亚能源部部长塞拉西·贝克莱,副主席为非洲电力公用事业协会秘书长阿贝尔·泰拉。非洲委员会工作主要是凝聚区域内各方面力量,协调推动本区域能源互联网发展,组织区域内会员发展和服务等活动。</p>",
  210. // regional: "非洲",
  211. // regionalDict: "1",
  212. // nationalFlag: "committee/2020/12/04/b0c8cfbc73f34f3ebcb3505a2a2e0c00.jpeg",
  213. // orderNumber: "100001",
  214. // entityZh: "1",
  215. // entityEn: "1",
  216. // entityFr: "0",
  217. // entityDe: "0",
  218. // entityEs: "0",
  219. // entityJa: "0",
  220. // entityAr: "0",
  221. // entityRu: "0",
  222. // sort: "99",
  223. // mainLanguage: "",
  224. // spareOne: "",
  225. // nrcCommitteeUserList: [
  226. // {
  227. // id: "6da6b7bd-ee1b-4a0d-bfdb-d788c4675854",
  228. // name: "罗乾宜",
  229. // nameEn: "111",
  230. // correlationId: "101",
  231. // userType: "区域秘书处人员",
  232. // userTypeDict: "A",
  233. // committeName: "非洲",
  234. // committeeId: "2da19c16360c11eb97968cec4bc03c2d",
  235. // committeeType: "",
  236. // committeeTypeDict: "",
  237. // duty: "主席",
  238. // dutyDict: "1",
  239. // userUid: "guoyue-liu",
  240. // isInOffice: "1",
  241. // status: "",
  242. // createBy: "",
  243. // createDate: 1652165398000,
  244. // updateBy: "修改人",
  245. // updateDate: 1653040679000
  246. // }
  247. // ]
  248. // },
  249. // {
  250. // id: "48f8be2abafe11ec88718cec4bc03c2d",
  251. // committeeName: "测试委员会1111",
  252. // committeeType: "国家委员会",
  253. // committeeTypeDict: "1",
  254. // committeeProfile: "阿萨德吉安市大巴卡死了打了卡卡萨丁骄傲卡萨丁",
  255. // committeeProfileUe: "<p>阿萨德吉安市大巴卡死了打了卡卡萨丁骄傲卡萨丁</p>",
  256. // regional: "非洲",
  257. // regionalDict: "1",
  258. // nationalFlag: "committee/2020/12/04/a53c7471c55c4828a32b9d03bbace526.jpg",
  259. // orderNumber: "200009",
  260. // sort: "99",
  261. // createDate: 1649836184000,
  262. // updateDate: 1649916147000,
  263. // isDelete: "1"
  264. // },
  265. // {
  266. // id: "7bd78bfebaff11ec88718cec4bc03c2d",
  267. // committeeName: "测试委员会1",
  268. // committeeType: "国家委员会",
  269. // committeeTypeDict: "1",
  270. // committeeProfile: "阿萨德吉安市大巴卡死了打了卡卡萨丁骄傲卡萨丁",
  271. // committeeProfileUe: "<p>阿萨德吉安市大巴卡死了打了卡卡萨丁骄傲卡萨丁</p>",
  272. // regional: "非洲",
  273. // regionalDict: "1",
  274. // nationalFlag: "committee/2020/12/04/a53c7471c55c4828a32b9d03bbace526.jpg",
  275. // orderNumber: "100011",
  276. // sort: "99",
  277. // createDate: 1649836699000,
  278. // updateDate: 1649836699000,
  279. // isDelete: "1"
  280. // }
  281. // ],
  282. // nrcCommitteeUserList: [
  283. // {
  284. // id: "007e9fb7-e6be-4b51-a080-cd67f4f03a2c",
  285. // name: "F010006",
  286. // nameEn: "F010006",
  287. // correlationId: "954192698283314",
  288. // userType: "委员会人员",
  289. // userTypeDict: "U",
  290. // committeName: "非洲区域委员会",
  291. // committeeId: "01b68b502ebf11eb97968cec4bc03c2d",
  292. // committeeType: "",
  293. // committeeTypeDict: "",
  294. // duty: "秘书",
  295. // dutyDict: "5",
  296. // userUid: "F010006",
  297. // isInOffice: "1",
  298. // status: "1",
  299. // createBy: "",
  300. // createDate: 1652165031000,
  301. // updateBy: "修改人",
  302. // updateDate: 1652169921000
  303. // }
  304. //
  305. // ]
  306. // },
  307. //
  308. //
  309. //
  310. // ],
  311. msg_click:[],
  312. search: "",
  313. screen1s: {
  314. value: "common.type",
  315. item: [],
  316. },
  317. screen1def: null,
  318. screen2Item: null,
  319. treeList:[],
  320. treeData:[]
  321. };
  322. },
  323. watch: {
  324. "$i18n.locale"() {},
  325. CountryId() {},
  326. /*statusflag(){//自动刷新-消息列表以及留言框
  327. if(this.statusflag==1){
  328. this.timer = setInterval(() => {
  329. setTimeout(this.refreshmessage, 0)
  330. }, 1000*5)
  331. }
  332. }*/
  333. },
  334. updated(){
  335. let div=document.getElementById("chatdiv")
  336. div.scrollTop=div.scrollHeight
  337. },
  338. mounted() {
  339. let params={
  340. frontOrBack:2
  341. }
  342. getAccept(params).then(res=>{
  343. if(res.status=='200'){
  344. this.page=res.data.page
  345. this.card.name=res.data.page[0].sendPeopleName
  346. this.card.nameid=res.data.page[0].sendPeople
  347. this.page.forEach((item,index)=>{
  348. if(item.unReadCount!=0){
  349. this.flag[index]=1
  350. }
  351. else{
  352. this.flag[index]=0
  353. }
  354. })
  355. let params2={
  356. sendPeople:res.data.page[0].sendPeople,
  357. frontOrBack:2
  358. }
  359. getMessage(params2).then(res=>{
  360. this.message=res.data.page
  361. this.statusflag=1
  362. })
  363. }
  364. })
  365. getOrganize(params).then(res=>{
  366. let treelist=res.data.page
  367. treelist.forEach((item,index)=>{
  368. item.id=item.id
  369. item.name=item.committeeName
  370. if(item.committeeType){
  371. item.committeeType=item.committeeType
  372. }
  373. /*if(item.nrcCommitteeUserList){
  374. item.nrcCommitteeUserList=item.nrcCommitteeUserList
  375. item.nameid=item.id
  376. }*/
  377. let obj = {};
  378. obj.param=[]
  379. if(item.nrcCommitteeUserList){
  380. item.nrcCommitteeUserList.forEach(item4=>{
  381. let param1={}
  382. param1.id=item4.id
  383. param1.type=1
  384. param1.name=item4.name
  385. param1.nameEn=item4.nameEn
  386. param1.isInOffice=item4.isInOffice
  387. param1.committeeName=item.committeeName
  388. param1.duty=item4.duty
  389. if(item4.committeeType){
  390. param1.committeeType=item4.committeeType
  391. }
  392. (obj.param).push(param1)
  393. })
  394. }
  395. item.type=0
  396. item.types=0
  397. item.param=[]
  398. item.param = (obj.param)
  399. if(item.sonList.length>0){
  400. item.sonList.forEach(item2=>{
  401. let param={}
  402. param.id=item2.id
  403. param.type=0
  404. if(item2.committeeName){
  405. param.name=item2.committeeName
  406. }
  407. if(item2.committeeType){
  408. param.committeeType=item2.committeeType
  409. }
  410. param.param=[]
  411. if(item2.nrcCommitteeUserList){
  412. item2.nrcCommitteeUserList.forEach(item3=>{
  413. let param1={}
  414. param1.id=item3.id
  415. param1.type=1
  416. param1.types=0
  417. param1.name=item3.name
  418. param1.nameEn=item3.nameEn
  419. param1.isInOffice=item3.isInOffice
  420. param1.committeeName=item2.committeeName
  421. param1.duty=item3.duty
  422. if(item3.committeeType){
  423. param1.committeeType=item3.committeeType
  424. }
  425. (param.param).push(param1)
  426. })
  427. }
  428. else{
  429. param.types=1
  430. }
  431. (item.param).push(param)
  432. })
  433. }
  434. })
  435. this.treeList=treelist
  436. console.log(this.treeList)
  437. })
  438. console.log(this.isDistinguish);
  439. this.$set(this.msg_click,0,true)
  440. for(let i=1;i<10;i++){
  441. this.$set(this.msg_click,i,false)
  442. }
  443. console.log(this.statusflag)
  444. // if(this.statusflag==1){//自动刷新-消息列表以及留言框
  445. // console.log('hahahah')
  446. // var _this = this;
  447. // this.timer = setInterval(() => {
  448. // _this.refreshmessage()
  449. // console.log('hahah')
  450. // }, 1000*5)
  451. // }
  452. this.timer = setInterval(()=>{
  453. // 这里调用调用需要执行的方法,1为自定义的参数,由于特殊的需求它将用来区分,定时器调用和手工调用,然后执行不同的业务逻辑
  454. this.refreshmessage();
  455. }, 5000) // 每五秒执行1次
  456. },
  457. destroyed() {
  458. //清除多次执行定时器
  459. clearInterval(this.timer)
  460. },
  461. // beforeDestroy(){//销毁定时器
  462. // clearInterval(this.timer);
  463. // this.timer = null;
  464. // },
  465. methods: {
  466. refreshmessage(){
  467. let params={
  468. frontOrBack:2
  469. }
  470. getAccept(params
  471. ).then(res=>{
  472. this.page=res.data.page
  473. this.page.forEach((item,index)=>{
  474. if(item.unReadCount!=0){
  475. this.flag[index]=1
  476. }
  477. else{
  478. this.flag[index]=0
  479. }
  480. })
  481. })
  482. let params2={
  483. sendPeople:this.card.nameid,
  484. frontOrBack:2,
  485. }
  486. getMessage(params2).then(res=>{
  487. this.message=res.data.page
  488. })
  489. },
  490. // 点击组织的人员
  491. handleNodeClick(data) {
  492. console.log(data)
  493. if(data.type){
  494. this.right_card=true;
  495. this.card.name=data.name
  496. this.card.nameid=data.id
  497. this.card.englishname=data.nameEn
  498. this.card.belongCommittee=data.committeeName
  499. this.card.work=data.duty
  500. if(data.isInOffice){
  501. this.card.isoffice='在任'
  502. }else{
  503. this.card.isoffice='不在任'
  504. }
  505. }else{
  506. this.right_card=false;
  507. }
  508. let params={
  509. sendPeople:this.card.nameid,
  510. frontOrBack:2
  511. }
  512. getMessage(params).then(res=>{
  513. this.message=res.data.page
  514. })
  515. this.right_chat=false;
  516. },
  517. filterNode(value, data) {
  518. if (!value) return true;
  519. return data.name.indexOf(value) !== -1;
  520. },
  521. mouseover(data) {
  522. // 移入
  523. this.$set(data, "dropdownShow", true);
  524. },
  525. mouseout(data) {
  526. // 移除
  527. this.$set(data, "dropdownShow", false);
  528. },
  529. //点击消息
  530. changecolor(data,i){
  531. console.log(data)
  532. this.flag[i]=0
  533. this.right_card=false;
  534. this.right_chat=true;
  535. for(let a=0;a<this.msg_click.length;a++){
  536. if(a==i){
  537. this.msg_click[a]=true;
  538. this.$set(this.msg_click,a,true)
  539. }
  540. else{
  541. this.msg_click[a]=false;
  542. this.$set(this.msg_click,a,false)
  543. }
  544. }
  545. this.card.name=data.sendPeopleName
  546. this.card.nameid=data.sendPeople
  547. let params={
  548. sendPeople:data.sendPeople,
  549. frontOrBack:2
  550. }
  551. getMessage(params).then(res=>{
  552. this.message=res.data.page
  553. })
  554. },
  555. //start:点击组织架构
  556. Organizational_click(){
  557. this.message_flat=false;
  558. this.zuzhi_flat=true;
  559. },
  560. //end:点击组织架构
  561. //start:点击消息
  562. message_click(){
  563. this.message_flat=true;
  564. this.zuzhi_flat=false;
  565. },
  566. //end:点击消息
  567. handleCurrentChange() {},
  568. back() {
  569. var params = {
  570. name: "workspace",
  571. type: false,
  572. };
  573. this.$emit("applicationType", params);
  574. },
  575. screenBack() {},
  576. //发送消息
  577. sendContent(){
  578. this.textarea = this.textarea.trim();
  579. if(this.textarea =='' || this.textarea == null || this.textarea == undefined){
  580. if(this.$i18n.locale == "en"){
  581. this.$message.error('Not send empty messages');
  582. return
  583. }else {
  584. this.$message.error('不可发空消息');
  585. return
  586. }
  587. }
  588. let params={
  589. acceptPeople:this.card.nameid,
  590. content:this.textarea,
  591. frontOrBack:2,
  592. }
  593. sendcontent(params).then(res=>{
  594. if(res.data=='发送成功'){
  595. this.refresh++
  596. this.textarea=''
  597. let params2={
  598. sendPeople:this.card.nameid,
  599. frontOrBack:2,
  600. }
  601. getMessage(params2).then(res=>{
  602. this.message=res.data.page
  603. })
  604. }
  605. })
  606. },
  607. },
  608. };
  609. </script>
  610. <style scoped>
  611. /* 利用穿透,设置input边框隐藏 */
  612. .inputDeep>>>.el-input__inner {
  613. border: 0;
  614. }
  615. /* 如果你的 el-input type 设置成textarea ,就要用这个了 */
  616. .inputDeep>>>.el-textarea__inner {
  617. border: 0;
  618. resize: none;/* 这个是去掉 textarea 下面拉伸的那个标志,如下图 */
  619. }
  620. .send{
  621. box-sizing: border-box;
  622. display: flex;
  623. flex-direction: row;
  624. align-items: flex-start;
  625. padding: 9px 32px;
  626. position: absolute;
  627. width: 96px;
  628. height: 40px;
  629. right:33px;
  630. background: #3A8EE6;
  631. border: 1px solid #3A8EE6;
  632. border-radius: 4px;
  633. font-family: 'Noto Sans SC';
  634. font-style: normal;
  635. font-weight: 500;
  636. font-size: 14px;
  637. line-height: 22px;
  638. display: flex;
  639. align-items: center;
  640. text-align: center;
  641. font-feature-settings: 'tnum' on, 'lnum' on;
  642. color: #FFFFFF;
  643. }
  644. .box1 {
  645. padding: 0 0 20px 0;
  646. position: absolute;
  647. }
  648. .center {
  649. display: flex;
  650. }
  651. .topImg img {
  652. display: inline-block;
  653. width: 1200px;
  654. height: 324px;
  655. }
  656. .centerLeft1 {
  657. border-radius: 0px;
  658. width: 1198px;
  659. height: 877px;
  660. left: 360px;
  661. top: 317px;
  662. background: #FFFFFF;
  663. }
  664. .left {
  665. position: relative;
  666. }
  667. .message2{
  668. display:flex;
  669. width:100%;
  670. padding-left:20px;
  671. }
  672. .msg2_msg{
  673. width:55%;
  674. overflow:hidden;
  675. white-space: nowrap;
  676. text-overflow: ellipsis;
  677. }
  678. .msg2_time{
  679. width:30%;
  680. position:absolute;
  681. right:4px
  682. }
  683. .people_num{
  684. padding-left:5px;
  685. padding-right:5px;
  686. color:white;
  687. border:1px solid #F56C6C;
  688. background: #F56C6C;
  689. border-radius: 24px;
  690. width: 7px;
  691. height: 18px;
  692. font-family: 'Noto Sans SC';
  693. font-style: normal;
  694. font-weight: 400;
  695. font-size: 12px;
  696. line-height: 18px;
  697. display: flex;
  698. align-items: center;
  699. text-align: center;
  700. font-feature-settings: 'tnum' on, 'lnum' on;
  701. }
  702. .top .top1 {
  703. position: absolute;
  704. width: 5.5px;
  705. height: 10.5px;
  706. left: 20px;
  707. top: 35px;
  708. background: #376ac7;
  709. z-index: 1;
  710. }
  711. .top .top2 {
  712. position: absolute;
  713. width: 5.5px;
  714. height: 15px;
  715. left: 20px;
  716. top: 35px;
  717. background: #83bd50;
  718. }
  719. .top .allApplication {
  720. position: absolute;
  721. height: 22px;
  722. left: 34px;
  723. top: 31px;
  724. }
  725. .top .allApplication span {
  726. font-family: "PingFang SC";
  727. font-style: normal;
  728. font-weight: 600;
  729. font-size: 16px;
  730. line-height: 22px;
  731. color: #375586;
  732. }
  733. .top .notice {
  734. position: absolute;
  735. height: 22px;
  736. left: 160px;
  737. top: 32px;
  738. }
  739. .top .notice span {
  740. font-family: "PingFang SC";
  741. font-style: normal;
  742. font-weight: 600;
  743. font-size: 16px;
  744. line-height: 22px;
  745. color: rgba(10, 10, 10, 0.85);
  746. }
  747. .top .more {
  748. position: absolute;
  749. height: 16px;
  750. right: 21px;
  751. top: 31px;
  752. }
  753. .top .more span {
  754. font-family: "Roboto";
  755. font-style: normal;
  756. font-weight: 500;
  757. font-size: 14px;
  758. line-height: 16px;
  759. color: #4790f7;
  760. }
  761. .content .content1 {
  762. box-sizing: border-box;
  763. position: absolute;
  764. width: 314px;
  765. height: 799px;
  766. left: 0px;
  767. top: 78px;
  768. border: 1px solid rgba(0, 0, 0, 0.15);
  769. }
  770. .content .content2 {
  771. box-sizing: border-box;
  772. position: absolute;
  773. width: 888px;
  774. height: 799px;
  775. left: 314px;
  776. top: 78px;
  777. background: #FFFFFF;
  778. border: 1px solid rgba(0, 0, 0, 0.15);
  779. }
  780. .right_one{
  781. width: 864px;
  782. height:70px;
  783. background-color:white;
  784. color:black;
  785. font-size:20px;
  786. padding-left:20px;
  787. font-family: 'Noto Sans SC';
  788. font-style: normal;
  789. font-weight: 700;
  790. font-size: 16px;
  791. line-height: 22px;
  792. display: flex;
  793. align-items: center;
  794. font-feature-settings: 'tnum' on, 'lnum' on;
  795. border: 1px solid rgba(0, 0, 0, 0.15);
  796. color: #000000;
  797. }
  798. .right_two{
  799. box-sizing: border-box;
  800. width: 888px;
  801. height: 536px;
  802. background: #FFFFFF;
  803. border: 1px solid rgba(0, 0, 0, 0.15);
  804. }
  805. .r_two_content{
  806. height:auto;width:350px;
  807. padding:18px;
  808. display:flex;
  809. margin-left:20px;
  810. background: rgba(0, 0, 0, 0.05);
  811. border-radius: 4px;
  812. }
  813. .r_two2_content{
  814. height:auto;width:350px;
  815. padding:18px;
  816. margin-left:480px;
  817. display:flex;
  818. background: #cde4fc;
  819. border-radius: 4px;
  820. }
  821. .r_two_time{
  822. height:60px;width:100%;text-align:center;padding-top:40px;font-size:15px;
  823. }
  824. .left_top{
  825. display:flex;
  826. width:302px;
  827. height:58px;
  828. padding-left:10px;
  829. background: rgba(0, 0, 0, 0.05);
  830. }
  831. .l_t_left{
  832. width: 146px;
  833. height: 34px;
  834. margin-top:10px;
  835. background: #51A1F0;
  836. border: 1px solid #51A1F0;
  837. border-radius: 4px 0px 0px 4px;
  838. cursor:pointer;
  839. /* Bold/Body */
  840. font-family: 'Noto Sans SC';
  841. font-style: normal;
  842. font-weight: 500;
  843. font-size: 14px;
  844. line-height: 22px;
  845. /* or 157% */
  846. display: flex;
  847. align-items: center;
  848. text-align: center;
  849. font-feature-settings: 'tnum' on, 'lnum' on;
  850. color: #FFFFFF;
  851. }
  852. .l_t_right{
  853. margin-top:10px;
  854. width: 146px;
  855. background: #FFFFFF;
  856. border: 1px solid rgba(0, 0, 0, 0.3);
  857. border-radius: 0px 4px 4px 0px;
  858. cursor:pointer;
  859. height: 34px;
  860. /* Bold/Body */
  861. font-family: 'Noto Sans SC';
  862. font-style: normal;
  863. font-weight: 500;
  864. font-size: 14px;
  865. line-height: 22px;
  866. /* or 157% */
  867. display: flex;
  868. align-items: center;
  869. text-align: center;
  870. font-feature-settings: 'tnum' on, 'lnum' on;
  871. color: rgba(0, 0, 0, 0.85);
  872. }
  873. .l_b_div{
  874. width: 292px;
  875. height: 85px;
  876. background: white;
  877. cursor:pointer;
  878. font-family: 'PingFang SC';
  879. font-style: normal;
  880. margin-left:10px;
  881. font-weight: 600;
  882. font-size: 14px;
  883. line-height: 22px;
  884. align-items: center;
  885. font-feature-settings: 'tnum' on, 'lnum' on;
  886. border-bottom:1px solid #d9d9d9;
  887. border-left-width:8px;
  888. }
  889. .l_b_div1{
  890. padding-left:10px;
  891. width: 302px;
  892. height: 85px;
  893. color:white;
  894. background: linear-gradient(270deg, #57AAF2 -3.87%, #3C83E8 105.81%);
  895. cursor:pointer;
  896. font-family: 'PingFang SC';
  897. font-style: normal;
  898. font-weight: 600;
  899. font-size: 14px;
  900. line-height: 22px;
  901. align-items: center;
  902. font-feature-settings: 'tnum' on, 'lnum' on;
  903. color: #FFFFFF;
  904. }
  905. .content .title {
  906. font-family: "PingFang SC";
  907. font-style: normal;
  908. font-weight: 600;
  909. font-size: 14px;
  910. line-height: 20px;
  911. color: rgba(0, 0, 0, 0.85);
  912. position: absolute;
  913. left: 16px;
  914. top: 16px;
  915. right: 14px;
  916. bottom: 113px;
  917. }
  918. .content .time {
  919. font-family: "Roboto";
  920. font-style: normal;
  921. font-weight: 400;
  922. font-size: 12px;
  923. line-height: 14px;
  924. color: rgba(0, 0, 0, 0.65);
  925. position: absolute;
  926. left: 16px;
  927. top: 61px;
  928. }
  929. .content .type {
  930. font-family: "PingFang SC";
  931. font-style: normal;
  932. font-weight: 400;
  933. font-size: 14px;
  934. line-height: 20px;
  935. color: rgba(0, 0, 0, 0.85);
  936. position: absolute;
  937. left: 16px;
  938. top: 89px;
  939. }
  940. .progress {
  941. position: absolute;
  942. left: -70px;
  943. bottom: 0;
  944. height: 34px;
  945. width: 246px;
  946. border-radius: 0px;
  947. display: flex;
  948. justify-content: center;
  949. align-items: center;
  950. }
  951. .detail {
  952. position: absolute;
  953. bottom: 0;
  954. height: 34px;
  955. width: 246px;
  956. border-radius: 0px;
  957. background: rgba(217, 217, 217, 0.2);
  958. display: flex;
  959. justify-content: center;
  960. align-items: center;
  961. }
  962. .content .toView {
  963. margin-left: 100px;
  964. font-family: "Roboto";
  965. font-style: normal;
  966. font-weight: 400;
  967. font-size: 14px;
  968. line-height: 16px;
  969. color: #274e92;
  970. }
  971. .content .toProgress {
  972. font-family: "Roboto";
  973. font-style: normal;
  974. font-weight: 400;
  975. font-size: 14px;
  976. line-height: 16px;
  977. color: #274e92;
  978. }
  979. .centerLeft2 {
  980. position: relative;
  981. margin-top: 20px;
  982. height: 177px;
  983. width: 850px;
  984. border-radius: 0px;
  985. background: #fff;
  986. }
  987. .content .audit {
  988. position: absolute;
  989. right: 5%;
  990. }
  991. .area {
  992. position: absolute;
  993. top: 100px;
  994. }
  995. .pag {
  996. position: absolute;
  997. bottom: 0;
  998. right: 0;
  999. }
  1000. /deep/ .el-tree .el-tree-node__expand-icon.expanded
  1001. {
  1002. -webkit-transform: rotate(0deg);
  1003. transform: rotate(0deg);
  1004. }
  1005. .renwu{
  1006. background: url("../../assets/img/nationaIntorduction/renwu.png") no-repeat 0 3px;
  1007. content: '';
  1008. display: inline-block;
  1009. width: 18px;
  1010. height: 20px;
  1011. font-size: 18px;
  1012. background-size: 18px;
  1013. }
  1014. .group{
  1015. background: url("../../assets/img/nationaIntorduction/group.png") no-repeat 0 3px;
  1016. content: '';
  1017. display: inline-block;
  1018. width: 18px;
  1019. height: 20px;
  1020. font-size: 18px;
  1021. background-size: 18px;
  1022. }
  1023. /deep/ .el-tree .el-icon-caret-right:before
  1024. {
  1025. background: url("../../assets/img/nationaIntorduction/zhankai.png") no-repeat 0 3px;
  1026. content: '';
  1027. display: block;
  1028. width: 18px;
  1029. height: 23px;
  1030. font-size: 18px;
  1031. background-size: 18px;
  1032. }
  1033. /deep/ .el-tree .el-tree-node__expand-icon.expanded.el-icon-caret-right:before
  1034. {
  1035. background: url("../../assets/img/nationaIntorduction/shousuo.png") no-repeat 0 3px;
  1036. /*content: '';*/
  1037. display: block;
  1038. width: 18px;
  1039. height: 23px;
  1040. font-size: 18px;
  1041. background-size: 18px;
  1042. }
  1043. /deep/ .el-tree-node__expand-icon.is-leaf::before
  1044. {
  1045. display: none;
  1046. }
  1047. </style>