web-test/src/views/halltwo/directTwo.vue

<template>
  <div id="directTwo">
    <el-row>
      <el-col :span="24" class="main">
        <el-col :span="24" class="one">
          <div class="w_1200">
            <el-col :span="20" class="left">
              <el-col :span="24" class="leftone">
                <span>科技成果展洽会</span>
                <span>欢迎您</span>
              </el-col>
              <el-col :span="24" class="lefttwo">
                SCIENTIFIC AND TECHNOLOGICAL ACHIEVEEMENTS EXHIBITION
              </el-col>
            </el-col>
            <el-col :span="4" class="right">
              <el-link :underline="false">帮助中心</el-link>
            </el-col>
          </div>
        </el-col>
        <el-col :span="24" class="two">
          <div class="w_1200">
            <el-col :span="24" class="twotop">
              <el-col :span="18" class="left">
                <p>{{ this.$route.query.title }}</p>
                <el-image :src="two1"></el-image>
              </el-col>
              <el-col :span="6" class="right">
                <el-image :src="two2"></el-image>
                <p>{{ dockInfo.start_time }}</p>
                <p>距离展会结束还有</p>
                <p>倒计时</p>
              </el-col>
            </el-col>
            <el-col :span="24" class="twocen">
              <el-col :span="15" class="left"> <span>主办单位：</span>{{ dockInfo.sponsor }} </el-col>
              <el-col :span="8" class="right">
                <el-button class="btn1">返回展会进行页</el-button>
                <el-button class="btn2" @click="$router.push({ path: '/halltwo/detail', query: { id: dockInfo.id } })">进入展会总结页</el-button>
              </el-col>
            </el-col>
            <el-col :span="24" class="twodown">
              <el-col :span="5" class="txt">
                <span>已经到场</span>
                <span>0</span>人
              </el-col>
              <el-col :span="5" class="txt">
                <span>实现对接</span>
                <span>0</span>次
              </el-col>
              <el-col :span="5" class="txt">
                <span>产生意向</span>
                <span>0</span>次
              </el-col>
              <el-col :span="5" class="txt">
                <span>项目数</span>
                <span>0</span>项
              </el-col>
              <el-col :span="5" class="txt">
                <span>贺信</span>
                <span>0</span>封
              </el-col>
              <el-col :span="5" class="txt">
                <span>同时在线</span>
                <span>0</span>人
              </el-col>
              <el-col :span="5" class="txt">
                <span>正在对接</span>
                <span>0</span>人
              </el-col>
              <el-col :span="5" class="txt">
                <span>产生意向</span>
                <span>0</span>次
              </el-col>
              <el-col :span="5" class="txt">
                <span>需求数</span>
                <span>0</span>项
              </el-col>
              <el-col :span="5" class="txt">
                <span>鲜花</span>
                <span>0</span>束
              </el-col>
            </el-col>
          </div>
        </el-col>
        <el-col :span="24" class="three">
          <div class="w_1200">
            <el-col :span="24" class="three1">
              <el-col :span="12" class="left">
                <video :src="dockInfo.file_path" controls="controls">
                  您的浏览器不支持 video 标签。
                </video>
              </el-col>
              <el-col :span="12" class="right">
                <el-tabs v-model="activeName">
                  <el-tab-pane label="所有" name="first">
                    <trainlist :list="trainoneList"></trainlist>
                  </el-tab-pane>
                  <el-tab-pane label="实现对接" name="second">
                    <trainlist :list="traintwoList"></trainlist>
                  </el-tab-pane>
                  <el-tab-pane label="产生意向" name="third">
                    <trainlist :list="trainthreeList"></trainlist>
                  </el-tab-pane>
                  <el-tab-pane label="达成意向" name="fourth">
                    <trainlist :list="trainfourList"></trainlist>
                  </el-tab-pane>
                </el-tabs>
              </el-col>
            </el-col>
            <el-col :span="24" class="three2">
              <advert :list="adveronetlist"></advert>
            </el-col>
            <el-col :span="24" class="three3">
              <el-col :span="12" class="left">
                <el-col :span="24" class="lefttop">
                  <el-tabs v-model="achieveName">
                    <el-tab-pane label="技术成果" name="first">
                      <achieve :list="achieveoneList"></achieve>
                    </el-tab-pane>
                    <el-tab-pane label="电子信息技术" name="second">
                      <achieve :list="achievetwoList"></achieve>
                    </el-tab-pane>
                    <el-tab-pane label="生物与新医学技术" name="third">
                      <achieve :list="achievethreeList"></achieve>
                    </el-tab-pane>
                    <el-tab-pane label="航空航天技术" name="fourth">
                      <achieve :list="achievefourList"></achieve>
                    </el-tab-pane>
                  </el-tabs>
                  <el-link :underline="false" class="more">更多></el-link>
                </el-col>
                <el-col :span="24" class="leftbtn">
                  <el-button>查看所有项目</el-button>
                </el-col>
              </el-col>
              <el-col :span="12" class="right">
                <el-col :span="24" class="lefttop">
                  <el-tabs v-model="techolName">
                    <el-tab-pane label="科技需求" name="first">
                      <achieve :list="techoloneList"></achieve>
                    </el-tab-pane>
                    <el-tab-pane label="新材料技术" name="second">
                      <achieve :list="techoltwoList"></achieve>
                    </el-tab-pane>
                    <el-tab-pane label="高技术服务业" name="third">
                      <achieve :list="techolthreeList"></achieve>
                    </el-tab-pane>
                    <el-tab-pane label="新能源及节能技术" name="fourth">
                      <achieve :list="techolfourList"></achieve>
                    </el-tab-pane>
                  </el-tabs>
                  <el-link :underline="false" class="more">更多></el-link>
                </el-col>
                <el-col :span="24" class="leftbtn">
                  <el-button>查看所有需求</el-button>
                </el-col>
              </el-col>
            </el-col>
            <el-col :span="24" class="three4">
              <advert :list="adveronetlist"></advert>
            </el-col>
            <el-col :span="24" class="three5">
              <el-col :span="24" class="top">
                <el-col :span="20" class="left">
                  <p><el-image :src="school"></el-image> <span>高校院所</span></p>
                </el-col>
                <el-col :span="4" class="right">
                  <el-link :underline="false">更多></el-link>
                </el-col>
              </el-col>
              <el-col :span="24" class="down">
                <el-col :span="5" class="schoolList" v-for="(item, index) in schoolList" :key="index">
                  <el-col :span="24" class="image">
                    <el-image :src="item.url"></el-image>
                    <p>{{ item.name }}</p>
                  </el-col>
                  <el-col :span="24" class="btn">
                    <el-col :span="12" class="txt1">
                      <el-button type="primary" size="mini">对接</el-button>
                    </el-col>
                    <el-col :span="12" class="txt2">
                      查看院校项目
                    </el-col>
                  </el-col>
                </el-col>
              </el-col>
            </el-col>
            <el-col :span="24" class="three6">
              <advert :list="adveronetlist"></advert>
            </el-col>
            <el-col :span="24" class="three7">
              <el-col :span="12" class="left">
                <expert :list="expertList"></expert>
              </el-col>
              <el-col :span="12" class="right">
                <dockchat></dockchat>
              </el-col>
            </el-col>
            <el-col :span="24" class="three8">
              <el-col :span="8" class="left">
                <el-col :span="24" class="top">
                  <el-image :src="zdcom"></el-image>
                  <span>指导单位</span>
                </el-col>
                <el-col :span="24" class="down">
                  <el-link :underline="false">吉林省科技厅</el-link>
                  <el-link :underline="false">吉林省科学技术协会</el-link>
                </el-col>
              </el-col>
              <el-col :span="8" class="left">
                <el-col :span="24" class="top">
                  <el-image :src="jscom"></el-image>
                  <span>技术支持单位</span>
                </el-col>
                <el-col :span="24" class="down">
                  <el-link :underline="false">长春市福瑞科技有限公司</el-link>
                </el-col>
              </el-col>
            </el-col>
          </div>
        </el-col>
        <el-col :span="24" class="four">
          <div class="w_1200">
            <el-col :span="24" class="info">
              <el-col :span="8" class="left">
                <h1>专家咨询：</h1>
                <p>工作日：08:30~17:00</p>
                <p>咨询电话：</p>
                <p>0431-81666508</p>
              </el-col>
              <el-col :span="8" class="left">
                <h1>业务联系：</h1>
                <p>长春中科北斗工程技术有限公司</p>
                <p>联系人：刘经理</p>
                <p>电话：18604328977</p>
                <p>邮箱：18889898@qq.com</p>
              </el-col>
              <el-col :span="8" class="left right">
                <h1>活动帮微信：</h1>
                <el-image :src="erweima" style="width:132px;height:132px;"></el-image>
              </el-col>
            </el-col>
          </div>
        </el-col>
      </el-col>
      <div class="pz_down">
        <live-foot></live-foot>
      </div>
    </el-row>
  </div>
