CABaggageData2.0/src/views/baggageManagement/components/baggage/index.vue

<!--
 * @Author: your name
 * @Date: 2022-01-17 10:39:22
 * @LastEditTime: 2022-08-12 19:14:09
 * @LastEditors: your name
 * @Description: 行李视图
-->
<template>
  <div class="baggage-view">
    <div
      ref="basicInfo"
      class="part1"
    >
      <div class="title">
        <span>行李基本信息</span>
        <el-radio-group
          v-model="infoBtn"
          class="radioBtn"
          size="mini"
          fill="#FFFFFF"
          text-color="#28344D"
        >
          <el-radio-button
            v-for="item in infoRadios"
            :key="item"
            :label="item"
          />
        </el-radio-group>
      </div>
      <div class="part1_info">
        <el-row :gutter="12">
          <el-col
            v-for="(item, index) in baggageBasicInfoCols"
            :key="index"
            :xl="[0, 2, 4].includes(index % 7) ? 4 : 3"
            :sm="6"
            :xs="6"
          >
            <span class="label">{{ item.label }}：</span><span
              class="content"
              :title="formattedBaggageInfo(item.prop)"
            >{{ formattedBaggageInfo(item.prop) }}</span>
          </el-col>
        </el-row>
      </div>
    </div>
    <div
      v-show="infoBtn === infoRadios[0]"
      class="part2"
    >
      <div class="part2_info">
        <div class="title">行李跟踪信息</div>
        <div class="type normal">
          {{ baggageBasicInfo.BagStatus }}
        </div>
        <div class="airline">
          <el-select
            v-model="selectedAirline"
            size="mini"
            class="airline-select"
          >
            <el-option
              v-for="airline in airlineList"
              :key="airline.value"
              :value="airline.value"
              :label="airline.label"
            />
          </el-select>
        </div>
        <div class="baggage-track-chart">
          <div class="step-line">
            <div
              v-for="(line, index) in 6"
              :key="index"
              :class="['step-line-segment', { 'step-line-active': activeStepLine(index) }]"
            />
          </div>
          <div
            v-for="(item, index) in stepNodes"
            :key="index"
            :class="{ 'step-item': true, 'active-item': item.processingTime }"
          >
            <div class="step-circle">
              <span class="step-name">{{ item.nodeName }}</span>
            </div>
            <div class="step-info">
              <!-- <div class="step-status">{{ item.status }}</div> -->
              <span class="step-time">{{ item.processingTime }}</span>
              <!-- <div class="step-location">{{ item.location }}</div> -->
            </div>
          </div>
        </div>
      </div>
      <div class="btns">
        <img
          class="btn-square btn-shadow"
          src="../../../../assets/baggage/ic_export.png"
          title="导出"
          @click="exportHandler('table', '行李节点列表')"
        >
        <img
          class="btn-square btn-shadow"
          src="../../../../assets/baggage/ic_setting.png"
          title="列设置"
          @click="show"
        >
      </div>
    </div>
    <div
      v-show="infoBtn == infoRadios[0]"
      class="part3"
      :style="{
        'height': `calc(100vh - 80px - ${basicInfoHeight}px - 176px - 3 * 8px - 44px)`
      }"
    >
      <el-table
        ref="table"
        :data="baggageTableData"
        height="100%"
        size="mini"
        border
        fit
        :header-cell-class-name="headerCellClass"
        :header-cell-style="{ color: '#101116' }"
        :cell-class-name="cellClass"
        :span-method="tableSpanMethod"
        @cell-click="cellClickHandler"
      >
        <el-table-column
          v-for="item in tableColsCopy"
          :key="item.index"
          :prop="item.prop"
          :label="item.name"
          :align="item.align || 'center'"
          :width="item.width"
          show-overflow-tooltip
        >
          <template slot="header">
            <div class="cell-content">{{ item.name }}</div>
          </template>
          <template slot-scope="scope">
            <div class="cell-content">{{ scope.row[item.prop] }}</div>
          </template>
        </el-table-column>
      </el-table>
    </div>

    <div
      v-show="infoBtn === infoRadios[1]"
      class="part4"
      :style="{
        'height': `calc(100vh - 80px - ${basicInfoHeight}px - 2 * 8px - 44px)`
      }"
    >
      <header class="head">
        <div class="title">行李跟踪信息</div>
        <div class="btns">
          <img
            class="btn-square btn-shadow"
            src="../../../../assets/baggage/ic_export.png"
            title="导出"
            @click="exportMessageToExcel"
          >
        </div>
      </header>
      <main class="main">
        <template v-if="messageList.length">
          <el-row
            :gutter="24"
            type="flex"
          >
            <el-col
              v-for="(message, index) in messageList"
              :key="index"
              :span="6"
            >
              <div class="card">
                <div class="message-date">{{ message.date }}</div>
                <div class="message-content">
                  {{ message.dataContent.replaceAll(/[\r\n]{2,}/g, '\n').replaceAll('\\', '') }}
                </div>
              </div>
            </el-col>
          </el-row>
        </template>
        <template v-else>
          <el-empty
            :image-size="1"
            description="暂无数据"
          />
        </template>
      </main>
    </div>
    <!--列设置-->
    <Dialog
      :flag="dialogFlag"
      class="dialog-check-group"
    >
      <div class="dialog-wrapper">
        <div class="title">列设置</div>
        <div class="content">
          <el-tree
            :data="tableCols"
            :class="colsCheckClass"
            show-checkbox
            node-key="index"
            :default-expand-all="true"
            :props="{
              label: 'name',
              children: 'children',
            }"
            :default-checked-keys="checkedKeysTemp"
            @check="handleCheck"
          />
        </div>
        <div class="foot right t30">
          <el-button
            size="medium"
            class="r24"
            type="primary"
            @click="onCheck('baggageTableData')"
          >确定</el-button>
          <el-button
            size="medium"
            @click="hide"
          >取消</el-button>
        </div>
      </div>
    </Dialog>
  </div>
