web-test/src/views/hall/direct.vue

<template>
  <div id="hall" style="background-color: #fff">
    <el-row>
      <el-col :span="24">
        <div class="livetop">
          <div class="w_1200">
            <el-col :span="24" class="title">
              {{ dockInfo.title }}
            </el-col>
            <el-col :span="24" class="zhuban">
              <span>主办方:</span>
              <span>吉林省计算中心直播大厅</span>
            </el-col>
            <el-col :span="24" class="num">
              <p>
                <span>同时在线</span>
                <span>{{ statNum.tszx }}人</span>
              </p>
              <p>
                <span>特邀嘉宾</span>
                <span>{{ statNum.tyjb }}人</span>
              </p>
              <p>
                <span>洽谈合作</span>
                <span>{{ statNum.qthz }}项</span>
              </p>
              <p>
                <span>达成意愿</span>
                <span>{{ statNum.dcyx }}项</span>
              </p>
              <p>
                <span>交易完成</span>
                <span>{{ statNum.jywc }}项</span>
              </p>
              <p>
                <span>参展项目</span>
                <span>{{ statNum.czxm }}项</span>
              </p>
            </el-col>
          </div>
        </div>
        <div class="w_1200">
          <el-col :span="24" class="livemain">
            <el-col :span="24" class="livevideo">
              <el-col :span="24" class="left">
                <el-col :span="24" class="title" @click.native="$router.push({ path: '/live/hallDetail', query: { id: this.$route.query.id } })">
                  <span style="color: rgb(255, 132, 0);">现场</span>
                  <span>直播</span>
                </el-col>
                <el-col :span="24" class="video">
                  <div class="box">
                    <div class="con1" ref="con1" :class="{ anim: animate == true }" @mouseenter="mEnter" @mouseleave="mLeave">
                      <el-col class="lunboList" :span="24" v-for="(item, index) in lunboList" :key="index">
                        <p>
                          <span>[{{ item.meta | getDate }}]</span>
                          <span>{{ item.type == '0' ? '欢迎' : '祝贺' }}</span>
                          <span v-if="item.type == '0'">{{ item.login_name }}</span>
                          <span v-if="item.type == '1'">{{ item.market_username }}</span>
                          <span v-if="item.type == '1'">和</span>
                          <span v-if="item.type == '1'">{{ item.username }}</span>
                          <span v-if="item.type == '1'">{{
                            item.status == '0'
                              ? '正在洽谈'
                              : item.status == '1'
                              ? '达成意向'
                              : item.status == '2'
                              ? '交易完成'
                              : item.status == '3'
                              ? '取消交易'
                              : item.status == '4'
                              ? '交易待确定'
                              : '暂无'
                          }}</span>
                          <span v-if="item.type == '0'">位临现场</span>
                        </p>
                      </el-col>
                    </div>
                  </div>
                  <!-- <video :src="dockInfo.file_path" controls="controls" style="height: 395px; width: 100%;">
                    您的浏览器不支持 video 标签。
                  </video> -->
                  <!-- <videoPlayer ref="videoPlayer" :options="videoOptions" class="vjs-custom-skin videoPlayer" :playsinline="true" /> -->
                </el-col>
              </el-col>
              <el-col :span="24" class="right">
                <el-col :span="24">
                  <!-- <span>交易实况</span> -->
                  <el-tabs v-model="activeName" @tab-click="handleClicks">
                    <el-tab-pane label="交易实况" name="first">
                      <el-col :span="24">
                        <ul>
                          <li v-for="(item, index) in directlist" :key="index">
                            <span> {{ item.time }}</span>
                            <span>{{ item.market_username }}</span> <span>与</span><span>{{ item.username }}</span
                            ><span>{{ item.status === '1' ? '达成意向' : item.status === '2' ? '合作成功' : 'underdind' }}</span>
                          </li>
                        </ul>
                      </el-col>
                    </el-tab-pane>
                    <el-tab-pane label="达成意向" name="second">
                      <el-col :span="24" class="yixiang">
                        <ul>
                          <li v-for="(item, index) in yixianglist" :key="index">
                            <span> {{ item.time }}</span>
                            <span>{{ item.market_username }}</span> <span>与</span><span>{{ item.username }}</span
                            ><span>{{ item.status === '1' ? '达成意向' : item.status === '2' ? '合作成功' : 'underdind' }}</span>
                          </li>
                        </ul>
                      </el-col>
                    </el-tab-pane>
                    <el-tab-pane label="合作成功" name="third">
                      <el-col :span="24" class="yixiang">
                        <ul>
                          <li v-for="(item, index) in successlist" :key="index">
                            <span> {{ item.time }}</span>
                            <span>{{ item.market_username }}</span> <span>与</span><span>{{ item.username }}</span
                            ><span>{{ item.status === '1' ? '达成意向' : item.status === '2' ? '合作成功' : 'underdind' }}</span>
                          </li>
                        </ul>
                      </el-col>
                    </el-tab-pane>
                    <!-- <el-tab-pane label="推流测试" name="four"> </el-tab-pane>
                    <el-tab-pane label="拉流测试" name="five"> </el-tab-pane>
                    <el-tab-pane label="推流测试2" name="six"> </el-tab-pane> -->
                  </el-tabs>
                </el-col>
                <!-- -->
              </el-col>
            </el-col>
            <el-col :span="24" class="newimage">
              <el-image :src="superOne" style="width:100%;height:100px;position:relative;"> </el-image>
              <el-link :underline="false" href="user.docx">
                使用手册
              </el-link>
            </el-col>
            <el-col :span="24" class="tabsData">
              <el-tabs type="border-card" @tab-click="handleClick">
                <el-tab-pane label="找技术">
                  <el-col :span="24" class="one">
                    <el-row class="jishulist">
                      <el-col :span="24" class="topList">
                        <el-col :span="24" class="list" v-for="(item, index) in jishulist" :key="index">
                          <el-col :span="16" class="name">
                            <p>
                              <span class="inname"> {{ item.name }}</span>
                            </p>
                          </el-col>
                          <el-col :span="4" class="names">
                            <p>
                              <span>
                                合作方式：
                                {{
                                  item.coopermode == '0'
                                    ? '技术转让'
                                    : item.coopermode == '1'
                                    ? '技术服务'
                                    : item.coopermode == '2'
                                    ? '技术许可'
                                    : item.coopermode == '3'
                                    ? '技术融资'
                                    : item.coopermode == '4'
                                    ? '其他'
                                    : '暂无'
                                }}</span
                              >
                            </p>
                          </el-col>
                          <el-col :span="4" class="click">
                            <el-button size="mini" type="primary" @click="oneBtnDetail(item)">详情</el-button>
                            <el-button
                              size="mini"
                              type="success"
                              @click="$router.push({ path: '/live/hall/dock/dockDetail', query: { id: item._id, dockid: dock_id, user_id: user_id } })"
                              >对接</el-button
                            >
                          </el-col>
                        </el-col>
                      </el-col>
                      <el-col :span="24" class="btn">
                        <el-button
                          type="primary"
                          size="mini"
                          @click="$router.push({ path: '/hall/productList/technologyList', query: { column_name: '技术', dockid: dock_id } })"
                          v-if="jishulist.length > 10"
                          >查看所有项目</el-button
                        >
                      </el-col>
                    </el-row>
                  </el-col>
                </el-tab-pane>
                <el-tab-pane label="找产品">
                  <el-col :span="24" class="one">
                    <el-row>
                      <el-col :span="24" class="demandList">
                        <el-col :span="24" class="topList">
                          <el-col :span="24" class="list" v-for="(item, index) in demandList" :key="index">
                            <el-col :span="20" class="name">
                              <p>{{ item.name }}</p>
                            </el-col>
                            <el-col :span="4" class="click">
                              <el-button size="mini" type="primary" @click="oneBtnDetail(item)">详情</el-button>
                              <el-button
                                size="mini"
                                type="success"
                                @click="$router.push({ path: '/live/hall/dock/dockDetail', query: { id: item.id, dockid: this.id, user_id: this.user_id } })"
                                >对接</el-button
                              >
                            </el-col>
                            <el-col :span="16" class="otherInfo">
                              <el-col :span="12">
                                <p class="field">
                                  <span>所属领域:</span
                                  ><span>{{
                                    item.field == '0'
                                      ? '先进制造'
                                      : item.field == '1'
                                      ? '新材料'
                                      : item.field == '2'
                                      ? '光电子'
                                      : item.field == '3'
                                      ? '信息技术'
                                      : item.field == '4'
                                      ? '文化和科技融合'
                                      : '暂无'
                                  }}</span>
                                </p>
                              </el-col>
                              <el-col :span="12">
                                <p class="coopermode">
                                  <span>合作方式:</span
                                  ><span>
                                    {{
                                      item.coopermode == '0'
                                        ? '技术转让'
                                        : item.coopermode == '1'
                                        ? '技术服务'
                                        : item.coopermode == '2'
                                        ? '技术许可'
                                        : item.coopermode == '3'
                                        ? '技术融资'
                                        : item.coopermode == '4'
                                        ? '其他'
                                        : '暂无'
                                    }}
                                  </span>
                                </p>
                              </el-col>
                            </el-col>
                            <el-col :span="8" class="introduction">
                              <p><span>简介:</span>{{ item.introduction }}</p>
                            </el-col>
                          </el-col>
                        </el-col>
                        <el-col :span="24" class="btn">
                          <el-button
                            type="primary"
                            size="mini"
                            @click="$router.push({ path: '/hall/productList/technologyList', query: { column_name: '产品', dockid: dock_id } })"
                            v-if="demandList.length > 6"
                            >查看所有项目</el-button
                          >
                        </el-col>
                      </el-col>
                    </el-row>
                  </el-col>
                </el-tab-pane>
                <el-tab-pane label="找服务">
                  <el-col :span="24" class="one">
                    <el-row>
                      <el-col :span="24" class="serviceList">
                        <el-col :span="24" class="topList">
                          <el-col :span="24" class="list" v-for="(item, index) in serviceList" :key="index">
                            <el-col :span="20" class="name">
                              <p>{{ item.name }}</p>
                            </el-col>
                            <el-col :span="4" class="click">
                              <el-button size="mini" type="primary" @click="oneBtnDetail(item)">详情</el-button>
                              <el-button
                                size="mini"
                                type="success"
                                @click="$router.push({ path: '/live/hall/dock/dockDetail', query: { id: item._id, dockid: dock_id, user_id: user_id } })"
                                >对接</el-button
                              >
                            </el-col>
                            <el-col :span="16" class="otherInfo">
                              <el-col :span="12">
                                <p class="field">
                                  <span>所属领域:</span
                                  ><span>{{
                                    item.field == '0'
                                      ? '先进制造'
                                      : item.field == '1'
                                      ? '新材料'
                                      : item.field == '2'
                                      ? '光电子'
                                      : item.field == '3'
                                      ? '信息技术'
                                      : item.field == '4'
                                      ? '文化和科技融合'
                                      : '暂无'
                                  }}</span>
                                </p>
                              </el-col>
                            </el-col>
                            <el-col :span="8" class="introduction">
                              <p><span>简介:</span>{{ item.introduction }}</p>
                            </el-col>
                          </el-col>
                        </el-col>
                        <el-col :span="24" class="btn">
                          <el-button
                            type="primary"
                            size="mini"
                            @click="$router.push({ path: '/hall/productList/technologyList', query: { column_name: '服务', dockid: dock_id } })"
                            v-if="serviceList.length > 10"
                            >查看所有项目</el-button
                          >
                        </el-col>
                      </el-col>
                    </el-row>
                  </el-col>
                </el-tab-pane>
                <el-tab-pane label="找专家">
                  <el-col :span="24" class="two">
                    <el-col :span="12" class="twoList" v-for="(item, index) in expertList" :key="index">
                      <el-col :span="4" class="image">
                        <el-image :src="item.img_path" style="height: 92px;"></el-image>
                      </el-col>
                      <el-col :span="20" class="info">
                        <p>
                          <span class="textOver">{{ item.name }}</span>
                          <el-button
                            size="mini"
                            type="success"
                            @click="$router.push({ path: '/live/hall/dock/zhanjiaduijie', query: { id: item._id, dockid: dock_id, user_id: user_id } })"
                            >对接</el-button
                          >
                          <el-button size="mini" type="primary" @click="twoBtnDetail(item)" style="margin:0 5px 0 5px">详情</el-button>
                        </p>

                        <p>
                          <span>性别:{{ item.gender }}</span>
                          <span>院校:{{ item.school }}</span>
                        </p>
                        <p>
                          <span>职务:{{ item.position }}</span>
                          <span>从事专业:{{ item.professional }}</span>
                        </p>
                      </el-col>
                    </el-col>
                    <el-col :span="24" class="onmore">
                      <el-button
                        type="primary"
                        size="mini"
                        @click="$router.push({ path: '/hall/productList/expertList', query: { dockid: dock_id, user_id: user_id } })"
                        v-if="expertList.length > 1"
                        >查看所有项目</el-button
                      >
                    </el-col>
                  </el-col>
                </el-tab-pane>
              </el-tabs>
              <el-col :span="24" class="marketPublish">
                <el-col :span="18"> <el-input v-model="name" placeholder="请输入名称" style="height:30px" class="newinput"></el-input></el-col>
                <el-col :span="6"><el-button class="btnSearch" size="mini" @click="resetForm(name)">查询</el-button></el-col>
              </el-col>
            </el-col>
            <el-col :span="24" class="newimage2">
              <el-image :src="two" style="width:100%;height:100px;position:relative;"> </el-image>
            </el-col>
            <div class="fangtan">
              <el-col :span="7" class="jiabin">
                <p class="jiabintop">
                  <span>嘉宾访谈</span>
                  <!-- <el-link :underline="false">MORE</el-link> -->
                </p>
                <div class="jiabinlist">
                  <ul>
                    <li v-for="(ref, index) in zxzdlist" :key="index">
                      <img :src="ref.picture" />
                      <p>
                        <span class="textOver" @click="$router.push({ path: '/hall/zxzdxmly/zxzdDetail', query: { id: ref.id } })">{{ ref.title }}</span>
                        <span>{{ ref.publish_time }}</span>
                        <span class="text">{{ ref.titlejj }} </span>
                      </p>
                    </li>
                  </ul>
                </div>
              </el-col>
              <el-col :span="7" class="jiabin luyan">
                <p class="jiabintop luyanTop">
                  <span>项目路演</span>
                  <!-- <el-link :underline="false">MORE</el-link> -->
                </p>
                <div class="luyanList">
                  <ul>
                    <li v-for="(item, index) in xmlylist" :key="index">
                      <p>
                        <span class="textOver" @click="$router.push({ path: '/hall/zxzdxmly/xmlyDetail', query: { id: item.id } })">{{ item.title }}</span>
                        <span>时间:{{ item.publish_time }}</span>
                      </p>
                      <p>
                        {{ item.titlejj }}
                      </p>
                    </li>
                  </ul>
                </div>
              </el-col>
              <el-col :span="7" class="chat">
                <chat></chat>
              </el-col>
            </div>
          </el-col>
        </div>
      </el-col>
      <div class="pz_down">
        <live-foot></live-foot>
      </div>
      <el-col :span="24" class="nameShow">
        <div class="w_1200">
          <el-col :span="24" v-if="this.user.uid">
            <span>{{ user.name }}</span>
            <el-button
              type="info"
              size="mini"
              v-if="this.user.role == '4' || this.user.role == '5' || this.user.role == '6' || this.user.role == '7'"
              @click="$router.push({ path: '/userCenter/index', query: { num: 1 } })"
              >个人中心</el-button
            >
            <el-button type="info" size="mini" v-else-if="this.user.role == '3'" @click="$router.push({ path: '/adminCenter/index', query: { num: 1 } })"
              >管理中心</el-button
            >
            <el-button type="info" size="mini" v-else-if="this.user.role == '8'" @click="$router.push({ path: '/vipCenter/index', query: { num: 1 } })"
              >管理中心</el-button
            >
          </el-col>
        </div>
      </el-col>
    </el-row>
    <el-dialog title="信息详情" :visible.sync="dialogVisible" width="50%" :before-close="handleClose">
      <directDetail :directInfo="directInfo"></directDetail>
    </el-dialog>
    <el-dialog title="专家信息" :visible.sync="dialogExport" width="50%" :before-close="handleCloseExport">
      <exportDetail :exportInfo="exportInfo"></exportDetail>
    </el-dialog>
  </div>
