dev/dcp-web-gate/src_old/views/ThinkTankConsulting/ThinkTankConsulting.vue

<template>
    <div>
        <div class="autoBox box">
            <div class="crumbs">
                <el-breadcrumb separator="/">
                    <el-breadcrumb-item :to="{ path: 'home' }">{{ $t('common.Home') }}</el-breadcrumb-item>
                    <el-breadcrumb-item>{{ $t('common.ThinkTankConsulting') }}</el-breadcrumb-item>
                </el-breadcrumb>
            </div>
            <div style="padding:20px 20px;">
                <div style="font-size: 20px;color: #2C558A;font-weight: 700">
                    <img src="@/assets/img/cooperationExchange/20200608_03.gif" alt=""
                        style="height: 20px;vertical-align: middle;">
                    {{ $t('common.ThinkTankConsultingServe') }}
                </div>
                <div
                    style="width: 100%;margin-top: 22px;display: flex;justify-content: space-between;flex-wrap:wrap;color: #fff">
                    <div style="width: 45%;height: 119px;margin-bottom: 25px;padding:23px;" class="ListOne">
                        <div>
                            <img src="@/assets/img/ThinkTankConsulting/content1.png" alt=""
                                style="width: 30px;height: 30px;float: left;margin-right: 10px"
                                :style="$i18n.locale == 'zh' ? 'margin-top:8px;' : ''">
                            <span style="font-size: 30px;">{{ $t(consultServe[0].title) }}</span>
                        </div>
                        <p v-html="$t(consultServe[0].label)" style="font-size: 16px;"></p>
                    </div>
                    <div style="width: 45%;height: 119px;margin-bottom: 25px;padding:23px;" class="ListTwo">
                        <div>
                            <img src="@/assets/img/ThinkTankConsulting/content2.png" alt="" style="width: 30px;height: 30px;float: left;margin-right: 10px;vertical-align: middle;
                            " :style="$i18n.locale == 'zh' ? 'margin-top:8px;' : ''">
                            <span style="font-size: 30px;">{{ $t(consultServe[1].title) }}</span>
                        </div>
                        <p v-html="$t(consultServe[1].label)" style="font-size: 16px;"></p>
                    </div>
                    <div style="width: 45%;height: 119px;margin-bottom: 30px;padding:23px;" class="ListThree">
                        <div>
                            <img src="@/assets/img/ThinkTankConsulting/content3.png" alt=""
                                style="width: 30px;height: 35px;float: left;margin-right: 10px"
                                :style="$i18n.locale == 'zh' ? 'margin-top:4px;' : ''">
                            <span style="font-size: 30px;">{{ $t(consultServe[2].title) }}</span>

                        </div>
                        <p v-html="$t(consultServe[2].label)" style="font-size: 16px;"></p>
                    </div>
                    <div style="width: 45%;height: 119px;margin-bottom: 30px;padding:23px;" class="ListFour">
                        <div>
                            <img src="@/assets/img/ThinkTankConsulting/content4.png" alt="" style="width: 30px;height: 23px;float: left;margin-right: 10px;margin-top: 8px;
                            " :style="$i18n.locale == 'zh' ? 'margin-top:8px;' : ''">
                            <span style="font-size: 30px;">{{ $t(consultServe[3].title) }}</span>
                        </div>
                        <p v-html="$t(consultServe[3].label)" style="font-size: 16px;"></p>
                    </div>
                </div>
                <!--发布咨询需求-->
                <div class="demand">
                    <!--<img src="@/assets/img/ThinkTankConsulting/demand.png" alt="" style="width: 100%">-->
                    <span style="font-size: 30px;margin-left: 112px;color: #fff;display: inline-block;"
                        :style="$i18n.locale == 'zh' ? 'margin-top: 51px;' : 'width: 600px;margin-top: 41px;'">
                        {{ $t('common.ThinkTankSolution') }}
                    </span>
                    <div :class="$i18n.locale == 'zh' ? 'boxOne' : 'boxTwo'" @click="toIssue">
                        <span style="color: #1e6e93;font-size: 14px">{{ $t('common.ThinkTankPostDemand') }}</span>
                    </div>
                    <div style="clear: both"></div>
                </div>
                <!--虚拟电厂-->
                <!-- <div style="width: 100%;margin-top: 30px;">
                    <div style="float: right;width: 49%;box-sizing: border-box;">
                        <div class="relevanInformation">
                            <div class="informationTitle informationTitleAfter">
                                <img src="@/assets/img/cooperationExchange/20200608_03.gif" alt=""
                                    style="height: 20px;vertical-align: middle;">
                                {{ $t('common.VirtualPowerPlant') }}
                                <span @click="resultsShowChange()" style="float: right;cursor: pointer;">
                                    <div style="width: 19px;height: 19px;float: right;margin-right: 5px;">
                                        <img src="@/assets/img/helpCenter/change1.png" alt=""
                                            style="width:100%;transform: translateY(0px);">
                                    </div>
                                    <div style="float:right;margin-right:5px;font-size:16px;color:#778AA4">
                                        {{ $t('common.ChangeTheBatch') }}
                                    </div>
                                </span>
                            </div>
                            <div class="informationList">
                                <ul>
                                    <li style="display: list-item;border-bottom: 1px dashed #999;"
                                        v-for="(infoItem, index) in informationList1"
                                        @click="toInformationList1(infoItem)">
                                        <div class="square"></div>
                                        <div class="list" style="width: 70%">
                                            {{ infoItem.title }}123
                                        </div>
                                    </li>
                                </ul>
                            </div>
                        </div>
                    </div> -->
                    <!--碳中和-->
                    <div style="float: left;width: 49%;box-sizing: border-box;">
                        <div class="relevanInformation">
                            <div class="informationTitle informationTitleAfter">
                                <img src="@/assets/img/cooperationExchange/20200608_03.gif" alt=""
                                    style="height: 20px;vertical-align: middle;">
                                {{ $t('common.ThinkTankHotFocus') }}
                                <span @click="changePage()" style="float: right;cursor: pointer;">

                                    <div style="width: 19px;height: 19px;float: right;margin-right: 5px;">
                                        <img src="@/assets/img/helpCenter/change1.png" alt=""
                                            style="width:100%;transform: translateY(0px);">
                                    </div>
                                    <div style="float:left;margin-right:5px;font-size:16px;color:#778AA4">
                                        {{ $t('common.ChangeTheBatch') }}
                                    </div>
                                </span>
                            </div>
                            <div class="informationList">
                                <ul style="padding-left: 10px">
                                    <li v-for="(infoItem, index) in HotFocus"
                                        @click="toViewHot('realTimeInfoItemdetails', infoItem.baseEntityId)"
                                        style="list-style: disc inside;border-bottom: 1px dashed #999;">
                                        <div class="square"></div>
                                        <div class="list">
                                            {{ infoItem.title }}
                                        </div>
                                        <div class="list" style="width: 20%;float: right">
                                            {{ formatDate(infoItem.updateDate) }}
                                        </div>
                                    </li>
                                </ul>
                            </div>
                        </div>
                    </div>
                    <div style="clear: both"></div>
                </div>
                <!--智库推荐-->

                <!-- <div style="width: 100%; min-height: 235px; padding: 10px 0;box-sizing: border-box;position: relative"> -->
                <div
                    style="font-size: 18px;color: #666666;font-weight: 700;margin-top: 30px;border-bottom: 1px solid #2C558A;height: 30px;">
                    <img src="@/assets/img/cooperationExchange/20200608_03.gif" alt=""
                        style="height: 20px;vertical-align: middle;">
                    {{ $t('common.ThinkTankRecommended') }}
                    <span style="float: right;color:#778AA4;cursor: pointer;font-size: 16px;"
                        @click="toViewMore('IntroductionMemberInformation', menberDetails, '08')">{{ $t('common.More')
                        }}
                        ></span>
                </div>
                <div
                    style="width: 100%; min-height: 235px; padding: 10px 0;box-sizing: border-box;position: relative;text-align: center;">
                    <div class="swipers">
                        <div class="swiper-container gallery-thumbs">
                            <div class="swiper-wrapper">
                                <div class="swiper-slide" v-for="(recommenItem, index) in RecommendedList">
                                    <img :src="'api/file/pub/' + recommenItem.photo" alt
                                        style="width: 100%;height:180px;cursor: pointer"
                                        @click="toDetails('IntroductionPresentationDetails', recommenItem)" />
                                    <span>{{ recommenItem.unitName }}</span>
                                </div>

                            </div>

                        </div>
                    </div>
                </div>
            </div>
        </div>
        <!--    登录提示-->
        <el-dialog :title="$i18n.locale == 'zh' ? '提示' : 'Reminder'" :visible.sync="toViewLogin"
            :width="$i18n.locale == 'zh' ? '500px' : '750px'" :height="$i18n.locale == 'zh' ? '300px' : '386px'"
            :before-close="toViewLoginChange">
            <div style="width: 100%;height: 100%;">
                <img src="@/assets/img/loginTips.png" alt="" style="width: 180px;height: 180px;margin-left: 20px;">
                <div style="float: right;margin-right: 20px;"
                    :style="$i18n.locale == 'zh' ? 'width: 49%;margin-top: 10px;' : 'width: 453px;margin-top: -25px;'">
                    <div style="font-size: 20px;font-weight: normal;color: #333333;
                font-family: HiraginoSansGB-W3, HiraginoSansGB;
                line-height: 40px;">
                        {{ $t('common.ReminderFirst') }}
                    </div>
                    <div style="font-size: 16px;font-family: HiraginoSansGB-W3, HiraginoSansGB;
              font-weight: normal;color: #666666;line-height: 30px;">
                        {{ $t('common.ReminderSecond') }} <span style="color: #0091FF;font-size: 18px;">{{ num }}</span>
                        {{ $t('common.ReminderThird') }}
                    </div>
                    <div style="font-size: 14px;font-family: HiraginoSansGB-W3, HiraginoSansGB;
              font-weight: normal;color: #666666;line-height: 30px;">
                        {{ $t('common.ReminderForth') }}
                    </div>
                    <div style="font-size: 14px;font-family: HiraginoSansGB-W3, HiraginoSansGB;
              height:33px;line-height:60px;font-weight: normal;color: #0091FF;">
                        <span style="margin-left: 40px;" class="cursor" @click="toView('login')">
                            {{ $t('common.ReminderFifth') }}
                        </span>
                        <span style="margin-left: 10px;" class="cursor" @click="toView('Register')">
                            {{ $t('common.ReminderSixth') }}
                        </span>
                    </div>
                </div>
            </div>

        </el-dialog>
    </div>
