<!--
 * @Author: your name
 * @Date: 2022-01-17 10:39:22
 * @LastEditTime: 2022-05-31 11:11:10
 * @LastEditors: your name
 * @Description: 航班视图
-->
<template>
  <div class="flight-view">
    <div class="flight-wrap">
      <div class="part1">
        <div class="title">
          {{ flightInfo.PlanDepartureApt }} - {{ flightInfo.FlightNO }} -
          {{ flightInfo.PlanLandingApt }}
        </div>
        <div class="part1_info">
          <div class="part1_info_box">
            <el-row>
              <el-col
                :xs="24"
                :sm="24"
                :xl="12"
              >
                <span>起飞机场简称：</span>
              </el-col>
              <el-col
                :xs="24"
                :sm="24"
                :xl="12"
              >
                <span>{{ flightInfo.departureName }}</span>
              </el-col>
            </el-row>
            <el-row>
              <el-col
                :xs="24"
                :sm="24"
                :xl="12"
              >
                <span>起飞机场三字码：</span>
              </el-col>
              <el-col
                :xs="24"
                :sm="24"
                :xl="12"
              >
                <span>{{ flightInfo.PlanDepartureApt }}</span>
              </el-col>
            </el-row>
            <el-row>
              <el-col
                :xs="24"
                :sm="24"
                :xl="12"
              >
                <span>起飞机场航站楼：</span>
              </el-col>
              <el-col
                :xs="24"
                :sm="24"
                :xl="12"
              >
                <span>{{ flightInfo.DepartureBuild }}</span>
              </el-col>
            </el-row>
            <el-row>
              <el-col
                :xs="24"
                :sm="24"
                :xl="12"
              >
                <span>
                  日期：
                  {{ flightInfo.PlanDepartureTime && flightInfo.PlanDepartureTime.split("T")[0] }}
                </span>
              </el-col>
              <el-col
                :xs="24"
                :sm="24"
                :xl="12"
              >
                <span>
                  时间：
                  {{ flightInfo.PlanDepartureTime && flightInfo.PlanDepartureTime.split("T")[1] }}
                </span>
              </el-col>
            </el-row>
            <el-row>
              <el-col :span="12">
                <span>登机口：{{ flightInfo.BordingGate }}</span>
              </el-col>
              <el-col :span="12">
                <span>停机位：{{ flightInfo.StandForDepartrue }}</span>
              </el-col>
            </el-row>
          </div>
          <div class="part1_info_box">
            <el-row>
              <el-col :span="12">
                <span>航班号：</span>
              </el-col>
              <el-col :span="12">
                <span>{{ flightInfo.FlightNO }}</span>
              </el-col>
            </el-row>
            <el-row>
              <el-col :span="12">
                <span>航班状态：</span>
              </el-col>
              <el-col :span="12">
                <span>{{ flightInfo.FlightStatus === null ? '正常' : flightInfo.FlightStatus }}</span>
              </el-col>
            </el-row>
            <el-row>
              <el-col
                :xs="24"
                :sm="24"
                :xl="12"
              >
                <span>托运旅客数：</span>
                <span>{{ flightInfo.count1 }}</span>
              </el-col>
              <el-col
                :xs="24"
                :sm="24"
                :xl="12"
              >
                <span>终点行李数：</span>
                <span>{{ flightInfo.count2 }}</span>
              </el-col>
            </el-row>
            <el-row>
              <el-col
                :xs="18"
                :sm="18"
                :xl="12"
              >
                <span>中转进行李数：</span>
              </el-col>
              <el-col
                :xs="6"
                :sm="6"
                :xl="12"
              >
                <span>{{ flightInfo.count4 }}</span>
              </el-col>
            </el-row>
            <el-row>
              <el-col
                :xs="18"
                :sm="18"
                :xl="12"
              >
                <span>中转出行李数：</span>
              </el-col>
              <el-col
                :xs="6"
                :sm="6"
                :xl="12"
              >
                <span>{{ flightInfo.count3 }}</span>
              </el-col>
            </el-row>
          </div>
          <div class="part1_info_box">
            <el-row>
              <el-col
                :xs="24"
                :sm="24"
                :xl="12"
              >
                <span>降落机场简称：</span>
              </el-col>
              <el-col
                :xs="24"
                :sm="24"
                :xl="12"
              >
                <span>{{ flightInfo.landingName }}</span>
              </el-col>
            </el-row>
            <el-row>
              <el-col
                :xs="24"
                :sm="24"
                :xl="12"
              >
                <span>降落机场三字码：</span>
              </el-col>
              <el-col
                :xs="24"
                :sm="24"
                :xl="12"
              >
                <span>{{ flightInfo.PlanLandingApt }}</span>
              </el-col>
            </el-row>
            <el-row>
              <el-col
                :xs="24"
                :sm="24"
                :xl="12"
              >
                <span>降落机场航站楼：</span>
              </el-col>
              <el-col
                :xs="24"
                :sm="24"
                :xl="12"
              >
                <span>{{ flightInfo.LandingBuild }}</span>
              </el-col>
            </el-row>
            <el-row>
              <el-col
                :xs="24"
                :sm="24"
                :xl="12"
              >
                <span>
                  日期：
                  {{ flightInfo.ExpectLandingTime && flightInfo.ExpectLandingTime.split("T")[0] }}
                </span>
              </el-col>
              <el-col
                :xs="24"
                :sm="24"
                :xl="12"
              >
                <span>
                  时间：
                  {{ flightInfo.ExpectLandingTime && flightInfo.ExpectLandingTime.split("T")[1] }}
                </span>
              </el-col>
            </el-row>
            <el-row>
              <el-col
                :xs="24"
                :sm="24"
                :xl="12"
              >
                <span>提取转盘：{{ flightInfo.Carousel }}</span>
              </el-col>
              <el-col
                :xs="24"
                :sm="24"
                :xl="12"
              >
                <span>停机位：{{ flightInfo.StandForLanding }}</span>
              </el-col>
            </el-row>
          </div>
        </div>
      </div>
      <div class="part2">
        <el-table
          ref="containerTable"
          :data="containerTableData"
          border
          style="width: 100%"
          height="344px"
          stripe
          size="mini"
          show-summary
          :summary-method="summaryMethod"
          :header-cell-style="{ color: '#101116' }"
          :row-class-name="rowClass"
          @row-click="containeClick"
        >
          <el-table-column
            v-for="col in containerTableColumn"
            :key="col.id"
            :prop="col.prop"
            :label="col.label"
            :align="col.align || 'center'"
            :show-overflow-tooltip="true"
          />
        </el-table>
      </div>
      <div
        class="part3"
        style="padding-right: 4px;"
      >
        <div class="title">中转进</div>
        <el-table
          ref="transferInBaggageTable"
          :data="transferInBaggageTableData"
          border
          style="width: 100%"
          height="162"
          stripe
          size="mini"
          show-summary
          :summary-method="summaryMethod"
          :header-cell-style="{ color: '#101116' }"
          :cell-class-name="cellClass"
          @cell-click="cellClickHandler"
        >
          <el-table-column
            v-for="col in transferInTableColumn"
            :key="col.id"
            :prop="col.prop"
            :label="col.label"
            :align="col.align || 'center'"
            :show-overflow-tooltip="true"
          />
        </el-table>
      </div>
      <div
        class="part3"
        style="padding-left: 4px;"
      >
        <div class="title">中转出</div>
        <el-table
          ref="transferOutBaggageTable"
          :data="transferOutBaggageTableData"
          border
          style="width: 100%"
          height="162"
          stripe
          size="mini"
          show-summary
          :summary-method="summaryMethod"
          :header-cell-style="{ color: '#101116' }"
          :cell-class-name="cellClass"
          @cell-click="cellClickHandler"
        >
          <el-table-column
            v-for="col in transferOutTableColumn"
            :key="col.id"
            :prop="col.prop"
            :label="col.label"
            :align="col.align || 'center'"
            :show-overflow-tooltip="true"
          />
        </el-table>
      </div>
      <div class="part4">
        <div class="title">
          <!-- <el-cascader
            placeholder="全部行李"
            :options="options"
            :props="props"
            collapse-tags
            size="mini"
            clearable
          /> -->
          <!-- <div class="search">
            <el-input
              v-model="keyWords"
              placeholder="请输入需要搜索姓名或行李编号"
              size="mini"
              style="width: 280px"
            />
            <el-button
              class="searchBtn"
              type="primary"
              size="mini"
            >搜索</el-button>
          </div> -->
          <TimeZoneSelector />
          <img
            class="btn-square btn-shadow"
            src="../../../../assets/baggage/ic_export.png"
          >
          <img
            class="btn-square btn-shadow"
            src="../../../../assets/baggage/ic_setting.png"
            @click="show"
          >
        </div>
        <el-table
          ref="flightBaggageTable"
          :data="dealedTableData"
          border
          style="width: 100%"
          height="calc(100vh - 80px - 16px - 16px - 344px - 8px - 204px - 62px)"
          stripe
          size="mini"
          show-summary
          :summary-method="summaryRow(flightBaggageTableData.length)"
          :header-cell-class-name="headerCellClass"
          :header-cell-style="{ color: '#101116' }"
          :row-class-name="rowClass"
          :cell-class-name="cellClass"
          @cell-click="cellClickHandler"
        >
          <el-table-column
            v-for="col in tableColsCopy"
            :key="col.index"
            :prop="col.prop"
            :label="col.label"
            :align="col.align || 'center'"
            :width="col.width"
            :fixed="col.fixed"
            :formatter="tableFormat"
          >
            <template #header>
              <TableHeaderCell
                :label="col.label"
                :filter-options="flightBaggageTableFilters[col.prop]"
                :filter-values.sync="filterValues[col.prop]"
                :sortable="col.sortable"
                :sort-rule.sync="tableDataSortRules[col.prop]"
              />
            </template>
          </el-table-column>
        </el-table>
      </div>
    </div>
    <!--列设置-->
    <Dialog
      :flag="dialogFlag"
      class="dialog-check-cols"
    >
      <div class="col-dialog">
        <div class="title">列设置</div>
        <div class="content">
          <el-tree
            :data="tableCols"
            :class="colsCheckClass"
            show-checkbox
            node-key="index"
            :default-expand-all="true"
            :props="{
              label: 'label',
              children: 'children'
            }"
            :default-checked-keys="checkedKeysTemp"
            @check="handleCheck"
          />
        </div>
        <div class="foot right t30">
          <el-button
            size="medium"
            class="r24"
            type="primary"
            @click="onCheck"
          >确定</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 TimeZoneSelector from '@/components/TimeZoneSelector'
