ballotBillDirectoryMany.vue 29 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553554555556557558559560561562563564565566567568569570571572573574575576577578579580581582583584585586587588589590591592593594595596597598599600601602603604605606607608609610611612613614615616617618619620621622623624625626627628629630631632633634635636637638639640641642643644645646647648649650651652653654655656657658659660661662663664665666667668669670671672673674675676677678679680681682683684685686687688689690691692693694695696697698699700701702703704705706707708709710711712713714715716717718719720721722723724725726727728729730731732733734735736737738739740741742743744745746747748749750751752753754755756757758759760761762763764765766767768769770771772773774775776777778779780781782783784785786787788789790791792793794795796797798799800801802803804805806807808809810811812813814815816817818819820821822823824825826827828829830831832833834835836837838839840841842843844845846847848849850851852853854855856857858859860861862863864865866867868869870871872873874875876877878879880881882883884885886887888889890891892893894895896897898899900901902903904905906907908909910911912913914915916917918919920921922923924925926927928929930931932933934935936937938939940941942943944945946947948949950951952953954955956957958959960961962963964965966967968969970971972973974975976977978979980981982983984985986987988989990991992993994995996997998999100010011002100310041005100610071008100910101011101210131014101510161017101810191020102110221023102410251026102710281029103010311032103310341035103610371038103910401041104210431044104510461047104810491050105110521053105410551056105710581059106010611062106310641065106610671068106910701071107210731074107510761077107810791080108110821083108410851086108710881089109010911092109310941095109610971098109911001101110211031104110511061107110811091110111111121113111411151116111711181119112011211122112311241125112611271128112911301131113211331134113511361137113811391140114111421143114411451146114711481149115011511152115311541155115611571158115911601161116211631164116511661167116811691170117111721173117411751176117711781179118011811182118311841185118611871188118911901191119211931194119511961197119811991200120112021203120412051206120712081209121012111212121312141215121612171218121912201221122212231224122512261227122812291230123112321233123412351236123712381239124012411242124312441245124612471248124912501251125212531254
  1. <template>
  2.  
  3. <div>
  4. <banners-zh v-if="language.value == 'CN'"></banners-zh>
  5. <banners-en v-if="language.value == 'EN'"></banners-en>
  6. <banners-fr v-if="language.value == 'FR'"></banners-fr>
  7. <banners-ru v-if="language.value == 'RU'"></banners-ru>
  8. <!-- 顶部图片 -->
  9. <div class="topimg">
  10. <img src="@/assets/ballot/未标题-6_画板 1.png" alt="" />
  11. <!-- <div class="backButton" @click="toHome">
  12. <img src="@/assets/ballot/编组 16.png" alt="">
  13. </div> -->
  14. </div>
  15. <!-- 选择区域 -->
  16. <div class="body-info">
  17. <div class="select-info">
  18. <el-select v-model="language.value" @change="getLanguage">
  19. <el-option
  20. v-for="item in options"
  21. :key="item.value"
  22. :label="item.label"
  23. :value="item.value"
  24. >
  25. </el-option>
  26. </el-select>
  27. </div>
  28. <div class="main-info" v-if="language.value == 'CN'">
  29. <div class="table-box"></div>
  30. <div class="table-info">
  31. <div class="table-title">
  32. <div
  33. class="title-text-cn"
  34. :title="'候选单位名单(候选单位按英文首字母顺序排列)'"
  35. >
  36. 候选单位名单(候选单位按英文首字母顺序排列)
  37. </div>
  38. <div class="table-action">
  39. <span>赞成</span><span>反对</span><span>弃权</span>
  40. </div>
  41. </div>
  42. <div
  43. class="table-detail"
  44. v-for="(item, index) in optionList"
  45. :key="index"
  46. >
  47. <div class="detail-text-cn" :title="item.name">{{ item.name }}</div>
  48. <div class="detail-action">
  49. <span class="action-details1" v-if="index == 0">
  50. <img src="@/assets/ballot/圆圈.png" alt="" />
  51. </span>
  52. <span class="action-1" @click="getColor1(item)" v-if="index != 0">
  53. <img
  54. src="@/assets/ballot/圆圈 (1).png"
  55. alt=""
  56. v-if="item.type != 0"
  57. />
  58. <img src="@/assets/ballot/圆圈.png" alt="" v-else />
  59. </span>
  60. <span class="action-2" @click="getColor2(item)" v-if="index != 0">
  61. <img
  62. src="@/assets/ballot/叉.png"
  63. alt=""
  64. v-if="item.type != 1"
  65. />
  66. <img src="@/assets/ballot/叉 (1).png" alt="" v-else />
  67. </span>
  68. <span class="action-3" @click="getColor3(item)" v-if="index != 0">
  69. <img
  70. src="@/assets/ballot/分割线.png"
  71. alt=""
  72. v-if="item.type != 2"
  73. />
  74. <img src="@/assets/ballot/分割线 (1).png" alt="" v-else />
  75. </span>
  76. </div>
  77. </div>
  78. </div>
  79. <div class="sub-btn">
  80. <!-- <el-button class="success-btn" :disabled="disabled" @click="getAgrees">全部赞成</el-button> -->
  81. <el-button class="up-sub" @click="getSuccess" :disabled="disabled"
  82. >提交</el-button
  83. >
  84. </div>
  85. <div class="table-bottom"></div>
  86. <div class="user-btn" v-if="selectBtn">
  87. <div class="user-btn-text1" v-if="num">
  88. 您已选择:赞成{{ agreeNum }}项;反对{{ disNum }}项;弃权{{
  89. noNum
  90. }}项,是否确认提交?
  91. </div>
  92. <div class="user-btn-text1" v-else>
  93. 您已选择:赞成{{ agreeNumInfo }}项;反对0项;弃权0项,是否确认提交?
  94. </div>
  95. <div class="btn-user-info">
  96. <el-button
  97. class="btn-user-info-ok"
  98. @click="sureToGet"
  99. :disabled="disabled"
  100. >确认</el-button
  101. >
  102. <div class="btn-user-info-canel" @click="notToGet">取消</div>
  103. </div>
  104. </div>
  105. <div class="big-success" v-if="successUp">
  106. <img src="@/assets/ballot/success-ui.png" alt="" class="pic-model" />
  107. <div class="text-success">提交成功!</div>
  108. </div>
  109. </div>
  110. <div class="main-info" v-if="language.value == 'EN'">
  111. <div class="table-box"></div>
  112. <div class="table-info">
  113. <div class="table-title">
  114. <div
  115. class="title-text"
  116. :title="'Candidates for the Second Council of GEIDCO(The candidates for group Council members are listed in alphabetical order) '"
  117. >
  118. Candidates for the Second Council of GEIDCO (The candidates for
  119. group Council members are listed in alphabetical order)
  120. </div>
  121. <div class="table-action">
  122. <span>Agree</span><span>Disagree</span><span>Abstain</span>
  123. </div>
  124. </div>
  125. <div
  126. class="table-detail"
  127. v-for="(item, index) in optionList"
  128. :key="index"
  129. >
  130. <div class="detail-text" :title="item.nameEn">
  131. {{ item.nameEn }}
  132. </div>
  133. <div class="detail-action">
  134. <span class="action-details2" v-if="index == 0">
  135. <img src="@/assets/ballot/圆圈.png" alt="" />
  136. </span>
  137. <span class="action-1" @click="getColor1(item)" v-if="index != 0">
  138. <img
  139. src="@/assets/ballot/圆圈 (1).png"
  140. alt=""
  141. v-if="item.type != 0"
  142. />
  143. <img src="@/assets/ballot/圆圈.png" alt="" v-else />
  144. </span>
  145. <span class="action-2" @click="getColor2(item)" v-if="index != 0">
  146. <img
  147. src="@/assets/ballot/叉.png"
  148. alt=""
  149. v-if="item.type != 1"
  150. />
  151. <img src="@/assets/ballot/叉 (1).png" alt="" v-else />
  152. </span>
  153. <span class="action-3" @click="getColor3(item)" v-if="index != 0">
  154. <img
  155. src="@/assets/ballot/分割线.png"
  156. alt=""
  157. v-if="item.type != 2"
  158. />
  159. <img src="@/assets/ballot/分割线 (1).png" alt="" v-else />
  160. </span>
  161. </div>
  162. </div>
  163. </div>
  164. <div class="sub-btn">
  165. <!-- <el-button class="success-btn" :disabled="disabled" @click="getAgrees">All in favor of</el-button> -->
  166. <el-button class="up-sub" @click="getSuccess" :disabled="disabled"
  167. >Submit</el-button
  168. >
  169. </div>
  170. <div class="table-bottom"></div>
  171. <div class="user-btn" v-if="selectBtn">
  172. <div class="user-btn-text" v-if="num">
  173. You've selected: Agree {{ agreeNum }}; Disagree {{ disNum }};
  174. Abstain {{ noNum }}. Are you sure you want to submit?
  175. </div>
  176. <div class="user-btn-text" v-else>
  177. You've selected: approve {{ agreeNumInfo }}; Against 0; 0
  178. abstentions, do you confirm submission?
  179. </div>
  180. <div class="btn-user-info1">
  181. <el-button
  182. class="btn-user-info-ok"
  183. @click="sureToGet"
  184. :disabled="disabled"
  185. >Confirm</el-button
  186. >
  187. <div class="btn-user-info-canel" @click="notToGet">Cancel</div>
  188. </div>
  189. </div>
  190. <div class="big-success" v-if="successUp">
  191. <img src="@/assets/ballot/success-ui.png" alt="" class="pic-model" />
  192. <div class="text-success">Submission successful!</div>
  193. </div>
  194. </div>
  195. <div class="main-info" v-if="language.value == 'FR'">
  196. <div class="table-box"></div>
  197. <div class="table-info">
  198. <div class="table-title-info">
  199. <div
  200. class="title-text-info"
  201. :title="'Candidats au 2ème Conseil de la GEIDCO (Les candidats aux postes de membres du Conseil sont classés par ordre alphabétique)'"
  202. >
  203. Candidats au 2ème Conseil de la GEIDCO (Les candidats aux postes
  204. de membres du Conseil sont classés par ordre alphabétique)
  205. </div>
  206. <div class="table-action-info">
  207. <span>D'accord</span><span>S'opposer</span><span>S'abstenir</span>
  208. </div>
  209. </div>
  210. <div
  211. class="table-detail"
  212. v-for="(item, index) in optionList"
  213. :key="index"
  214. >
  215. <div class="detail-text-info" :title="item.nameFr">
  216. {{ item.nameFr }}
  217. </div>
  218. <div class="detail-action-info">
  219. <span class="action-details3" v-if="index == 0">
  220. <img src="@/assets/ballot/圆圈.png" alt="" />
  221. </span>
  222. <span class="action-1" @click="getColor1(item)" v-if="index != 0">
  223. <img
  224. src="@/assets/ballot/圆圈 (1).png"
  225. alt=""
  226. v-if="item.type != 0"
  227. />
  228. <img src="@/assets/ballot/圆圈.png" alt="" v-else />
  229. </span>
  230. <span class="action-2" @click="getColor2(item)" v-if="index != 0">
  231. <img
  232. src="@/assets/ballot/叉.png"
  233. alt=""
  234. v-if="item.type != 1"
  235. />
  236. <img src="@/assets/ballot/叉 (1).png" alt="" v-else />
  237. </span>
  238. <span class="action-3" @click="getColor3(item)" v-if="index != 0">
  239. <img
  240. src="@/assets/ballot/分割线.png"
  241. alt=""
  242. v-if="item.type != 2"
  243. />
  244. <img src="@/assets/ballot/分割线 (1).png" alt="" v-else />
  245. </span>
  246. </div>
  247. </div>
  248. </div>
  249. <div class="sub-btn">
  250. <!-- <el-button class="success-btn" :disabled="disabled" @click="getAgrees">Tous en faveur</el-button> -->
  251. <el-button class="up-sub" @click="getSuccess" :disabled="disabled"
  252. >Soumettre</el-button
  253. >
  254. </div>
  255. <div class="table-bottom"></div>
  256. <div class="user-btn" v-if="selectBtn">
  257. <div class="user-btn-text" v-if="num">
  258. Vous avez choisi : D'accord {{ agreeNum }} ; S'opposer
  259. {{ disNum }} ; S'abstenir {{ noNum }}. Etes-vous sûr de vouloir
  260. soumettre ?
  261. </div>
  262. <div class="user-btn-text" v-else>
  263. Vous avez sélectionné: pour {{ agreeNumInfo }}; 0 objections;
  264. Renonciation 0 articles. Est-ce que la soumission est confirmée?
  265. </div>
  266. <div class="btn-user-info">
  267. <el-button
  268. class="btn-user-info-ok"
  269. @click="sureToGet"
  270. :disabled="disabled"
  271. >Confirmer
  272. </el-button>
  273. <div class="btn-user-info-canel" @click="notToGet">Annuler</div>
  274. </div>
  275. </div>
  276. <div class="big-success" v-if="successUp">
  277. <img src="@/assets/ballot/success-ui.png" alt="" class="pic-model" />
  278. <div class="text-success">Soumission réussie!</div>
  279. </div>
  280. </div>
  281. <div class="main-info" v-if="language.value == 'RU'">
  282. <div class="table-box"></div>
  283. <div class="table-info">
  284. <div class="table-title-info">
  285. <div
  286. class="title-text-info-fr"
  287. :title="'Кандидаты на должность директоров совета второго созыва GEIDCO (в алфавитном порядке)'"
  288. >
  289. Кандидаты на должность директоров совета второго созыва GEIDCO
  290. (в алфавитном порядке)
  291. </div>
  292. <div class="table-action-info">
  293. <span>Согласиться</span><span>Несогласиться</span
  294. ><span>Воздержаться</span>
  295. </div>
  296. </div>
  297. <div
  298. class="table-detail"
  299. v-for="(item, index) in optionList"
  300. :key="index"
  301. >
  302. <div class="detail-text-info" :title="item.nameRu">
  303. {{ item.nameRu }}
  304. </div>
  305. <div class="detail-action-info">
  306. <span class="action-details4" v-if="index == 0">
  307. <img src="@/assets/ballot/圆圈.png" alt="" />
  308. </span>
  309. <span class="action-1" @click="getColor1(item)" v-if="index != 0">
  310. <img
  311. src="@/assets/ballot/圆圈 (1).png"
  312. alt=""
  313. v-if="item.type != 0"
  314. />
  315. <img src="@/assets/ballot/圆圈.png" alt="" v-else />
  316. </span>
  317. <span class="action-2" @click="getColor2(item)" v-if="index != 0">
  318. <img
  319. src="@/assets/ballot/叉.png"
  320. alt=""
  321. v-if="item.type != 1"
  322. />
  323. <img src="@/assets/ballot/叉 (1).png" alt="" v-else />
  324. </span>
  325. <span class="action-3" @click="getColor3(item)" v-if="index != 0">
  326. <img
  327. src="@/assets/ballot/分割线.png"
  328. alt=""
  329. v-if="item.type != 2"
  330. />
  331. <img src="@/assets/ballot/分割线 (1).png" alt="" v-else />
  332. </span>
  333. </div>
  334. </div>
  335. </div>
  336. <div class="sub-btn">
  337. <!-- <el-button class="success-btn" @click="getAgrees" :disabled="disabled">Все за.</el-button> -->
  338. <el-button class="up-sub" @click="getSuccess" :disabled="disabled"
  339. >Оформить</el-button
  340. >
  341. </div>
  342. <div class="table-bottom"></div>
  343. <div class="user-btn" v-if="selectBtn">
  344. <div class="user-btn-text" v-if="num">
  345. Вы выбрали: Согласен {{ agreeNum }}; Не согласен {{ disNum }};
  346. Воздержаться {{ noNum }}. Вы уверены, что хотите отправить?
  347. </div>
  348. <div class="user-btn-text" v-else>
  349. Вы выбрали: {{ agreeNumInfo }} голоса за;Возражение по пункту
  350. 0;Воздержание по пункту 0 подтверждено?
  351. </div>
  352. <div class="btn-user-info">
  353. <el-button
  354. class="btn-user-info-ok"
  355. @click="sureToGet"
  356. :disabled="disabled"
  357. >Подтвердить
  358. </el-button>
  359. <div class="btn-user-info-canel" @click="notToGet">Отменить</div>
  360. </div>
  361. </div>
  362. <div class="big-success" v-if="successUp">
  363. <img src="@/assets/ballot/success-ui.png" alt="" class="pic-model" />
  364. <div class="text-success">Вы успешно оформили!</div>
  365. </div>
  366. </div>
  367. </div>
  368. <div class="body-box"></div>
  369. <!-- 底部图片 -->
  370. <footer-zh v-if="language.value == 'CN'"></footer-zh>
  371. <footer-en v-if="language.value == 'EN'"></footer-en>
  372. <footer-fr v-if="language.value == 'FR'"></footer-fr>
  373. <footer-ru v-if="language.value == 'RU'"></footer-ru>
  374. </div>
  375. </template>
  376. <script>
  377. import { getToken } from '@/api/token'
  378. import footerZh from '@/components/footersNewZH'
  379. import footerEn from '@/components/footersNewEN'
  380. import footerFr from '@/components/footersNewFR'
  381. import footerRu from '@/components/footersNewRU'
  382. import bannersZh from '@/components/ballotTopBannerZH'
  383. import bannersEn from '@/components/ballotTopBannerEN'
  384. import bannersFr from '@/components/ballotTopBannerFR'
  385. import bannersRu from '@/components/ballotTopBannerRU'
  386. import { getMeetingGeidcoLeaders, saveOrUpdateLeader } from '@/api/vote/council'
  387. export default {
  388. name: 'ballotBillDirectoryMany',
  389. components: {
  390. footerZh,
  391. footerEn,
  392. footerFr,
  393. footerRu,
  394. bannersZh,
  395. bannersEn,
  396. bannersFr,
  397. bannersRu,
  398. },
  399. data() {
  400. return {
  401. num: true,
  402. disabled: false,
  403. agreeNum: 0,
  404. disNum: 0,
  405. noNum: 0,
  406. agreeNumInfo: 0,
  407. firstId: undefined,
  408. typeArr: [],
  409. selectBtn: false,
  410. first: undefined,
  411. second: undefined,
  412. third: undefined,
  413. successUp: false,
  414. options: [
  415. {
  416. value: 'CN',
  417. label: '中文',
  418. },
  419. {
  420. value: 'EN',
  421. label: 'English',
  422. },
  423. {
  424. value: 'FR',
  425. label: 'Français',
  426. },
  427. {
  428. value: 'RU',
  429. label: 'Русский',
  430. },
  431. ],
  432. language: {
  433. value: 'CN',
  434. },
  435. optionList: [],
  436. }
  437. },
  438. mounted() {
  439. let user = JSON.parse(sessionStorage.getItem('mettingUser'))
  440. console.log(user)
  441. if (user == null) {
  442. this.$router.push({ path: 'home' })
  443. } else {
  444. console.log('你好')
  445. }
  446. let language = sessionStorage.getItem('language')
  447. this.language.value = language
  448. this.initData()
  449. },
  450. methods: {
  451. //全部赞成
  452. getAgrees() {
  453. this.num = false
  454. this.optionList.forEach((itema, index, array) => {
  455. if (itema.type != 0) {
  456. itema.type = 0
  457. this.agreeNumInfo += 1
  458. } else {
  459. this.agreeNumInfo += 1
  460. }
  461. })
  462. },
  463. allAgree() {
  464. let id = JSON.parse(sessionStorage.getItem('mettingUser')).id
  465. let params = {
  466. language: this.language.value,
  467. meetingGeidcoUserId: id,
  468. }
  469. getMeetingGeidcoLeaders(params).then((res) => {
  470. console.log(res)
  471. console.log(this.language.value)
  472. this.optionList = res.data.meetingGeidcoLeaders
  473. this.firstId = res.data.meetingGeidcoLeaders[0].id
  474. //初始化投票
  475. this.optionList.forEach((itema, index, arry) => {
  476. this.typeArr.push({
  477. leaderId: itema.id,
  478. type: 0,
  479. language: this.language.value,
  480. })
  481. // console.log(this.typeArr);
  482. })
  483. })
  484. },
  485. getLanguage() {
  486. let language = this.language.value
  487. sessionStorage.setItem('language', language)
  488. console.log(this.language.value)
  489. if (language == 'CN') {
  490. console.log(111)
  491. this.$message.success('正在切换语言...')
  492. }
  493. if (language == 'EN') {
  494. this.$message.success('Switching languages...')
  495. }
  496. if (language == 'FR') {
  497. this.$message.success('Changer de langue...')
  498. }
  499. if (language == 'RU') {
  500. this.$message.success('Он меняет язык.')
  501. }
  502. setTimeout(() => {
  503. location.reload()
  504. }, 500)
  505. this.initData()
  506. },
  507. toSuccess() {
  508. this.$router.push({ path: 'ballotDrawingBoardPalette' })
  509. },
  510. initData() {
  511. let id = JSON.parse(sessionStorage.getItem('mettingUser')).id
  512. let params = {
  513. language: this.language.value,
  514. meetingGeidcoUserId: id,
  515. }
  516. getMeetingGeidcoLeaders(params).then((res) => {
  517. console.log(res)
  518. console.log(this.language.value)
  519. this.optionList = res.data.meetingGeidcoLeaders
  520. this.firstId = res.data.meetingGeidcoLeaders[0].id
  521. //初始化投票
  522. this.optionList.forEach((itema, index, arry) => {
  523. this.typeArr.push({
  524. leaderId: itema.id,
  525. type: itema.type,
  526. language: this.language.value,
  527. })
  528. // console.log(this.typeArr);
  529. })
  530. })
  531. },
  532. // 返回首页
  533. toHome() {
  534. this.$router.push({ path: 'home' })
  535. },
  536. // 选择
  537. getColor1(item) {
  538. // 点 进来 表示 赞同=0
  539. item.type = 0
  540. let params = { leaderId: item.id, type: 0, language: this.language.value }
  541. let flag = false
  542. // 判断是否已经存在 存在需要更新 不存在push
  543. if (this.typeArr.length > 0) {
  544. // 找出已存在的 更新数据
  545. this.typeArr.forEach((itema, index, array) => {
  546. console.log('000--1--000')
  547. console.log(this.typeArr)
  548. if (itema.leaderId == item.id) {
  549. console.log('111--赞同--111')
  550. itema.type = 0
  551. itema.language = this.language.value
  552. flag = true
  553. return
  554. }
  555. })
  556. // 不存在 push
  557. if (!flag) {
  558. console.log('222--赞同--222')
  559. this.typeArr.push(params)
  560. }
  561. } else {
  562. console.log('333--赞同--333')
  563. this.typeArr.push(params)
  564. }
  565. console.log(
  566. '====getColor1赞同===>>>',
  567. JSON.stringify(this.typeArr),
  568. this.typeArr.length
  569. )
  570. },
  571. getColor2(item) {
  572. item.type = 1
  573. let params = { leaderId: item.id, type: 1, language: this.language.value }
  574. let flag = false
  575. // 判断是否已经存在 存在需要更新 不存在push
  576. if (this.typeArr.length > 0) {
  577. // 找出已存在的 更新数据
  578. this.typeArr.forEach((itema, index, array) => {
  579. console.log('000--2--000')
  580. if (itema.leaderId == item.id) {
  581. console.log('111--反对--111')
  582. itema.type = 1
  583. itema.language = this.language.value
  584. flag = true
  585. return
  586. }
  587. })
  588. // 不存在 push
  589. if (!flag) {
  590. console.log('222--反对--222')
  591. this.typeArr.push(params)
  592. }
  593. } else {
  594. console.log('333--反对--333')
  595. this.typeArr.push(params)
  596. }
  597. console.log(
  598. '====getColor2反对===>>>',
  599. JSON.stringify(this.typeArr),
  600. this.typeArr.length
  601. )
  602. },
  603. getColor3(item) {
  604. item.type = 2
  605. let params = { leaderId: item.id, type: 2, language: this.language.value }
  606. let flag = false
  607. // 判断是否已经存在 存在需要更新 不存在push
  608. if (this.typeArr.length > 0) {
  609. // 找出已存在的 更新数据
  610. this.typeArr.forEach((itema, index, array) => {
  611. console.log('000--3--000')
  612. if (itema.leaderId == item.id) {
  613. console.log('111--弃权--111')
  614. itema.type = 2
  615. itema.language = this.language.value
  616. flag = true
  617. return
  618. }
  619. })
  620. // 不存在 push
  621. if (!flag) {
  622. console.log('222--弃权--222')
  623. this.typeArr.push(params)
  624. }
  625. } else {
  626. console.log('333--弃权--333')
  627. this.typeArr.push(params)
  628. }
  629. console.log(
  630. '====getColor3弃权===>>>',
  631. JSON.stringify(this.typeArr),
  632. this.typeArr.length
  633. )
  634. },
  635. getSuccess() {
  636. this.selectBtn = true
  637. this.typeArr.forEach((itema, index, array) => {
  638. if (itema.type == 0) {
  639. this.agreeNum += 1
  640. } else if (itema.type == 1) {
  641. this.disNum += 1
  642. } else if (itema.type == 2) {
  643. this.noNum += 1
  644. }
  645. console.log(this.agreeNum, this.disNum, this.noNum, '事项总结')
  646. })
  647. },
  648. sureToGet() {
  649. let id = JSON.parse(sessionStorage.getItem('mettingUser')).id
  650. let meetingGeidcoLeaderNumDetail = this.typeArr
  651. getToken()
  652. .then((res) => {
  653. let token = res.data
  654. console.log('token====', token)
  655. saveOrUpdateLeader(
  656. JSON.stringify(meetingGeidcoLeaderNumDetail),
  657. id,
  658. token
  659. ).then((res) => {
  660. console.log(res)
  661. this.successUp = true
  662. this.selectBtn = false
  663. // this.$message.success('投票成功')
  664. this.disabled = true
  665. setTimeout(() => {
  666. this.$router.push({ path: 'ballotDrawingBoardPalette' })
  667. }, 1500)
  668. })
  669. })
  670. .catch((error) => {})
  671. // submitHandler((token) => {
  672. // saveOrUpdateLeader(JSON.stringify(meetingGeidcoLeaderNumDetail), id, token).then((res) => {
  673. // console.log(res);
  674. // this.successUp = true
  675. // this.selectBtn = false
  676. // // this.$message.success('投票成功')
  677. // this.disabled = true
  678. // setTimeout(() => {
  679. // this.$router.push({ path: 'ballotDrawingBoardPalette' });
  680. // }, 1500)
  681. // })
  682. // })
  683. this.disabled = true
  684. },
  685. notToGet() {
  686. this.selectBtn = false
  687. this.agreeNum = 0
  688. this.disNum = 0
  689. this.noNum = 0
  690. },
  691. },
  692. }
  693. </script>
  694. <style scoped>
  695. * {
  696. padding: 0;
  697. margin: 0;
  698. box-sizing: border-box;
  699. /* vertical-align: text-top; */
  700. }
  701. html,
  702. body,
  703. #app {
  704. width: 100%;
  705. height: 100%;
  706. }
  707. .action-details1 {
  708. display: inline-block;
  709. width: 32px;
  710. height: 32px;
  711. text-align: center;
  712. transform: translateX(-102px) translateY(23px);
  713. }
  714. .action-details2 {
  715. display: inline-block;
  716. width: 32px;
  717. height: 32px;
  718. text-align: center;
  719. transform: translateX(-102px) translateY(23px);
  720. }
  721. .action-details3 {
  722. display: inline-block;
  723. width: 32px;
  724. height: 32px;
  725. text-align: center;
  726. transform: translateX(-145px) translateY(23px);
  727. }
  728. .action-details4 {
  729. display: inline-block;
  730. width: 32px;
  731. height: 32px;
  732. text-align: center;
  733. transform: translateX(-145px) translateY(23px);
  734. }
  735. .action-details1 > img {
  736. width: 100%;
  737. height: 100%;
  738. }
  739. .action-details2 > img {
  740. width: 100%;
  741. height: 100%;
  742. }
  743. .action-details3 > img {
  744. width: 100%;
  745. height: 100%;
  746. }
  747. .action-details4 > img {
  748. width: 100%;
  749. height: 100%;
  750. }
  751. .topimg {
  752. width: 100%;
  753. /* height: 450px; */
  754. background-color: #cdebf7;
  755. }
  756. .topimg > img {
  757. width: 100%;
  758. padding: 0;
  759. position: relative;
  760. }
  761. .backButton {
  762. width: 134px;
  763. height: 41px;
  764. position: absolute;
  765. top: 46px;
  766. right: 380px;
  767. }
  768. .backButton:hover {
  769. cursor: pointer;
  770. }
  771. .backButton > img {
  772. width: 100%;
  773. height: 100%;
  774. }
  775. .body-info {
  776. padding: 0;
  777. width: 100%;
  778. background-color: #f2f2f2;
  779. }
  780. .body-box {
  781. width: 100%;
  782. height: 50px;
  783. background-color: #f2f2f2;
  784. }
  785. .main-info {
  786. width: 1178px;
  787. margin: 0 auto;
  788. transform: translateY(20px);
  789. background-color: #ffffff;
  790. position: relative;
  791. }
  792. .bottom-list {
  793. width: 100%;
  794. height: 300px;
  795. background-color: #f2f2f2;
  796. }
  797. .select-info {
  798. margin-left: 68%;
  799. margin-bottom: 70px;
  800. transform: translateY(40px);
  801. }
  802. .table-box {
  803. width: 100%;
  804. height: 39px;
  805. }
  806. .table-info {
  807. width: 1100px;
  808. margin: 0 auto;
  809. }
  810. .table-bottom {
  811. width: 100%;
  812. height: 50px;
  813. }
  814. .table-title {
  815. width: 100%;
  816. height: 77px;
  817. background-color: #e9e9e9;
  818. border: 1px solid #d3d3d3;
  819. display: flex;
  820. }
  821. .table-title-info {
  822. width: 100%;
  823. height: 90px;
  824. background-color: #e9e9e9;
  825. border: 1px solid #d3d3d3;
  826. display: flex;
  827. }
  828. .title-text {
  829. width: 72%;
  830. height: 77px;
  831. font-size: 25px;
  832. padding-left: 15px;
  833. font-family: AlibabaPuHuiTiR;
  834. font-weight: 400;
  835. color: #666666;
  836. word-wrap: break-word;
  837. overflow: hidden;
  838. }
  839. .table-detail:nth-child(2n + 1) {
  840. width: 100%;
  841. height: 77px;
  842. border-left: 1px solid #d3d3d3;
  843. border-right: 1px solid #d3d3d3;
  844. background-color: #f0f9fd;
  845. display: flex;
  846. }
  847. .table-detail {
  848. width: 100%;
  849. height: 77px;
  850. border-left: 1px solid #d3d3d3;
  851. border-right: 1px solid #d3d3d3;
  852. background-color: #fff;
  853. display: flex;
  854. }
  855. .table-detail {
  856. width: 100%;
  857. height: 77px;
  858. border-left: 1px solid #d3d3d3;
  859. border-right: 1px solid #d3d3d3;
  860. background-color: #fff;
  861. display: flex;
  862. overflow: hidden;
  863. align-items: center;
  864. position: relative;
  865. }
  866. .table-detail:last-child {
  867. border-bottom: 1px solid #d3d3d3;
  868. }
  869. .detail-text {
  870. width: 72%;
  871. height: 77px;
  872. font-size: 20px;
  873. font-family: AlibabaPuHuiTiR;
  874. font-weight: 400;
  875. color: #666666;
  876. padding-top: 18px;
  877. padding-left: 40px;
  878. word-wrap: break-word;
  879. overflow: hidden;
  880. }
  881. .title-text-cn {
  882. width: 72%;
  883. height: 77px;
  884. line-height: 77px;
  885. text-align: center;
  886. font-size: 25px;
  887. font-family: AlibabaPuHuiTiR;
  888. font-weight: 400;
  889. color: #666666;
  890. word-wrap: break-word;
  891. overflow: hidden;
  892. }
  893. .table-action {
  894. width: 28%;
  895. height: 77px;
  896. line-height: 77px;
  897. font-size: 22px;
  898. font-family: AlibabaPuHuiTiR;
  899. font-weight: 400;
  900. color: #666666;
  901. border-left: 1px solid #d3d3d3;
  902. display: flex;
  903. justify-content: space-around;
  904. }
  905. .detail-text-cn {
  906. width: 72%;
  907. height: 77px;
  908. line-height: 77px;
  909. font-size: 20px;
  910. font-family: AlibabaPuHuiTiR;
  911. font-weight: 400;
  912. padding-left: 40px;
  913. color: #666666;
  914. word-wrap: break-word;
  915. overflow: hidden;
  916. }
  917. .detail-action {
  918. width: 28%;
  919. height: 77px;
  920. display: flex;
  921. justify-content: space-around;
  922. border-left: 1px solid #d3d3d3;
  923. }
  924. .title-text-info {
  925. width: 60%;
  926. height: 90px;
  927. font-size: 22px;
  928. padding-left: 15px;
  929. font-family: AlibabaPuHuiTiR;
  930. font-weight: 400;
  931. color: #666666;
  932. word-wrap: break-word;
  933. overflow: hidden;
  934. }
  935. .title-text-info-fr {
  936. width: 60%;
  937. height: 90px;
  938. font-size: 22px;
  939. padding-left: 15px;
  940. padding-top: 18px;
  941. font-family: AlibabaPuHuiTiR;
  942. font-weight: 400;
  943. color: #666666;
  944. word-wrap: break-word;
  945. overflow: hidden;
  946. }
  947. .table-action-info {
  948. width: 40%;
  949. height: 90px;
  950. line-height: 90px;
  951. font-size: 20px;
  952. font-family: AlibabaPuHuiTiR;
  953. font-weight: 400;
  954. color: #666666;
  955. border-left: 1px solid #d3d3d3;
  956. display: flex;
  957. justify-content: space-around;
  958. }
  959. .detail-text-info {
  960. width: 60%;
  961. height: 77px;
  962. font-size: 20px;
  963. font-family: AlibabaPuHuiTiR;
  964. font-weight: 400;
  965. color: #666666;
  966. padding-top: 18px;
  967. margin-left: 30px;
  968. padding-right: 60px;
  969. word-wrap: break-word;
  970. overflow: hidden;
  971. }
  972. .detail-action-info {
  973. width: 40%;
  974. height: 77px;
  975. display: flex;
  976. margin-left: -30px;
  977. justify-content: space-around;
  978. border-left: 1px solid #d3d3d3;
  979. }
  980. .action-1 {
  981. display: inline-block;
  982. width: 30px;
  983. height: 77px;
  984. text-align: center;
  985. line-height: 90px;
  986. }
  987. .action-1 > img {
  988. width: 30px;
  989. height: 30px;
  990. }
  991. .action-2 {
  992. display: inline-block;
  993. width: 24px;
  994. height: 24px;
  995. text-align: center;
  996. line-height: 85px;
  997. }
  998. .action-2 > img {
  999. width: 100%;
  1000. height: 100%;
  1001. }
  1002. .action-3 {
  1003. display: inline-block;
  1004. width: 30px;
  1005. height: 20px;
  1006. text-align: center;
  1007. line-height: 90px;
  1008. }
  1009. .action-3 > img {
  1010. width: 100%;
  1011. height: 150%;
  1012. }
  1013. .sub-btn {
  1014. width: 100%;
  1015. height: 60px;
  1016. margin-top: 45px;
  1017. display: flex;
  1018. }
  1019. .return-btn {
  1020. width: 100%;
  1021. height: 60px;
  1022. margin-top: 45px;
  1023. cursor: pointer;
  1024. }
  1025. .return-sub {
  1026. width: 200px;
  1027. height: 60px;
  1028. line-height: 60px;
  1029. text-align: center;
  1030. font-size: 25px;
  1031. font-family: AlibabaPuHuiTiR;
  1032. font-weight: 400;
  1033. color: #ffffff;
  1034. background: #ff7648;
  1035. border-radius: 10px;
  1036. margin-left: 50%;
  1037. transform: translateX(-50%);
  1038. }
  1039. .success-btn {
  1040. width: 200px;
  1041. height: 60px;
  1042. line-height: 60px;
  1043. text-align: center;
  1044. background: #0099ff;
  1045. border-radius: 10px;
  1046. font-size: 22px;
  1047. font-family: AlibabaPuHuiTiM;
  1048. font-weight: 400;
  1049. color: #ffffff;
  1050. margin-left: 316px;
  1051. }
  1052. .up-sub {
  1053. width: 200px;
  1054. height: 60px;
  1055. line-height: 60px;
  1056. text-align: center;
  1057. font-size: 25px;
  1058. font-family: AlibabaPuHuiTiM;
  1059. font-weight: 400;
  1060. color: #ffffff;
  1061. background: #ff7648;
  1062. border-radius: 10px;
  1063. /* margin-left: 139px; */
  1064. margin-left: 50%;
  1065. transform: translateX(-50%);
  1066. }
  1067. .big-success {
  1068. width: 406px;
  1069. height: 300px;
  1070. background: #ffffff;
  1071. box-shadow: 0px 3px 7px 0px rgba(0, 0, 0, 0.35);
  1072. z-index: 999 !important;
  1073. border-radius: 20px;
  1074. position: relative;
  1075. position: absolute;
  1076. top: 70%;
  1077. left: 387px;
  1078. }
  1079. .user-btn {
  1080. width: 406px;
  1081. height: 300px;
  1082. background: #ffffff;
  1083. box-shadow: 0px 3px 7px 0px rgba(0, 0, 0, 0.35);
  1084. z-index: 999 !important;
  1085. border-radius: 20px;
  1086. position: relative;
  1087. position: absolute;
  1088. top: 70%;
  1089. left: 387px;
  1090. }
  1091. .user-btn-text1 {
  1092. width: 100%;
  1093. padding: 0 30px;
  1094. text-align: center;
  1095. margin-top: 18%;
  1096. font-size: 20px;
  1097. font-family: PingFangSC-Medium, PingFang SC;
  1098. font-weight: 600;
  1099. color: rgba(0, 0, 0, 0.85);
  1100. }
  1101. .btn-user-info1 {
  1102. width: 100%;
  1103. height: 40px;
  1104. display: flex;
  1105. justify-content: space-around;
  1106. margin-top: 15%;
  1107. }
  1108. .user-btn-text {
  1109. width: 100%;
  1110. padding: 0 30px;
  1111. text-align: center;
  1112. margin-top: 10%;
  1113. font-size: 20px;
  1114. font-family: PingFangSC-Medium, PingFang SC;
  1115. font-weight: 600;
  1116. color: rgba(0, 0, 0, 0.85);
  1117. }
  1118. .btn-user-info {
  1119. width: 100%;
  1120. height: 40px;
  1121. display: flex;
  1122. justify-content: space-around;
  1123. margin-top: 12%;
  1124. }
  1125. .btn-user-info-ok {
  1126. width: 106px;
  1127. height: 56px;
  1128. background: #00b4ff;
  1129. border-radius: 6px;
  1130. text-align: center;
  1131. line-height: 56px;
  1132. font-size: 20px;
  1133. font-family: PingFangSC-Regular, PingFang SC;
  1134. color: #fff;
  1135. cursor: pointer;
  1136. }
  1137. .btn-user-info-canel {
  1138. width: 106px;
  1139. height: 56px;
  1140. background: #c0c0c0;
  1141. border-radius: 6px;
  1142. text-align: center;
  1143. line-height: 56px;
  1144. font-size: 20px;
  1145. font-family: PingFangSC-Regular, PingFang SC;
  1146. color: #fff;
  1147. cursor: pointer;
  1148. }
  1149. .pic-model {
  1150. width: 86px;
  1151. height: 85px;
  1152. margin-left: 50%;
  1153. transform: translateX(-50%);
  1154. margin-top: 15%;
  1155. }
  1156. .text-success {
  1157. width: 406px;
  1158. height: 24px;
  1159. line-height: 24px;
  1160. font-size: 25px;
  1161. text-align: center;
  1162. margin-top: 30px;
  1163. font-family: AlibabaPuHuiTiR;
  1164. font-weight: 400;
  1165. color: #65c823;
  1166. }
  1167. .pic-model > img {
  1168. width: 100%;
  1169. height: 100%;
  1170. }
  1171. .action-1:hover {
  1172. cursor: pointer;
  1173. }
  1174. .action-2:hover {
  1175. cursor: pointer;
  1176. }
  1177. .action-3:hover {
  1178. cursor: pointer;
  1179. }
  1180. .success-btn:hover {
  1181. cursor: pointer;
  1182. }
  1183. .up-sub:hover {
  1184. cursor: pointer;
  1185. }
  1186. </style>