</template>

<script>
import 'video.js/dist/video-js.css';
import 'vue-video-player/src/custom-theme.css';
import { videoPlayer } from 'vue-video-player';
import 'videojs-flash';
import liveFoot from '@/layout/live/foot.vue';
import chat from '@/components/parts/chat.vue';
import directDetail from '@/layout/direct/directDetail.vue';
import exportDetail from '@/layout/direct/exportDetail.vue';
import { mapState, createNamespacedHelpers } from 'vuex';
const { mapActions: transaction } = createNamespacedHelpers('transaction');
const { mapActions: mapProduct } = createNamespacedHelpers('marketproduct');
const { mapActions: market } = createNamespacedHelpers('market');
const { mapActions: dock } = createNamespacedHelpers('dock');
const { mapActions: expertsuser } = createNamespacedHelpers('expertsuser');
const { mapActions: newsguidance } = createNamespacedHelpers('newsguidance');
const { mapActions: newsroadshow } = createNamespacedHelpers('newsroadshow');
import moment from 'moment';
import _ from 'loadsh';
export default {
  name: 'hall',
  props: {},
  filters: {
    getDate(meta) {
      let createdAt = _.get(meta, `createdAt`);
      let date = new Date(createdAt)
        .toLocaleDateString()
        .replace('/', '-')
        .replace('/', '-');
      return date;
    },
  },
  components: {
    chat,
    liveFoot,
    directDetail, //技术，产品，服务详情
    exportDetail, //专家详情
    // videoPlayer,
  },
  data: () => ({
    activeName: 'second',
    //搜索判断用
    panduan: '找技术',
    // 找技术
    jishulist: [],
    // 找产品
    demandList: [],
    // 找服务
    serviceList: [],
    // 找专家
    expertList: [],
    // 详情显示
    dialogVisible: false,
    // 技术，产品，服务详情
    directInfo: {},
    // 专家详情
    dialogExport: false,
    exportInfo: {},
    // 交易实况
    directlist: [],
    //达成意向
    yixianglist: [],
    //合作成功
    successlist: [],
    // 嘉宾访谈
    zxzdlist: [],
    // 路演
    xmlylist: [],
    // 使用手册开始
    superOne: require('@/assets/live/main1.png'),
    two: require('@/assets/live/top_bg.png'),
    superOnes: require('@/assets/live/测试图片.jpg'),
    // 使用手册结束
    // 统计数字
    statNum: {
      tszx: 0,
      tyjb: 0,
      qthz: 0,
      dcyx: 0,
      jywc: 0,
      czxm: 0,
    },
    // 对接会详情
    dockInfo: {
      title: '',
      file_path: '',
    },
    //对接会创建人id
    user_id: '',
    videoSrc: '',
    videoOptions: {
      playbackRates: [0.7, 1.0, 1.5, 2.0], //播放速度
      autoplay: false, //如果true,浏览器准备好时开始回放。
      muted: false, // 默认情况下将会消除任何音频。
      loop: false, // 导致视频一结束就重新开始。
      preload: 'auto', // 建议浏览器在<video>加载元素后是否应该开始下载视频数据。auto浏览器选择最佳行为,立即开始加载视频（如果浏览器支持）
      language: 'zh-CN',
      aspectRatio: '16:9', // 将播放器置于流畅模式，并在计算播放器的动态大小时使用该值。值应该代表一个比例 - 用冒号分隔的两个数字（例如"16:9"或"4:3"）
      techOrder: ['flash', 'html5'], // 兼容顺序
      fluid: true, // 当true时，Video.js player将拥有流体大小。换句话说，它将按比例缩放以适应其容器。
      sources: [
        {
          // 流配置，数组形式，会根据兼容顺序自动切换
          type: 'rtmp/hls',
          src: 'rtmp://58.200.131.2:1935/livetv/hunantv',
          // src: 'rtmp://play.liaoningdoupo.com/live/1',
        },
      ],
      poster: '', //你的封面地址
      // width: document.documentElement.clientWidth,
      notSupportedMessage: '此视频暂无法播放，请稍后再试', // 允许覆盖Video.js无法播放媒体源时显示的默认信息。
      controlBar: {
        timeDivider: true,
        durationDisplay: true,
        remainingTimeDisplay: false,
        fullscreenToggle: true, //全屏按钮
      },
    },
    name: '',
    dock_id: '',
    // 测试轮播
    lunboList: [],
    animate: false,
  }),
  created() {
    this.$set(this, `dock_id`, this.$route.query.id);
    // 对接会详情
    this.searchdock();
  },
  methods: {
    ...mapProduct({ mapProductQuery: 'newquery' }),
    ...market({ marketFetch: 'fetch', operaFetch: 'operaFetch' }),
    ...dock({ dockQuery: 'query', dockFetch: 'fetch', goodsquery: 'goodsquery' }),
    ...expertsuser({ expertQuery: 'query' }),
    ...transaction({ tquery: 'query' }),
    ...newsguidance({ danceQuery: 'query' }),
    ...newsroadshow({ adshowQuery: 'query' }),
    // 查询详情
    async searchdock() {
      // 标题
      let res = await this.dockFetch(this.dock_id);
      if (this.$checkRes(res)) {
        // 对接会标题
        this.$set(this.dockInfo, `title`, res.data.title);
        // 对接会视频
        this.$set(this.dockInfo, `file_path`, res.data.file_path);
        // 对接会创建人id
        this.$set(this, `user_id`, res.data.user_id);
        // 参展项目
        let czxm = res.data.apply.map(item => item.goodsList);
        // let czxm = res.data.map(item => item.apply.map(apply => apply.goodsList));
        czxm = _.flattenDeep(czxm);
        var czxmNew = czxm.filter(item => item.dockStatus == '1');
        this.$set(this.statNum, `czxm`, czxmNew.length);
        // 找技术
        var jishuData = czxmNew.filter(item => item.totaltype === '0');
        this.$set(this, `jishulist`, jishuData);
        // 找产品
        var chanpinData = czxmNew.filter(item => item.totaltype === '1');
        this.$set(this, `demandList`, chanpinData);
        // 找服务
        var fuwuData = czxmNew.filter(item => item.totaltype === '2');
        this.$set(this, `serviceList`, fuwuData);
        // 找专家
        let exportdata = await this.expertQuery({ role: 6 });
        if (this.$checkRes(exportdata)) this.$set(this, `expertList`, exportdata.data);
      }
      // 查询特邀嘉宾
      let arr = await this.expertQuery({ role: 6 });
      this.$set(this.statNum, `tyjb`, arr.data.length);
      // 洽谈合作
      let qthe = await this.tquery({ status: 0, dockid: this.id });
      this.$set(this.statNum, `qthz`, arr.data.length);
      // 达成意向
      let dcyx = await this.tquery({ status: 1, dockid: this.id });
      for (const val of dcyx.data) {
        var time = moment(val.meta.createdAt).format('YYYY-MM-DD hh:mm');
        val.time = time;
      }
      this.$set(this.statNum, `dcyx`, dcyx.total);
      this.$set(this, `yixianglist`, dcyx.data);
      // 交易完成&合作成功
      let jywc = await this.tquery({ status: 2, dockid: this.id });
      for (const val of jywc.data) {
        var time = moment(val.meta.createdAt).format('YYYY-MM-DD hh:mm');
        val.time = time;
      }
      this.$set(this.statNum, `jywc`, jywc.total);
      this.$set(this, `successlist`, jywc.data);
      //交易实况
      let jysk = await this.tquery({ dockid: this.id });
      let newjysk = jysk.data.filter(f => f.status == '1' || f.status == '2');
      for (const val of newjysk) {
        var time = moment(val.meta.createdAt).format('YYYY-MM-DD hh:mm');
        val.time = time;
      }
      this.$set(this, `directlist`, newjysk);
      // 展会动态
      // 登录情况+交易情况
      let jioayi = await this.operaFetch({ dockid: this.dock_id });
      console.log(jioayi);
      this.$set(this, `lunboList`, jioayi.data);
      // 展会动态结束
      let zxzd = await this.danceQuery({ dock_id: this.dock_id });
      this.$set(this, `zxzdlist`, zxzd.data);
      let xmly = await this.adshowQuery({ dock_id: this.dock_id });
      this.$set(this, `xmlylist`, xmly.data);
    },
    // 交易实况
    handleClicks(tab, event) {
      if (tab.name == 'four') {
        this.$router.push('/tltest');
      } else if (tab.name == 'five') {
        this.$router.push('/tllltest');
      } else if (tab.name == 'six') {
        this.$router.push('/tltest2');
      }
    },
    // 点击查询
    async resetForm(name) {
      if (this.panduan == '找技术') {
        if (name) {
          let jishu = await this.goodsquery({ name: name });
          this.$set(this, `jishulist`, jishu.data);
        } else {
          this.searchdock();
        }
      } else if (this.panduan == '找产品') {
        if (name) {
          let chanpin = await this.goodsquery({ name: name });
          this.$set(this, `demandList`, chanpin.data);
        } else {
          this.searchdock();
        }
      } else if (this.panduan == '找服务') {
        if (name) {
          let service = await this.goodsquery({ name: name });
          this.$set(this, `serviceList`, service.data);
        } else {
          this.searchdock();
        }
      } else if (this.panduan == '找专家') {
        if (name) {
          var filterdata = this.expertList.filter(item => item.name === name);
          this.$set(this, `expertList`, filterdata);
        } else {
          this.searchdock();
        }
      }
    },
    //找技术，找产品，找服务，找专家
    handleClick(tab, event) {
      if (event.target.getAttribute('id') == 'tab-0') {
        this.panduan = '找技术';
        if (this.name) {
          console.log('找技术');
        }
      } else if (event.target.getAttribute('id') == 'tab-1') {
        this.panduan = '找产品';
        if (this.name) {
          console.log('找产品');
        }
      } else if (event.target.getAttribute('id') == 'tab-2') {
        this.panduan = '找服务';
        if (this.name) {
          console.log('找服务');
        }
      } else if (event.target.getAttribute('id') == 'tab-3') {
        this.panduan = '找专家';
        if (this.name) {
          console.log('找专家');
        }
      }
    },
    // 技术,产品，服务详情
    oneBtnDetail(data) {
      this.dialogVisible = true;
      this.$set(this, `directInfo`, data);
    },
    // 关闭技术，产品，服务详情
    handleClose(done) {
      done();
    },
    // 专家详情
    twoBtnDetail(data) {
      this.dialogExport = true;
      data.phone = this.phoneNumFilter(data.phone);
      data.cardnumber = this.cardnumberNumFilter(data.cardnumber);
      this.$set(this, `exportInfo`, data);
    },
    // 过滤隐藏手机号
    phoneNumFilter(phone) {
      let start = phone.slice(0, 3);
      let end = phone.slice(-4);
      return `${start}****${end}`;
    },
    // 过滤隐藏身份证号
    cardnumberNumFilter(cardnumber) {
      let start = cardnumber.slice(0, 4);
      let end = cardnumber.slice(-3);
      return `${start}****${end}`;
    },
    // 关闭专家详情
    handleCloseExport(done) {
      done();
    },

    // 测试轮播
    scroll() {
      let con1 = this.$refs.con1;
      con1.style.marginTop = '-30px';
      this.animate = !this.animate;
      var that = this; // 在异步函数中会出现this的偏移问题，此处一定要先保存好this的指向
      setTimeout(function() {
        that.lunboList.push(that.lunboList[0]);
        that.lunboList.shift();
        con1.style.marginTop = '0px';
        that.animate = !that.animate; // 这个地方如果不把animate 取反会出现消息回滚的现象，此时把ul 元素的过渡属性取消掉就可以完美实现无缝滚动的效果了
      }, 500);
    },
    mEnter() {
      clearInterval(this.timer1);
    },
    mLeave() {
      this.timer1 = setInterval(this.scroll, 1000);
    },
  },
  mounted() {
    this.timer1 = setInterval(this.scroll, 2000);
  },
  computed: {
    ...mapState(['user']),
    pageTitle() {
      return `${this.$route.meta.title}`;
    },
  },
  metaInfo() {
    return { title: this.$route.meta.title };
  },
  filters: {
    getDate(meta) {
      let createdAt = _.get(meta, `createdAt`);
      let date = new Date(createdAt)
        .toLocaleDateString()
        .replace('/', '-')
        .replace('/', '-');
      return date;
    },
  },
};
</script>

