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>{{ dockInfo.sponsor }}</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="12" class="left">
                <el-col :span="24" class="lefttop">
                  <el-col :span="4" class="lefttopleft">
                    <span style="color: rgb(255, 132, 0);">视频</span>
                    <span>直播</span>
                  </el-col>
                  <el-col :span="20" class="lefttopright">
                    <p class="textOver">{{ dockInfo.videointro }}</p>
                  </el-col>
                </el-col>
                <el-col :span="24" class="leftvideo">
                  <el-col :span="24" class="video">
                    <video :src="dockInfo.file_path" autoplay="" controls="controls" v-if="dockInfo.file_path != null || ''">
                      您的浏览器不支持 video 标签。
                    </video>
                    <div class="videointro" v-else>
                      <p>{{ dockInfo.videointro }}</p>
                      <!-- <p>{{ dockInfo.videointroinfo }}</p> -->
                    </div>
                  </el-col>
                </el-col>
              </el-col>
              <el-col :span="12" class="right">
                <el-tabs v-model="videoList" type="card">
                  <el-tab-pane label="图文直播" name="first">
                    <el-col :span="24" class="rightFirst">
                      <el-col :span="24" class="list" :style="{ height: `${this.user.role == 3 ? '390px' : '415px'}` }" id="chat">
                        <el-col :span="24" class="lunboList" v-for="(item, index) in lunboList" :key="index">
                          <el-col :span="2" class="image">
                            <el-image :src="touxiang" style="width:30px;height:30px"></el-image>
                          </el-col>
                          <el-col :span="21" class="other">
                            <el-col :span="24" class="one">
                              <span>{{ item.type == '0' || item.type == '2' ? item.login_name : item.type == '1' ? item.market_username : '暂无' }}</span>
                              <span>[{{ getlundate(item.date) }}]</span>
                            </el-col>
                            <el-col :span="24" class="two">
                              <span v-if="item.type == '0'">
                                <p class="hywl">
                                  <span>欢迎</span>
                                  <span>{{ item.login_name }}</span>
                                  <span>位临现场</span>
                                  <el-image :src="hand" class="hand"></el-image>
                                  <el-image :src="hand" class="hand"></el-image>
                                  <el-image :src="hand" class="hand"></el-image>
                                  <el-image :src="hand" class="hand"></el-image>
                                  <el-image :src="hand" class="hand"></el-image>
                                  <el-image :src="hand" class="hand"></el-image>
                                </p>
                              </span>
                              <span v-else-if="item.type == '1'">
                                <p class="zh">
                                  <span>祝贺</span>
                                  <span>{{ item.market_username }}</span>
                                  <span>和</span>
                                  <span>{{ item.username }}</span>
                                  <span>{{ getstatus(item.status) }}</span>
                                  <el-image :src="hand" class="hand"></el-image>
                                  <el-image :src="hand" class="hand"></el-image>
                                  <el-image :src="hand" class="hand"></el-image>
                                  <el-image :src="hand" class="hand"></el-image>
                                  <el-image :src="hand" class="hand"></el-image>
                                  <el-image :src="hand" class="hand"></el-image>
                                </p>
                              </span>
                              <span v-else-if="item.type == '2'">
                                <p class="remark">{{ item.remark }}</p>
                              </span>
                            </el-col>
                          </el-col>
                        </el-col>
                      </el-col>
                      <el-col :span="24" class="send" v-if="user.role == '3'">
                        <el-col :span="21">
                          <el-input v-model="text" size="mini" placeholder="请输入内容"></el-input>
                        </el-col>
                        <el-col :span="3" style="text-align:center;">
                          <el-button @click="send" size="mini" style="background: #ff8500;color: #fff;width: 100%;padding: 8px 0;">发送</el-button>
                        </el-col>
                      </el-col>
                    </el-col>
                  </el-tab-pane>
                </el-tabs>
              </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>
                      <el-col :span="24" class="demandList">
                        <el-col :span="24" class="topList">
                          <el-col :span="4" class="list" v-for="(item, index) in demandList" :key="index" @click.native="oneBtnDetail(item)">
                            <el-image :src="achievezb"></el-image>
                            <el-col :span="24" class="company textOver">
                              {{ item.company }}
                            </el-col>
                            <el-col :span="24" class="aName textOver">
                              {{ item.name }}
                            </el-col>
                            <el-col :span="24" class="a-brief">{{ item.achievebrief }}</el-col>
                            <el-col :span="24" class="cont">
                              <el-col :span="24" class="a-field">领域：{{ item.field }}</el-col>
                              <el-col :span="24" class="a-contacts">联系人：{{ item.contacts }}</el-col>
                            </el-col>
                            <el-col :span="24" class="clickBtn">
                              <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, type: item.type },
                                  })
                                "
                                >对接</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="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 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.field }}</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, type: item.type },
                                })
                              "
                              >对接</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="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">
                              {{ item.name }}
                            </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, type: item.type },
                                  })
                                "
                                >对接</el-button
                              >
                            </el-col>
                            <el-col :span="12" class="otherInfo"> 信息属性：{{ item.messattribute }} </el-col>
                            <el-col :span="12" class="otherInfo"> 需求程度：{{ item.demand }} </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 > 6"
                            >查看所有项目</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.expertimage" style="width:70px;height: 70px;border: 1px solid #f1f1f1;" v-if="item.expertimage != ''"></el-image>
                        <el-image :src="expertimage" style="width:70px;height: 70px;border: 1px solid #f1f1f1;" v-else></el-image>
                      </el-col>
                      <el-col :span="20" class="info">
                        <el-col :span="16" class="name textOver">
                          {{ item.name }}
                        </el-col>
                        <el-col :span="8">
                          <el-button size="mini" type="primary" @click="twoBtnDetail(item)" style="margin:0 5px 0 5px">详情</el-button>
                          <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-col>
                        <el-col :span="24" class="txt textOver"> {{ item.zwzc || '暂无' }} </el-col>
                        <el-col :span="24" class="txt textOver"> {{ item.company || '暂无' }} </el-col>
                        <!-- <el-col :span="12" class="txt textOver"> QQ/微信：{{ item.qqwx || '暂无' }} </el-col>
                        <el-col :span="12" class="txt textOver"> 电子邮箱：{{ item.email || '暂无' }} </el-col> -->
                      </el-col>
                    </el-col>
                    <el-col :span="24" class="onmore">
                      <el-button
                        v-if="expertList.length >= 8"
                        type="primary"
                        size="mini"
                        @click="$router.push({ path: '/hall/productList/expertList', query: { dockid: dock_id, user_id: user_id } })"
                        >查看所有项目</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">
              <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="55%" :before-close="handleClose">
      <directDetail :directInfo="directInfo"></directDetail>
    </el-dialog>
    <el-dialog title="专家信息" :visible.sync="dialogExport" width="60%" :before-close="handleCloseExport">
      <expeDetail :detailInfo="exportInfo" :displayBtn="displayBtn"></expeDetail>
    </el-dialog>
  </div>
