dev/dcp-web-gate/src_old/views/ThinkTankConsulting/ThinkTankConsulting2.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;position: relative;">
                <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">
                    <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="OpenThink">
                        <span style="color: #1e6e93;font-size: 14px">{{ $t('common.ThinkTankPostDemand') }}</span>
                    </div>
                    <div style="clear: both"></div>
                </div>
                <!--气候治理专栏-->
                <div class="ClimateGovernance">
                    <div class="informationTitle informationTitleAfter">
                        <img src="@/assets/img/cooperationExchange/20200608_03.gif" alt=""
                             style="height: 20px;vertical-align: middle;">
                        {{ $t('common.ClimateGovernanceColumn') }}
                    </div>
                    <div style="margin-top: 10px;height: 656px;position:relative;">
                        <!--图文列表-->
                        <div class="graphic1">
                            <div class="graphicPicList">
                                <div v-for="(item, index) in graphicList" class="graphicData" @click="proDetail(item)">
                                    <img v-if="item.photo" :src="'./api/file/pub/' + item.photo" alt=""
                                         style="width: 100%;height: 100%">
                                    <img v-else src="@/assets/img/ThinkTankConsulting/defalut_weather.png" alt=""
                                         style="width: 100%;height: 100%">
                                    <div class="graphicTitle" v-if="item.name">
                                        {{ item.name }}
                                    </div>
                                </div>
                            </div>
                            <!--切换图文列表按钮-->
                            <div class="moreList" v-if="graphicPicPage.totalPage > '1' && graphicPicPage.pageNo == '1'"
                                 @click="getMore">
                                <i class="el-icon-arrow-down"></i>
                            </div>
                            <div class="moreList" v-if="graphicPicPage.pageNo > '1'">
                                <div style="display: inline-block" v-if="graphicPicPage.pageNo > '1'"
                                     @click="reducePage">
                                    <i class="el-icon-arrow-up"></i>
                                </div>
                                <div style="display: inline-block;margin-left: 40px" v-if="graphicPicPage.pageNo > '1'"
                                     @click="forwardPage">
                                    <i class="el-icon-arrow-down"></i>
                                </div>
                            </div>
                        </div>
                        <!--文章列表-->
                        <div class="article1">
                            <ul class="articleUl">
                                <li v-for="(item, index) in articleList" style="cursor:pointer;"
                                    @click="toViewHot('ThinkTankArticleDetail', item.id)">
                                    <div class="listStyle"></div>
                                    <div class="artTitle">{{ item.title }}</div>
                                    <div class="artTime">{{ formatDate(item.createDate, 'YYYY-MM-DD') }}</div>
                                    <div style="clear: both"></div>
                                </li>
                            </ul>
                            <!-- 分页 -->
                            <div style="width: 100%;position: relative;height: 80px;bottom: 10px">
                                <el-pagination v-if="articleList && articleList.length > 0" class="pagination"
                                               background layout="prev, pager, next" :total="graphicArtTotalPage"
                                               @current-change="handleCurrentChange" :page-size=10>
                                </el-pagination>
                            </div>
                        </div>
                        <div style="clear: both"></div>
                    </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">
                                            {{ infoItem.title }}
                                        </div>
                                        <div class="list" style="width: 20%;float: right">
                                            {{ formatDate(infoItem.updateDate) }}
                                        </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="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>
                <!--气候治理专栏图文详情弹出模块-->
                <el-dialog class="graphicDia" :visible.sync="grapicDetailShow" :before-close="handleClose">
                    <div class="graphicDetail">
                        <div class="graDetailContent">
                            <div class="graDetailTitle">
                                <div class="graLogo">
                                    <img src="@/assets/img/ThinkTankConsulting/graphicArticleLogo.svg" alt=""
                                         style="width: 100%;height: 100%">
                                </div>
                                {{ graphicDetailTitle }}
                            </div>
                            <el-carousel v-if="showGrapicDetail" class="gracarousel" :interval="5000" arrow="always"
                                         :autoplay="false" indicator-position="none" :destroy-on-close="true"
                                         @change="onChangeGra" :before-close="handleClose" :loop="true">
                                <el-carousel-item v-for="(graItem, graIndex) in grapicDetailList" :key="graIndex">
                                    <div style="width:100%;height:100%;margin: auto">
                                        <img :src="'./api/file/pub/' + graItem.pictureUrl" alt=""
                                             style="width: 100%;height: 100%">
                                    </div>
                                </el-carousel-item>
                            </el-carousel>
                            <div class="graDetailDescriptions" v-if="showGrapicDetail">
                                <div class="gtaPagi"><span style="color: red">{{ currentGraphic + 1 }} </span> /
                                    {{ graphicTotalPage }}
                                </div>
                                <div class="graDetailDescription" v-if="grapicDetailList[currentGraphic]">
                                    {{ grapicDetailList[currentGraphic].attachmentStatement }}
                                </div>
                            </div>
                            <div v-if="!showGrapicDetail"
                                 style="width: 100%;height: 50px;text-align: center;line-height: 50px">
                                {{ $i18n.locale == 'zh' ? '无描述数据' : 'No descriptive data' }}
                            </div>
                        </div>
                    </div>
                </el-dialog>
            </div>
            <!--发布咨询需求表单-->
            <!-- Form -->
            <el-dialog :title="$t('common.ThinkTankConsulting')" :visible.sync="dialogAssueVisible" class="AssueBox">
                <div style="width: 100%;">
                    <el-form ref="thinkTankfrom" :model="thinkTankConsultation" :rules="assueRules"
                             style="margin: auto;width: 90%;">
                        <!--咨询类别-->
                        <el-form-item :label="$t('common.ConsultingCategory')" prop="thinkTankType">
                            <el-select v-model="thinkTankConsultation.thinkTankType"
                                       :placeholder="$t('common.PleaseSelect2') + $t('common.ConsultingCategory')"
                                       style="width: 65%" popper-class="thinkSelect">
                                <el-option v-for="item in cateClass" :label="item.label" :value="item.value"
                                           style="width: 70%"></el-option>
                            </el-select>
                        </el-form-item>
                        <!--需求内容-->
                        <el-form-item :label="$t('common.Demandforcontent')" prop="content">
                            <el-input type="textarea" style="width: 65%;" :autosize="{ minRows: 4, maxRows: 6 }"
                                      maxlength="500" show-word-limit
                                      :placeholder="$t('common.PleaseEnter') + $t('common.Demandforcontent')"
                                      v-model="thinkTankConsultation.content" show-word-limit>
                            </el-input>
                        </el-form-item>
                        <!--姓名-->
                        <el-form-item :label="$t('common.Namethink')" prop="name">
                            <el-input :placeholder="$t('common.PleaseEnter') + $t('common.Namethink')"
                                      v-model="thinkTankConsultation.name" maxlength="100" show-word-limit></el-input>
                        </el-form-item>
                        <!--职务-->
                        <el-form-item :label="$t('common.Position')">
                            <el-input :placeholder="$t('common.PleaseEnter') + $t('common.Position')"
                                      v-model="thinkTankConsultation.post" maxlength="100" show-word-limit></el-input>
                        </el-form-item>
                        <!--单位名称-->
                        <el-form-item :label="$t('common.NameoftheEntity')">
                            <el-input :placeholder="$t('common.PleaseEnter') + $t('common.NameoftheEntity')"
                                      v-model="thinkTankConsultation.unitName" maxlength="100" show-word-limit></el-input>
                        </el-form-item>
                        <!--联系方式-->
                        <el-form-item :label="$t('common.ContactWay')" prop="contactInformation">
                            <el-input :placeholder="$t('common.PleaseEnter') + $t('common.ContactWay')"
                                      v-model="thinkTankConsultation.contactInformation" maxlength="11" show-word-limit>
                            </el-input>
                        </el-form-item>
                        <!--邮箱-->
                        <el-form-item :label="$t('common.Email1')" prop="email">
                            <el-input :placeholder="$t('common.PleaseEnter') + $t('common.Email1')"
                                      v-model="thinkTankConsultation.email" maxlength="32" show-word-limit></el-input>
                        </el-form-item>
                    </el-form>
                    <div slot="footer" class="dialog-footer">
                        <el-button @click="cancelSubmit">{{ $t('common.Cancel') }}</el-button>
                        <el-button type="primary" @click="onSubmit">{{ $t('common.Submit') }}</el-button>
                    </div>
                </div>

            </el-dialog>
            <!--    登录提示-->
            <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>
    </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, carbonNeutralList} from "@/api/financialService/cmsInformationViews";
