web-test/src/views/hallList/zongjie.vue

<template>
  <div id="zongjie">
    <el-row>
      <div class="w_1200">
        <el-col :span="24" class="main">
          <el-col :span="24" class="top"> {{ zjinfo.top }}展会总结 </el-col>
          <el-col :span="24" class="info">
            <el-col :span="24" class="one">
              <p>
                <span>{{ zjinfo.top }}</span
                >展会由<span>{{ zjinfo.name }}</span
                >主办,<span>{{ zjinfo.juban }}</span
                >承办，<span>{{ zjinfo.xieban }}</span
                >协办，<span>{{ zjinfo.fr }}</span
                >提供技术支持，展会已经圆满结束。
              </p>
              <p>
                本次展会到会人数:<span>{{ zjinfo.person }}</span
                >人，其中特邀嘉宾<span>{{ zjinfo.jiabin }}</span
                >人。同时还邀请了<span>{{ zjinfo.school }}</span
                >所高校、研究机构的<span>{{ zjinfo.zhuanjia }}</span
                >位专家到参与在线对接。
              </p>
              <p>
                参加本次展会的项目共<span>{{ zjinfo.xiang }}</span
                >项。其中，有自于高校院所的项目成果共<span>{{ zjinfo.shcoolxiang }}</span
                >项；专利共<span>{{ zjinfo.zhuanli }}</span
                >项成熟度处于中试及产业化阶段的项目成果共<span>{{ zjinfo.chengguo }}</span
                >项。
              </p>
              <p>
                本次展会共征集到技术需求<span>{{ zjinfo.xuqiu }}</span
                >项，其中<span>{{ zjinfo.jishu }}</span
                >项技术需求来自展会主办地区。
              </p>
              <p>
                本次在线展会共实现技术对接<span>{{ zjinfo.duijie }}</span
                >次，达成意向<span>{{ zjinfo.yixiang }}</span
                >次，实现合作<span>{{ zjinfo.hezuo }}</span
                >次。此次展会还吸引了<span>{{ zjinfo.fangke }}</span
                >访客在线观摩，产生了强烈的反响。共收到鲜花<span>{{ zjinfo.hua }}</span
                >束，掌声<span>{{ zjinfo.sheng }}</span
                >次。
              </p>
            </el-col>
            <el-col :span="24" class="two">
              <el-col :span="24" class="tables">
                <span>到会人数</span>
                <span>{{ zjinfo.renshu }}人</span>
                <span> 参展项目</span>
                <span>{{ zjinfo.xiangmu }}项</span>
                <span>技术需求</span>
                <span>{{ zjinfo.xuqiu }}项</span>
              </el-col>
              <el-col :span="24" class="tables">
                <span>洽谈对接</span>
                <span>{{ zjinfo.renshu }}次</span>
                <span>产生意向</span>
                <span>{{ zjinfo.xiangmu }}次</span>
                <span>达成意向</span>
                <span>{{ zjinfo.xuqiu }}次</span>
              </el-col>
            </el-col>
            <el-col :span="24" class="three">
              <el-tabs v-model="act">
                <el-tab-pane name="0" label="产品发布统计">
                  <pie :data="productList" :axis="proAxis" gid="pie0" v-if="act == 0"></pie>
                </el-tab-pane>
                <el-tab-pane name="1" label="人员参会统计">
                  <donut :data="personList" :axis="perAxis" gid="donut1" v-if="act == 1"></donut>
                </el-tab-pane>
                <el-tab-pane name="2" label="交易统计">
                  <bar :data="transList" :axis="transAxis" gid="bar2" v-if="act == 2"></bar>
                </el-tab-pane>
              </el-tabs>
            </el-col>
          </el-col>
        </el-col>
      </div>
    </el-row>
  </div>
</template>