</template>

<script>
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 expeDetail from '@/views/market/detail/expeDetail.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: {},
  inject: ['reload'],
  filters: {
    getDate(meta) {
      let createdAt = _.get(meta, `createdAt`);
      let date = new Date(createdAt)
        .toLocaleDateString()
        .replace('/', '-')
        .replace('/', '-');
      return date;
    },
  },
  components: {
    chat,
    liveFoot,
    directDetail, //技术，产品，服务详情
    expeDetail,
  },
  data: () => ({
    hand: require('@/assets/emotion/flower2.gif'),
    achievezb: require('@/assets/3.png'),
    touxiang: require('@/assets/emotion/touxiang.png'),
    videodisplay: 'list',
    activeName: 'second',
    //搜索判断用
    panduan: '找技术',
    // 找技术
    jishulist: [],
    // 找产品
    demandList: [],
    // 找服务
    serviceList: [],
    // 找专家
    expertList: [],
    // 详情显示
    dialogVisible: false,
    displayBtn: false,
    // 技术，产品，服务详情
    directInfo: {},
    // 专家详情
    dialogExport: false,
    exportInfo: {},
    expertimage: require('@/assets/live/222.png'),
    // 交易实况
    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: {},
    //对接会创建人id
    user_id: '',
    name: '',
    dock_id: '',
    // 测试轮播
    lunboList: [],
    //现场直播对话框
    text: '',
    // 视频右侧聊天列表
    videoList: 'first',
    // // 视频是否显示
    // viewvideo: 'text',
    times: 5,
  }),
  async created() {
    this.$set(this, `dock_id`, this.$route.query.id);
    // 对接会详情
    await this.dockdetail();
    await this.searchdock();
  },
  methods: {
    ...mapProduct({ mapProductQuery: 'newquery' }),
    ...market({ marketFetch: 'fetch', operaFetch: 'operaFetch', sendMsg: 'operationCreate', operaQuery: 'operaQuery' }),
    ...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`, res.data);
        // 对接会创建人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.type === '0');
      this.$set(this, `jishulist`, jishuData);
      // 找产品
      var chanpinData = czxmNew.filter(item => item.type === '1');
      // var ccgydx = chanpinData.filter(item => item.company === '中科院长春分院');
      // if (ccgydx) this.$set(this, `demandList`, ccgydx);
      // var ccfy = chanpinData.filter(item => item.company === '长春工业大学');
      if (chanpinData) this.$set(this, `demandList`, chanpinData);
      // 找服务
      var fuwuData = czxmNew.filter(item => item.type === '2');
      this.$set(this, `serviceList`, fuwuData);
      // 找专家
      let exportdata = await this.expertQuery({ role: 6, limit: 8 });
      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`, qthe.total);
      // 达成意向
      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 });
      for (const val of jioayi.data) {
        var date = moment(val.meta.createdAt).format('YYYY-MM-DD hh:mm');
        val.date = date;
      }
      // 同时在线
      let tszx = await this.operaQuery({ type: '0' });
      if (tszx) {
        this.$set(this.statNum, `tszx`, tszx.total);
      }
      this.$set(this, `lunboList`, jioayi.data.reverse());
      // 展会动态结束
      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();
    },
    async send() {
      if (this.text != '') {
        let object = { login_role: 3, type: 2, login_name: this.user.adminuser, remark: this.text, dockid: this.dock_id };
        let res = await this.sendMsg(object);
        this.$checkRes(res, null, res.errmsg || '发言失败');
      } else this.$message.error('请输入信息后发送');
    },
    channel() {
      this.$stomp({
        [`/exchange/bullet_chat/${this.dock_id}`]: this.onMessage,
      });
    },
    onMessage(message) {
      let body = _.get(message, 'body');
      if (body) {
        body = JSON.parse(body);
        body.date = moment(body.meta.createdAt).format('YYYY-MM-DD hh:mm');
        this.lunboList.push(body);
        this.text = '';
        this.turnBottom();
      }
    },
    turnBottom() {
      this.$nextTick(() => {
        document.getElementById('chat').scrollTop = document.getElementById('chat').scrollHeight;
      });
    },
    // 过滤轮播时间
    getlundate(data) {
      let newdata = moment(data).format('hh:mm');
      if (newdata) return newdata;
    },
    // 过滤轮播交易状态
    getstatus(status) {
      if (status == '0') return '正在洽谈';
      else if (status == '1') return '达成意向';
      else if (status == '2') return '交易完成';
      else if (status == '3') return '取消交易';
      else if (status == '4') return '交易待确定';
      else return '暂无';
    },
    async dockdetail() {
      let res = await this.dockFetch(this.dock_id);
      if (this.$checkRes(res)) {
        // 对接会详情
        this.$set(this, `dockInfo`, res.data);
      }
    },
    // 文字/视频倒计时
    daojishi() {
      this.timer = setInterval(() => {
        this.times--;
        if (this.times === 0) {
          this.dockdetail();
          // this.reload();
          this.times = 5;
          clearInterval(this.timer);
        }
      }, 1000);
    },
  },
  mounted() {
    this.channel();
  },
  computed: {
    ...mapState(['user']),
    pageTitle() {
      return `${this.$route.meta.title}`;
    },
  },
  metaInfo() {
    return { title: this.$route.meta.title };
  },
  watch: {
    times: {
      handler(val) {
        if (val == 5) {
          this.daojishi();
        }
      },
      immediate: true,
    },
  },
};
</script>

