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

<template>
  <div id="liveCenter">
    <el-row>
      <el-col :span="24" class="main">
        <div class="w_1200">
          <el-col :span="24" class="info">
            <el-col :span="24" class="top">
              <el-col :span="24" class="one">
                <el-col :span="16" class="left textOver">
                  <span>{{ dockInfo.title }}</span>
                  <span>展会实况</span>
                </el-col>
                <el-col :span="8" class="right">
                  <el-button class="btn1" @click="$router.push({ path: '/halltwo/directTwo', query: { id: dockInfo.id } })">返回展会进行页</el-button>
                  <el-button class="btn2" @click="$router.push({ path: '/halltwo/detail', query: { dock_id: dockInfo.id } })">进入展会总结页</el-button>
                </el-col>
              </el-col>
              <el-col :span="24" class="two">
                <p>
                  最近更新时间：<span style="color:#000;">{{ statNum.date }}</span>
                </p>
                <p>
                  参加总人数<span>{{ statNum.zrs || 0 }}</span
                  >人
                </p>
                <p>
                  对接<span>{{ statNum.jywc || 0 }}</span
                  >次
                </p>
                <p>
                  产生意向<span>{{ statNum.qthz || 0 }}</span
                  >次
                </p>
                <p>
                  达成意向<span>{{ statNum.dcyx || 0 }}</span
                  >次
                </p>
              </el-col>
              <el-col :span="24" class="three">
                滚动
              </el-col>
            </el-col>
            <el-col :span="24" class="down">
              <el-col :span="24" class="one">
                <el-col :span="4" class="left">
                  展会动态
                </el-col>
                <el-col :span="20" class="right">
                  <marquee beavior="scroll">
                    <span class="trainoneList" v-for="(item, index) in trainoneList" :key="index">
                      {{ item.market_username }}与{{ item.username }} {{ item.status == '0' ? '产生意向' : item.status == '1' ? '达成意向' : '实现对接' }}</span
                    >
                  </marquee>
                </el-col>
              </el-col>
              <el-col :span="24" class="two">
                <p>
                  <span>主办单位：</span><span>{{ dockInfo.sponsor }}</span>
                </p>
                <p>
                  <span>承办单位：</span><span>{{ dockInfo.organizer }}</span>
                </p>
                <p><span>技术支持：</span><span>长春市福瑞科技有限公司</span></p>
              </el-col>
            </el-col>
          </el-col>
        </div>
      </el-col>
    </el-row>
  </div>
</template>

<script>
import { mapState, createNamespacedHelpers } from 'vuex';
import data from '../dynamic/parts/js/code';
const { mapActions: dock } = createNamespacedHelpers('dock');
const { mapActions: transaction } = createNamespacedHelpers('transaction');
var moment = require('moment');
export default {
  metaInfo() {
    return { title: this.$route.meta.title };
  },
  name: 'liveCenter',
  props: {},
  components: {},
  data: function() {
    return {
      // 展会详情
      dockInfo: {},
      // 统计数
      statNum: {},
      // 横向滚动
      trainoneList: [],
    };
  },
  async created() {
    await this.searchInfo();
  },
  methods: {
    ...dock({ dockQuery: 'query', dockFetch: 'fetch', goodsquery: 'goodsquery' }),
    ...transaction({ tquery: 'query' }),
    async searchInfo() {
      // 查询展会详情
      if (this.dock_id) {
        let res = await this.dockFetch(this.dock_id);
        if (this.$checkRes(res)) {
          this.$set(this, `dockInfo`, res.data);
        }
        // 查询数目
        let statNum = {};
        // 当前时间
        statNum.date = moment().format('yyyy-DD-mm');
        // 总人数
        statNum.zrs = res.data.apply.length;

        // 所有
        let trans = await this.tquery({ dock_id: this.id });
        if (this.$checkRes(res)) {
          this.$set(this, `trainoneList`, trans.data);
        }
        // 正在洽谈
        let qthe = await this.tquery({ status: 0, dock_id: this.dock_id });
        if (this.$checkRes(qthe)) {
          statNum.qthz = qthe.total;
        }
        // 达成意向
        let dcyx = await this.tquery({ status: 1, dock_id: this.dock_id });
        if (this.$checkRes(dcyx)) {
          statNum.dcyx = dcyx.total;
        }
        // 交易完成
        let jywc = await this.tquery({ status: 2, dock_id: this.dock_id });
        if (this.$checkRes(jywc)) {
          statNum.jywc = jywc.total;
        }
        this.$set(this, `statNum`, statNum);
      }
    },
  },
  computed: {
    ...mapState(['user']),
    dock_id() {
      return this.$route.query.dock_id;
    },
  },
  watch: {},
};
</script>

<style lang="less" scoped>
.main {
  .info {
    background-color: #2152cb;
    .top {
      .one {
        height: 143px;
        overflow: hidden;
        .left {
          padding: 0 15px;
          height: 143px;
          line-height: 143px;
          span:nth-child(1) {
            font-size: 35px;
            color: #fff;
            font-weight: bold;
          }
          span:nth-child(2) {
            color: #fee452;
            font-size: 41px;
            font-weight: bold;
            padding: 0 10px;
            text-shadow: 3px 3px 3px #000;
          }
        }
        .right {
          text-align: right;
          padding: 4% 1%;
          .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;
          }
        }
      }
      .two {
        margin: 0 0 15px 0;
        p {
          float: left;
          width: 232px;
          height: 58px;
          margin: 0 10px 0 0;
          background-color: #fdb21e;
          text-align: center;
          line-height: 58px;
          span {
            color: blue;
          }
        }
        p:nth-child(1) {
          border-top-left-radius: 5px;
          border-bottom-left-radius: 5px;
        }
        p:nth-child(5) {
          margin: 0;
          border-top-right-radius: 5px;
          border-bottom-right-radius: 5px;
        }
      }
      .three {
        height: 500px;
        padding: 0 10px;
      }
    }
    .down {
      height: 220px;
      border-top: 1px solid #010e6b;
      background: -webkit-linear-gradient(top, #2152cb, #082e8b);
      padding: 15px;
      .one {
        height: 54px;
        border: 1px solid #fdb21e;
        .left {
          width: 120px;
          background: #fdb21e;
          border-radius: 5px;
          font-size: 18px;
          text-align: center;
          line-height: 40px;
          height: 40px;
          margin: 5px 0 0 5px;
        }
        .right {
          .trainoneList {
            display: inline-block;
            height: 54px;
            line-height: 54px;
            color: #fff;
            font-size: 16px;
            padding: 0 10px;
          }
        }
      }
      .two {
        p {
          padding: 10px 0;
          span:nth-child(1) {
            font-size: 20px;
            color: #fde350;
            letter-spacing: 15px;
          }
          span:nth-child(2) {
            font-size: 16px;
            color: #fff;
          }
        }
      }
    }
  }
}
</style>