sl-sfy-safety/src/views/message/reportmessage/TemplateExample.vue

<template>
    <div v-if="form.type === 1">
        <div class="exampleTitleDiv"><span class="exampleTitle"><b>违规报警数据示例</b></span></div>

        <div class="reportblock">
            <div>
                <div class="exampleContentTitle">报表标题:</div>
                <div class="reportTitle"> 【数据报表-违规报警数据】 </div>
            </div>

            <div style="height: 189px;">
                <div class="exampleContentTitle" style="float: left; margin-top: 0px;">内容示例:</div>
                <div class="reportTitle">
                    【统计时间段】 xxxx-xx-xx - xxxx-xx-xx <br />
                    【累计报警次数】 XX次 <br />
                    【报警类型排行TOP5】 <br />
                    &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;(1) 报警问题： 发生XX次 <br />
                    &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;(2) 报警问题： 发生XX次 <br />
                    &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;(3) 报警问题： 发生XX次 <br />
                    &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;(4) 报警问题： 发生XX次 <br />
                    &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;(5) 报警问题： 发生XX次 <br />
                </div>
            </div>
        </div>
    </div>

    
    <div v-if="form.type === 2">
        <div class="exampleTitleDiv"><span class="exampleTitle"><b>平台访问数据内容示例</b></span></div>

        <div class="reportblock">
            <div>
                <div class="exampleContentTitle">报表标题:</div>
                <div class="reportTitle"> 【数据报表-平台访问数据】 </div>
            </div>

            <div style="height: 189px;">
                <div class="exampleContentTitle" style="float: left; margin-top: 0px;">内容示例:</div>
                <div class="reportTitle">
                    【统计时间段】 xxxx-xx-xx - xxxx-xx-xx <br />
                    【平台累计访问次数】 XX次 <br />
                    【车间访问数量排行TOP5】 <br />
                    &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;(1) 车间一:  被访问XX次 <br />
                    &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;(2) 车间二:  被访问XX次 <br />
                    &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;(3) 车间三:  被访问XX次 <br />
                    &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;(4) 车间四:  被访问XX次 <br />
                    &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;(5) 车间五:  被访问XX次 <br />
                </div>
            </div>
        </div>
    </div>

    
    <div v-if="form.type === 3">
        <div class="exampleTitleDiv"><span class="exampleTitle"><b>人员访问数据内容示例</b></span></div>

        <div class="reportblock">
            <div>
                <div class="exampleContentTitle">报表标题:</div>
                <div class="reportTitle"> 【数据报表-人员访问数据】 </div>
            </div>

            <div style="height: 189px;">
                <div class="exampleContentTitle" style="float: left; margin-top: 0px;">内容示例:</div>
                <div class="reportTitle">
                    【统计时间段】 xxxx-xx-xx - xxxx-xx-xx <br />
                    【人员平台访问数据】 <br />
                    &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;(1) 人员1:  访问XX次, 其中访问车间1XX次<br />
                    &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;(2) 人员2:  访问XX次, 其中访问车间1XX次 <br />
                    &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;(3) 人员3:  访问XX次, 其中访问车间1XX次 <br />
                    &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;(4) 人员4:  访问XX次, 其中访问车间1XX次 <br />
                    &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;(5) 人员5:  访问XX次, 其中访问车间1XX次 <br />
                </div>
            </div>
        </div>
    </div>
</template>

<script lang="ts" setup>
  const prop = defineProps(['form', 'disableType'])
</script>

<style>

.exampleTitleDiv{
    width: 448px;
    height: 44px;
    background: #FAFAFA;
    border-radius: 3px 3px 0px 0px;
    border: 1px solid #E9E9E9;
  }

  .exampleTitle{
    display: inline-block;
    width: 182px;
    height: 22px;
    font-family: PingFangSC, PingFang SC;
    font-weight: 500;
    font-size: 14px;
    color: rgba(0,0,0,0.85);
    line-height: 22px;
    text-align: left;
    font-style: normal;
    margin-left: 24px;
    margin-top: 11px;
  }

  .exampleContentTitle{
    display: inline-block;
    width: 70px;
    height: 22px;
    font-family: PingFangSC, PingFang SC;
    font-weight: 400;
    font-size: 14px;
    color: #303133;
    line-height: 22px;
    text-align: left;
    font-style: normal;
    text-transform: none;
    margin-left: 24px;
    margin-top: 16px;
  }

  .reportblock {
    background: #FFFFFF;
    border-radius: 4px 4px 0px 0px;
    /* border: 1px solid #E9E9E9; */
  }

  .reportTitle {
    display: inline-block;
    width: 245;
    height: 22px;
    font-family: PingFangSC, PingFang SC;
    font-weight: 400;
    font-size: 14px;
    color: rgba(0,0,0,0.45);
    line-height: 22px;
    text-align: left;
    font-style: normal;
  }
</style>