<style lang="less" scoped>
.w_1200 {
  margin: 0 auto;
  width: 1200px;
}
// 头部
.livetop {
  width: 100%;
  height: 487px;
  overflow: hidden;
  background-image: url('~@/assets/live/top_3.png');
  .title {
    text-align: center;
    color: #fff;
    position: relative;
    width: 100%;
    font-size: 45px;
    top: 65px;
  }
  .zhuban {
    text-align: center;
    color: #fff;
    position: relative;
    width: 100%;
    font-size: 25px;
    top: 140px;
    span:first-child {
      font-weight: 700;
    }
  }
  .num {
    position: relative;
    top: 190px;
    color: #fff;
    p {
      float: left;
      width: 15%;
      background: #fff;
      margin: 0 14px 0 0 !important;
      color: #000;
      height: 50px;
      line-height: 50px;
      border-radius: 30px;
      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;
      }
      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;
  .livevideo {
    height: 470px;
    overflow: hidden;
    .left {
      height: 470px;
      overflow: hidden;
      border: 5px solid #000;
      background: #fff;
      border-radius: 5px;
      margin: 0 15px 0 0;
      .lefttop {
        padding: 0 10px;
        height: 60px;
        .lefttopleft {
          height: 60px;
          line-height: 40px;
          font-size: 20px;
          font-weight: 700;
        }
        .lefttopright {
          height: 60px;
          line-height: 65px;
          font-weight: bolder;
          -webkit-text-stroke: 1px #6e042c;
          -webkit-text-fill-color: #fff;
          letter-spacing: 3px;
          font-size: 20px;
        }
      }
      .leftvideo {
        .video {
          padding: 5px 10px 10px 10px;
          height: 390px;
          overflow: hidden;
          video {
            width: 100%;
            height: 360px;
            background: #000;
            padding: 0px 0 15px 0px;
          }
          .videointro {
            background: url('~@/assets/directBack.png');
            background-size: 100% 100%;
            color: #fff;
            padding: 0 15px;
            height: 370px;
            p:first-child {
              text-align: center;
              font-size: 30px;
              padding: 25% 0;
            }
            p:last-child {
              text-align: center;
              font-size: 30px;
              line-height: 35px;
              overflow: hidden;
              text-overflow: ellipsis;
              -webkit-line-clamp: 7;
              word-break: break-all;
              display: -webkit-box;
              -webkit-box-orient: vertical;
            }
          }
        }
      }
    }
    .right {
      width: 48%;
      height: 468px;
      overflow: hidden;
      background: #f0ffff5f;
      box-shadow: 0 0 5px #409eff;
      border-radius: 5px;
      .rightFirst {
        color: #fff;
        height: 430px;
        padding: 0 0 0 10px;
        .list {
          overflow: auto;
          .lunboList {
            padding: 10px 0;
            border-bottom: 1px dashed #ff0000;
            .image {
              text-align: center;
            }
            .other {
              .one {
                span:nth-child(1) {
                  color: #000;
                  font-size: 16px;
                  font-weight: bold;
                }
                span:nth-child(2) {
                  display: inline-block;
                  margin: 0 0 0 15px;
                  color: #ccc;
                }
              }
              .two {
                margin: 5px 0 0 0;
                color: #000;
                .zh {
                  min-height: 20px;
                  font-size: 15px;
                  padding: 5px;
                  border-radius: 5px;
                  background: #ea4235;
                }
                .hywl {
                  min-height: 20px;
                  font-size: 15px;
                  padding: 5px;
                  border-radius: 5px;
                  background: #245efe5f;
                  .hand {
                    width: 30px;
                    top: 6px;
                    left: 5px;
                    margin: 0px 0 0 10px;
                  }
                }
                .remark {
                  min-height: 20px;
                  font-size: 15px;
                  padding: 5px;
                  border-radius: 5px;
                  background: #cccccc5f;
                }
              }
            }
          }
          //   padding: 10px 20px;
          //   font-weight: bold;
          //   color: #ffffff;
          //   p:nth-child(1) {
          //     font-size: 16px;
          //   }
          //   p:nth-child(2) {
          //     font-size: 18px;
          //     padding: 10px 0;
          //   }
          // }
        }
        .send {
          height: 30px;
        }
      }
    }
    /deep/.el-tabs--card > .el-tabs__header {
      border-bottom: none;
    }
    /deep/.el-tabs__header {
      margin: 0;
    }
    /deep/.el-tabs--card > .el-tabs__header .el-tabs__item {
      border-bottom: none;
      border-left: none;
    }
    /deep/.el-tabs--card > .el-tabs__header .el-tabs__nav {
      border: none;
    }
    /deep/.el-tabs__item {
      font-weight: 700;
      font-size: 16px;
      color: #fff;
    }
    /deep/.el-tabs__item.is-active {
      color: #ff0000;
    }
    /deep/.el-tabs__nav-scroll {
      background-color: #fe950e;
    }
  }
}
// 图片
.newimage {
  margin: 20px 0 0 0;
  background-size: 100% * 80px;
  background-size: cover;
  height: 100px;
  width: 100%;
  margin-bottom: 5px;
  position: relative;
  .el-link {
    position: absolute;
    top: 30px;
    left: 46%;
    color: #ffffff;
    font-size: 36px;
    z-index: 999;
  }
}
// 技术需求
.tabsData {
  position: relative;
  height: 510px;
  margin: 20px 0;
  .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: hidden;
    .twoList {
      box-shadow: 0 0 3px #cccccc;
      margin-bottom: 10px;
      padding: 10px 5px;
      .image {
        border-radius: 90px;
        .el-image {
          border-radius: 90px;
        }
      }
      .info {
        .name {
          font-size: 18px;
        }
        .txt {
          font-size: 16px;
          // padding: 5px 0;
        }
      }
    }
  }
  /deep/.el-tabs--border-card > .el-tabs__header .el-tabs__item.is-active {
    font-weight: bold;
    font-size: 16px;
    background-color: #6e042c;
    color: #fff;
  }
  /deep/.el-tabs__item {
    font-size: 16px;
  }
  /deep/.el-tabs--border-card > .el-tabs__content {
    padding: 0;
  }
  // 搜索
  .marketPublish {
    position: absolute;
    top: 42.2%;
    width: 286px;
    z-index: 999;
    left: 72%;
    top: 1%;
    text-align: center;
    font-size: 18px;
    color: #fff;
  }
  // 查看更多项目
  .onmore {
    text-align: center;
  }
}
.fangtan {
  float: left;
  width: 100%;
  height: 525px;
  overflow: hidden;
  // 嘉宾
  .jiabin {
    width: 31%;
    border-radius: 5px;
    box-shadow: 0 0 5px #c20808;
    padding: 0 10px 0px 10px;
    margin: 4px 15px 0 3px;
    height: 515px;
    .jiabintop {
      height: 30px;
      line-height: 30px;
      span {
        display: inline-block;
        padding: 0 10px;
        height: 30px;
        color: #fff;
        background-color: #ff8500;
        border-bottom-left-radius: 10px;
        border-bottom-right-radius: 10px;
      }
      a {
        float: right;
      }
    }
    .jiabinlist ul {
      float: left;
      width: 100%;
      height: 475px;
      overflow: auto;
      li {
        float: left;
        width: 100%;
        border-bottom: 1px dashed #ff8500;
        padding: 16px 0;
        img {
          float: left;
          width: 20%;
          height: 80px;
        }
        p {
          float: left;
          width: 71%;
          padding: 0 0 0 10px;
          span:first-child {
            float: left;
            width: 70%;
            font-size: 18px;
          }
          span:first-child:hover {
            cursor: pointer;
          }
          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;
          }
        }
      }
      li:last-child {
        border-bottom: none;
        float: left;
        width: 100%;
      }
      li:hover p span:first-child {
        color: #0e90d2;
      }
    }
  }
  // 路演
  .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;
      ul {
        margin: 0;
        padding: 0;
        list-style-type: none;
        float: left;
        width: 100%;
        height: 450px;
        overflow-y: auto;
        overflow-x: hidden;
        li {
          float: left;
          border-radius: 10px;
          padding: 5px;
          margin: 0 0 12px 0;
          height: 95px;
          border: 1px solid #ff8500;
          width: 95%;
          p:first-child span:first-child {
            font-size: 18px;
            float: left;
            width: 70%;
            height: 30px;
            line-height: 30px;
          }
          p:first-child span:first-child:hover {
            cursor: pointer;
            color: #0279d5;
          }
          p:first-child span:last-child {
            float: left;
            width: 30%;
            height: 30px;
            line-height: 30px;
          }
          p:last-child span {
            float: left;
            width: 100%;
            padding: 5px 0;
            font-size: 14px;
            color: #666;
          }
        }
        li:nth-child(5) {
          border: 1px solid #ff8500;
          float: left;
          border-radius: 10px;
          padding: 5px 10px;
          margin: 0 0 22px 0;
          height: 95px;
        }
        li:hover {
          box-shadow: 0 0 5px red;
        }
      }
    }
  }
  // 聊天
  .chat {
    float: left;
    width: 33%;
  }
}
// 产品
.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;
  }
}
// 技术
.demandList {
  .topList {
    height: 430px;
    overflow: hidden;
    .list {
      height: 215px;
      position: relative;
      margin: 5px 10px 0px 9px;
      width: 15%;
      .el-image {
        width: 100%;
        height: 205px;
        overflow: hidden;
        // border-radius: 5px;
        // transition: all 0.4s linear;
        position: relative;
      }
      .company {
        position: absolute;
        top: 3px;
        left: 20px;
        width: 86%;
        color: #ec6c2d;
        -webkit-text-stroke: 1px #f18d2c;
        font-style: oblique;
        -webkit-text-fill-color: #ec6c2d;
        letter-spacing: 3px;
      }
      .aName {
        position: absolute;
        top: 30px;
        left: 0px;
        text-align: center;
        transform: scale(0.8);
        font-weight: bolder;
        -webkit-text-stroke: 1px #f18d2c;
        font-style: oblique;
        -webkit-text-fill-color: transparent;
        letter-spacing: 3px;
      }
      .a-brief {
        margin: 10px 0px;
        position: absolute;
        top: 30px;
        left: 0px;
        overflow: hidden;
        line-height: 20px;
        letter-spacing: 2px;
        text-overflow: ellipsis;
        -webkit-line-clamp: 5;
        word-break: break-all;
        display: -webkit-box;
        -webkit-box-orient: vertical;
        transform: scale(0.8);
      }
      .cont {
        position: absolute;
        left: 0px;
        bottom: 50px;
        transform: scale(0.8);
        .a-field {
          overflow: hidden;
          text-overflow: ellipsis;
          white-space: nowrap;
        }
      }
      .clickBtn {
        position: relative;
        top: -38px;
        text-align: center;
        /deep/.el-button {
          padding: 5px 10px;
        }
      }
    }
  }
  .btn {
    text-align: center;
    margin: 6px 0 0 0;
  }
}
// 服务
// .serviceList {
//   .topList {
//     height: 430px;
//     overflow: hidden;
//     .list {
//       padding: 10px 0;
//       border-bottom: 1px dashed #ccc;
//       .name {
//         font-size: 18px;
//       }
//       .click {
//         text-align: right;
//       }
//       .otherInfo {
//         font-size: 16px;
//       }
//     }
//   }
//   .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;
  }
}
/deep/.el-dialog__body {
  padding: 20px;
}
/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%;
}
</style>