import {gateGetUnitViewById} from "@/api/baseUnitView";
import {saveOrUpdate} from "@/api/thinkTank/thinkTankConsultation";
import {getToken} from '@/utils/auth';
import {getUserInfoStatus} from "@/api/userCenter";
import {getDicts} from '@/api/dict'
import {weatherArticle} from '@/api/cms/cmsInformationEntity';
import {pictureAndGraph, pictureAndGraphDetail} from '@/api/operation/interactiveMessageWeatherInfo';

export default {
    name: "ThinkTankConsultingMynew",
    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: [],
            dialogAssueVisible: false,
            textarea2: "",
            //资讯类别列表
            cateClass: [],
            //智库咨询表单
            thinkTankConsultation: {
                name: "",
                post: "",
                unitName: "",
                contactInformation: "",
                email: "",
                thinkTankType: "",
                content: "",
            },
            //用户信息
            userInfomation: {},
            graphicList: [],
            articleList: [],
            grapicDetailShow: false,
            grapicDetailList: [],
            ArticelPage: {},
            //气候文章列表当前分页
            currentPage: 1,
            //气候图文列表分页信息
            graphicPicPage: {},
            graphicPicDetail: 1,
            //气候图文列表详情当前分页
            currentGraphic: 0,
            //气候图文列表详情总页数
            graphicTotalPage: 1,
            graphicDetailTitle: '',
            graphicPicTotalPage: 0,
            graphicArtTotalPage: 0,
            showGrapicDetail: ''
        }
    },
    updated() {
        this.Swiper();
    },
    computed: {
        //表单验证规则
        assueRules() {
            return {
                thinkTankType: [
                    {
                        required: true,
                        message: this.$i18n.locale == 'zh' ? '请选择咨询类别' : 'Please select the type of information',
                        trigger: 'change'
                    },
                ],
                content: [
                    {
                        required: true,
                        message: this.$i18n.locale == 'zh' ? '请输入需求内容' : 'Please enter requirements',
                        trigger: 'blur'
                    },
                ],
                name: [
                    {
                        required: true,
                        message: this.$i18n.locale == 'zh' ? '请输入用户名' : 'Please enter a user name',
                        trigger: 'blur'
                    },
                ],
                contactInformation: [
                    {
                        required: true,
                        message: this.$i18n.locale == 'zh' ? '请输入联系方式' : 'Please enter contact information',
                        trigger: 'blur'
                    },
                    {
                        pattern: /^0{0,1}(13[0-9]|15[7-9]|153|151|156|18[1-9])[0-9]{8}$/,
                        message: this.$i18n.locale == 'zh' ? '联系方式格式不正确，请重新输入' : 'Contact number format is incorrect, please re-enter',
                        trigger: 'blur'
                    }
                ],
                email: [
                    {message: this.$t('common.PleaseFillOut') + this.$t('common.Email'), trigger: 'blur'},
                    {
                        pattern: /^[a-zA-Z0-9]+([-_.][a-zA-Z0-9]+)*@[a-zA-Z0-9]+([-_.][a-zA-Z0-9]+)*\.[a-z]{2,}$/,
                        message: this.$i18n.locale == 'zh' ? '邮箱格式不正确，请重新输入' : 'Email format is incorrect, please re-enter',
                        trigger: 'blur'
                    }
                ],
            }

        }
    },
    mounted() {
        this.getInformationList1();
        this.getHotFocus();
        this.getArticleList()
        this.getPicArtList();
        this.getRecommended();
        this.getUserMessage();
        this.$store.commit('modify', 'enterprise');
        window.localStorage.setItem('router', 'enterprise');
    },
    watch: {
        '$i18n.locale'() {
            this.getInformationList1();
            this.getHotFocus();
            this.getRecommended();
            this.getArticleList()
            this.getPicArtList();
            // this.changePage();
            this.getUserMessage();
            // this.onSubmit()

        },
        "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;
        //     param.language = this.$i18n.locale.toUpperCase()
        //     getBaseResearchResultViews(param).then((resulet) => {
        //         let that = this;
        //         let data = resulet.data;
        //         if (data.baseResearchResultViews) {
        //             that.informationList1 = data.baseResearchResultViews;
        //             if (data.page) {
        //                 that.informationList1page.totalPage = data.page.totalPage;
        //             }
        //         }
        //     });
        // },
        //虚拟电厂
        getInformationList1() {
            const that = this;
            let params = {
                pageSize: 5,
                pageNo: this.informationList1page.pageNo,
                language: this.$i18n.locale.toUpperCase(),
                columnName: 'VIRTUAL_POWER_PLANT_VPP'
            }
            getVirtualPowerPlant(params).then((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
        //         }
        //     })
        // },
        getHotFocus() {
            const that = this;
            this.hotList.language = this.$i18n.locale.toUpperCase();
            carbonNeutralList(this.hotList).then((res) => {
                if (res.data.length > 0) {
                    this.HotFocus = res.data;
                } else {
                    this.hotList.pageNo = 1;
                    this.getHotFocus();
                }
            });
        },
        //智库推荐
        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;
            // }
            if (this.informationList1.length < 5) {
                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.baseEntityId,
                // researchResultFileId:ele.researchResultFileId,
            }
            this.toViewInformationList('realTimeInfoItemdetails', ele.baseEntityId)
        },
        //查询咨询类别列表
        getcateClass() {
            if (this.$i18n.locale == 'zh') {
                getDicts('THINK_TANK_TYPE_DICT').then((res) => {
                    this.cateClass = res.data[0]
                })
            } else {
                getDicts('THINK_TANK_TYPE_DICT_EN').then((res) => {
                    this.cateClass = res.data[0]
                })
            }
        },
        /*  跳转类  */
        //跳转 发布咨询需求
        toIssue() {
            if (!this.$Cookies.get('token')) {
                this.toViewLogin = true;
            } else {
                this.toViewHot('addMyProject')
            }

        },
        //跳转 智库详情
        toDetails(router, json) {
            let params = {
                unitId: json.baseEntityId,
                memberNameZh: json.unitName,
                memberNameEn: json.unitNameEn
            }
            gateGetUnitViewById(json.baseEntityId, this.$i18n.locale.toUpperCase()).then(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,
                }
            });
            window.open(href, '_blank');

        },
        toView(router, json) {
            clearInterval(this.timer);
            this.$router.push({
                name: router,
                query: {
                    key: json,
                }
            });
        },
        //跳转至推荐更多
        toViewMore(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）
                },
            });
        },
        // 我要发布表单提交
        onSubmit() {
            this.$refs['thinkTankfrom'].validate((valid1) => {
                if (valid1) {
                    // this.thinkTankConsultation.name = this.userInfomation.name;
                    // this.thinkTankConsultation.contactInformation = this.userInfomation.newMobile;
                    // this.thinkTankConsultation.email = this.userInfomation.email;
                    this.thinkTankConsultation.replyStatus = "0";
                    this.thinkTankConsultation.approveStatus = "2";
                    this.thinkTankConsultation.reserveOne = "0";
                    this.submitHandler((token) => {
                        saveOrUpdate(JSON.stringify(this.thinkTankConsultation), token).then(res => {
                            this.$message({
                                message: this.$i18n.locale.toUpperCase() == "ZH" ? '发布成功' : 'Release success',
                                type: 'success'
                            });
                            this.dialogAssueVisible = false;
                            this.resetToken();
                            this.thinkTankConsultation = {
                                name: "",
                                post: "",
                                unitName: "",
                                contactInformation: "",
                                email: "",
                                thinkTankType: "",
                                content: "",
                            };
                        }).catch((error) => {
                            this.$notify.error({
                                title: 'common.Error',
                                message: error.msg
                            });
                        })
                    })

                } else {
                    this.$notify.error({
                        title: this.$t('common.Error'),
                        message: this.$t('common.CompleteInformation')
                    });
                    return false;

                }
            })
        },
        //取消提交
        cancelSubmit() {
            this.dialogAssueVisible = false;
        },
        // 点击发布项目按钮
        OpenThink() {
            if (!this.$Cookies.get('token')) {
                this.toViewLogin = true;
            } else {
                this.dialogAssueVisible = true;
                this.getUserMessage()
            }
        },
        //获取表格初始信息
        getUserMessage() {
            this.getcateClass();
            let user = JSON.parse(window.localStorage.getItem('user'));
            let userMess = user.umsUser
            let userMobile = userMess.userPreferredMobile.substring(4)
            this.thinkTankConsultation.name = userMess.userName,
                this.thinkTankConsultation.contactInformation = userMobile,
                this.thinkTankConsultation.email = userMess.userEmail
            this.thinkTankConsultation.post = "";
            this.thinkTankConsultation.unitName = "";
        },
        //气候治理专栏文章列表分页
        handleCurrentChange(val) {
            console.log(`当前页: ${val}`);
            this.currentPage = val
            this.getArticleList()
        },
        //获取文章列表信息
        getArticleList() {
            let params = {
                language: this.$i18n.locale.toUpperCase(),
                pageNo: this.currentPage,
                pageSize: '10'
            }
            weatherArticle(params).then((res) => {
                let result = res.data
                if (result) {
                    this.articleList = result.weatherArticle;
                    this.ArticelPage = result.pageRecords;
                    // this.graphicArtTotalPage = 400
                    this.graphicArtTotalPage = Number(this.ArticelPage.totalPage) * 10
                }
            })
        },
        //获取更多图文列表信息
        getMore() {
            this.graphicPicDetail += 1
            this.getPicArtList(this.graphicPicDetail)
            console.log(this.graphicPicDetail)
        },
        //弹出气候治理专栏图文详情
        proDetail(item) {
            this.getPicArtDetail(item.id)
            this.graphicDetailTitle = item.name
            this.grapicDetailShow = true
        },
        handleClose(done) {
            done();
            this.grapicDetailList = [];
            this.currentGraphic = 0
        },
        onChangeGra(e) {
            if (e == 0) {
                e == 1
            }
            this.currentGraphic = e
        },
        //获取气候治理专栏图文列表
        getPicArtList(pageNo) {
            let page = ''
            if (pageNo) {
                page = pageNo
            } else {
                page = 1
            }
            let params = {
                language: this.$i18n.locale.toUpperCase(),
                pageNo: page,
                pageSize: '8'
            }
            pictureAndGraph(params).then((res) => {
                if (res) {
                    this.graphicList = res.data.pictureAndGraph;
                    this.graphicPicPage = res.data.pageRecords
                    console.log(this.graphicPicPage)
                    this.graphicPicTotalPage = Number(this.graphicPicPage.totalPage)
                }
            })
        },
        //获取气候治理专栏图文详情
        getPicArtDetail(id) {
            let params = {
                language: this.$i18n.locale.toUpperCase(),
                pageNo: this.currentGraphic + 1,
                pageSize: '1',
                id: id
            }
            pictureAndGraphDetail(params).then((res) => {
                if (res) {
                    this.grapicDetailList = res.data.pictureAndGraphDetail;
                    if (this.currentGraphic > this.graphicTotalPage - 1) {
                        this.currentGraphic = 0
                    }
                    if (this.grapicDetailList[0]) {
                        this.showGrapicDetail = this.grapicDetailList[0].pictureUrl ? true : false
                    } else {
                        this.showGrapicDetail = false
                    }
                    this.graphicTotalPage = res.data.pageRecords.totalPage;
                    this.$forceUpdate()
                }

            })
        },
        //图文下一页
        forwardPage() {
            this.graphicPicDetail += 1
            if (this.graphicPicDetail > this.graphicPicPage.totalPage) {
                this.graphicPicDetail = 1
            }
            this.getPicArtList(this.graphicPicDetail)
            console.log(this.graphicPicDetail)
        },
        //图文上一页
        reducePage() {
            this.graphicPicDetail -= 1
            if (this.graphicPicDetail < 1) {
                this.graphicPicDetail = 1
            }
            this.getPicArtList(this.graphicPicDetail)
            console.log(this.graphicPicDetail)

        }
    }
}
</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);
}