<style lang="less" scoped>
.textOver {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.w_1200 {
  margin: 0 auto;
  width: 1200px;
}
.livetop {
  width: 100%;
  height: 487px;
  overflow: hidden;
  background-image: url('~@/assets/live/top_3.png');
}
.livetop .title {
  text-align: center;
  color: #fff;
  position: relative;
  width: 100%;
  font-size: 45px;
  top: 65px;
}

.userper {
  font-size: 16px;
  text-align: left;
  width: 200px;
  height: 60px;
  line-height: 60px;
}
.livetop .zhuban {
  text-align: center;
  color: #fff;
  position: relative;
  width: 100%;
  font-size: 25px;
  top: 140px;
}
.livetop .zhuban span:first-child {
  font-weight: 700;
}
.livetop .num {
  position: relative;
  top: 190px;
  color: #fff;
}
.livetop .num p {
  float: left;
  width: 15%;
  background: #fff;
  margin: 0 14px 0 0 !important;
  color: #000;
  height: 50px;
  line-height: 50px;
  border-radius: 30px;
}
.livetop .num p span:first-child {
  display: inline-block;
  width: 56%;
  text-align: center;
  height: 50px;
  line-height: 50px;
  font-size: 16px;
  background: red;
  border-radius: 30px;
  color: #fff;
  font-weight: 700;
}
.livetop .num p span:last-child {
  display: inline-block;
  width: 42%;
  text-align: center;
  font-size: 15px;
  font-weight: 700;
}
.livemain {
  position: relative;
  top: -55px;
  z-index: 999;
}
.livemain .livevideo {
  height: 470px;
  overflow: hidden;
}
.livemain .livevideo .left {
  float: left;
  width: 50%;
  height: 460px;
  overflow: hidden;
  border: 5px solid #000;
  background: #fff;
  border-radius: 5px;
}
.livemain .livevideo .left .title {
  padding: 0 10px;
  height: 40px;
  line-height: 40px;
  font-size: 20px;
  font-weight: 700;
}
.livemain .livevideo .left .video {
  height: 400px;
  margin: 0 10px 10px 10px;
  border: 2px solid #ccc;
  width: 97%;
}
.livemain .livevideo .right {
  width: 50%;
  height: 460px;
  overflow: hidden;
  background-color: #6e042c;
  border-top-left-radius: 5px;
  border-bottom-left-radius: 5px;
  overflow: hidden;
}

/deep/.livemain .livevideo .right .el-tabs__nav-scroll {
  color: #fff;
  width: 97%;
  float: left;
  height: 40px;
  line-height: 40px;
  padding: 0 10px;
  background: #fe950e;
}

/deep/.livemain .livevideo .right .el-tabs__item {
  color: #fff;
  font-weight: bold;
  font-size: 16px;
}

/deep/.livemain .livevideo .right .el-tabs__item.is-active {
  color: red;
}

/deep/.livemain .livevideo .right .el-tabs__item:hover {
  color: red;
}

/deep/.livemain .livevideo .right .el-tabs__active-bar {
  position: absolute;
  bottom: 0;
  left: 0;
  height: 2px;
  background-color: transparent;
  z-index: 1;
  transition: transform 0.3s cubic-bezier(0.645, 0.045, 0.355, 1);
  list-style: none;
  color: #fff;
}

/deep/.el-tabs__nav-wrap::after {
  background-color: transparent;
}
.right ul {
  padding: 0;
  margin: 0;
}
.right ul li {
  height: 43px;
  line-height: 40px;
  font-size: 14px;
  color: #fff;
  border-bottom: 1px solid #ff8500;
  padding: 0 0 0 10px;
  margin: 0 20px;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}

.right ul li span:first-child {
  color: #ff8500;
}
.right ul li span {
  margin: 0 20px 0 0;
}

.yixiang ul {
  padding: 0;
  margin: 0;
}
.yixiang ul li {
  height: 43px;
  line-height: 40px;
  font-size: 14px;
  color: #fff;
  border-bottom: 1px solid #ff8500;
  padding: 0 0 0 10px;
  margin: 0 20px;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}

.yixiang ul li span:first-child {
  color: #ff8500;
}
.yixiang ul li span {
  margin: 0 20px 0 0;
}

// 图片
.newimage {
  margin: 20px 0 0 0;
  background-size: 100% * 80px;
  background-size: cover;
  height: 100px;
  width: 100%;
  margin-bottom: 5px;
  position: relative;
}
.newimage .el-link {
  position: absolute;
  top: 30px;
  left: 46%;
  color: #ffffff;
  font-size: 36px;
  z-index: 999;
}
.fangtan {
  float: left;
  height: 525px;
  overflow: hidden;
}
// 嘉宾
.fangtan .jiabin {
  width: 31%;
  border-radius: 5px;
  box-shadow: 0 0 5px #c20808;
  padding: 0 10px 0px 10px;
  margin: 4px 15px 0 3px;
  height: 515px;
}
.jiabin .jiabintop {
  height: 30px;
  line-height: 30px;
}
.jiabin .jiabintop span {
  display: inline-block;
  padding: 0 10px;
  height: 30px;
  color: #fff;
  background-color: #ff8500;
  border-bottom-left-radius: 10px;
  border-bottom-right-radius: 10px;
}
.jiabin .jiabintop a {
  float: right;
}
.jiabin .jiabinlist ul {
  float: left;
  width: 100%;
  height: 475px;
  overflow: auto;
}
.jiabin .jiabinlist ul li {
  float: left;
  width: 100%;
  border-bottom: 1px dashed #ff8500;
  padding: 16px 0;
}
.jiabin .jiabinlist ul li:last-child {
  border-bottom: none;
  float: left;
  width: 100%;
}
.jiabin .jiabinlist ul li:hover p span:first-child {
  color: #0e90d2;
}
.jiabin .jiabinlist ul li img {
  float: left;
  width: 20%;
  height: 80px;
}

.jiabin .jiabinlist ul li p {
  float: left;
  width: 71%;
  padding: 0 0 0 10px;
}

.jiabin .jiabinlist ul li p span:first-child {
  float: left;
  width: 70%;
  font-size: 18px;
}
.jiabin .jiabinlist ul li p span:first-child:hover {
  cursor: pointer;
}

// .jiabin .jiabinlist ul li p span:nth-child(2n) {
//   float: left;
//   width: 35%;
//   font-size: 14px;
//   text-align: right;
//   padding: 2px 0 0 0;
// }

.jiabin .jiabinlist ul li p span:last-child {
  float: left;
  width: 100%;
  font-size: 14px;
  color: #888;
  overflow: hidden;
  text-overflow: ellipsis;
  -webkit-line-clamp: 3;
  word-break: break-all;
  display: -webkit-box;
  -webkit-box-orient: vertical;
}
// 访谈
.fangtan .luyan {
  width: 33%;
  border-radius: 5px;
  box-shadow: 0 0 5px #c20808;
  padding: 0 10px 0px 10px;
  margin: 4px 10px 0 3px;
  height: 515px;
  overflow: hidden;
}
.luyanList {
  padding: 10px 0 0 0;
}

.luyanList ul {
  margin: 0;
  padding: 0;
  list-style-type: none;
  float: left;
  width: 100%;
  height: 450px;
  overflow-y: auto;
  overflow-x: hidden;
}
.luyanList ul li {
  float: left;
  border-radius: 10px;
  padding: 5px;
  margin: 0 0 12px 0;
  height: 95px;
  border: 1px solid #ff8500;
  width: 95%;
}

.luyanList ul li:nth-child(5) {
  border: 1px solid #ff8500;
  float: left;
  border-radius: 10px;
  padding: 5px 10px;
  margin: 0 0 22px 0;
  height: 95px;
}

.luyanList ul li:hover {
  box-shadow: 0 0 5px red;
}

.luyanList ul li p:first-child span:first-child {
  font-size: 18px;
  float: left;
  width: 70%;
  height: 30px;
  line-height: 30px;
}
.luyanList ul li p:first-child span:first-child:hover {
  cursor: pointer;
  color: #0279d5;
}

.luyanList ul li p:first-child span:last-child {
  float: left;
  width: 30%;
  height: 30px;
  line-height: 30px;
}

.luyanList ul li p:last-child span {
  float: left;
  width: 100%;
  padding: 5px 0;
  font-size: 14px;
  color: #666;
}
// 聊天
.chat {
  float: left;
  width: 33%;
}
.tabsData {
  position: relative;
  height: 510px;
  margin: 20px 0;
  border: 1px solid red;
  .one {
    height: 467px;
    padding: 0 15px;
    overflow: hidden;
    .onnList {
      border-bottom: 1px dashed red;
      padding: 10px;
      .oneName {
        height: 30px;
        line-height: 30px;
        margin: 0 0 5px 0;
        font-size: 16px;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
      }
      .btn {
        height: 30px;
        line-height: 30px;
        margin: 0 0 5px 0;
        text-align: center;
      }
      .oneInfo {
        .oneInfoLeft {
          font-size: 14px;
          p {
            padding: 0 0 10px 0;
            span {
              display: inline-block;
              width: 50%;
            }
          }
          p:first-child span:first-child {
            color: red;
            font-weight: bold;
          }
          p:nth-child(2) span:nth-child(2) {
            color: red;
            font-weight: bold;
          }
        }
        .oneInfoRight {
          overflow: hidden;
          text-overflow: ellipsis;
          -webkit-line-clamp: 4;
          word-break: break-all;
          display: -webkit-box;
          -webkit-box-orient: vertical;
        }
      }
    }
  }

  .two {
    padding: 15px 15px 0 15px;
    height: 466px;
    overflow: auto;
    .twoList {
      box-shadow: 0 0 3px red;
      margin-bottom: 10px;
      padding: 17px 6px;
      .image {
        border-radius: 90px;
        .el-image {
          border-radius: 90px;
        }
      }
      .info {
        font-size: 16px;
        padding: 0 15px;
        .el-button {
          float: right;
        }
        p {
          float: left;
          width: 100%;
          height: 30px;
          line-height: 30px;
          span {
            display: inline-block;
            width: 50%;
          }
        }
        p:first-child {
          font-size: 18px;
          font-weight: bold;
        }
      }
    }
  }
}
/deep/.el-tabs--border-card > .el-tabs__content {
  padding: 0;
}
/deep/.el-dialog__body {
  padding: 20px;
}
.downLeftInfos {
  height: 330px;
}
.marketPublish {
  position: absolute;
  top: 42.2%;
  width: 286px;
  z-index: 999;
  left: 72%;
  top: 1%;
  text-align: center;
  font-size: 18px;
  color: #fff;
}

/deep/.el-input__inner {
  -webkit-appearance: none;
  background-color: #fff;
  background-image: none;
  border-radius: 4px;
  border: 1px solid #dcdfe6;
  box-sizing: border-box;
  color: #606266;
  display: inline-block;
  font-size: inherit;
  height: 30px;
  line-height: 12px;
  outline: 0;
  padding: 0 15px;
  transition: border-color 0.2s cubic-bezier(0.645, 0.045, 0.355, 1);
  width: 100%;
}
/deep/.video-js {
  height: 396px !important;
}
// 新增
// 产品
.jishulist {
  .topList {
    height: 430px;
    overflow: hidden;
    .list {
      border-bottom: 1px dashed #ccc;
      padding: 6px 0;
      .name {
        height: 30px;
        line-height: 30px;
        p:first-child {
          font-size: 16px;
          // display: inline-block;
          width: 700px;
          display: block;
          overflow: hidden;
          white-space: nowrap;
          text-overflow: ellipsis;
        }
      }
      .names {
        height: 30px;
        line-height: 30px;
        p:first-child {
          font-size: 14px;
          display: inline-block;
          width: 300px;
          overflow: hidden;
          text-overflow: ellipsis;
          -o-text-overflow: ellipsis;
        }
      }

      .click {
        height: 30px;
        line-height: 30px;
        text-align: center;
      }
    }
  }
  .btn {
    margin: 6px 0 0 0;
    text-align: center;
  }
}
.onmore {
  text-align: center;
}
// 技术
.demandList {
  .topList {
    height: 430px;
    overflow: hidden;
    .list {
      padding: 4px 0;
      border-bottom: 1px dashed #ccc;
      .name {
        height: 30px;
        line-height: 30px;

        p {
          font-size: 16px;
          span:first-child {
            display: inline-block;
            width: 300px;
          }
        }
      }
      .click {
        height: 30px;
        line-height: 30px;
        text-align: center;
      }
      .otherInfo {
        .field {
          font-size: 14px;
          padding: 8px 0 0 0;
        }
        .coopermode {
          font-size: 14px;
          padding: 8px 0 0 0;
        }
      }
      .introduction {
        overflow: hidden;
        text-overflow: ellipsis;
        -webkit-line-clamp: 2;
        word-break: break-all;
        display: -webkit-box;
        -webkit-box-orient: vertical;
      }
    }
  }
  .btn {
    text-align: center;
    margin: 6px 0 0 0;
  }
}
// 服务
.serviceList {
  .topList {
    height: 430px;
    overflow: hidden;
    .list {
      padding: 11px 0;
      border-bottom: 1px dashed #ccc;
      .name {
        height: 30px;
        line-height: 30px;
        p {
          font-size: 16px;
        }
      }
      .click {
        height: 30px;
        line-height: 30px;
        text-align: center;
      }
      .otherInfo {
        .field {
          font-size: 14px;
          padding: 8px 0 0 0;
        }
      }
      .introduction {
        overflow: hidden;
        text-overflow: ellipsis;
        -webkit-line-clamp: 2;
        word-break: break-all;
        display: -webkit-box;
        -webkit-box-orient: vertical;
      }
    }
  }
  .btn {
    text-align: center;
    margin: 6px 0 0 0;
  }
}
.nameShow {
  position: fixed;
  top: 15px;
  text-align: right;
  z-index: 999;
  span {
    color: #fff;
    font-weight: bold;
    font-size: 16px;
    padding: 0 10px;
  }
}
.box {
  width: 100%;
  height: 400px;
  overflow: hidden;
  .lunboList {
    height: 30px;
    line-height: 30px;
    padding: 0 10px;
    p {
      font-size: 16px;
    }
  }
}
.anim {
  transition: all 0.5s;
}
</style>