<script>
import _ from 'lodash';
import { mapState, createNamespacedHelpers } from 'vuex';
import pie from '@c/statistics/pie.vue';
import bar from '@c/statistics/bar.vue';
import donut from '@c/statistics/donut.vue';
const { mapActions: dock } = createNamespacedHelpers('dock');
const { mapActions: transaction } = createNamespacedHelpers('transaction');
const { mapActions: marketproduct } = createNamespacedHelpers('marketproduct');
export default {
  name: 'zongjie',
  props: {},
  components: { pie, donut, bar }, //
  data: () => ({
    act: '0',
    productList: [],
    proTitle: ['技术', '产品', '服务'],
    proAxis: { x: 'name', xAlias: '产品类型', y: 'value', yAlias: '数量' },
    personList: [],
    perAxis: { x: 'name', xAlias: '用户类型', y: 'value', yAlias: '人数' },
    transList: [],
    transAxis: { x: 'name', xAlias: '交易动态', y: 'value', yAlias: '数量' },
    zjinfo: {
      top: '计算中心',
      title: '测试直播',
      name: '吉林省计算中心',
      juban: '中科院长春分院',
      xieban: '中科院计算机网络信息中心和吉林省计算中心',
      fr: '长春福瑞科技有限公司',
      person: '300',
      jiabin: '20',
      school: '5',
      zhuanjia: '12',
      xiang: '12',
      shcoolxiang: '10',
      zhuanli: '20',
      chengguo: '46',
      xuqiu: '12',
      jishu: '23',
      duijie: '33',
      yixiang: '33',
      hezuo: '23',
      fangke: '1',
      hua: '1',
      sheng: '23',
      renshu: '234',
      xiangmu: '233',
      xuqiu: '123',
    },
  }),
  created() {
    this.searchInfo();
  },
  computed: {
    id() {
      return this.$route.query.id;
    },
  },
  methods: {
    ...dock({ dockQuery: 'query', dockFetch: 'fetch' }),
    ...marketproduct({ productQuery: 'query' }),
    ...transaction({ transQuery: 'query' }),
    async searchInfo() {
      let res = await this.dockFetch(this.id);
      let resPro = await this.productQuery();
      let resTran = await this.transQuery({ dockid: this.id });
      if (this.$checkRes(res)) this.proPerson(res.data);
      if (this.$checkRes(resPro)) this.proProduct(resPro.data);
      if (this.$checkRes(resTran)) this.proTrans(resTran.data);
      this.zjinfo.top = res.data.title;
    },
    proProduct(data) {
      let garr = _.groupBy(data, 'totaltype');
      let keys = Object.keys(garr);
      let res = keys.map(i => {
        let obj = { value: garr[i].length, type: i };
        if (i == 0) obj.name = '技术';
        if (i == 1) obj.name = '产品';
        if (i == 2) obj.name = '服务';
        return obj;
      });
      let r = res.some(f => f.type == 0);
      if (!r) res.push({ value: 0, name: '技术', type: 0 });
      r = res.some(f => f.type == 1);
      if (!r) res.push({ value: 0, name: '产品', type: 1 });
      r = res.some(f => f.type == 2);
      if (!r) res.push({ value: 0, name: '服务', type: 2 });
      this.$set(this, `productList`, res);
    },
    proPerson(data) {
      let garr = _.groupBy(_.get(data, 'apply', []), 'role');
      let keys = Object.keys(garr);
      let res = keys.map(i => {
        let obj = { value: garr[i].length, type: i };
        if (i == 2) obj.name = '个人';
        if (i == 3) obj.name = '机构';
        if (i == 6) obj.name = '专家';
        return obj;
      });
      //查类型,个人,机构,专家,没有的填0
      let r = res.some(f => f.type == 2);
      if (!r) res.push({ value: 0, name: '个人', type: 2 });
      r = res.some(f => f.type == 3);
      if (!r) res.push({ value: 0, name: '机构', type: 3 });
      r = res.some(f => f.type == 6);
      if (!r) res.push({ value: 0, name: '专家', type: 6 });
      this.$set(this, `personList`, res);
    },
    proTrans(data) {
      let garr = _.groupBy(data, 'status');
      let keys = Object.keys(garr);
      let res = keys.map(i => {
        let obj = { value: garr[i].length, type: i };
        if (i == 0) obj.name = '正在洽谈';
        if (i == 1) obj.name = '达成意向';
        if (i == 2) obj.name = '对接完成';
        return obj;
      });
      //查类型,个人,机构,专家,没有的填0
      let r = res.some(f => f.type == 0);
      if (!r) res.push({ value: 0, name: '正在洽谈', type: 0 });
      r = res.some(f => f.type == 1);
      if (!r) res.push({ value: 0, name: '达成意向', type: 1 });
      r = res.some(f => f.type == 2);
      if (!r) res.push({ value: 0, name: '对接完成', type: 2 });
      this.$set(this, `transList`, res);
    },
  },
};
</script>

<style lang="less" scoped>
.w_1200 {
  width: 80%;
  margin: 0 auto;
}
.main {
  min-height: 600px;
  margin: 30px 0;
}
p {
  padding: 0;
  margin: 0;
}
.textOver {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.main .top {
  text-align: center;
  font-size: 30px;
  padding: 30px 0;
}
.main .info {
  font-size: 20px;
  padding: 0 200px;
}
// .main .info .one {
// }
.main .info .one p {
  line-height: 50px;
  font-size: 20px;
}
.main .info .one p span {
  text-decoration: underline;
  padding: 0 10px;
  color: red;
}
.main .info .two {
  text-align: center;
  margin: 20px 0 0 0;
}
.main .info .two .tables span:nth-child(1n) {
  background: #ffdc6d;
  text-align: center;
  width: 100px;
  display: inline-block;
  padding: 10px 0;
  margin: 0 10px 5px 0;
}
.main .info .two .tables span:nth-child(2n) {
  padding: 10px 0;
  text-align: center;
  background: #ffe0ba;
  display: inline-block;
  width: 100px;
}
// .main .info .two .tables span:nth-child(2){
//   background: red;
//   text-align: center;
//   width: 100px;
//   display: inline-block;
//   padding: 10px 0;
// }
// .main .info .two .tables span:nth-child(2) {
//   padding: 10px 0;
//   text-align: center;
//   background: #ccc;
//   display: inline-block;
//   width: 100px;
// }
// .main .info .two .tables span:nth-child(2) {
//   background: red;
//   text-align: center;
//   width: 100px;
//   display: inline-block;
//   padding: 10px 0;
// }
// .main .info .two .tables span:nth-child(2) {
//   padding: 10px 0;
//   text-align: center;
//   background: #ccc;
//   display: inline-block;
//   width: 100px;
// }
// .main .top p:last-child {
//   font-size: 30px;
//   color: #fff;
//   position: absolute;
//   width: 100%;
//   top: 135px;
// }
// .main .info {
//   min-height: 600px;
//   border: 1px solid red;
//   background: #fff;
//   padding: 30px 20px;
// }
// .main .info .context p {
//   font-size: 16px;
//   padding: 20px 0 20px 0;
// }

// .main .info .tables {
//   font-size: 16px;
// }

// .main .info .tables span::nth-child(n) {
//   background-color: red;
// }

// .main .info .tables span::nth-child(2n) {
//   background-color: blue;
// }
</style>