elizebeth/src/xt_pages/workforce/printOne.vue

<template>
  <div class="main-contain">
    <div class="position">
      <bread-crumb :crumbs="crumbs" style="flex:1;"></bread-crumb>
      <el-row style="float: right;margin-right: 20px;">
        <el-col :span="24">
          <el-button
            size="small"
            type="success"
            @click="hiddenBtn"
            >{{hiddenText}}</el-button
          >
        </el-col>
      </el-row>
      <el-row style="float: right">
        <el-col :span="24">
          <el-button
            size="small"
            icon="el-icon-printer"
            type="primary"
            @click="printAction"
            >打印</el-button
          >
        </el-col>
      </el-row>
    </div>
    <div class="app-container" style="background-color: white">
      <div id="print_content">
        <div
          class="print_main_content"
          v-for="(item, index) in tableData"
          :key="index"
        >
          <div class="order_title_panl">
            <span class="main_title"
              >{{ getTimeOne(item.schedule_date) }}&nbsp;
              <span v-if="item.schedule_type == 1">上午</span>
              <span v-if="item.schedule_type == 2">下午</span>
              <span v-if="item.schedule_type == 3">晚上</span>
            </span>
          </div>
          <div class="table_panel">
            <table class="table">
              <thead>
                <tr>
                  <td :width="td_1_width">分区</td>

                  <td :width="td_3_width">病人姓名</td>

                  <td :width="td_3_width" v-if="hiddenFlag == false">统计</td>
                </tr>
              </thead>
              <tbody>
                <tr v-for="(it, i) in item.zones" :key="i">
                  <td :width="td_1_width">
                    <span v-if="hiddenFlag == false">总人数: {{getZonePatient(it.partition_id,item.schedule_type)}}<span v-if="getZonePatient(it.partition_id,item.schedule_type)>0">人</span><br/></span> 
                    {{ getZoneName(it.partition_id) }}
                  </td>
                  <td :width="td_3_width" valign="top">
                    <div style="min-height: 80px">
                      <div class="proj">
                        <div class="proj_item" style="font-size:20px">
                          <p v-html="getPatientName(item.schedule_type,it.partition_id)" class="zone_name" style="font-size:20px">
                            
                          </p>
                        </div>
                      </div>
                    </div>
                  </td>
                  <td :width="td_3_width" v-if="hiddenFlag == false">                    
                    <span v-if="getMonPatient(it.partition_id)>0 || getMonAfterPatient(it.partition_id)>0 || getNightPatient(it.partition_id) >0"></span>血滤(HDF):<br>
                     <span v-if="getMonPatient(it.partition_id)>0 && item.schedule_type == 1">上午:{{getMonPatient(it.partition_id)}}人</span><br>
                      <span v-if="item.schedule_type ==1"> {{getMonPatientName(it.partition_id)}} </span><br>

                     <span v-if="getMonAfterPatient(it.partition_id)>0 && item.schedule_type == 2">下午：{{getMonAfterPatient(it.partition_id)}}人</span>  <br>
                      <span v-if="item.schedule_type == 2"> {{getMonAfterPatientName(it.partition_id) }}</span>  <br>

                     <span v-if="getNightPatient(it.partition_id) >0 && item.schedule_type == 3">晚上：{{getNightPatient(it.partition_id)}}人 </span> <br>
                       <span v-if="item.schedule_type == 3"> {{getNightPatientName(it.partition_id) }}</span> 
                     <br>

                     <span v-if="getMonPatientOne(it.partition_id)>0 || getMonAfterPatientOne(it.partition_id)>0 || getNightPatientOne(it.partition_id) >0">灌流(HD+HP):</span><br>
                     <span v-if="getMonPatientOne(it.partition_id)>0 && item.schedule_type == 1">上午:{{getMonPatientOne(it.partition_id)}}人</span><br>
                       <span v-if="item.schedule_type == 1"> {{getMonPatientNameOne(it.partition_id)}}</span> <br>

                     <span v-if="getMonAfterPatientOne(it.partition_id)>0 && item.schedule_type == 2">下午：{{getMonAfterPatientOne(it.partition_id)}}人</span>  <br>
                      <span v-if="item.schedule_type == 2">{{getMonAfterPatientNameOne(it.partition_id) }} </span>  <br>

                     <span v-if="getNightPatientOne(it.partition_id) >0 && item.schedule_type == 3">晚上：{{getNightPatientOne(it.partition_id)}}人 </span> <br>
                      <span v-if="item.schedule_type == 3">{{getNightPatientNameOne(it.partition_id) }}</span>  
                  </td>
                </tr>
              </tbody>
            </table>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import { GetAllZone, getSchedualPrintList } from '@/api/dialysis'