.AssueBox {
    padding: 0 20%;
    /*width:100%;*/
    margin: auto;
}

.AssueBox >>> .el-dialog__header {
    border-bottom: 1px solid #bcbcbc;
    margin-left: 20px;
    margin-right: 20px;
    padding: 20px 0 20px;
}

.AssueBox >>> .el-dialog__headerbtn {
    display: none;
}

.AssueBox .el-input {
    width: 65%;

}

.AssueBox >>> .dialog-footer {
    text-align: center;
}

>>> .AssueBox .el-form-item .el-form-item__label {
    width: 150px;
}

>>> .el-form-item__error {
    left: 32%;
}

.ClimateGovernance {
    margin: 20px 0 60px 0;
}

.graphic1 {
    width: 32%;
    float: left;
    color: #666;
    font-size: 14px;
    position: relative;
    height: 100%;
}

.graphicData {
    width: 45%;
    height: 132px;
    margin: 10px 0;
    border-radius: 10px;
    border: 1px solid #ccc;
    position: relative;
    cursor: pointer;
    overflow: hidden;
    display: inline-block;
    margin-right: 10px;
}

.graphicTitle {
    width: 89%;
    padding: 2px 10px;
    position: absolute;
    bottom: 0;
    overflow: hidden;
    color: #fff;
    background: #09090961;
    text-overflow: ellipsis;
    white-space: nowrap;
    border-bottom-left-radius: 10px;
    border-bottom-right-radius: 10px;
}

