Web前台开发

<template>
  <div class="customer-info" ref="customerInfo">
    <div class="customer-info-col">
      <div class="photo">
        <img src="@/assets/img/custom-photo.png" alt="" />
      </div>
      <div class="name">
        <div class="text">Denis</div>
        <div class="grade">
          <img src="@/assets/img/grade.png" alt="" />
        </div>
      </div>
      <div class="custom-number">Service NO.907 135 089</div>
      <div class="grade-progress">
        <sweet-progress
            :text-inside="true"
            :stroke-width="32"
            :percentage="27"
            :show-text="false"
            color="#7fc823"
        />
      </div>

      ...

    </div>
    <div class="customer-info-col">
      <div class="title">Bill History</div>
      <div class="echarts" ref="main" id="echarts-main"></div>
    </div>
  </div>
</template>

<script>
...
</script>

<style lang="less" scoped>
...
</style>

通过vue父子组件引用的方式，将子页面CustomerInfoDemo.vue嵌入座席流程可视化的父页面servicecloud/aicc-web/src/views/ccmanagement/pages/iolp-service/IolpService.vue中。

示例代码如下：

  <sweet-scrollbar class="iolp-right-scroll">
    <!-- 自定义页面 -->
    <div class="overview-label">
      <span>{{ $t('iolp.run.service.label.customizedPage') }}</span>
      <i :class="custPageShowFlag ? 'sweetui-icon-arrow-add iolp-arrow' : 'sweetui-icon-arrow-minus iolp-arrow'"
 @click="showOrHideCustPage"></i>
    </div>
    <div class="customized-page" v-if="custPageShowFlag && pageUrl == 'CustomerInfoDemo.vue'">
      <CustomerInfoDemo/>
    </div>
	
    ...
	
  </sweet-col>