main.vue

<!--
 * @Description: 
 * @Author: jml
 * @Date: 2021-02-26 15:38:10
 * @LastEditors: Please set LastEditors
 * @LastEditTime: 2022-04-20 13:26:04
-->
<template>
  <div class="xrk-components-bi bi" :class="{ 'bi-print': print }">
    <template
      v-if="[5, 7, 20].includes(+projectType)"
      name="医学助手项目调研-医生调查问卷-可配置场景"
    >
      <BiConfigurableMobile v-if="mobile"></BiConfigurableMobile>
      <BiConfigurable v-else></BiConfigurable>
    </template>
    <template v-if="projectType == 6">
      <BiZoneMobile v-if="mobile"></BiZoneMobile>
      <BiZone v-else></BiZone>
    </template>
    <template v-if="projectType == 21">
      <BiDigitalQuestionnaire></BiDigitalQuestionnaire>
    </template>
    <template v-if="projectType == 2" name="otc拜访">
      <BiOtc></BiOtc>
    </template>
    <template v-if="projectType == 9" name="等级医院拜访">
      <BiGradeHospital></BiGradeHospital>
    </template>
    <template v-if="projectType == 10" name="基层医疗机构拜访">
      <BiJcyl></BiJcyl>
    </template>
  </div>
</template>

<script>
import mixin from './mixin/index';
import BiConfigurable from './project/20-configurable.vue';
import BiConfigurableMobile from './project/20-configurable-mobile.vue';
import BiZone from './project/6-zone.vue';
import BiZoneMobile from './project/6-zone-mobile.vue';
import BiOtc from './project/2-otc.vue';
import BiJcyl from './project/10-jcyl.vue';
import BiGradeHospital from './project/9-gradeHospital.vue';
import BiDigitalQuestionnaire from './project/21-digitalQuestionnaire.vue';

export default {
  name: 'XrkBi',
  mixins: [mixin],
  provide() {
    return {
      Bi: this
    };
  },
  props: {
    mobile: [Number, String, Boolean],
    print: [Number, String, Boolean],
    useScale: [Number, String, Boolean],
    cantEdit: [Number, String],
    projectType: [Number, String],
    from: [Number, String],
    getBaseInfo: {
      type: Function,
      default: () => {}
    },
    getFixedInfo: {
      type: Function,
      default: () => {}
    },
    getTopicInfo: {
      type: Function,
      default: () => {}
    },
    getGroupInfo: {
      type: Function,
      default: () => {}
    },
    saveInfo: {
      type: Function,
      default: () => {}
    },
    exportBi: {
      type: Function,
      default: () => {}
    },
    getTemplateList: {
      type: Function,
      default: () => {}
    }
  },
  components: {
    BiConfigurable,
    BiConfigurableMobile,
    BiZone,
    BiZoneMobile,
    BiOtc,
    BiJcyl,
    BiGradeHospital,
    BiDigitalQuestionnaire
  },
  methods: {
    setFontSize() {
      if (this.isMobile) {
        document.getElementsByTagName('html')[0].style.fontSize =
          this.baseFontSize + 'px';
      }
    }
  },
  created() {
    this.setFontSize();
  }
};
</script>
<style lang="scss">
body,
p,
div {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}
.custom-dialog {
  .el-dialog {
    border-radius: 12px;
    &__header {
      text-align: center;
      font-size: 24px;
      color: #333333;
    }
    &__body {
      text-align: center;
    }
    &__footer {
      text-align: center;
      .el-button {
        width: 82px;
        height: 33px;
        line-height: 33px;
        padding: 0;
      }
    }
  }
}
.bi {
  &-block {
    width: 1200px;
    border-radius: 4px;
    overflow: hidden;
    border: 1px solid #f4f4f4;
    background: #fff;
    &.no-border {
      border-color: transparent;
      background: transparent;
    }
  }
}
.bi-web-hr {
  width: 100%;
  height: 23px;
  height: 0.4rem;
  max-height: 23px;
  background-color: #f9fafc;
}
.mobile {
  .bi-web-hr {
    width: 10rem;
    height: 0.4rem;
  }
  &.bi-block {
    width: 10rem;
  }
}
</style>
<style lang="scss" scoped>
.xrk-components-bi {
  width: 1200px;
  // background-color: red;
  background: #f9fafc;
  line-height: 1;
  position: relative;
  &.bi-print {
    &::after {
      content: '';
      position: absolute;
      width: 100%;
      height: 100%;
      left: 0;
      top: 0;
      z-index: 11;
      background-image: url('http://cdn.yxvzb.com/WEB/SaaS/images/bi/watermark-bi.png?v=1');
      background-repeat: repeat;
    }
  }
}
</style>