import { queryMap, myQuery } from '@/api/dataIntegration'
import tableColsMixin from '../../mixins/tableCols'
import timeZoneMixin from '../../mixins/timeZone'
import TableHeaderCell from '@/components/TableHeaderCell'
import { setTableFilters } from '@/utils/table'
import { mapGetters } from 'vuex'

// const arrivalBaggageTableColumn = [
//   { label: '序号', prop: 'index' },
//   { label: '旅客姓名', prop: 'name', sortable: 'custom' },
//   { label: '行李牌号', prop: 'bagNo' },
//   {
//     label: '特殊行李类型',
//     prop: 'specialType',
//     sortable: 'custom'
//   },
//   {
//     label: '容器编号',
//     prop: 'containerNo',
//     sortable: 'custom'
//   },
//   { label: '装载序号', prop: 'loadSequenceIndex' },
//   { label: '卸载', prop: 'uninstall' },
//   { label: '到达', prop: 'arrival' },
//   { label: '提取', prop: 'extract' },
//   { label: '旅客仓位', prop: 'positionNo' },
//   { label: '中转标志', prop: 'transitStatus' },
//   { label: '卷宗号', prop: 'fileNumber' }
// ]
const departureBaggageTableColumn = [
  // { label: '序号', prop: 'index' },
  { label: '旅客姓名', prop: 'PassengerNameUpcase', width: 140, fixed: 'left', filterable: true, sortable: true },
  { label: '行李牌号', prop: 'BagSN', width: 120, fixed: 'left', filterable: true, sortable: true },
  { label: '特殊行李类型', prop: 'SpecialType', width: 120, filterable: true, sortable: true },
  { label: '容器编号', prop: 'U_Device_ID', width: 120, filterable: true, sortable: true },
  { label: '装载序号', prop: 'LoadSN' },
  { label: '值机', prop: 'checkIn', width: 140 },
  { label: '状态', prop: 'latestStatus', filterable: true, sortable: true },
  { label: '安检', prop: 'DealInfo', width: 140 },
  { label: '分拣', prop: 'sortLocationMark', width: 140 },
  { label: '装车', prop: 'loadLocationMark', width: 140 },
  { label: '装机', prop: 'inflLocationMark', width: 140 },
  { label: '中转标志', prop: 'transitFlag' },
  { label: '卷宗号', prop: 'fileNumber' }
]
export default {
  name: 'FlightView',
  components: {
    Dialog,
    TimeZoneSelector,
    TableHeaderCell
  },
  mixins: [tableColsMixin, timeZoneMixin],
  data() {
    return {
      fullscreenLoading: false,
      queryData: {},
      flightInfo: {},
      keyWords: '',
      // options: [
      //   { value: 0, label: 'VIP行李' },
      //   { value: 0, label: 'VIP行李' }
      // ],
      containerTableColumn: [
        { label: '容器编号', prop: 'containerNumber' },
        { label: '类型', prop: 'style' },
        { label: '行李数', prop: 'numberOfBags' }
      ],
      transferInTableColumn: [
        { label: '航班号', prop: 'PreFlightNO' },
        { label: '日期', prop: 'PreFlightDate' },
        { label: '时间', prop: 'flightTime' },
        { label: '始发站', prop: 'PlanDepartureApt' },
        { label: '航班状态', prop: 'FlightStatus' },
        { label: '中转数', prop: 'totalNumber' }
      ],
      transferOutTableColumn: [
        { label: '航班号', prop: 'TransferFlightNO' },
        { label: '日期', prop: 'TransferFlightDate' },
        { label: '时间', prop: 'flightTime' },
        { label: '始发站', prop: 'PlanDepartureApt' },
        { label: '目的站', prop: 'PlanLandingApt' },
        { label: '中转数', prop: 'transferNumber' }
      ],
      // tableCols:
      //   this.$route.matched[0].path === '/arrival' || this.$route.matched[1].path === '/transfer/arrival'
      //     ? arrivalBaggageTableColumn
      //     : departureBaggageTableColumn,
      tableCols: departureBaggageTableColumn,
      containerTableData: [], // 容器统计
      transferInBaggageTableData: [], // 中转进
      transferOutBaggageTableData: [], // 中转出
      flightBaggageTableData: [], // 行李列表
      flightBaggageTableFilters: {},
      filterValues: {},
      tableDataSortRules: {},
      warningContainers: []
    }
  },
  computed: {
    ...mapGetters(['clickedCells']),
    dealedTableData() {
      const filtered = this.flightBaggageTableData.filter(item => {
        let flag = true
        Object.entries(this.filterValues).forEach(([key, arr]) => {
          if (arr.length && !arr.includes(item[key])) {
            flag = false
          }
        })
        return flag
      })
      const sortRules = Object.entries(this.tableDataSortRules).reduce(
        (pre, [key, value]) => {
          if (value) {
            pre[0].push(key)
            value = value === 'ascending' ? 'asc' : 'desc'
            pre[1].push(value)
          }
          return pre
        },
        [[], []]
      )
      return this._.orderBy(filtered, sortRules[0], sortRules[1])
    }
  },
  watch: {
    '$route.query': {
      handler(val) {
        this.queryData = this._.cloneDeep(val)
        const { FlightNO, FlightDate } = this.queryData
        if (FlightNO && FlightDate) {
          this.queryAll([FlightNO, FlightDate])
        } else {
          this.$router.push('/advance')
        }
      },
      deep: true
    },
    fullscreenLoading(val) {
      if (val) {
        this.loading = this.$loading({
          lock: true,
          text: '加载中',
          spinner: 'el-icon-loading',
          background: 'rgba(0, 0, 0, 0.7)'
        })
      } else {
        this.loading.close()
      }
    }
  },
  created() {
    Object.values(this.tableCols).forEach(({ prop, filterable, sortable }) => {
      if (filterable) {
        this.$set(this.flightBaggageTableFilters, prop, [])
        this.$set(this.filterValues, prop, [])
      }
      if (sortable) {
        this.$set(this.tableDataSortRules, prop, '')
      }
    })
  },
  mounted() {
    this.queryData = this._.cloneDeep(this.$route.query)
    const { FlightNO, FlightDate } = this.queryData
    if (FlightNO && FlightDate) {
      this.queryAll([FlightNO, FlightDate])
    } else {
      this.$router.push('/advance')
    }
  },
  updated() {
    this.$nextTick(() => {
      this.$refs['containerTable'].doLayout()
      this.$refs['transferInBaggageTable'].doLayout()
      this.$refs['transferOutBaggageTable'].doLayout()
      this.$refs['flightBaggageTable'].doLayout()
    })
  },
  beforeDestroy() {
    this.loading?.close()
  },
  methods: {
    rowClass({ row, rowIndex }) {
      const classes = []
      if (this.warningContainers.includes(row['containerNumber']) || row['latestStatus'] === '待翻减') {
        classes.push('row-warning')
      }
      return classes.join(' ')
    },
    // 给表头单元格加上 ascending 或 descending 使用 element 自带的排序箭头变色
    headerCellClass({ row, column, rowIndex, columnIndex }) {
      const classes = []
      const rule = this.tableDataSortRules[column.property]
      if (rule) {
        classes.push(rule)
      }
      return classes.join(' ')
    },
    cellClass({ row, column, rowIndex, columnIndex }) {
      const classes = []
      if (
        ['checkIn', 'DealInfo', 'sortLocationMark', 'loadLocationMark', 'inflLocationMark'].includes(column.property)
      ) {
        classes.push('pre-line')
      }
      if (
        ['PreFlightNO', 'totalNumber', 'TransferFlightNO', 'transferNumber', 'PassengerNameUpcase', 'BagSN'].includes(
          column.property
        )
      ) {
        classes.push('cell-click')
        if (
          this.clickedCells.some(
            cell =>
              cell.pageName === this.$route.name &&
              Object.entries(cell.row).every(([key, value]) => row[key] === value) &&
              cell.columnProp === column.property
          )
        ) {
          classes.push('cell-clicked')
        }
      }
      return classes.join(' ')
    },
    cellClickHandler(row, column, cell, event) {
      if (
        ['PreFlightNO', 'totalNumber', 'TransferFlightNO', 'transferNumber', 'PassengerNameUpcase', 'BagSN'].includes(
          column.property
        )
      ) {
        this.$store.dispatch('keepAlive/addClickedCell', {
          row,
          columnProp: column.property,
          pageName: this.$route.name
        })
      }
      switch (column.property) {
        case 'PreFlightNO':
          this.$router.push({
            path: '/advance/flightView',
            query: {
              FlightNO: row.PreFlightNO,
              FlightDate: row.PreFlightDate
            }
          })
          break
        case 'totalNumber':
          this.$router.push({
            path: '/advance',
            query: {
              FlightNO: this.queryData.FlightNO,
              startDate: this.queryData.FlightDate,
              endDate: this.queryData.FlightDate,
              transferArrival: row.PreFlightNO
            }
          })
          break
        case 'TransferFlightNO':
          this.$router.push({
            path: '/advance/flightView',
            query: {
              FlightNO: row.TransferFlightNO,
              FlightDate: row.TransferFlightDate
            }
          })
          break
        case 'transferNumber':
          this.$router.push({
            path: '/advance',
            query: {
              FlightNO: this.queryData.FlightNO,
              startDate: this.queryData.FlightDate,
              endDate: this.queryData.FlightDate,
              transferDeparture: row.TransferFlightNO
            }
          })
          break
        case 'PassengerNameUpcase':
          this.$message.info('开发中')
          break
        case 'BagSN':
          this.$router.push({
            path: `/${this.$route.path.split('/').slice(1, -1).join('/')}/baggageView`,
            query: {
              BagSN: row.BagSN,
              FlightNO: this.queryData.FlightNO,
              FlightDate: this.queryData.FlightDate
            }
          })
          break
        default:
          break
      }
    },
    // 合计行
    summaryMethod({ columns, data }) {
      const sums = []
      if (columns.length > 0) {
        columns.forEach((column, index) => {
          if (index === 0) {
            sums[index] = '合计'
          } else if (
            // 需要计算的列
            ['numberOfBags', 'totalNumber', 'transferNumber'].includes(column.property)
          ) {
            const values = data.map(item => Number(item[column.property]))
            if (values.some(value => !isNaN(value))) {
              sums[index] = values.reduce((prev, curr) => {
                const value = Number(curr)
                if (!isNaN(value)) {
                  return Number(prev) + Number(curr)
                } else {
                  return Number(prev)
                }
              }, 0)
            } else {
              sums[index] = 0
            }
          } else {
            // 过滤某些字段不参与计算
            sums[index] = '-'
          }
        })
      }
      return sums
    },
    // 统计行数
    summaryRow(num) {
      return function () {
        return ['合计', `共${num}件`]
      }
    },
    containeClick(row) {
      this.$router.push({
        path: '/advance',
        query: {
          FlightNO: this.queryData.FlightNO,
          startDate: this.queryData.FlightDate,
          endDate: this.queryData.FlightDate,
          U_Device_ID: row.containerNumber
        }
      })
    },
    queryflightInfo(dataContent) {
      return myQuery(queryMap.flightInfo, ...dataContent)
    },
    queryContainer(dataContent) {
      return myQuery(queryMap.container, ...dataContent)
    },
    queryTrasferOutBaggage(dataContent) {
      return myQuery(queryMap.transferOutBaggage, ...dataContent)
    },
    queryTrasferInBaggage(dataContent) {
      return myQuery(queryMap.transferInBaggage, ...dataContent)
    },
    queryBaggageByFlightNO(dataContent) {
      return myQuery(queryMap.baggageByFlightNO, ...dataContent)
    },
    async queryAll(dataContent) {
      this.fullscreenLoading = true
      try {
        const [
          flightInfo,
          containerTableDataData,
          transferOutBaggageTableData,
          transferInBaggageTableData,
          flightBaggageTableData
        ] = await Promise.all([
          this.queryflightInfo(dataContent),
          this.queryContainer(dataContent),
          this.queryTrasferOutBaggage(dataContent),
          this.queryTrasferInBaggage(dataContent),
          this.queryBaggageByFlightNO(dataContent)
        ])
        flightInfo.length && (this.flightInfo = flightInfo[0])
        this.containerTableData = containerTableDataData
        this.transferOutBaggageTableData = transferOutBaggageTableData.map(item => {
          item['flightTime'] = item['flightDate'] ? item['flightDate'].split('T')[1] : ''
          return item
        })
        this.transferInBaggageTableData = transferInBaggageTableData.map(item => {
          item['flightTime'] = item['flightDate'] ? item['flightDate'].split('T')[1] : ''
          return item
        })

        this.warningContainers = []
        this.flightBaggageTableData = flightBaggageTableData.map((item, index) => {
          item['latestStatus'] === '待翻减' && this.warningContainers.push(item['U_Device_ID'])
          item['transitFlag'] = item['PreFlightNO'] ? '是' : '否'
          return item
        })
        setTableFilters(this.flightBaggageTableData, this.flightBaggageTableFilters)
      } catch (error) {
        console.log('错误', error)
      }
      this.fullscreenLoading = false
    }
  }
}
</script>