</template>

<script>
import Base from "@/views/base/Base";
import { Swiper } from "vue-awesome-swiper";
import Screen from "@/components/screen";
import { getBaseResearchResultViews, getVirtualPowerPlant } from "@/api/research/baseResearchResultView";
import { baseThinkTankInfos } from "@/api/thinkTank/baseThinkTankInfo";
import { hostFocusList } from "@/api/financialService/cmsInformationViews";
import { gateGetUnitViewById } from "@/api/baseUnitView";

export default {
    name: "ThinkTankConsulting",
    components: { Screen },
    extends: Base,
    data() {
        return {
            num: 5,
            timer: '',
            toViewLogin: false,
            index: 0,
            loading: true,
            totalPage: "",
            projectFaIcon: 2,
            menberDetails: {
                dictTypeId: "456",
                id: "3140",
                img: "group.png",
                label: "咨询公司",
                num: "42",
                value: "08",
            },
            page: {
                pageSize: "10",
                pageNo: "1",
                language: '',
                descStatus: '0',
            },
            consultServe: [
                {
                    title: 'common.ThinkTankMarketResearch',
                    label: 'common.ThinkTankMarketResearchText'
                },
                {
                    title: 'common.ThinkTankProjectConsultation',
                    label: 'common.ThinkTankProjectConsultationText'
                },
                {
                    title: 'common.ThinkTankScienceAndTechnologyInnovation',
                    label: 'common.ThinkTankScienceAndTechnologyInnovationText'
                },
                {
                    title: 'common.ThinkTankPlanningStudy',
                    label: 'common.ThinkTankPlanningStudyText'
                },
            ],
            init: [],
            dict: {},
            informationList1: [],
            informationList1page: {
                pageSize: 5,
                pageNo: 1,
                language: '',
                totalPage: '',
                descStatus: 0
            },
            hotList: {
                pageSize: 5,
                pageNo: 1,
                language: ''
            },
            HotFocus: [],
            RecommendedList: [],
        }
    },
    updated() {
        this.Swiper();
    },
    mounted() {
        this.getInformationList1();
        this.getHotFocus();
        this.getRecommended();
        this.$store.commit('modify', 'enterprise');
        window.localStorage.setItem('router', 'enterprise');
        console.log(this.consultServe)
    },
    watch: {
        '$i18n.locale'() {
            this.getInformationList1();
            this.getHotFocus();
            this.getRecommended();
            this.changePage()
        },
        "toViewLogin"() {
            if (this.toViewLogin == true) {
                this.loginTipsChange()
            }
        },
    },
    methods: {
        loginTipsChange() {
            const that = this;
            this.num = 5;
            // clearInterval(timer_interval);

            this.timer = setInterval(function () {
                if (that.num > 0) {
                    that.num--;
                } else {
                    if (that.toViewLogin == true) {
                        clearInterval(that.timer);
                        that.toView('login');
                    } else {
                        clearInterval(that.timer);
                    }
                }
            }, 1000)
        },

        //成果展示
        getInformationList1() {
            const that = this;
            let param = that.informationList1page;

            let params = {
                pageSize: 5,
                pageNo: 1,
                language: this.$i18n.locale.toUpperCase(),
                columnName: 'VIRTUAL_POWER_PLANT_VPP'
            }
            getVirtualPowerPlant(params).then((resulet) => {
                console.log(resulet);
                let that = this;
                let data = resulet.data;
                if (data) {
                    that.informationList1 = data;
                    if (data.page) {
                        that.informationList1page.totalPage = data.page.totalPage;
                    }
                }
            });
        },
        //热点聚焦
        getHotFocus() {
            const that = this;
            this.hotList.language = this.$i18n.locale.toUpperCase();
            hostFocusList(this.hotList).then((res) => {
                if (res.data.length > 0) {
                    this.HotFocus = res.data;
                } else {
                    this.hotList.pageNo = 1
                }
                console.log(res.data)

            })

        },
        //智库推荐
        getRecommended() {
            let that = this;
            const recomParams = {
                // pageSize:5,
                // pageNo: 1,
                language: this.$i18n.locale.toUpperCase(),
            };

            baseThinkTankInfos(recomParams).then((res) => {
                this.RecommendedList = res.data.baseThinkTankInfos;
                for (let i = 0; i < this.RecommendedList.length; i++) {
                    if (this.RecommendedList[i].photo == null) {
                        this.RecommendedList[i].photo = '/def/def1.png';
                    }
                }

            })
        },

        //成果展示 换一批
        resultsShowChange() {
            // let a = this.informationList1page.totalPage;
            // this.informationList1page.pageNo = Math.ceil(Math.random()*a);
            if (this.informationList1page.pageNo == this.informationList1page.totalPage) {
                this.informationList1page.pageNo = 0;
            }
            this.informationList1page.pageNo++
            this.getInformationList1();
        },
        // 热点聚焦换一批
        changePage() {
            this.hotList.pageNo = this.hotList.pageNo + 1;
            this.getHotFocus()
        },
        toInformationList1(ele) {
            let params = {
                entityId: ele.id,
                // researchResultFileId:ele.researchResultFileId,
            }
            console.log(params);
            // this.toViewInformationList('resourceSharingDetails', params)
        },
        //跳转 发布咨询需求
        toIssue() {
            if (!this.$Cookies.get('token')) {
                this.toViewLogin = true;
            } else {
                this.toView('addMyProject')
            }

        },
        //跳转 智库详情
        toDetails(router, json) {
            let params = {
                unitId: json.baseEntityId,
                memberNameZh: json.unitName,
                memberNameEn: json.unitNameEn
            }
            gateGetUnitViewById(json.baseEntityId, this.$i18n.locale.toUpperCase()).then(res => {
                console.log(res, '------------------------智库详情数据')
                var data = res.data;
                if (data) {
                    var baseUnitView = res.data.baseUnitView;
                    if (baseUnitView.showable == '1') {
                        this.$store.commit('modify', 'enterpriseDetails');
                        window.localStorage.setItem('router', 'enterpriseDetails');
                        const { href } = this.$router.resolve({
                            name: 'enterpriseDetails',
                            query: {
                                key: params.unitId
                                // key:json.baseEntityId,
                                // member: JSON.stringify(params)
                            }
                        });
                        window.open(href, '_blank');
                    } else {
                        this.$store.commit('modify', router);
                        window.localStorage.setItem('router', router);
                        const { href } = this.$router.resolve({
                            name: router,
                            query: {
                                key: json.memberId,
                                member: JSON.stringify(params)
                            }
                        });
                        window.open(href, '_blank');
                    }
                }
            });

        },
        toViewInformationList(router, json) {
            clearInterval(this.timer);
            const { href } = this.$router.resolve({
                name: router,
                query: {
                    key: JSON.stringify(json),
                }
            });
            window.open(href, '_blank');

        },
        toView(router, json) {
            clearInterval(this.timer);
            this.$router.push({
                name: router,
                query: {
                    key: json,

                }
            });
        },
        toViewMore(router, json, type) {
            console.log(router, json, type, '------------------------------跳转会员展示的')
            this.$router.push({ name: router, params: { id: json, type: type } })
        },
        toViewHot(router, json) {
            this.$store.commit('modify', router);
            window.localStorage.setItem('router', router);
            const { href } = this.$router.resolve({
                name: router,
                query: {
                    key: json
                }
            });
            window.open(href, '_blank');
        },
        // 判断未登录跳转是否关闭
        toViewLoginChange(done) {
            this.toViewLogin = false;
            this.num = 5;
            clearInterval(this.timer);
        },
        Swiper() {
            var galleryThumbs = new Swiper(".gallery-thumbs", {
                spaceBetween: 10,
                slidesPerView: 5,
                loop: true,
                allowTouchMove: false,
                preventClicks: true,
                watchSlidesVisibility: true,
                watchSlidesProgress: true,
                navigation: {
                    nextEl: '.swiper-button-next',
                    prevEl: '.swiper-button-prev',
                },
                autoplay: {//自动播放
                    delay: 2000,
                    disableOnInteraction: true,//用户操作后是否停止 默认停止（true）
                },
            });
        },
    }
}
</script>