import { parseTime } from '@/utils'
import { uParseTime } from '@/utils/tools'
import { getDataConfig } from '@/utils/data'
import BreadCrumb from '@/xt_pages/components/bread-crumb'
import print from 'print-js'
export default {
  name: 'SchedulePrint',
  data() {
    return {
      crumbs: [
        { path: false, name: '排班管理' },
        { path: false, name: '排班打印' }
      ],
      td_1_width: '8%',
      td_2_width: '8%',
      td_3_width: '64%',
      td_4_width: '20%',

      month: 1,
      hiddenFlag: false,
      hiddenText: '隐藏备注',
      begin_day: 1,

      schedules: [
        {
          day: 1,
          weekday: '星期一',
          all: {
            am: {
              /* zone_name: [ schedule, ... ] */
            },
            pm: {
              /* zone_name: [ schedule, ... ] */
            },
            evening: {
              /* zone_name: [ schedule, ... ] */
            }
          },
          hdf: [
            /* schedule, ... */
          ],
          hd_hp: [
            /* schedule, ... */
          ],

          new_hdf: {
            am: {
              /* zone_name: [ schedule, ... ] */
            },
            pm: {
              /* zone_name: [ schedule, ... ] */
            },
            evening: {
              /* zone_name: [ schedule, ... ] */
            }
          },
          new_hd_hp: {
            am: {
              /* zone_name: [ schedule, ... ] */
            },
            pm: {
              /* zone_name: [ schedule, ... ] */
            },
            evening: {
              /* zone_name: [ schedule, ... ] */
            }
          }
        },
        {
          day: 2,
          weekday: '星期二',
          all: {
            am: {
              /* zone_name: [ schedule, ... ] */
            },
            pm: {
              /* zone_name: [ schedule, ... ] */
            },
            evening: {
              /* zone_name: [ schedule, ... ] */
            }
          },
          hdf: [
            /* schedule, ... */
          ],
          hd_hp: [
            /* schedule, ... */
          ],
          new_hdf: {
            am: {
              /* zone_name: [ schedule, ... ] */
            },
            pm: {
              /* zone_name: [ schedule, ... ] */
            },
            evening: {
              /* zone_name: [ schedule, ... ] */
            }
          },
          new_hd_hp: {
            am: {
              /* zone_name: [ schedule, ... ] */
            },
            pm: {
              /* zone_name: [ schedule, ... ] */
            },
            evening: {
              /* zone_name: [ schedule, ... ] */
            }
          }
        },
        {
          day: 3,
          weekday: '星期三',
          all: {
            am: {
              /* zone_name: [ schedule, ... ] */
            },
            pm: {
              /* zone_name: [ schedule, ... ] */
            },
            evening: {
              /* zone_name: [ schedule, ... ] */
            }
          },
          hdf: [
            /* schedule, ... */
          ],
          hd_hp: [
            /* schedule, ... */
          ],
          new_hdf: {
            am: {
              /* zone_name: [ schedule, ... ] */
            },
            pm: {
              /* zone_name: [ schedule, ... ] */
            },
            evening: {
              /* zone_name: [ schedule, ... ] */
            }
          },
          new_hd_hp: {
            am: {
              /* zone_name: [ schedule, ... ] */
            },
            pm: {
              /* zone_name: [ schedule, ... ] */
            },
            evening: {
              /* zone_name: [ schedule, ... ] */
            }
          }
        },
        {
          day: 4,
          weekday: '星期四',
          all: {
            am: {
              /* zone_name: [ schedule, ... ] */
            },
            pm: {
              /* zone_name: [ schedule, ... ] */
            },
            evening: {
              /* zone_name: [ schedule, ... ] */
            }
          },
          hdf: [
            /* schedule, ... */
          ],
          hd_hp: [
            /* schedule, ... */
          ],
          new_hdf: {
            am: {
              /* zone_name: [ schedule, ... ] */
            },
            pm: {
              /* zone_name: [ schedule, ... ] */
            },
            evening: {
              /* zone_name: [ schedule, ... ] */
            }
          },
          new_hd_hp: {
            am: {
              /* zone_name: [ schedule, ... ] */
            },
            pm: {
              /* zone_name: [ schedule, ... ] */
            },
            evening: {
              /* zone_name: [ schedule, ... ] */
            }
          }
        },
        {
          day: 5,
          weekday: '星期五',
          all: {
            am: {
              /* zone_name: [ schedule, ... ] */
            },
            pm: {
              /* zone_name: [ schedule, ... ] */
            },
            evening: {
              /* zone_name: [ schedule, ... ] */
            }
          },
          hdf: [
            /* schedule, ... */
          ],
          hd_hp: [
            /* schedule, ... */
          ],
          new_hdf: {
            am: {
              /* zone_name: [ schedule, ... ] */
            },
            pm: {
              /* zone_name: [ schedule, ... ] */
            },
            evening: {
              /* zone_name: [ schedule, ... ] */
            }
          },
          new_hd_hp: {
            am: {
              /* zone_name: [ schedule, ... ] */
            },
            pm: {
              /* zone_name: [ schedule, ... ] */
            },
            evening: {
              /* zone_name: [ schedule, ... ] */
            }
          }
        },
        {
          day: 6,
          weekday: '星期六',
          all: {
            am: {
              /* zone_name: [ schedule, ... ] */
            },
            pm: {
              /* zone_name: [ schedule, ... ] */
            },
            evening: {
              /* zone_name: [ schedule, ... ] */
            }
          },
          hdf: [
            /* schedule, ... */
          ],
          hd_hp: [
            /* schedule, ... */
          ],
          new_hdf: {
            am: {
              /* zone_name: [ schedule, ... ] */
            },
            pm: {
              /* zone_name: [ schedule, ... ] */
            },
            evening: {
              /* zone_name: [ schedule, ... ] */
            }
          },
          new_hd_hp: {
            am: {
              /* zone_name: [ schedule, ... ] */
            },
            pm: {
              /* zone_name: [ schedule, ... ] */
            },
            evening: {
              /* zone_name: [ schedule, ... ] */
            }
          }
        },
        {
          day: 7,
          weekday: '星期日',
          all: {
            am: {
              /* zone_name: [ schedule, ... ] */
            },
            pm: {
              /* zone_name: [ schedule, ... ] */
            },
            evening: {
              /* zone_name: [ schedule, ... ] */
            }
          },
          hdf: [
            /* schedule, ... */
          ],
          hd_hp: [
            /* schedule, ... */
          ],
          new_hdf: {
            am: {
              /* zone_name: [ schedule, ... ] */
            },
            pm: {
              /* zone_name: [ schedule, ... ] */
            },
            evening: {
              /* zone_name: [ schedule, ... ] */
            }
          },
          new_hd_hp: {
            am: {
              /* zone_name: [ schedule, ... ] */
            },
            pm: {
              /* zone_name: [ schedule, ... ] */
            },
            evening: {
              /* zone_name: [ schedule, ... ] */
            }
          }
        }
      ],

      total: [],
      list: [],
      schedule_date: '',
      schedule_type: 0,
      partition_type: 0,
      keywords: '',
      loading: false,
      tableData: [],
      numberList: [],
      partitionArr: []
    }
  },
  components: {
    BreadCrumb
  },
  created() {
    var date = new Date().getTime()
    if (this.$route.query.date) {
      date = this.$route.query.date
    }
    var date_str = parseTime(date, '{y}-{m}-{d}')

    this.month = parseInt(parseTime(date, '{m}'))
    this.getAllZone()
    this.getlist()
  },
  methods: {
    hiddenBtn() {
      if (this.hiddenFlag) {
        this.hiddenFlag = false
        this.hiddenText = '隐藏备注'
      } else {
        this.hiddenFlag = true
        this.hiddenText = '显示备注'
      }
    },
    getAllZone() {
      GetAllZone().then((response) => {
        if (response.data.state == 0) {
          this.$message.error(response.data.msg)
          return false
        } else {
          this.partitionArr = response.data.data.zone
        }
      })
    },
    getlist() {
      var params = {
        schedule_date: this.$route.query.schedule_date,
        schedule_type: parseInt(this.$route.query.schedule_type),
        partition_type: parseInt(this.$route.query.partition_type),
        keywords: this.$route.query.keywords,
        page: 1,
        limit: 5000
      }
      this.loading = true
      this.tableData = []
      getSchedualPrintList(params).then((response) => {
        if (response.data.state == 1) {
          this.loading = false
          console.log('111111',response.data.data);
          var list = response.data.data.list
          this.list = list
          var listOne = response.data.data.listOne
          if (list != null && list.length > 0) {
            const dataInfo = {}
            list.forEach((item, index) => {
              const { schedule_type } = item
              if (!dataInfo[schedule_type]) {
                dataInfo[schedule_type] = {
                  schedule_type: item.schedule_type,
                  schedule_date: item.schedule_date,
                  zones: []
                }
              }
            })
            const arr = Object.values(dataInfo)
            console.log('arr222', arr)

            if (arr != null && arr.length > 0) {
              for (let i = 0; i < arr.length; i++) {
                for (let j = 0; j < listOne.length; j++) {
                  if (arr[i].schedule_type == listOne[j].schedule_type) {
                    arr[i].zones.push(listOne[j])
                  }
                }
              }
            }
            console.log('排班数据------------------', arr)

            this.tableData = arr
          }

          this.numberList = response.data.data.numberList
          console.log('list2332233232wo', list)
          console.log('numberList', this.numberList)
        }
      })
    },
    getTimeOne(val) {
      if (val == '') {
        return ''
      } else {
        return uParseTime(val, '{y}-{m}-{d}')
      }
    },
    getPatientNum(week, type) {
      if (week == '星期一') {
        week = 1
      } else if (week == '星期二') {
        week = 2
      } else if (week == '星期三') {
        week = 3
      } else if (week == '星期四') {
        week = 4
      } else if (week == '星期五') {
        week = 5
      } else if (week == '星期六') {
        week = 6
      } else if (week == '星期日') {
        week = 7
      }
      let num = 0
      this.total.map((item) => {
        if (item.schedule_week == week && item.schedule_type == type) {
          num = item.Count
        }
      })
      return num
    },
    patient_names: function(schedules) {
      var names = []
      for (let index = 0; index < schedules.length; index++) {
        const schedule = schedules[index]
        console.log(schedule)

        names.push(schedule.patient.name)
      }
      const obj = {}
      names = names.reduce((cur, next) => {
        obj[next] ? '' : (obj[next] = true && cur.push(next))
        return cur
      }, []) // 设置cur默认类型为数组，并且初始值为空的数组
      console.log('names', names)
      return names.join('、')
    },
    patient_other_names: function(schedules) {
      const am = []
      const pm = []
      const evening = []

      var names = []
      for (let index = 0; index < schedules.length; index++) {
        const schedule = schedules[index]
        console.log(schedule)

        names.push(schedule.patient.name)

        if (schedule.schedule_type == 1) {
          am.push(schedule.patient.name)
        } else if (schedule.schedule_type == 2) {
          pm.push(schedule.patient.name)
        } else if (schedule.schedule_type == 3) {
          evening.push(schedule.patient.name)
        }
      }
      const obj = {}
      names = names.reduce((cur, next) => {
        obj[next] ? '' : (obj[next] = true && cur.push(next))
        return cur
      }, []) // 设置cur默认类型为数组，并且初始值为空的数组
      var str = ''

      if (am.length > 0) {
        str =
          '上午:' +
          am.length +
          '人' +
          '<br/>' +
          '&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;' +
          am.join('、') +
          '<br/>'
      }

      if (pm.length > 0) {
        str =
          str +
          '下午:' +
          pm.length +
          '人' +
          '<br/>' +
          '&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;' +
          pm.join('、') +
          '<br/>'
      }

      if (evening.length > 0) {
        str =
          str +
          '晚上:' +
          evening.length +
          '人' +
          '<br/>' +
          '&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;' +
          evening.join('、')
      }
      return str
    },
    printAction: function() {
      const style =
        '@media print { .print_main_content { background-color: white; width:960px;  margin:0 auto; padding: 0 0 20px 0; } .order_title_panl { text-align: center; } .main_title { font-size: 18px; line-height: 40px; font-weight: 500; } .table_panel { } .table { width: 100%; border: 1px solid; border-collapse: collapse; padding: 2px; } thead tr td { border: 1px solid; text-align: center; font-size: 20px; padding: 15px 5px; } tbody tr td { border: 1px solid; text-align: center; font-size: 20px; padding: 10px 5px; } .proj { padding: 5px 0; text-align: left; } .proj_title { font-size: 20px; font-weight: 500; line-height: 25px; } .proj_item { font-size: 20px; line-height: 20px; } .zone_name { font-weight: 500; } }'

      printJS({
        printable: 'print_content',
        type: 'html',
        documentTitle: '  ',
        style: style,
        scanStyles: false
      })
    },
    getPatientName(schedule_type, partition_id) {
      var str = ''
      var arr = []
      if (this.list != null && this.list.length > 0) {
        for (let i = 0; i < this.list.length; i++) {
          if (this.list[i].schedule_type == schedule_type && this.list[i].partition_id == partition_id) {
            arr.push(this.list[i])
          }
        }
      }

      if (arr.length > 0) {
        for (let i = 0; i < arr.length; i++) {
          arr[i].name = this.nameSplit(arr[i].name)
          if (this.hiddenFlag) {
            str += arr[i].name + '&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp '
          } else {
            str += arr[i].name + '(' + '上次床位:' + arr[i].order.DeviceNumber.zone.name + '-' + arr[i].order.DeviceNumber.number + '  ' + '血管通路:' + this.getBloodAccess(arr[i].order.blood_access_id) + '  ' + '排班备注:' + arr[i].order.schedule_remark + ')<br/>'
          }
        }
      }
      console.log(str, 'strstrstr')
      return str.slice(0, str.length - 1)
    },
    // 切割患者姓名
    nameSplit(val) {
      var reg = /[\u4e00-\u9fa5]/g
      let name = val
      name = name.substr(-4)
      var names = name.match(reg)
      name = names.join('')
      if (name.includes('区')) {
        name = name.replace('区', '')
      }
      if (name.includes('号')) {
        name = name.replace('号', '')
      }
      return name
    },
    getZoneName(id) {
      var name = ''
      for (let i = 0; i < this.partitionArr.length; i++) {
        if (id == this.partitionArr[i].id) {
          name = this.partitionArr[i].name
        }
      }

      return name
    },
    getBloodAccess(id) {
      var name = ''
      var list = getDataConfig(
        'hemodialysis',
        'vascular_access_desc'
      )
      for (let i = 0; i < list.length; i++) {
        if (id == list[i].id) {
          name = list[i].name
        }
      }
      return name
    },
    getZonePatient(partition_id,schedule_type){
       
      var arr = []
      if(this.list!=null && this.list.length >0){
        for(let i=0;i<this.list.length;i++){
           if(partition_id == this.list[i].partition_id && schedule_type == this.list[i].schedule_type){
               arr.push(this.list[i])
           }
        }
      }

      if(arr.length >0){
         return arr.length
      }else{
        return ""
      }

    },
    getMonPatient(partition_id){
      var arr = []
      if(this.list!=null && this.list.length >0){
        for(let i=0;i<this.list.length;i++){
           if(partition_id == this.list[i].partition_id && this.list[i].mode_id == 2 && this.list[i].schedule_type ==1){
               arr.push(this.list[i])
           }
        }
      }
      if(arr.length >0){
         return arr.length
      }else{
        return ""
      }
    },
    getMonPatientOne(partition_id){
      var arr = []
      if(this.list!=null && this.list.length >0){
        for(let i=0;i<this.list.length;i++){
           if(partition_id == this.list[i].partition_id && this.list[i].mode_id == 3 && this.list[i].schedule_type ==1){
               arr.push(this.list[i])
           }
        }
      }
      if(arr.length >0){
         return arr.length
      }else{
        return ""
      }
    },
    getMonPatientName(partition_id){
      var arr = []
      if(this.list!=null && this.list.length >0){
        for(let i=0;i<this.list.length;i++){
           if(partition_id == this.list[i].partition_id && this.list[i].mode_id == 2 && this.list[i].schedule_type ==1){
               arr.push(this.list[i].name)
           }
        }
      }
      if(arr.length >0){
        var str = arr.join(",")
        return str
      }else{
        return ""
      }
    },
    getMonPatientNameOne(partition_id){
      var arr = []
      if(this.list!=null && this.list.length >0){
        for(let i=0;i<this.list.length;i++){
           if(partition_id == this.list[i].partition_id && this.list[i].mode_id == 3 && this.list[i].schedule_type ==1){
               arr.push(this.list[i].name)
           }
        }
      }
      if(arr.length >0){
        var str = arr.join(",")
        return str
      }else{
        return ""
      }
    },
    getMonAfterPatient(partition_id){
      var arr = []
      if(this.list!=null && this.list.length >0){
        for(let i=0;i<this.list.length;i++){
           if(partition_id == this.list[i].partition_id && this.list[i].mode_id == 2 && this.list[i].schedule_type ==2){
               arr.push(this.list[i])
           }
        }
      }
      if(arr.length >0){
         return arr.length
      }else{
        return ""
      }
    },
    getMonAfterPatientOne(partition_id){
      var arr = []
      if(this.list!=null && this.list.length >0){
        for(let i=0;i<this.list.length;i++){
           if(partition_id == this.list[i].partition_id && this.list[i].mode_id == 3 && this.list[i].schedule_type ==2){
               arr.push(this.list[i])
           }
        }
      }
      if(arr.length >0){
         return arr.length
      }else{
        return ""
      }
    },
    getMonAfterPatientName(partition_id){
      var arr = []
      if(this.list!=null && this.list.length >0){
        for(let i=0;i<this.list.length;i++){
           if(partition_id == this.list[i].partition_id && this.list[i].mode_id == 2 && this.list[i].schedule_type ==2){
               arr.push(this.list[i].name)
           }
        }
      }
      if(arr.length >0){
        var str = arr.join(",")
        return str
      }else{
        return ""
      }
    },

    getMonAfterPatientNameOne(partition_id){
      var arr = []
      if(this.list!=null && this.list.length >0){
        for(let i=0;i<this.list.length;i++){
           if(partition_id == this.list[i].partition_id && this.list[i].mode_id == 3 && this.list[i].schedule_type ==2){
               arr.push(this.list[i].name)
           }
        }
      }
      if(arr.length >0){
        var str = arr.join(",")
        return str
      }else{
        return ""
      }
    },

    getNightPatient(partition_id){
      var arr = []
      if(this.list!=null && this.list.length >0){
        for(let i=0;i<this.list.length;i++){
           if(partition_id == this.list[i].partition_id && this.list[i].mode_id == 2 && this.list[i].schedule_type ==3){
               arr.push(this.list[i])
           }
        }
      }
      if(arr.length >0){
         return arr.length
      }else{
        return ""
      }
    },
    getNightPatientOne(partition_id){
      var arr = []
      if(this.list!=null && this.list.length >0){
        for(let i=0;i<this.list.length;i++){
           if(partition_id == this.list[i].partition_id && this.list[i].mode_id == 3 && this.list[i].schedule_type ==3){
               arr.push(this.list[i])
           }
        }
      }
      if(arr.length >0){
         return arr.length
      }else{
        return ""
      }
    },
    getNightPatientName(partition_id){
      var arr = []
      if(this.list!=null && this.list.length >0){
        for(let i=0;i<this.list.length;i++){
           if(partition_id == this.list[i].partition_id && this.list[i].mode_id == 2 && this.list[i].schedule_type ==3){
               arr.push(this.list[i].name)
           }
        }
      }
      if(arr.length >0){
        var str = arr.join(",")
        return str
      }else{
        return ""
      }
    },
    getNightPatientNameOne(partition_id){
      var arr = []
      if(this.list!=null && this.list.length >0){
        for(let i=0;i<this.list.length;i++){
           if(partition_id == this.list[i].partition_id && this.list[i].mode_id == 3 && this.list[i].schedule_type ==3){
               arr.push(this.list[i].name)
           }
        }
      }
      if(arr.length >0){
        var str = arr.join(",")
        return str
      }else{
        return ""
      }
    }
  }
}
</script>

<style rel="stylesheet/scss" lang="scss" scoped>
.print_main_content {
  background-color: white;
  width: 960px;
  margin: 0 auto;
  padding: 0 0 20px 0;

  .order_title_panl {
    text-align: center;

    .main_title {
      font-size: 18px;
      line-height: 40px;
      font-weight: 500;
    }
  }
  .table_panel {
    .table {
      width: 100%;
      border: 1px solid;
      border-collapse: collapse;
      padding: 2px;

      thead {
        tr {
          td {
            border: 1px solid;
            text-align: center;
            font-size: 20px;
            padding: 15px 5px;
          }
        }
      }
      tbody {
        tr {
          td {
            border: 1px solid;
            text-align: center;
            font-size: 18px;
            padding: 10px 5px;

            .proj {
              padding: 5px 0;
              text-align: left;

              .proj_title {
                font-size: 16px;
                font-weight: 500;
                line-height: 25px;
              }

              .proj_item {
                font-size: 15px;
                line-height: 20px;

                .zone_name {
                  font-weight: bold;
                }
              }
            }
          }
        }
      }
    }
  }
}
</style>