<style lang="scss" scoped>
.flight-view {
  padding: 16px 0 16px 8px;
  overflow: hidden;
  background: #dfe3ea;
  .flight-wrap {
    padding-right: 8px;
    width: 100%;
    height: calc(100vh - 80px - 16px - 16px);
    display: flex;
    flex-direction: row;
    justify-content: flex-start;
    flex-wrap: wrap;
    overflow: auto;
    .part1 {
      width: 71.15%;
      height: 344px;
      background: #041741;
      padding: 24px;
      .title {
        font-size: 18px;
        font-weight: bold;
        color: #ffffff;
      }
      .part1_info {
        width: 100%;
        display: flex;
        flex-direction: row;
        justify-content: space-between;
        padding-top: 32px;

        .part1_info_box {
          width: calc(33.333% - 48px);
          height: 244px;
          background: #2c416d;
          position: relative;
          padding: 24px 24px 12px;
          display: flex;
          flex-direction: column;
          align-content: space-around;
          overflow-x: hidden;
          overflow-y: auto;
          .el-row {
            margin-bottom: 24px;
            &:last-child {
              margin: 0;
            }
            @media only screen and (max-width: 1919px) {
              .el-col-sm-24:nth-child(2) {
                margin-top: 24px;
              }
            }
          }
          span {
            display: inline-block;
            font-size: 16px;
            font-weight: 400;
            color: #ffffff;
          }
        }
        .part1_info_box::after {
          content: '';
          border-top: 15px solid transparent;
          border-left: 10px solid transparent;
          border-bottom: 10px solid #fff;
          position: absolute;
          right: -34px;
          transform: rotate(-45deg);
          top: 50%;
          margin-top: -15px;
        }
        .part1_info_box:last-child::after {
          content: '';
          border-top: 0;
          border-left: 0;
          border-bottom: 0;
        }
      }
    }
    .part2 {
      width: calc(100% - 71.15%);
      height: 344px;
      padding-left: 16px;
    }
    .part3 {
      width: 50%;
      height: 204px;
      margin-top: 8px;
      .title {
        background: #fafcff;
        font-size: 14px;
        font-weight: bold;
        color: #101116;
        padding: 12px 0;
        text-align: center;
      }
    }
    .part4 {
      width: 100%;
      .title {
        padding: 16px 0;
        display: flex;
        flex-direction: row;
        justify-content: flex-end;
        align-items: center;
        .search {
          display: flex;
          flex-direction: row;
          margin-left: 20px;
          margin-right: 10px;
        }
        .el-dropdown {
          height: 30px;
        }
        .btn-square {
          margin-left: 20px;
          &:last-child {
            margin-right: 30px;
          }
        }
      }
    }
  }
  ::v-deep .el-table {
    .cell-click {
      cursor: pointer;
      color: #2d7cff;
      &.cell-clicked {
        color: purple;
      }
    }
    .row-warning .el-table__cell {
      background: orange;
    }
  }
}
</style>
