IntroductionPresentationDetails.vue 23 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553554555556557558559560561562563564565566567568569570571572573574575576577578579580581582583584585586587
  1. <template>
  2. <div>
  3. <div class="autoBox box">
  4. <div class="crumbs">
  5. <el-breadcrumb separator="/">
  6. <el-breadcrumb-item :to="{ path: 'home' }">{{$t('common.Home')}}</el-breadcrumb-item>
  7. <el-breadcrumb-item :to="{ path: 'IntroductionMemberProfile' }">{{$t('common.CooperationNetwork')}}</el-breadcrumb-item>
  8. <el-breadcrumb-item :to="{ path: 'IntroductionMemberInformation' }">{{$t('common.MemberShow')}}</el-breadcrumb-item>
  9. <el-breadcrumb-item>{{$i18n.locale=='zh'?this.member.memberNameZh:this.member.memberNameEn}}</el-breadcrumb-item>
  10. </el-breadcrumb>
  11. </div>
  12. <div style="margin: 0 30px; height: 510px;position: relative;border-bottom: 1px solid #ccc;">
  13. <div class="swipers">
  14. <div class="swiper-container gallery-top">
  15. <div class="swiper-wrapper">
  16. <div class="swiper-slide" v-for="(item,index) in img">
  17. <img :src="'api/file/pub/' + item" alt="" style="width: 100%;height: 100%;">
  18. </div>
  19. </div>
  20. <div class="swiper-button-next swiper-button-white"></div>
  21. <div class="swiper-button-prev swiper-button-white"></div>
  22. </div>
  23. <div class="swiper-container gallery-thumbs">
  24. <div class="swiper-wrapper">
  25. <div class="swiper-slide" v-for="(item,index) in img">
  26. <img :src="'api/file/pub/' + item" alt="" style="width: 100%;height: 100%;">
  27. </div>
  28. </div>
  29. </div>
  30. <div style="float: right;color: #666;font-size: 16px;margin-right: 20px;">
  31. </div>
  32. </div>
  33. <div class="details">
  34. <div style="width: 100%; font-size: 15px;color: #95949c;" >
  35. <div>
  36. <span class="initData_label cursor" style="color: #2c558a;width:100%">{{$i18n.locale=='zh'?this.member.memberNameZh:this.member.memberNameEn}}</span>
  37. </div>
  38. <div style="line-height: 35px;">
  39. <div>
  40. <span>
  41. <i class="el-icon-location-outline"></i>
  42. {{$t('common.place')}}:
  43. <el-button type="text" @click="unitCountryFour(initData.unitCountryDict)"> {{countryDictsMap[initData.unitCountryDict]}}</el-button>
  44. {{initData.unitRegion?'-'+initData.unitRegion:''}}
  45. </span>
  46. </div>
  47. <!-- <div>-->
  48. <!-- <span>-->
  49. <!-- <i class="el-icon-office-building" aria-hidden="true"></i>-->
  50. <!-- {{$t('common.RegisteredCapital')}}:{{initData.registerMoney?initData.registerMoney + "0000":'0'}}-->
  51. <!-- {{$i18n.locale=='zh'?'元':'RMB'}}-->
  52. <!-- </span>-->
  53. <!-- </div>-->
  54. <div>
  55. <span>
  56. <i class="fa fa-star-o"></i>
  57. {{$t('common.DateOfEstablishment')}}:{{initData.setUpDate?initData.setUpDate:''}}
  58. </span>
  59. </div>
  60. <div>
  61. <span>
  62. <i class="el-icon-time"></i>
  63. {{$t('common.LegalRepresentative')}}:{{initData.corporateName?initData.corporateName:''}}
  64. </span>
  65. </div>
  66. <div>
  67. <span>
  68. <i class="el-icon-office-building"></i> {{$t('common.OfficialWebsite')}}:
  69. <a href="javaScript:;" class="a-style" @click="toOffcial(initData.officialWebsitePath)">
  70. {{initData.officialWebsitePath?initData.officialWebsitePath:''}}
  71. </a>
  72. </span>
  73. </div>
  74. <!-- <div>
  75. <el-tag style="margin-right: 10px;" v-for="(i,index) in initData.unitLabel">{{i}}</el-tag>
  76. </div> -->
  77. <div v-if="initData.industry || initData.industryDict">
  78. <el-tag type="danger" v-if="$i18n.locale=='zh'">{{initData.industry}}</el-tag>
  79. <el-tag type="danger" v-if="$i18n.locale=='en'">{{TagEn[parseInt(initData.industryDict)]}}</el-tag>
  80. </div>
  81. <div>
  82. <div style="color: #666;">{{$t('common.intro')}}:</div>
  83. <div style="height: 72px;line-height: 24px;color: #333;font-size: 14px;
  84. -webkit-box-orient: vertical;
  85. position:relative;
  86. line-height:1.4em;
  87. overflow: hidden;
  88. height:4.2em;" class="plate"
  89. @click="dialogVisibleChange">{{initData.projectPerformance}}</div>
  90. </div>
  91. </div>
  92. </div>
  93. </div>
  94. </div>
  95. <div style="margin: 0 30px" v-for="(item,index) in history">
  96. <div class="enterprise_style">
  97. <span class="enterprise_style_span" style="display: inline-block;">{{item.title}}</span>
  98. </div>
  99. <div :style="$i18n.locale=='zh'?'text-indent: 30px;':''" class="nomale" style="float: left;margin-top: 15px;width: 773px ;
  100. margin-left: 30px;font-size: 16px;" v-html="item.contentHtml">
  101. </div>
  102. <div style="margin-left: 20px;width: 250px;height: 140px;padding-right:55px;padding-top:17px;float: right;"
  103. v-if="item.pictureUrl" alt="" >
  104. <img :src="'/api/file/pub/' + item.pictureUrl" alt="" style="width: 100%;height: 100%;">
  105. </div>
  106. <div style="clear:both"></div>
  107. </div>
  108. <div style="width: 100%;height: 320px;border-bottom: 1px solid #ccc;" v-if="memberDynamicList[0]">
  109. <div class="enterprise_style">
  110. <span class="enterprise_style_span" style="margin-left: 34px;text-align: left;">
  111. {{$t('common.MemberDynamics')}}
  112. </span>
  113. </div>
  114. <div v-if="memberDynamicPics.length > 0" style="float: left;;margin-top: 15px;margin-left: 100px;width: 400px;height: 230px;">
  115. <img :src="'/api/file/pub/' + memberDynamicPics[0]" alt="" style="width: 100%;height: 200px">
  116. </div>
  117. <div style="float: left;margin-top: 15px;" :style="memberDynamicPics.length > 0?'width: 620px;margin-left: 20px;':'width: 1020px;margin-left: 100px;'" class="enterprise_style_product">
  118. <tr v-for="(item,index) in memberDynamicList" v-if="index<5" class="cursor" @click="viewChange('realTimeInfoItemdetails',item.baseEntityId)">
  119. <td style="float: left;width: 500px;display: inline-block;overflow: hidden;text-overflow: ellipsis;white-space: nowrap;">{{item.title}}</td>
  120. <td style="float: right;">{{formatDate(item.publishDate)}}</td>
  121. <td style="clear:both"></td>
  122. </tr>
  123. </div>
  124. </div>
  125. <div style="clear: both"></div>
  126. <el-dialog
  127. :title="$t('common.InformationDetails')"
  128. :visible.sync="dialogVisible"
  129. width="30%">
  130. <span style="line-height: 29px;font-size: 18px;word-break:normal;" v-html="initData.unitIntrodution"></span>
  131. </el-dialog>
  132. </div>
  133. </div>
  134. </template>
  135. <script>
  136. import Base from "@/views/base/Base";
  137. import {getDicts} from '@/api/dict';
  138. import { Swiper, SwiperSlide, directive } from 'vue-awesome-swiper'
  139. import 'vue-awesome-swiper/node_modules/swiper/dist/css/swiper.css'
  140. import {saveOrUpdate} from '@/api/consultMessageInfo'
  141. import {getToken} from "@/utils/auth";
  142. import {getMemberUnit} from '@/api/baseContactsInfo'
  143. import {getInformationList,memberDynamicInfos} from "@/api/cooperation/baseCooperationUnit";
  144. import { formatDate } from "@/utils/formatUtils";
  145. import {getCountryByName} from '@/api/country/countryList'
  146. export default {
  147. name: 'IntroductionPresentationDetails',
  148. extends: Base,
  149. data() {
  150. return {
  151. enterpriseDetails: '',
  152. textarea: '',
  153. url: '',
  154. isOnlineConsultation: false,
  155. ProjectConsultant:{},
  156. dialogVisible:false,
  157. consultMessageInfo: {},
  158. img: [],
  159. TagEn:['Individual Member','Groups','Scientific Institutions','Colleges And Universities','Energy Companies','Equipement Manufactures','Project Contractors','Financial Institutions','Consultation Enterprises','Rigidity Of Enterprise','Media','Logistics Transportation','Others'],
  160. recommend: [
  161. {
  162. img: "u31535.jpg",
  163. num: "2934",
  164. },
  165. {
  166. img: "u31535.jpg",
  167. num: "2934",
  168. },
  169. {
  170. img: "u31535.jpg",
  171. num: "2934",
  172. },
  173. {
  174. img: "u31535.jpg",
  175. num: "2934",
  176. },
  177. {
  178. img: "u31535.jpg",
  179. num: "2934",
  180. }
  181. ],
  182. initData: {},
  183. history:[],
  184. memberDynamicList:[],
  185. params: {
  186. pageNo: 1,
  187. pageSize: 60,
  188. language: "",
  189. businessType:"introduction_to_members",
  190. businessId: this.$route.query.key,
  191. },
  192. enterprise: {
  193. label1: {
  194. label: '经营范围包括三峡工程建设和经营管理,住宿经营的管理;长江中上游水资源开发;水利水电技术服务;水利水电工程所需物资、设备的销售(国家有专营专项的除外);与上述业务有关的咨询服务;经营或代理公司所属企业自产产品(国家组织统一联合经营的16种出口商品除外)的出口业务;经营或代理公司及所属产业所需设备和材料(国家指定公司经营的12种进口商品除外)的进口业务;经营或代理技术进出口业务;承办中外合资经营、合作生产、来料加工、来样加工、来件装配、补偿贸易及易货贸易业务。(企依法自主选择经营项目,开展经营活动;依法需批准的项目;经相关部门批准后依批准的内容开展经营活动;不得从事本市产业政策禁止和限制类的经营活动。',
  195. src: 'u31492.jpg',
  196. src2:'u31520.jpg'
  197. },
  198. },
  199. countryDicts:[],
  200. baseEntityId:"",
  201. baseMemberId:this.$route.query.key,
  202. baseMemberInfo:{},
  203. member:[],
  204. memberDynamicPics:[],
  205. }
  206. },
  207. created() {},
  208. mounted() {
  209. this.getProjectList();
  210. this.getCountry();
  211. },
  212. updated(){
  213. this.Swiper();
  214. },
  215. watch:{
  216. "$i18n.locale"(){
  217. this.getProjectList();
  218. this.getCountry();
  219. }
  220. },
  221. computed:{
  222. countryDictsMap() {
  223. return this.countryDicts.array2Obj('value', 'label');
  224. },
  225. },
  226. methods: {
  227. getCountry(){
  228. getDicts(this.$i18n.locale=='zh'?'UNIT_COUNTRY_DICT':'unit_country_dict_en').then(res=>{
  229. this.countryDicts=res.data[0];
  230. })
  231. },
  232. getProjectList(){
  233. this.member = JSON.parse(this.$route.query.member);
  234. if(this.baseMemberId != undefined){
  235. let list = {
  236. baseEntityId:this.member.unitId,
  237. language:this.$i18n.locale.toUpperCase()
  238. };
  239. getMemberUnit(list).then(res=>{
  240. this.img = [];
  241. this.initData=res.data.baseUnitView || [];
  242. this.initData.unitLabel=this.initData.unitLabel?this.initData.unitLabel.split(','):"";
  243. this.initData.setUpDate = formatDate(this.initData.setUpDate,'YYYY');
  244. this.img.push(this.initData.photo);
  245. if(this.$i18n.locale=="zh"){
  246. this.initData.unitCountry = res.data.baseUnitView.unitCountry;
  247. }else if(this.$i18n.locale=="en"){
  248. this.initData.unitCountry = res.data.baseUnitView.unitCountryDict;
  249. }
  250. if(this.img.length==0){
  251. this.img.push('/def/memberUnitsDef.png');
  252. }
  253. });
  254. }else{
  255. this.$store.commit('modify', 'IntroductionMemberInformation');
  256. window.localStorage.setItem('router', 'IntroductionMemberInformation');
  257. const { href } = this.$router.resolve({
  258. name: router,
  259. query: {
  260. }
  261. });
  262. }
  263. var params={
  264. language: this.$i18n.locale.toUpperCase(),
  265. businessType:"introduction_to_members",
  266. businessId: this.$route.query.key
  267. }
  268. getInformationList(params).then((res) => {
  269. // this.img = [];
  270. if(res.data){
  271. if(res.data['1']){
  272. this.history = res.data['1'];
  273. this.history.forEach(element=>{
  274. if(element.pictureUrl){
  275. this.img.push(element.pictureUrl);
  276. }
  277. })
  278. }else{
  279. this.history = [];
  280. }
  281. }
  282. });
  283. var params={
  284. language: this.$i18n.locale.toUpperCase(),
  285. objectId: this.$route.query.key,
  286. pageNo: 1,
  287. pageSize: 5,
  288. }
  289. memberDynamicInfos(params).then((result) => {
  290. var data = result.data;
  291. if(data){
  292. this.memberDynamicList = data.memberDynamicInfos ||[];
  293. }
  294. this.memberDynamicPics = [];
  295. this.memberDynamicList.forEach(memberDynamic=>{
  296. if(memberDynamic.pictureUrl){
  297. this.memberDynamicPics.push(memberDynamic.pictureUrl);
  298. }
  299. })
  300. });
  301. },
  302. dialogVisibleChange(){
  303. this.dialogVisible=true;
  304. },
  305. viewChange(router,json){
  306. this.$store.commit('modify', router);
  307. window.localStorage.setItem('router', router);
  308. const { href } = this.$router.resolve({
  309. name: router,
  310. query: {
  311. key: json
  312. }
  313. });
  314. window.open(href, '_blank');
  315. },
  316. Swiper() {
  317. var galleryThumbs = new Swiper('.gallery-thumbs', {
  318. spaceBetween: 10,
  319. slidesPerView: 4,
  320. freeMode: true,
  321. watchSlidesVisibility: true,
  322. watchSlidesProgress: true,
  323. autoplay: {//自动播放
  324. delay: 4000,
  325. disableOnInteraction: false,//用户操作后是否停止 默认停止(true)
  326. },
  327. });
  328. var galleryTop = new Swiper('.gallery-top', {
  329. spaceBetween: 10,
  330. navigation: {
  331. nextEl: '.swiper-button-next',
  332. prevEl: '.swiper-button-prev',
  333. },
  334. autoplay: {//自动播放
  335. delay: 4000,
  336. disableOnInteraction: false,//用户操作后是否停止 默认停止(true)
  337. },
  338. thumbs: {
  339. swiper: galleryThumbs
  340. }
  341. });
  342. },
  343. // 项目收藏改变
  344. shareChange() {
  345. if (this.initData[0].share == 'y') {
  346. this.initData[0].share = 'n'
  347. } else {
  348. this.initData[0].share = 'y'
  349. }
  350. },
  351. toOffcial(url){
  352. // let urls='http://'+url;
  353. if(url.indexOf('http') == -1){
  354. url = 'http://' + url
  355. }
  356. window.open(url,'_blank')
  357. },
  358. handleClose(done) {
  359. this.isOnlineConsultation = false;
  360. },
  361. consultMessage() {
  362. // 人员信息
  363. let user = window.localStorage.getItem('user');
  364. if (!user) {
  365. this.$message.warning("请先登录");
  366. } else {
  367. var users = JSON.parse(user);
  368. this.consultMessageInfo.senderId = users.userId;
  369. this.consultMessageInfo.replyStatusDict = "N";
  370. this.consultMessageInfo.senderDate = new Date();
  371. var token = "" + getToken();
  372. // 接口逻辑
  373. this.submitHandler(token => {
  374. saveOrUpdate(JSON.stringify(this.consultMessageInfo),token).then(result => {
  375. alert(result.msg);
  376. this.$message({
  377. message: '已发送成功,请等待',
  378. type: 'success'
  379. });
  380. this.consultMessageInfo = {}
  381. }).catch(error => {
  382. // 此处你的业务代码
  383. });
  384. });
  385. }
  386. },
  387. unitCountryFour (unitCountry){
  388. getCountryByName(unitCountry).then(res=>{
  389. console.log("请求返回的值",res.data)
  390. if (res.data.countryById != null ){
  391. this.$store.commit('modify', 'countryNationalSpace')
  392. window.localStorage.setItem('router', 'countryNationalSpace')
  393. const { href } = this.$router.resolve({
  394. name: 'countryNationalSpace',
  395. query: {
  396. key: res.data.countryById,
  397. },
  398. })
  399. window.open(href, '_blank')
  400. }else{
  401. alert("国别信息库中未维护该国别");
  402. }
  403. })
  404. console.log("当前语言版本",this.language);
  405. console.log("显示选中的国别信息",unitCountry);
  406. },
  407. getIconUrl(url) {
  408. return require("@/assets/img/introductionCooperation/" + url);
  409. },
  410. toView(router, json) {
  411. this.$router.push({
  412. name: router,
  413. params: json
  414. })
  415. },
  416. screenBack(data) {
  417. }
  418. }
  419. }
  420. </script>
  421. <!-- Add "scoped" attribute to limit CSS to this component only -->
  422. <style scoped>
  423. .box {
  424. margin-top: 10px;
  425. background: #fff;
  426. /* height: 500px; */
  427. padding: 20px 0;
  428. }
  429. .crumbs {
  430. margin-left: 20px;
  431. }
  432. body {
  433. margin: 0;
  434. }
  435. .a-style {
  436. color: #0500ee;
  437. cursor: pointer;
  438. text-decoration: underline;
  439. }
  440. .swipers {
  441. position: absolute;
  442. top: 30px;
  443. left: 30px;
  444. width: 550px;
  445. height: 439px;
  446. }
  447. .details {
  448. position: absolute;
  449. top: 30px;
  450. left: 600px;
  451. width: 460px;
  452. height: 390px;
  453. }
  454. .swiper-container {
  455. width: 100%;
  456. height: 300px;
  457. margin-left: auto;
  458. margin-right: auto;
  459. }
  460. .swiper-slide {
  461. background-size: cover;
  462. background-position: center;
  463. }
  464. .gallery-top {
  465. height: 80%;
  466. width: 100%;
  467. }
  468. .gallery-thumbs {
  469. height: 20%;
  470. box-sizing: border-box;
  471. padding: 10px 0;
  472. }
  473. .gallery-thumbs .swiper-slide {
  474. width: 25%;
  475. height: 100%;
  476. opacity: 0.4;
  477. }
  478. .gallery-thumbs .swiper-slide-thumb-active {
  479. opacity: 1;
  480. }
  481. .initData_label {
  482. color: #6c8c9d;
  483. font-weight: 700;
  484. font-size: 18px;
  485. line-height: 42px;
  486. display: inline-block;
  487. }
  488. .enterprise_style {
  489. line-height: 50px;
  490. color: #6C819D;
  491. padding-left: 30px;
  492. font-size: 18px;
  493. font-weight: 700;
  494. margin-top: 5px;
  495. }
  496. .enterprise_style_span {
  497. display: inline-block;
  498. text-align: center;
  499. height: 100%;
  500. border-bottom: 2px solid #6699ff;
  501. }
  502. .enterprise_style_product tr {
  503. line-height: 30px;
  504. width: 100%;
  505. display: inline-block;
  506. border-bottom: 1px dashed #ccc;
  507. font-size: 14px;
  508. color: #6C819D;
  509. margin-bottom: 5px;
  510. }
  511. .recommend {
  512. margin-top: 15px;
  513. margin-left: 30px;
  514. }
  515. .recommend li {
  516. display: inline-block;
  517. width: 170px;
  518. /* height: 130px; */
  519. text-align: center;
  520. margin-right: 15px;
  521. }
  522. .share:hover {
  523. color: #66b1ff;
  524. }
  525. .dynamic{
  526. width: 95%;
  527. /* height: 274px; */
  528. margin: 30px 0 30px 50px;
  529. }
  530. .news>ul{
  531. height: 100%;
  532. }
  533. .news>ul>li:nth-child(1){
  534. border-top: 1px dotted #dadada;
  535. }
  536. .news>ul>li{
  537. height: 20%;
  538. border-bottom: 1px dotted #dadada;
  539. line-height: 55px;
  540. }
  541. .news>ul>li>span{
  542. float: right;
  543. }
  544. .nomale >>>ul, .nomale >>>p,.nomale:first-child,.nomale{
  545. /* word-break:break-word; */
  546. word-wrap:break-word;
  547. }
  548. >>>.el-dialog__body{
  549. padding: 0px 20px 10px;
  550. word-break:normal;
  551. }
  552. </style>