</template>
<script>
import Dialog from '@/layout/components/Dialog/index.vue'
import { myQuery } from '@/api/dataIntegration'
import { BaggageMessageQuery } from '@/api/flight'
import tableColsMixin from '../../mixins/tableCols'
import { throttledExportToExcel } from '@/utils/table'

export default {
  name: 'BaggageView',
  components: {
    Dialog
  },
  mixins: [tableColsMixin],
  data() {
    return {
      queryData: {},
      airlineList: [],
      selectedAirline: '',
      basicInfoHeight: 0,
      baggageBasicInfoCols: [
        {
          label: '行李牌号',
          prop: 'bagNo'
        },
        {
          label: '航班号',
          prop: 'flightNO'
        },
        {
          label: '特殊行李类型',
          prop: 'specialType'
        },
        {
          label: 'PNR编号',
          prop: 'PNR'
        },
        {
          label: '旅客',
          prop: 'name'
        },
        {
          label: '装载序列号',
          prop: 'loadSequenceIndex'
        },
        {
          label: '总件数',
          prop: 'totalNumber'
        },
        {
          label: '总重量',
          prop: 'totalWeight'
        },
        {
          label: '尺寸',
          prop: 'size'
        },

        {
          label: '常旅客号',
          prop: 'frequentFlyerNumber'
        },
        {
          label: '常旅客级别',
          prop: 'frequentFlyerClass'
        },
        {
          label: '取消值机',
          prop: 'whetherToCancelTheCheckIn'
        },
        {
          label: '是否可装载',
          prop: 'isItLoadable'
        },
        {
          label: '是否可运输',
          prop: 'isItTransportable'
        },
        {
          label: '行李激活状态',
          prop: 'activeState'
        },
        {
          label: '无BSM状态',
          prop: 'noBSM'
        },
        {
          label: '中转进航班',
          prop: 'inFlightNo'
        },
        {
          label: '中转出航班',
          prop: 'transferFlightNo'
        },
        {
          label: '速运标记',
          prop: 'expressSign'
        },
        {
          label: '破损标记',
          prop: 'brokenSign'
        },
        {
          label: '投诉标记',
          prop: 'complaintSign'
        },
        {
          label: '赔偿标记',
          prop: 'compensationSign'
        },
        {
          label: '异常状态',
          prop: 'bagExcType'
        },
        {
          label: '企业或团队名称',
          prop: 'teamOrGroup'
        }
      ],
      baggageBasicInfo: {},
      dialogVisibledele: false,
      active: 2,
      infoBtn: '',
      infoRadios: ['跟踪信息', '跟踪报文'],
      messageList: [],
      checkList: [],
      stepNodes: [],
      tableCols: [
        {
          name: '航班号',
          prop: 'flightNO'
        },
        { name: '航班日期', prop: 'flightDate', width: 100 },
        {
          name: '起飞航站\n起飞时间',
          prop: 'departureAirport',
          width: 111
        },
        {
          name: '目的航站\n降落时间',
          prop: 'landingAirport',
          sortable: 'custom',
          width: 111
        },
        { name: '旅客舱位', prop: 'passengerCompartment', width: 70 },
        { name: '旅客座位号', prop: 'passengerSeatNumber' },
        { name: '值机序号', prop: 'passengerCheckInNumber', width: 70 },
        { name: '节点标识', prop: 'nodeCode', width: 100 },
        { name: '节点名称', prop: 'nodeName' },
        { name: '位置标识', prop: 'locationCode' },
        // { name: '位置码', prop: '',  },
        { name: '位置描述', prop: 'locationRemark' },
        { name: '读取时间', prop: 'dealTime', width: 158 },
        { name: '结果', prop: 'status' },
        { name: '次级代码', prop: 'secondaryCode', width: 70 },
        { name: '操作人', prop: 'AgentCode', width: 100 },
        { name: '设备ID', prop: 'DeviceCode' },
        { name: '发往位置', prop: 'toLocation' },
        { name: '发往位置描述', prop: 'toLocationMark', width: 110 },
        { name: '装载序号', prop: 'LoadSN' },
        { name: '容器编号', prop: 'U_Device_ID', width: 100 },
        { name: '数据来源', prop: 'dataSource' }
      ],
      baggageTableData: [],
      spanArr: [],
      pos: 0,
      queryLoop: null,
      queryTrackLoop: null
    }
  },
  computed: {
    activeStepLine() {
      return function (index) {
        return this.stepNodes[index].processingTime && this.stepNodes[index + 1].processingTime
      }
    },
    formattedBaggageInfo() {
      return function (prop) {
        const value = this.baggageBasicInfo[prop]
        if ((value ?? '') === '') {
          return ''
        } else {
          switch (prop) {
            case 'transitSign':
              return Number(value) === 0 ? '非中转' : '中转'
            case 'activeState':
              return Number(value) === 0 ? '未激活' : '激活'
            case 'whetherToCancelTheCheckIn':
              return Number(value) === 1 ? '取消' : ''
            case 'isItLoadable':
            case 'isItTransportable':
            case 'noBSM':
            case 'expressSign':
            case 'brokenSign':
            case 'complaintSign':
            case 'compensationSign':
              return Number(value) === 1 || value === 'Y' ? '是' : '否'
            default:
              return value
          }
        }
      }
    }
  },
  watch: {
    $route: {
      handler({ path, query }) {
        this.infoBtn = ''
        if (path.includes('baggageView')) {
          const { flightNO, flightDate, bagSN } = query
          if (flightNO && flightDate && bagSN) {
            this.queryData = { flightNO, flightDate, bagSN }
            this.queryBasicInfo()
            this.queryAirline()
            this.infoBtn = this.infoRadios[0]
          } else {
            this.$router.push('/advance')
          }
        }
      },
      deep: true,
      immediate: true
    },
    infoBtn: {
      handler(val) {
        this.stopLoopAll()
        if (val === this.infoRadios[0]) {
          if (this.selectedAirline) {
            this.startQueryTrack()
          }
          this.startQueryDetails()
        } else if (val === this.infoRadios[1]) {
          this.startQueryMessage()
        }
      },
      immediate: true
    },
    selectedAirline() {
      this.stopQueryTrack()
      this.startQueryTrack()
    }
  },
  created() {
    this.resetStepNodes()
  },
  activated() {
    this.basicInfoHeight = this.$refs['basicInfo'].offsetHeight
    this.$refs['table']?.doLayout()
  },
  updated() {
    this.basicInfoHeight = this.$refs['basicInfo'].offsetHeight
    this.$refs['table']?.doLayout()
  },
  methods: {
    startQueryDetails() {
      this.queryDetails()
      this.queryLoop = setInterval(this.queryDetails.bind(this), LOOP_INTERVAL.baggageDetails)
    },
    startQueryTrack() {
      this.queryTrack()
      this.queryTrackLoop = setInterval(this.queryTrack.bind(this), LOOP_INTERVAL.baggageTrack)
    },
    startQueryMessage() {
      this.queryMessage()
      this.queryLoop = setInterval(this.queryMessage.bind(this), LOOP_INTERVAL.baggageMessage)
    },
    stopQueryTrack() {
      this.queryTrackLoop && clearInterval(this.queryTrackLoop)
      this.queryTrackLoop = null
    },
    stopLoopAll() {
      this.queryLoop && clearInterval(this.queryLoop)
      this.queryLoop = null
      this.stopQueryTrack()
    },
    resetStepNodes() {
      this.stepNodes = [
        {
          nodeCode: 'CHECKIN',
          nodeName: '值机',
          processingTime: ''
        },
        {
          nodeCode: 'SECURITY',
          nodeName: '安检',
          processingTime: ''
        },
        {
          nodeCode: 'SORT',
          nodeName: '分拣',
          processingTime: ''
        },
        {
          nodeCode: 'LOAD',
          nodeName: '装车',
          processingTime: ''
        },
        {
          nodeCode: 'INFL',
          nodeName: '装机',
          processingTime: ''
        },
        {
          nodeCode: 'UNLOAD',
          nodeName: '卸机',
          processingTime: ''
        },
        {
          nodeCode: 'ARRIVED',
          nodeName: '到达',
          processingTime: ''
        }
      ]
    },
    initTableData(tableData) {
      const spanArr = []
      let pos = 0
      for (let i = 0; i < tableData.length; i++) {
        if (i === 0) {
          spanArr.push(1)
        } else {
          if (
            tableData[i]['flightNO'] === tableData[i - 1]['flightNO'] &&
            tableData[i]['flightDate'] === tableData[i - 1]['flightDate'] &&
            tableData[i]['departureAirport'] === tableData[i - 1]['departureAirport'] &&
            tableData[i]['landingAirport'] === tableData[i - 1]['landingAirport']
          ) {
            spanArr[pos] += 1
            spanArr.push(0)
          } else {
            spanArr.push(1)
            pos = i
          }
        }
      }
      this.spanArr = spanArr
      this.pos = pos
    },
    headerCellClass({ row, column, rowIndex, columnIndex }) {
      if (['departureAirport', 'landingAirport'].includes(column.property)) {
        return 'pre-line'
      }
    },
    cellClass({ row, column, rowIndex, columnIndex }) {
      const classes = []
      if (column.property === 'flightNO') {
        classes.push('cell-click')
      }
      if (['departureAirport', 'landingAirport'].includes(column.property)) {
        classes.push('pre-line')
      }
      return classes.join(' ')
    },
    cellClickHandler(row, column, cell, event) {
      switch (column.property) {
        case 'flightNO':
          this.$router.push({
            path: `/${this.$route.path.split('/').slice(1, -1).join('/')}/flightView`,
            query: {
              flightNO: row.flightNO,
              flightDate: row.flightDate
            }
          })
          break
        default:
          break
      }
    },
    tableSpanMethod({ row, column, rowIndex, columnIndex }) {
      if (['flightNO', 'flightDate', 'departureAirport', 'landingAirport'].includes(column['property'])) {
        const _row = this.spanArr[rowIndex]
        const _col = _row > 0 ? 1 : 0
        return {
          rowspan: _row,
          colspan: _col
        }
      }
    },
    exportHandler(refName, tableName) {
      const table = this.$refs[refName].$el.cloneNode(true)
      const fileName = `${tableName}-${this.queryData.bagSN}-${this.queryData.flightNO}-${this.queryData.flightDate}.xlsx`
      throttledExportToExcel(table, tableName, fileName)
    },
    exportMessageToExcel() {
      this.$message.info('开发中')
    },
    // 行李详情基础信息
    queryBaggageBasicInfo(dataContent) {
      return myQuery(DATACONTENT_ID.baggageBasicInfo, ...dataContent)
    },
    // 行李航段
    queryBaggageAirline(dataContent) {
      return myQuery(DATACONTENT_ID.baggageAirline, ...dataContent)
    },
    // 行李详情追踪链
    queryBaggageTrack(dataContent) {
      return myQuery(DATACONTENT_ID.baggageTrack, ...dataContent)
    },
    // 行李详情表格
    queryBaggageDetails(dataContent) {
      return myQuery(DATACONTENT_ID.baggageDetails, ...dataContent)
    },
    // 原始报文
    async queryBaggageMessage(dataContent) {
      try {
        const { code, returnData, message } = await BaggageMessageQuery({
          id: DATACONTENT_ID.baggageMessage,
          dataContent
        })
        if (Number(code) === 0) {
          return returnData.listValues
        } else {
          this.$message.error(message ?? '失败')
        }
      } catch (error) {
        console.log('出错了', error.message || error)
      }
    },
    async queryBasicInfo(queryData = this.queryData) {
      const { flightNO, flightDate, bagSN } = queryData
      const dataContent = [flightNO, flightDate, bagSN]
      try {
        const baggageBasicInfo = await this.queryBaggageBasicInfo(dataContent)
        if (baggageBasicInfo.length) {
          baggageBasicInfo[0].flightNO = flightNO
          this.baggageBasicInfo = baggageBasicInfo[0]
        }
      } catch (error) {
        console.log('出错了', error.message || error)
      }
    },
    async queryDetails(queryData = this.queryData) {
      const { flightNO, flightDate, bagSN } = queryData
      const dataContent = [flightNO, flightDate, bagSN]
      try {
        const baggageDetails = await this.queryBaggageDetails(new Array(6).fill(dataContent).flat())
        this.baggageTableData = baggageDetails.map((item, index) => {
          if (item['dealTime']) {
            item['dealTime'] = item['dealTime'].replace('T', ' ')
          }
          item['departureAirport'] = `${item['departureAirport']}\n${
            item['departureTime'] ? item['departureTime'].replace('T', '\n') : ''
          }`
          item['landingAirport'] = `${item['landingAirport']}\n${
            item['landingTime'] ? item['landingTime'].replace('T', '\n') : ''
          }`
          if (item['DeviceCode'] === 'STARHUB') {
            item['dataSource'] = 'Manual Load'
          } else if (item['toLocation']?.length === 2) {
            item['dataSource'] = 'RFID'
          } else if (item['secondaryCode'] === 'R') {
            item['dataSource'] = 'BRS'
          }
          return item
        })
        this.initTableData(this.baggageTableData)
      } catch (error) {
        console.log('出错了', error.message || error)
      }
    },
    async queryAirline(queryData = this.queryData) {
      const { flightNO, flightDate, bagSN } = queryData
      const dataContent = [flightNO, flightDate, bagSN]
      try {
        const result = await this.queryBaggageAirline(dataContent)
        this.airlineList = result.map(({ flightNO, flightDate, departureAirport, arriveAirport, luggageSN }) => ({
          label: `${departureAirport}-${arriveAirport}`,
          value: `${flightNO},${flightDate},${luggageSN}`
        }))
        if (this.airlineList.length) {
          this.selectedAirline = this.airlineList[0].value
        } else {
          this.selectedAirline = ''
        }
      } catch (error) {
        console.log('出错了', error.message || error)
      }
    },
    async queryTrack() {
      function isSameStep(code1, code2) {
        const sameStepCodes = ['ARRIVED', 'TRANSFER']
        return sameStepCodes.includes(code1) && sameStepCodes.includes(code2)
      }
      try {
        const result = await this.queryBaggageTrack(this.selectedAirline.split(','))
        this.resetStepNodes()
        result.forEach(({ nodeCode, nodeName, processingTime }) => {
          const replaceIndex = this.stepNodes.findIndex(
            stepNode => stepNode.nodeCode === nodeCode || isSameStep(stepNode.nodeCode, nodeCode)
          )
          if (replaceIndex > -1) {
            this.stepNodes.splice(replaceIndex, 1, {
              nodeCode,
              nodeName,
              processingTime: processingTime.replace('T', '\n')
            })
          }
        })
      } catch (error) {
        console.log('出错了', error.message || error)
      }
    },
    async queryMessage(queryData = this.queryData) {
      const { flightNO, flightDate, bagSN } = queryData
      const dataContent = [flightNO, flightDate, bagSN]
      try {
        const result = await this.queryBaggageMessage(dataContent)
        const messageList = result.map(message => {
          return typeof message === 'string' ? JSON.parse(message) : message
        })
        this.messageList = this._.sortBy(messageList, 'ssid')
      } catch (error) {
        console.log('出错了', error.message || error)
      }
    }
  }
}
</script>
<style lang="scss">
.radioBtn {
  padding: 5px;
  background: #000d2a;
  .el-radio-button__inner {
    background: #000d2a;
    color: #fff;
    border: none;
    font-weight: bold;
  }
  .el-radio-button:first-child .el-radio-button__inner {
    border: none;
  }
}
</style>
<style lang="scss" scoped>
.baggage-view {
  width: 100%;
  height: calc(100vh - 81px);
  overflow: hidden;
  background: #dfe3ea;
  padding: 8px 8px 0;
  .part1 {
    width: 100%;
    // height: 232px;
    background: #041741;
    padding: 16px 30px;
    .title {
      font-size: 18px;
      font-weight: bold;
      color: #ffffff;
      width: 320px;
      display: flex;
      flex-direction: row;
      justify-content: space-between;
      align-items: center;
    }
    .part1_info {
      width: 100%;
      color: #fff;
      font-size: 14px;
      font-weight: 400;
      color: #ffffff;
      > .el-row > .el-col {
        height: 38px;
        line-height: 38px;
        display: flex;
        .label {
          flex-basis: 126px;
          text-align: right;
        }
        .content {
          flex: 1;
          margin: 0;
          white-space: nowrap;
          overflow: hidden;
          text-overflow: ellipsis;
        }
      }
    }
  }
  .part2 {
    margin: 8px 0;
    width: 100%;
    padding: 24px 30px 28px;
    background: #ffffff;
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: flex-start;
    .part2_info {
      flex: 1;
      display: flex;
      flex-direction: row;
      justify-content: flex-start;
      align-items: flex-start;
      line-height: 42px;

      .title {
        width: 120px;
        font-size: 18px;
        font-weight: bold;
        color: #303133;
        margin-right: 20px;
      }
      .type {
        font-size: 18px;
        font-weight: bold;
        margin-right: 20px;
        .warn {
          color: #df3559;
        }
        .normal {
          color: #519f6b;
        }
      }
      .airline {
        width: 120px;
        margin-right: 20px;
      }
      .baggage-track-chart {
        flex: 1;
        height: 124px;
        max-width: 1280px;
        position: relative;
        display: flex;
        flex-direction: row;
        justify-content: space-between;
        width: 100%;
      }
      .step-line {
        width: calc(100% - 80px);
        height: 10px;
        position: absolute;
        top: 16px;
        right: 0;
        left: 0;
        margin: auto;
        display: flex;
        .step-line-segment {
          width: calc(100% / 6);
          height: 100%;
          background: #afb4bf;
          &.step-line-active {
            background: #2d67e3;
          }
        }
      }
      .step-item {
        width: 80px;
        height: 100%;
        text-align: center;
        font-size: 12px;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: flex-start;
        z-index: 1;
        font-family: Helvetica, 'Microsoft Yahei';
        .step-circle {
          width: 42px;
          height: 42px;
          border-radius: 50%;
          background: #aaacb2;
          .step-name {
            color: #ffffff;
            font-size: 14px;
            font-weight: bold;
          }
        }
        .step-info {
          margin-top: 15px;
          color: #101116;
          line-height: 1;
          .step-time {
            white-space: pre-line;
          }
        }
        &.active-item .step-circle {
          background: #2d67e3;
        }
      }
    }
    .btns {
      margin-top: 6px;
    }
  }
  .part3 {
    width: 100%;
    // header-80px、part1-232px、part2-128px、间隙3*8px、底部44px
    // height: calc(100vh - 80px - 232px - 128px - 3 * 8px - 44px);
    background: #ffffff;
    ::v-deep .el-table {
      width: 100%;
      // &.el-table--striped {
      //   .el-table__body tr.el-table__row--striped td.el-table__cell,
      //   .el-table__header .el-table__cell {
      //     background: #ffffff;
      //   }
      // }
      .el-table__cell {
        // background: #f0f3f7;
        padding: 0;
        &.cell-click {
          cursor: pointer;
          .cell {
            color: #2d7cff;
          }
        }
        .cell {
          padding: 0;
          word-spacing: 0;
          font-size: 14px;
          font-family: Helvetica, 'Microsoft YaHei';
          font-weight: 400;
          color: #303133;
          width: 100% !important;
          .cell-content {
            padding: 6px 0;
          }
        }
      }
      .el-table__body .el-table__cell .cell {
        padding: 6px 10px;
        .cell-content {
          display: inline;
          padding: 0;
        }
      }
    }
  }
  .part4 {
    width: 100%;
    // height: calc(100vh - 80px - 232px - 2 * 8px - 44px);
    .head {
      padding: 16px 24px 11px 30px;
      background: transparent;
      display: flex;
      justify-content: space-between;
      .title {
        line-height: 30px;
        font-size: 18px;
        font-weight: bold;
        color: #303133;
      }
    }
    .main {
      height: calc(100% - 57px);
      overflow-y: auto;
      overflow-x: hidden;
      ::v-deep .el-row {
        flex-wrap: wrap;
        .card {
          width: 100%;
          min-height: 440px;
          padding: 20px;
          background: #ffffff;
          box-shadow: 0px 3px 2px 0px rgba(0, 0, 0, 0.29);
          margin-bottom: 24px;
          > .message-date {
            width: 180px;
            height: 26px;
            line-height: 14px;
            font-size: 14px;
            font-family: Helvetica;
            color: #afb4bf;
            border-bottom: 1px solid #afb4bf;
            margin-bottom: 18px;
          }
          > .message-content {
            white-space: pre-line;
            line-height: 24px;
            font-size: 14px;
            color: #303133;
            word-break: break-all;
          }
        }
      }
    }
  }
  .btns {
    height: 30px;
    display: flex;
    .btn-square {
      margin-left: 10px;
      width: 30px;
    }
  }
}
</style>

<style lang="scss">
.el-popover {
  &.popover-dark {
    background: #303133;
    color: #ffffff;
    border: none;
  }
  .pre-line {
    white-space: pre-line;
  }
}
.el-popper[x-placement^='top'].popover-dark .popper__arrow::after {
  border-top-color: #303133;
}
.el-popper[x-placement^='right'].popover-dark .popper__arrow::after {
  border-right-color: #303133;
}
.el-popper[x-placement^='bottom'].popover-dark .popper__arrow::after {
  border-bottom-color: #303133;
}
.el-popper[x-placement^='left'].popover-dark .popper__arrow::after {
  border-left-color: #303133;
}
</style>