nationalregionalCountryList.vue 11 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354
  1. <template>
  2. <view class="" style="margin: 0 20upx;">
  3. <u-navbar :back-text="i18n('Back')" :back-text-style="backStyle" back-icon-color="#fff" title-color="#fff"
  4. :title="countryItem.committeeName" :background="background">
  5. </u-navbar>
  6. <view class="">
  7. <image v-if="countryItem.nationalFlag" :src="websiteUrl+ countryItem.nationalFlag" mode=""
  8. style="width: 100%;height: 407upx;"></image>
  9. <image :src="websiteUrl+'/def/projectdefault.png'" alt="" v-else style="width: 200upx;height: 200upx;">
  10. </image>
  11. </view>
  12. <view class="" style="font-weight: 700;font-size: 32upx;line-height: 40upx;">
  13. {{countryItem.committeeName}}
  14. </view>
  15. <view class="">
  16. {{countryItem.committeeProfile}}
  17. </view>
  18. <view class="" style="" v-if="countryMap[0] && countryMap[0].length>0 ||
  19. countryMap[1] && countryMap[1].length>0 ||
  20. countryMap[2] && countryMap[2].length>0 ||
  21. countryMap[3] && countryMap[3].length>0 ||
  22. countryMap[4] && countryMap[4].length>0">
  23. <view style="" v-for="(item,index) in countryMap[0]" :style="index==0?'margin-top:30upx':'margin-top:30upx'"
  24. style="min-height: 260upx;">
  25. <text class="introduceMap-title" style="font-weight: 700;font-size: 32upx;" v-if="index == 0">
  26. <!-- {{committeeUnitPostDictsMaps(item.countryDutyDict)}} -->
  27. {{item.countryDuty}}
  28. </text>
  29. <view class="">
  30. <view class="" style="float: left;
  31. width: 192upx;height: 192upx;
  32. margin-right: 20upx;
  33. margin-top: 20upx;vertical-align: top;">
  34. <image class="imgage-user" v-if="!item.spareTwo"
  35. src="@/static/img/nationaIntroductionList/user.png" alt="">
  36. <image class="imgage-user" v-else :src="websiteUrl+ item.spareTwo" alt="">
  37. </view>
  38. <text style="
  39. display: inline-block;
  40. font-weight: 700;" class="active" @click="toView(item.entityId)">
  41. {{$i18n.locale == 'zh'?item.name:item.nameEn}}
  42. </text>
  43. <view v-if="item.country" style="margin-left: 15upx;">
  44. ({{item.country}})
  45. </view>
  46. <view class="" style="margin-top: 20upx;">
  47. {{item.unitProfile}}
  48. </view>
  49. </view>
  50. </view>
  51. <view style="" v-for="(item,index) in countryMap[1]" :class="index==0?'border-top':''"
  52. style="min-height: 260upx;">
  53. <text class="introduceMap-title" style="font-weight: 700;font-size: 32upx;">
  54. <!-- {{committeePostDictsMaps(item.countryDutyDict)}} -->
  55. {{item.countryDuty}}
  56. </text>
  57. <view class="">
  58. <view class="" style="float: left;
  59. width: 192upx;height: 192upx;
  60. margin-right: 20upx;
  61. margin-top: 20upx;vertical-align: top;">
  62. <image class="imgage-user" v-if="!item.spareTwo"
  63. src="@/static/img/nationaIntroductionList/user.png" alt="">
  64. <image class="imgage-user" v-else :src="websiteUrl + item.spareTwo" alt="">
  65. </view>
  66. <text style="
  67. display: inline-block;
  68. font-weight: 700;" class="active" @click="toView(item.entityId)">
  69. {{$i18n.locale == 'zh'?item.name:item.nameEn}}
  70. </text>
  71. <view v-if="item.country" style="margin-left: 15upx;">
  72. <!-- ({{countryDictsMap(item.countryDict)}}) -->
  73. ({{item.country}})
  74. </view>
  75. <view class="" style="margin-top: 20upx;">
  76. {{item.unitProfile}}
  77. </view>
  78. </view>
  79. </view>
  80. <view style="" v-for="(item,index) in countryMap[2]" :class="index==0?'border-top':''"
  81. style="min-height: 260upx;">
  82. <text class="introduceMap-title" style="font-weight: 700;font-size: 32upx;">
  83. <!-- {{committeePostDictsMaps(item.countryDutyDict)}} -->
  84. {{item.countryDuty}}
  85. </text>
  86. <view class="">
  87. <view class="" style="float: left;
  88. width: 192upx;height: 192upx;
  89. margin-right: 20upx;
  90. margin-top: 20upx;vertical-align: top;">
  91. <image class="imgage-user" v-if="!item.spareTwo"
  92. src="@/static/img/nationaIntroductionList/user.png" alt="">
  93. <image class="imgage-user" v-else :src="websiteUrl + item.spareTwo" alt="">
  94. </view>
  95. <text style="
  96. display: inline-block;
  97. font-weight: 700;" class="active" @click="toView(item.entityId)">
  98. {{$i18n.locale == 'zh'?item.name:item.nameEn}}
  99. </text>
  100. <view v-if="item.country" style="margin-left: 15upx;">
  101. <!-- ({{countryDictsMap(item.countryDict)}}) -->
  102. ({{item.country}})
  103. </view>
  104. <view class="" style="margin-top: 20upx;">
  105. {{item.unitProfile}}
  106. </view>
  107. </view>
  108. </view>
  109. <view style="" v-for="(item,index) in countryMap[3]" :class="index==0?'border-top':''"
  110. style="min-height: 260upx;">
  111. <text class="introduceMap-title" style="font-weight: 700;font-size: 32upx;">
  112. <!-- {{committeePostDictsMaps(item.countryDutyDict)}} -->
  113. {{item.countryDuty}}
  114. </text>
  115. <view class="">
  116. <view class="" style="float: left;
  117. width: 192upx;height: 192upx;
  118. margin-right: 20upx;
  119. margin-top: 20upx;vertical-align: top;">
  120. <image class="imgage-user" v-if="!item.spareTwo"
  121. src="@/static/img/nationaIntroductionList/user.png" alt="">
  122. <image class="imgage-user" v-else :src="websiteUrl+ item.spareTwo" alt="">
  123. </view>
  124. <text style="
  125. display: inline-block;
  126. font-weight: 700;" class="active" @click="toView(item.entityId)">
  127. {{$i18n.locale == 'zh'?item.name:item.nameEn}}
  128. </text>
  129. <view v-if="item.country" style="margin-left: 15upx;">
  130. <!-- ({{countryDictsMap(item.countryDict)}}) -->
  131. ({{item.country}})
  132. </view>
  133. <view class="" style="margin-top: 20upx;">
  134. {{item.unitProfile}}
  135. </view>
  136. </view>
  137. </view>
  138. <view style="" v-for="(item,index) in countryMap[4]" :class="index==0?'border-top':''"
  139. style="min-height: 260upx;">
  140. <text class="introduceMap-title" style="font-weight: 700;font-size: 32upx;">
  141. <!-- {{committeePostDictsMaps(item.countryDutyDict)}} -->
  142. {{item.countryDuty}}
  143. </text>
  144. <view class="">
  145. <view class="" style="float: left;
  146. width: 192upx;height: 192upx;
  147. margin-right: 20upx;
  148. margin-top: 20upx;vertical-align: top;">
  149. <image class="imgage-user" v-if="!item.spareTwo"
  150. src="@/static/img/nationaIntroductionList/user.png" alt="">
  151. <image class="imgage-user" v-else :src="websiteUrl+ item.spareTwo" alt="">
  152. </view>
  153. <text style="
  154. display: inline-block;
  155. font-weight: 700;" class="active" @click="toView(item.entityId)">
  156. {{$i18n.locale == 'zh'?item.name:item.nameEn}}
  157. </text>
  158. <view v-if="item.country" style="margin-left: 15upx;">
  159. <!-- ({{countryDictsMap(item.countryDict)}}) -->
  160. ({{item.country}})
  161. </view>
  162. <view class="" style="margin-top: 20upx;">
  163. {{item.unitProfile}}
  164. </view>
  165. </view>
  166. </view>
  167. </view>
  168. <view class="" v-else>
  169. <image src="../../static/notFound.png" mode="" style="width: 750upx;"></image>
  170. <view style="text-align: center;transform: translateY(-65upx);">
  171. {{i18n('NoData')}}
  172. </view>
  173. </view>
  174. </view>
  175. </template>
  176. <script>
  177. export default {
  178. data() {
  179. return {
  180. countryMap: {},
  181. countryList: [],
  182. countryItem: {},
  183. background: {
  184. backgroundImage: 'linear-gradient(270deg, #4BC0E2 0%, #538BE7 100%)',
  185. },
  186. backStyle: {
  187. color: '#fff'
  188. },
  189. committeePostDicts: [],
  190. committeeUnitPostDicts: [],
  191. countryDicts: [],
  192. worldSearch: [],
  193. introduce: []
  194. }
  195. },
  196. onLoad(options) {
  197. // this.countryList = JSON.parse(options.item).countryList;
  198. console.log(options.item, 'zheshi');
  199. this.countryItem = JSON.parse(options.item);
  200. // this.countryDicts = JSON.parse(options.item).countryDicts;
  201. // this.committeePostDicts = JSON.parse(options.item).committeePostDicts;// 人员职位
  202. // this.committeeUnitPostDicts = JSON.parse(options.item).committeeUnitPostDicts;// 机构职位
  203. },
  204. mounted() {
  205. this.getCommitteeInfos();
  206. },
  207. computed: {
  208. },
  209. methods: {
  210. async getDicts() {
  211. const res = await this.$myRequest({
  212. url: '/sys/sysDicts',
  213. data: {
  214. type: 'COMMITTEE_POST_DICT,COMMITTEE_POST_DICT_EN,COMMITTEE_UNIT_POST_DICT,COMMITTEE_UNIT_POST_DICT_EN,UNIT_COUNTRY_DICT,UNIT_COUNTRY_DICT_EN'
  215. }
  216. });
  217. var data = res.data;
  218. if (data) {
  219. if (this.$i18n.locale == 'zh') {
  220. this.committeePostDicts = res.data[0] || [];
  221. this.committeeUnitPostDicts = res.data[2] || [];
  222. this.countryDicts = res.data[4] || [];
  223. } else if (this.$i18n.locale == 'en') {
  224. this.committeePostDicts = res.data[1] || [];
  225. this.committeeUnitPostDicts = res.data[3] || [];
  226. this.countryDicts = res.data[5] || [];
  227. }
  228. }
  229. },
  230. async getCommitteeInfos() {
  231. let page = {
  232. committeeId: "",
  233. language: this.$i18n.locale.toUpperCase(),
  234. }
  235. const res = await this.$myRequest({
  236. url: '/project/committeeBasisInfos/getCommitteeInfos',
  237. data: page,
  238. })
  239. // 国家委员会
  240. this.worldSearch = res.data.committeeBasisInfosCountry;
  241. this.worldSearch.unshift({
  242. committeeName: this.$i18n.locale == 'zh' ? '全部' : 'ALL',
  243. id: null,
  244. value: null
  245. });
  246. this.cooperationUnitDynamicList = res.data.committeeActivityInfos;
  247. this.countryList = res.data.countryList;
  248. this.introduce = res.data.regionList;
  249. this.getCountryDetail(this.countryItem);
  250. },
  251. // 人员
  252. committeePostDictsMaps(value) {
  253. const PostDicts = this.committeePostDicts.filter(item => {
  254. return item.value == value
  255. })
  256. return PostDicts[0].label;
  257. },
  258. // 机构
  259. committeeUnitPostDictsMaps(value) {
  260. const PostDicts = this.committeeUnitPostDicts.filter(item => {
  261. return item.value == value
  262. })
  263. return PostDicts[0].label;
  264. },
  265. countryDictsMap(value) {
  266. if (this.countryDicts) {
  267. const PostDicts = this.countryDicts.filter(item => {
  268. return item.value == value
  269. })
  270. return PostDicts[0].label;
  271. }
  272. },
  273. getCountryDetail(item) {
  274. this.countryMap = {};
  275. this.countryMap[0] = []
  276. this.countryMap[1] = []
  277. this.countryMap[2] = []
  278. this.countryMap[3] = []
  279. this.countryMap[4] = []
  280. if (this.countryList[1].length > 0) {
  281. this.countryList[1].forEach(element => {
  282. if (element.nationalCommitteeDict == item.entityId && element.correlationType == 'C') {
  283. this.countryMap[0].push(element);
  284. }
  285. })
  286. }
  287. if (this.countryList[1].length > 0) {
  288. this.countryList[1].forEach(element => {
  289. if (element.nationalCommitteeDict == item.entityId && element.correlationType == 'P') {
  290. this.countryMap[1].push(element);
  291. }
  292. })
  293. }
  294. if (this.countryList[2].length > 0) {
  295. this.countryList[2].forEach(element => {
  296. if (element.nationalCommitteeDict == item.entityId) {
  297. this.countryMap[2].push(element);
  298. }
  299. })
  300. }
  301. if (this.countryList[3].length > 0) {
  302. this.countryList[3].forEach(element => {
  303. if (element.nationalCommitteeDict == item.entityId) {
  304. this.countryMap[3].push(element);
  305. }
  306. })
  307. }
  308. if (this.countryList[4].length > 0) {
  309. this.countryList[4].forEach(element => {
  310. if (element.nationalCommitteeDict == item.entityId) {
  311. this.countryMap[4].push(element);
  312. }
  313. })
  314. }
  315. },
  316. toView(value) {
  317. this.$mRouter.push({
  318. route: `/pages/nationalregionalCommissions/nationalregionalCountryDetails?id=${value}`,
  319. });
  320. },
  321. i18n(data) {
  322. return this.$t('common.' + data);
  323. },
  324. }
  325. }
  326. </script>
  327. <style>
  328. page {
  329. background-color: #fff;
  330. }
  331. .imgage-user {
  332. width: 100%;
  333. height: 100%;
  334. }
  335. .active:active {
  336. color: #0079ef;
  337. }
  338. </style>