<style scoped>
.box {
    margin-top: 10px;
    background: #fff;
    /* height: 500px; */
    padding: 20px 0;
}

.crumbs {
    margin-left: 20px;
}

body {
    margin: 0;
}

li {
    display: inline-block;
    color: #1251a7;
}

.projectBox {
    width: 100%;
}

.relevanInformation {
    min-height: 200px;
    max-height: 400px;
    padding: 0;
    overflow: hidden;
}

.informationList {
    width: 100%;
    font-size: 12px;
}

.informationTitle {
    border-bottom: 1px solid #2C558A;
    padding: 0 0 10px 0;
    font-weight: 600;
    font-size: 20px;
    opacity: 0.9;
}

.informationTitleAfter {
    position: relative;
}

.informationList ul {
    margin-top: 14px;
    list-style-type: disc;
    padding: 0 0px 0 0;
    box-sizing: border-box;
}

.informationList ul li {
    width: 100%;
    amrgin-left: 20px;
    margin-bottom: 12px;
    color: #666666;
    cursor: pointer;
    font-size: 14px;
    height: 40px;
    line-height: 40px;

}

.informationList ul li .list {
    width: 73%;
    display: inline-block;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;

}

.demand {
    width: 100%;
    height: 144px;
    background-image: url("../../assets/img/ThinkTankConsulting/List5.png");
    background-size: cover;
    position: relative;
}