</template>

<script>
import liveFoot from '@/layout/live/foot.vue';
// 直播实况
import trainlist from './parts/trainlist.vue';
// 广告位
import advert from './parts/advert.vue';
// 成果列表
import achieve from './parts/achieve.vue';
// 技术专家
import expert from './parts/expert.vue';
// 公共聊天
import dockchat from './parts/dockchat.vue';

import { mapState, createNamespacedHelpers } from 'vuex';
const { mapActions: dock } = createNamespacedHelpers('dock');
const { mapActions: expertsuser } = createNamespacedHelpers('expertsuser');
const { mapActions: transaction } = createNamespacedHelpers('transaction');
export default {
  metaInfo() {
    return { title: this.$route.meta.title };
  },
  name: 'directTwo',
  props: {},
  components: {
    liveFoot,
    // 直播实况
    trainlist,
    // 广告位
    advert,
    // 成果列表
    achieve,
    // 技术专家
    expert,
    // 公共聊天
    dockchat,
  },
  data: function() {
    return {
      two1: require('@a/sy_04.png'),
      two2: require('@a/dock2.png'),
      // 展會詳情
      dockInfo: {},
      // 直播实况
      activeName: 'first',
      // 所有0,1,2
      trainoneList: [],
      // 完成2
      traintwoList: [],
      // 产生0
      trainthreeList: [],
      // 达成1
      trainfourList: [],
      // 广告位
      adveronetlist: [
        {
          url: require('@a/advert1.png'),
        },
        {
          url: require('@a/advert2.png'),
        },
      ],
      // 技术成果项目
      achieveName: 'first',
      // 全部
      achieveoneList: [],
      // 电子信息技术
      achievetwoList: [],
      // 生物与新医学技术
      achievethreeList: [],
      // 航空航天技术
      achievefourList: [],
      // 科技需求
      techolName: 'first',
      techoloneList: [],
      // 新材料技术
      techoltwoList: [],
      // 高技术服务业
      techolthreeList: [],
      // 新能源及节能技术
      techolfourList: [],
      // 高校院所
      school: require('@a/zh_12.png'),
      schoolList: [
        {
          url: require('@a/school1.png'),
          name: '吉林省农业机械研究院',
        },
        {
          url: require('@a/school2.jpg'),
          name: '吉林工程技术师范学院',
        },
        {
          url: require('@a/school3.jpg'),
          name: '吉林农业大学',
        },
        {
          url: require('@a/school4.jpg'),
          name: '中国科学院东北地理与农业生态研究所',
        },
        {
          url: require('@a/school5.jpg'),
          name: '中科院长春光机所',
        },
        {
          url: require('@a/school6.jpg'),
          name: '中科院长春应化所',
        },
        {
          url: require('@a/school7.jpg'),
          name: '中科院长春分院',
        },
        {
          url: require('@a/school8.jpg'),
          name: '长春大学',
        },
        {
          url: require('@a/school9.jpg'),
          name: '吉林大学',
        },
        {
          url: require('@a/school10.jpg'),
          name: '长春理工大学',
        },
        {
          url: require('@a/school11.jpg'),
          name: '长春工业大学',
        },
        {
          url: require('@a/school12.jpg'),
          name: '东北师范大学',
        },
        {
          url: require('@a/school13.jpg'),
          name: '长春工程学院',
        },
      ],
      // 技术专家
      expertList: [],
      // 指导单位
      zdcom: require('@a/zh_17.png'),
      jscom: require('@a/zh_18.png'),
      erweima: require('@a/二维码.jpg'),
    };
  },
  async created() {
    await this.searchInfo();
  },
  methods: {
    ...dock({ dockQuery: 'query', dockFetch: 'fetch', goodsquery: 'goodsquery' }),
    ...expertsuser({ expertQuery: 'query' }),
    ...transaction({ tquery: 'query' }),
    async searchInfo() {
      // 查询展会详情
      if (this.id) {
        let res = await this.dockFetch(this.id);
        if (this.$checkRes(res)) {
          this.$set(this, `dockInfo`, res.data);
          // 查询产品
          let czxm = res.data.apply.map(item => item.goodsList);
          czxm = _.flattenDeep(czxm);
          let czxmNew = czxm.filter(item => item.dockStatus == '1');
          // 技术成果
          let achieve = czxmNew.filter(i => i.type == '1');
          if (achieve.length > 0) {
            // 全部
            this.$set(this, `achieveoneList`, achieve);
            // 电子信息技术
            let achievetwoList = achieve.filter(i => i.field == '电子信息技术');
            this.$set(this, `achievetwoList`, achievetwoList);
            // 生物与新医学技术
            let achievethreeList = achieve.filter(i => i.field == '生物与新医学技术');
            this.$set(this, `achievethreeList`, achievethreeList);
            // 航空航天技术
            let achievefourList = achieve.filter(i => i.field == '航空航天技术');
            this.$set(this, `achievefourList`, achievefourList);
          }
          // 科技需求
          let techol = czxmNew.filter(i => i.type == '0');
          if (techol.length > 0) {
            // 全部
            this.$set(this, `techoloneList`, techol);
            // 新材料技术
            let techoltwoList = techol.filter(i => i.field == '新材料技术');
            this.$set(this, `techoltwoList`, techoltwoList);
            // 高技术服务业
            let techolthreeList = techol.filter(i => i.field == '高技术服务业');
            this.$set(this, `techolthreeList`, techolthreeList);
            // 新能源及节能技术
            let techolfourList = techol.filter(i => i.field == '新能源及节能技术');
            this.$set(this, `techolfourList`, techolfourList);
          }
        }
      }
      // 查询专家
      let res = await this.expertQuery({ skip: 0, limit: 6 });
      if (this.$checkRes(res)) {
        this.$set(this, `expertList`, res.data);
      }
      // 查询直播实况
      let trans = await this.tquery({ dockid: this.id });
      console.log(trans);
    },
  },
  computed: {
    ...mapState(['user']),
    id() {
      return this.$route.query.id;
    },
  },
  watch: {},
};
</script>