.moreList {
    width: 100%;
    background: #cacaca;
    height: 30px;
    line-height: 30px;
    text-align: center;
    font-size: 30px;
    color: #fff;
    border-radius: 5px;
    /*margin-top: 10px;*/
    cursor: pointer;
}

.article1 {
    width: 65%;
    height: 100%;
    float: right;
    margin-top: 10px;
    font-size: 14px;
}

.article1 ul li {
    width: 100%;
    color: #666;
    height: 40px;
    line-height: 40px;
    border-bottom: 1px dashed #ccc;
    list-style: inside disc;
    margin-bottom: 12px;
}

.artTitle {
    display: inline-block;
    width: 75%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.artTime {
    float: right;
    width: 20%;
    text-align: right;
    color: #adabab;
}

.articleUl {
    list-style: inside disc;
    height: 100%;
}

.graphicDetail {
    color: #fff;
}

/deep/ .graphicDia .el-dialog,
.el-pager li {
    background: transparent !important;
    box-shadow: none;
    width: 1000px !important;
}

/deep/ .graphicDia .el-dialog {
    color: #fff;

}

.graphicDetail {
}

.graDetailContent {
    background: #0000007d;
    /*width:65%;*/
    padding: 20px 0;
    margin: auto;
}

.graDetailTitle {
    padding: 0 20px;
}

.graDetailPicture {
    width: 100%;
    height: 443px;
    border: 1px solid red;
    margin: 20px 0;
}

.gtaPagi {
    width: 20%;
    text-align: center;
    line-height: 25px;
    display: inline-block;

}

.graDetailDescriptions {
    margin-top: 20px;
}

.graDetailDescription {
    width: 79%;
    display: inline-block;
    line-height: 20px;
}

.gracarousel {
    margin-top: 30px;
}

/deep/ .gracarousel .el-carousel__container {
    height: 546px !important;
}

/deep/ .el-dialog__header button {
    position: absolute;
    top: 8px;
    right: 8px;
}

/deep/ .el-dialog__body {
    padding: 0;
}

/deep/ .el-dialog__header {
    padding: 0;
}

/deep/ .el-dialog__headerbtn .el-dialog__close {
    color: #ffffff;
}

/deep/ .el-carousel__arrow {
    font-size: 45px;
    height: 45px;
    width: 45px;
}

.graLogo {
    width: 30px;
    height: 30px;
    float: left;
    margin-right: 20px;
}

.graphicPicList {
    width: 100%;
    height: 100%;
}

.graphicLeftIcon {
    float: left;
    font-size: 45px;
    color: #ccc;
    height: 100%;
    margin-top: 50%;
    cursor: pointer;

}

.graphicRightIcon {
    float: right;
    font-size: 45px;
    color: #ccc;
    height: 100%;
    margin-top: 50%;
    cursor: pointer;
}

.pagination {
    height: 80px;
    width: 100%;
    text-align: center;
}

.listStyle {
    width: 5px;
    height: 5px;
    border-radius: 50%;
    background-color: #000;
    float: left;
    margin: 18px 10px 0 0;
}
</style>
<style>
.thinkSelect {
    width: 300px !important;
}
</style>