.swipers {
    position: absolute;
    width: 100%;
    height: 100%;
}

.swiper-container {
    width: 100%;
    height: 100%;
    margin-left: auto;
    margin-right: auto;
}

.swiper-wrapper {
    /*overflow: hidden;*/
    position: relative;
    display: -webkit-box;
    /*display: flex;*/
    width: 100%;
}

.swiper-slide {
    background-size: cover;
    background-position: center;
}

.gallery-thumbs {
    overflow: hidden;
    box-sizing: border-box;
    padding: 10px 0;
}

.gallery-thumbs .swiper-slide {
    width: 25%;
    height: 100%;
    /*opacity: 0.8;*/
}

.gallery-thumbs .swiper-slide-thumb-active {
    opacity: 1;
}

.ListOne {
    background: url('./../../assets/img/ThinkTankConsulting/List1.png');
}

.ListTwo {
    background: url('./../../assets/img/ThinkTankConsulting/List2.png');
}

.ListThree {
    background: url('./../../assets/img/ThinkTankConsulting/List3.png');
}

.ListFour {
    background: url('./../../assets/img/ThinkTankConsulting/List4.png');
}

.el-carousel__item h3 {
    color: #475669;
    font-size: 18px;
    opacity: 0.75;
    margin: 0;
}

.boxOne {
    line-height: 37px;
    width: 113px;
    height: 38px;
    cursor: pointer;
    display: inline-block;
    text-align: center;
    border-radius: 5px;
    float: right;
    padding: 0 10px;
    margin: 50px 200px 0px 0;
    background: #9dd95c
}

.boxTwo {
    line-height: 37px;
    width: 113px;
    height: 38px;
    cursor: pointer;
    text-align: center;
    border-radius: 5px;
    background: #9dd95c;
    position: absolute;
    left: 810px;
    top: 53px;
    padding: 0 10px;

}

.square {
    width: 8px;
    height: 8px;
    background: rgb(5, 91, 219);
    display: inline-block;
    margin-right: 10px;
    transform: translateY(-15px);
}
</style>