<style lang="less" scoped>
.main {
  .one {
    height: 100px;
    .left {
      height: 100px;
      .leftone {
        margin: 15px 0 0 0;
        span:nth-child(1) {
          font-size: 35px;
          color: #535353;
          font-weight: bold;
          font-family: cursive;
        }
        span:nth-child(2) {
          font-size: 15px;
          padding: 0 10px;
          color: #535353;
        }
      }
      .lefttwo {
        font-size: 12px;
        color: #535353;
      }
    }
    .right {
      height: 100px;
      line-height: 100px;
      text-align: right;
    }
  }
  .two {
    height: 710px;
    background: url('~@/assets/bj1.jpg');
    padding: 20px 0;
    .twotop {
      margin: 0 0 10px 0;
      .left {
        height: 357px;
        margin: 0 10px 0 0;
        background: url('~@/assets/dock1.png');
        p {
          float: left;
          width: 79%;
          font-size: 43px;
          color: #fff;
          font-weight: bold;
          padding: 13% 0 0 20px;
        }
        .el-image {
          float: left;
          width: 153px;
          height: 94px;
          margin: 4% 0 0 0;
        }
      }
      .right {
        background-color: #ffffff;
        width: 24%;
        height: 357px;
        text-align: center;
        padding: 0 10px;
        .el-image {
          width: 120px;
          height: 48px;
          margin: 50px 0 0px 0;
        }
        p:nth-child(2) {
          font-size: 18px;
          margin: 30px 0 5px 0;
        }
        p:nth-child(3) {
          font-size: 22px;
          font-weight: bold;
          margin-bottom: 30px;
        }
        p:nth-child(4) {
          background: #f5f5f5;
          padding: 20px 0px;
          border-radius: 5px;
          height: 50px;
        }
      }
      .right:hover {
        cursor: pointer;
        p:nth-child(3) {
          color: #535353;
        }
      }
    }
    .twocen {
      height: 130px;
      overflow: hidden;
      line-height: 130px;
      background-color: #fff;
      margin: 0 0 35px 0;
      .left {
        font-size: 18px;
        margin: 0 0 0 30px;
        span {
          font-size: 22px;
          font-weight: bold;
        }
      }
      .right {
        .btn1 {
          font-size: 16px;
          color: #fff;
          background: red;
          border: none;
          font-weight: bold;
        }
        .btn2 {
          font-size: 16px;
          color: #ff0000;
          border: 1px solid #ff0000;
          font-weight: bold;
        }
      }
    }
    .twodown {
      height: 160px;
      .txt {
        width: 224px;
        height: 52px;
        margin: 0 20px 15px 0;
        background: url('~@/assets/sjbj.jpg');
        padding: 11px 0;
        font-size: 18px;
        span:nth-child(1) {
          float: left;
          width: 46%;
          text-align: center;
          color: #fff;
        }
        span:nth-child(2) {
          float: left;
          width: 40%;
          text-align: center;
          color: #000;
          font-weight: bold;
          text-align: right;
        }
      }
      .txt:nth-child(5n) {
        margin: 0 0 15px 0;
      }
    }
  }
  .three {
    padding: 50px 0;
    .three1 {
      height: 440px;
      margin: 0 0 50px 0;
      .left {
        height: 440px;
        background: #000;
        margin: 0 15px 0 0;
        video {
          width: 100%;
          height: 100%;
        }
      }
      .right {
        width: 584px;
        height: 440px;
        border-radius: 10px;
        box-shadow: 0 5px 15px rgba(33, 82, 203, 0.35);
        /deep/.el-tabs__header {
          margin: 0;
        }
        /deep/ .el-tabs--top .el-tabs__item.is-top:nth-child(2) {
          padding-left: 20px;
        }
        /deep/ .el-tabs--top .el-tabs__item.is-top:last-child {
          padding-right: 20px;
        }
        /deep/.el-tabs__active-bar {
          display: none;
        }
        /deep/.el-tabs__nav-wrap::after {
          background-color: transparent;
        }
        /deep/.el-tabs__item.is-active {
          color: #fff;
          background: red;
        }

        /deep/.el-tabs__item {
          font-size: 18px;
          border-radius: 10px;
          font-weight: bold;
        }
        /deep/ .el-tabs__item:hover {
          color: #fff;
          background: red;
        }
      }
    }
    .three2 {
      height: 85px;
      margin: 0 0 50px 0;
    }
    .three3 {
      height: 440px;
      margin: 0 0 50px 0;
      .left {
        position: relative;
        width: 49%;
        height: 440px;
        margin: 0 15px 0 0;
        border-radius: 10px;
        box-shadow: 0 5px 15px rgba(33, 82, 203, 0.35);
        padding: 0 10px;
        .lefttop {
          height: 415px;
          .more {
            position: absolute;
            right: 10px;
            top: 11px;
          }
        }
        .leftbtn {
          text-align: center;
          .el-button {
            background: #2152cb;
            color: #fff;
            padding: 10px 20px;
          }
        }
      }
      .right {
        position: relative;
        width: 49%;
        height: 440px;
        border-radius: 10px;
        box-shadow: 0 5px 15px rgba(33, 82, 203, 0.35);
        padding: 0 10px;
        .lefttop {
          height: 415px;
          .more {
            position: absolute;
            right: 10px;
            top: 11px;
          }
        }
        .leftbtn {
          text-align: center;
          .el-button {
            background: #2152cb;
            color: #fff;
            padding: 10px 20px;
          }
        }
      }
      /deep/.el-tabs__header {
        margin: 0;
      }
      /deep/.el-tabs__item.is-active {
        color: #2454cb;
      }
      /deep/.el-tabs__active-bar {
        background-color: #2454cb;
      }
      /deep/ .el-tabs__item:hover {
        color: #2454cb;
      }
      /deep/ .el-tabs--top .el-tabs__item.is-top:nth-child(2) {
        padding-left: 20px;
      }
      /deep/ .el-tabs--top .el-tabs__item.is-top:last-child {
        padding-right: 20px;
      }
    }
    .three4 {
      height: 85px;
      margin: 0 0 50px 0;
    }
    .three5 {
      height: 340px;
      margin: 0 0 50px 0;
      .top {
        height: 62px;
        background-color: #ccc;
        margin: 0 0 30px 0;
        .left {
          height: 62px;
          padding: 0 15px;
          p {
            height: 43px;
            border-bottom: 8px solid #2152cb;
            width: 12%;
            padding: 10px 0 0 0;
            span {
              display: inline-block;
              position: relative;
              left: 6px;
              top: -5px;
              font-size: 18px;
              color: #2152cb;
            }
          }
        }
        .right {
          height: 62px;
          line-height: 62px;
          text-align: right;
          padding: 0 10px;
        }
      }
      .down {
        height: 225px;
        overflow: hidden;
        .schoolList {
          width: 204px;
          height: 225px;
          margin: 0 30px 0 0;
          text-align: center;
          .image {
            height: 183px;
            border: 1px solid #ccc;
            margin: 0 0 10px 0;
            .el-image {
              width: 130px;
              margin: 10px 0 0 0;
            }
            p {
              font-size: 14px;
              color: #2152cb;
              text-align: center;
            }
          }
          .btn {
            height: 30px;
            line-height: 30px;
            .txt1 {
              text-align: left;
            }
            .txt2 {
              text-align: right;
              font-size: 14px;
            }
          }
        }
        .schoolList:hover {
          cursor: pointer;
          .image {
            box-shadow: 0 0 5px #ccc;
          }
        }
      }
    }
    .three6 {
      height: 85px;
      margin: 0 0 50px 0;
    }
    .three7 {
      height: 440px;
      margin: 0 0 50px 0;
      .left {
        position: relative;
        width: 49%;
        height: 440px;
        margin: 0 15px 0 0;
        border-radius: 10px;
        box-shadow: 0 10px 10px rgba(127, 126, 126, 0.3);
      }
      .right {
        position: relative;
        width: 49%;
        height: 440px;
        border-radius: 10px;
        box-shadow: 0 10px 10px rgba(127, 126, 126, 0.3);
      }
    }
    .three8 {
      min-height: 110px;
      .left {
        margin: 0 15px 0 0;
        .top {
          height: 42px;
          background-color: #d0dce6;
          .el-image {
            padding: 5px 0 0 10px;
          }
          span {
            display: inline-block;
            position: relative;
            top: -10px;
            left: 10px;
          }
        }
        .down {
          margin: 10px;
        }
      }
    }
  }
  .four {
    border-top: 2px solid #305798;
    height: 250px;
    .info {
      .left {
        h1 {
          padding: 15px 0;
          font-weight: bold;
          color: #4d4d4d;
        }
        p {
          font-size: 16px;
          color: #4d4d4d;
          padding: 5px 0;
        }
      }
      .right {
        text-align: center;
      }
    }
  }
}
</style>