<template>
  <div class="w-100%">
    <div class="w-100% flex mb-20px real-time-data">
      <div class="mr-10px title text-gray-500">实时数据</div>
      <div class="">更新时间 2022-06-15 12:00</div>
    </div>
    <div class="w-100% grid gap-x-15px gap-y-10px grid-cols-6">
      <div
        class="top-card bg-#fff .dark:bg-#1D1E1F! b-1px b-transparent .dark:b-#2A2B2C b-solid"
        v-for="(item, index) in topCardList"
        :key="index"
      >
        <div class="card-box mb-5px">
          <div class="text text-gray-500">{{ item.title }}</div>
        </div>
        <span class="text-value">
          <avue-count-up :end="item.value"></avue-count-up>
        </span>
        <div class="card-box mt-10px" :class="item.type == '1' ? 'top' : 'bottom'">
          <div class="text">
            <span class="mr-5px">同比昨日 {{ item.button }}</span>
          </div>
          <div class="tendency" :class="item.type == '1' ? 'ascent' : 'descent'"> </div>
        </div>
      </div>
    </div>
    <div class="w-100% flex gap-x-20px">
      <div class="flex-basis-65%" style="width: calc(65% - 20px)">
        <div
          class="real-echart pt-20px b-1px .dark:bg-#1D1E1F! b-transparent .dark:b-#2A2B2C b-solid"
        >
          <div class="util-box">
            <div class="util-title ml-20px">
              <div class="placeholder mr-7px"></div>
              <div class=".dark:c-#E5EAF3"> 订单及销量趋势 </div>
            </div>
            <div class="util">
              <el-button-group>
                <el-button
                  v-for="item in typeList1"
                  :key="item.type"
                  :type="item.type == isActive1 ? 'primary' : ''"
                  @click="clickFluctuate(item.type)"
                >
                  {{ item.title }}
                </el-button>
              </el-button-group>
              <div class="cursor-pointer text-14px" @click="clickBtn">
                查看更多
                <span style="font-weight: bold"> > </span>
              </div>
            </div>
          </div>
          <Echart
            :options="fluctuate_option"
            style="z-index: 1"
            class="mt--28px"
            width="100%"
            height="368px"
          />
        </div>
        <div
          class="real-echart pt-20px b-1px .dark:bg-#1D1E1F! b-transparent .dark:b-#2A2B2C b-solid"
        >
          <div class="util-box">
            <div class="util-title ml-20px">
              <div class="placeholder mr-7px"></div>
              <div class=".dark:c-#E5EAF3"> 新增用户及会员趋势 </div>
            </div>
            <div class="util">
              <el-button-group>
                <el-button
                  v-for="item in typeList3"
                  :key="item.type"
                  :type="item.type == isActive3 ? 'primary' : ''"
                  @click="clickBrokenLine(item.type)"
                >
                  {{ item.title }}
                </el-button>
              </el-button-group>
              <div class="look-more cursor-pointer" @click="clickBtn">
                查看更多
                <span style="font-weight: bold"> > </span>
              </div>
            </div>
          </div>
          <Echart :options="broken_line_option" class="mt--28px" width="100%" height="368px" />
        </div>
        <div
          class="real-echart pt-20px b-1px .dark:bg-#1D1E1F! b-transparent .dark:b-#2A2B2C b-solid"
        >
          <div class="util-box">
            <div class="util-title ml-20px">
              <div class="placeholder mr-7px"></div>
              <div class=".dark:c-#E5EAF3"> 待处理订单 </div>
            </div>
            <div class="util">
              <div class="look-more cursor-pointer" @click="clickBtn">
                查看更多
                <span style="font-weight: bold"> > </span>
              </div>
            </div>
          </div>
          <div class="m-20px pb-30px">
            <avue-crud
              ref="crudRef"
              v-model="form"
              :option="option"
              :row-style="rowStyle"
              :header-cell-class-name="headerCellClassName"
              :data="data"
            >
              <template #menu="{ size, row, index }">
                <el-button @click="tip(row, index)" text type="primary" :size="size">
                  <div class="bj-btn mr-3px">
                    <Icon :size="11" icon="ep:arrow-right-bold"></Icon>
                  </div>
                  订单详情
                </el-button>
              </template>
            </avue-crud>
          </div>
        </div>
      </div>
      <div class="flex-basis-35% w-35%">
        <div
          class="real-echart pt-20px b-1px .dark:bg-#1D1E1F! b-transparent .dark:b-#2A2B2C b-solid"
        >
          <div class="util-box">
            <div class="util-title ml-20px">
              <div class="placeholder mr-7px"></div>
              <div class=".dark:c-#E5EAF3"> 商品销量占比 </div>
            </div>
            <div class="util">
              <el-button-group>
                <el-button
                  v-for="item in typeList2"
                  :key="item.type"
                  :type="item.type == isActive2 ? 'primary' : ''"
                  @click="clickCyclicAnnular(item.type)"
                >
                  {{ item.title }}
                </el-button>
              </el-button-group>
              <div class="look-more cursor-pointer" @click="clickBtn">
                查看更多
                <span style="font-weight: bold"> > </span>
              </div>
            </div>
          </div>
          <Echart :options="cyclic_annular_option" class="mt--28px" width="100%" height="368px" />
        </div>
        <div
          class="real-echart pt-20px b-1px .dark:bg-#1D1E1F! b-transparent .dark:b-#2A2B2C b-solid"
        >
          <div class="util-box">
            <div class="util-title ml-20px">
              <div class="placeholder mr-7px"></div>
              <div class=".dark:c-#E5EAF3"> 用户访问趋势 </div>
            </div>
            <div class="util">
              <el-button-group>
                <el-button
                  v-for="item in typeList4"
                  :key="item.type"
                  :type="item.type == isActive4 ? 'primary' : ''"
                  @click="clickBdt(item.type)"
                >
                  {{ item.title }}
                </el-button>
              </el-button-group>
              <div class="look-more cursor-pointer" @click="clickBtn">
                查看更多
                <span style="font-weight: bold"> > </span>
              </div>
            </div>
          </div>
          <Echart :options="fluctuate_option2" class="mt--28px" width="100%" height="368px" />
        </div>
        <div
          class="real-echart pt-20px b-1px .dark:bg-#1D1E1F! b-transparent .dark:b-#2A2B2C b-solid"
        >
          <div class="util-box">
            <div class="util-title ml-20px">
              <div class="placeholder mr-7px"></div>
              <div class=".dark:c-#E5EAF3"> 本月单品销量排名 </div>
            </div>
            <div class="util">
              <div class="look-more cursor-pointer" @click="clickBtn">
                查看更多
                <span style="font-weight: bold"> > </span>
              </div>
            </div>
          </div>
          <div class="m-20px pb-30px">
            <avue-crud
              ref="crudRef2"
              v-model="form2"
              :option="option2"
              :row-style="rowStyle"
              :header-cell-class-name="headerCellClassName"
              :data="data2"
            >
            </avue-crud>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script lang="ts" setup>
import { useAppStore } from '@/store/modules/app'
import { CACHE_KEY, useCache } from '@/hooks/web/useCache'
import { ElMessage } from 'element-plus'
import { getTableList, batchGetTableList } from '@/api/design/report'
import * as TableApi from '@/api/design/table'

defineOptions({ name: 'Home5' })

interface TopCardList {
  dictionary: string
  title: string
  button?: string
  type?: string
  value?: number
}
interface CyclicAnnularSeries {
  name: string
  value: number
}

let topCardList = ref<TopCardList[]>([
  { title: '今日交易额（元）', dictionary: 'jrjye' },
  { title: '今日订单量（元）', dictionary: 'jrddl' },
  { title: '今日浏览量', dictionary: 'jrlll' },
  { title: '今日访问用户', dictionary: 'jrfwyh' },
  { title: '今日注册用户', dictionary: 'jrzcyh' },
  { title: '今日新增会员', dictionary: 'jrxzhy' }
])

const isActive1 = ref(1)
const isActive2 = ref(1)
const isActive3 = ref(1)
const isActive4 = ref(1)

const typeList1 = ref([
  { title: '本周', type: 1 },
  { title: '本月', type: 2 },
  { title: '本年', type: 3 }
])
const typeList2 = ref([
  { title: '本周', type: 1 },
  { title: '本月', type: 2 },
  { title: '本年', type: 3 }
])
const typeList3 = ref([
  { title: '本周', type: 1 },
  { title: '本月', type: 2 },
  { title: '本年', type: 3 }
])
const typeList4 = ref([
  { title: '本周', type: 1 },
  { title: '本月', type: 2 },
  { title: '本年', type: 3 }
])

// 波动图
const fluctuateXAxis = ref<string[]>([])
const fluctuateSeries1 = ref<string[]>([])
const fluctuateSeries2 = ref<string[]>([])
const fluctuate_option = ref({
  tooltip: {
    trigger: 'axis'
  },
  color: ['#4FA7FF', '#39EDD6'],
  legend: {
    data: ['销售额', '订单量'],
    icon: 'rich',
    show: true,
    itemWidth: 12,
    itemHeight: 12,
    textStyle: {
      color: '#666666',
      fontSize: '12px'
    },

    bottom: 20,
    right: 'center',
    itemGap: 20
  },
  grid: {
    left: '4%',
    right: '4%',
    bottom: 70,
    top: '16%',
    containLabel: true
  },
  xAxis: {
    data: fluctuateXAxis.value,
    type: 'category',
    boundaryGap: false,
    axisLine: {
      symbol: 'none',
      lineStyle: {
        color: '#EBEBEB'
      }
    },
    axisTick: {
      show: false
    },
    axisLabel: {
      interval: 0,
      color: '#999999',
      fontSize: 12,
      padding: [10, 0, 0, 0],
      align: 'center'
    }
  },
  yAxis: {
    type: 'value',
    axisLabel: {
      color: '#6071A9',
      fontSize: 12
    },
    splitLine: {
      lineStyle: {
        color: '#EBEBEB',
        type: 'solid'
      }
    }
  },
  series: [
    {
      name: '销售额',
      type: 'line',
      data: fluctuateSeries1.value,
      smooth: true,
      lineStyle: {
        width: 0
      },
      areaStyle: {
        opacity: 0.8
      },
      symbol: 'none'
    },
    {
      name: '订单量',
      data: fluctuateSeries2.value,
      type: 'line',
      smooth: true,
      lineStyle: {
        width: 0
      },
      areaStyle: {
        opacity: 0.8
      },
      symbol: 'none'
    }
  ]
})

// 波动图2
const fluctuate2XAxis = ref<string[]>([])
const fluctuate2Series = ref<string[]>([])
const fluctuate_option2 = ref({
  tooltip: {
    trigger: 'axis'
  },
  color: ['#FFA83C'],
  legend: {
    data: ['访问用户'],
    icon: 'rich',
    show: true,
    itemWidth: 12,
    itemHeight: 12,
    textStyle: {
      color: '#666666',
      fontSize: '12px'
    },

    bottom: 20,
    right: 'center',
    itemGap: 20
  },
  grid: {
    left: '4%',
    right: '4%',
    bottom: 70,
    top: '16%',
    containLabel: true
  },
  xAxis: {
    data: fluctuate2XAxis.value,
    type: 'category',
    boundaryGap: false,
    axisLine: {
      symbol: 'none',
      lineStyle: {
        color: '#EBEBEB'
      }
    },
    axisTick: {
      show: false
    },
    axisLabel: {
      interval: 0,
      color: '#999999',
      fontSize: 12,
      padding: [10, 0, 0, 0],
      align: 'center'
    }
  },
  yAxis: {
    type: 'value',
    axisLabel: {
      color: '#6071A9',
      fontSize: 12
    },
    splitLine: {
      lineStyle: {
        color: '#EBEBEB',
        type: 'solid'
      }
    }
  },
  series: [
    {
      name: '访问用户',
      type: 'line',
      data: fluctuate2Series.value,
      smooth: true,
      lineStyle: {
        width: 0
      },
      areaStyle: {
        opacity: 0.6
      },
      symbol: 'none'
    }
  ]
})

// 环状图
const cyclicAnnularSeries = ref<CyclicAnnularSeries[]>()
const cyclicAnnularSeriesNum = ref(0)
const cyclic_annular_option = ref({
  // 环形图中间默认显示文字
  color: ['#2391FF', '#FF745A', '#FFC328', '#8167F5', '#07E8AE'],
  tooltip: {
    extraCssText: 'box-shadow: 0px 0px 10px 0px rgba(0,0,0,0.15);',
    backgroundColor: 'rgba(0,0,0,0.75)',
    textStyle: {
      color: '#FFFFFF'
    },
    formatter: (param) => {
      let { name, data } = param
      let result = `<div>${name}：${data.xse}</div>`
      return result
    }
  },
  legend: {
    orient: 'vertial',
    itemHeight: 12,
    icon: 'circle',
    top: '30%',
    right: '10%',
    itemGap: 20,
    data: cyclicAnnularSeries.value,
    textStyle: {
      fontSize: 14,
      color: 'rgba(0,0,0,0.65)',
      rich: {
        a: {
          padding: [0, 0, 0, 40],
          fontSize: 14,
          fontWeight: '700'
        }
      }
    },
    formatter: (name) => {
      const value = cyclicAnnularSeries.value?.find((item) => item.name === name)
      return `${name}` + '{a|' + value?.value + '%' + '}'
    }
  },
  series: [
    {
      type: 'pie',
      center: ['30%', '50%'],
      radius: ['35%', '55%'],
      label: {
        position: 'center',
        formatter: () => {
          return [`{tit|销售总额}`, `{num|${cyclicAnnularSeriesNum.value}}`].join('\n')
        },
        rich: {
          tit: {
            fontSize: 16,
            color: '#999999',
            fontWeight: 400,
            align: 'center'
          },
          num: {
            padding: [10, 0, 0, 0],
            fontSize: 28,
            fontWeight: 'bold',
            color: '#333333',
            align: 'center'
          }
        }
      },
      data: cyclicAnnularSeries.value
    }
  ]
})

// 折线图
const brokenLineXAxis = ref<string[]>([])
const brokenLineSeries1 = ref<string[]>([])
const brokenLineSeries2 = ref<string[]>([])
const broken_line_option = ref({
  tooltip: {
    trigger: 'axis'
  },
  color: ['#4FA7FF', '#39EDD6'],
  legend: {
    data: ['新增用户', '新增会员'],
    icon: 'rich',
    show: true,
    itemWidth: 12,
    itemHeight: 12,
    textStyle: {
      color: '#666666',
      fontSize: '12px'
    },
    bottom: 20,
    right: 'center',
    itemGap: 20
  },
  grid: {
    left: '4%',
    right: '4%',
    bottom: 70,
    top: '16%',
    containLabel: true
  },
  xAxis: {
    data: brokenLineXAxis.value,
    type: 'category',
    boundaryGap: false,
    axisLine: {
      symbol: 'none',
      lineStyle: {
        color: '#EBEBEB'
      }
    },
    axisTick: {
      show: false
    },
    axisLabel: {
      interval: 0,
      color: '#999999',
      fontSize: 12,
      padding: [10, 0, 0, 0],
      align: 'center'
    }
  },
  yAxis: {
    type: 'value',
    axisLabel: {
      color: '#6071A9',
      fontSize: 12
    },
    splitLine: {
      lineStyle: {
        color: '#EBEBEB',
        type: 'solid'
      }
    }
  },
  series: [
    {
      name: '新增用户',
      type: 'line',
      data: brokenLineSeries1.value,
      lineStyle: {
        width: 1
      },
      symbol: 'none'
    },
    {
      name: '新增会员',
      data: brokenLineSeries2.value,
      type: 'line',
      lineStyle: {
        width: 1
      },
      symbol: 'none'
    }
  ]
})

const option = ref({
  editBtn: false,
  addBtn: false,
  delBtn: false,
  searchBtn: false,
  refreshBtn: false,
  columnBtn: false,
  border: false,
  menuWidth: 120,
  column: [
    {
      label: '订单编号',
      overHidden: true,
      prop: 'bh',
      width: '120'
    },
    {
      label: '商品名称',
      overHidden: true,
      prop: 'name',
      width: '200'
    },
    {
      label: '下单时间',
      overHidden: true,
      prop: 'date',
      width: '110'
    },
    {
      label: '数量',
      overHidden: true,
      prop: 'num'
    },
    {
      label: '金额',
      overHidden: true,
      prop: 'money',
      html: true,
      formatter: (val) => {
        let text = ''
        if (val.money) {
          if (val.money.toString().indexOf('￥') == -1) {
            text = '￥' + val.money
          } else {
            text = val.money
          }
        } else {
          text = '￥0'
        }
        return `<span>${text}</span>`
      }
    },
    {
      label: '状态',
      overHidden: true,
      prop: 'status',
      html: true,
      formatter: (val) => {
        let color = ''
        let text = ''
        if (val.status == '1') {
          color = '#409EFF'
          text = '待发货'
        } else if (val.status == '2') {
          color = '#FF9900'
          text = '待付款'
        } else if (val.status == '3') {
          color = '#F56C6C'
          text = '待退款'
        }
        return (
          '<div class="flex items-center justify-center text-12px">' +
          `<div class="w-5px h-5px mr-3px " style="background-color:${color};border-radius: 100%;"></div><div>` +
          text +
          '</div></div>'
        )
      }
    }
  ]
})
const option2 = ref({
  menu: false,
  addBtn: false,

  border: false,
  menuWidth: 120,
  column: [
    {
      label: '排名',
      overHidden: true,
      prop: 'pm',
      width: 70,
      html: true,
      formatter: (val) => {
        let selectedArr = [1, 2, 3]
        let pmHtmlColor = ''
        if (selectedArr.includes(val.pm)) {
          pmHtmlColor = '#FF9500'
        } else {
          pmHtmlColor = '#2391FF'
        }

        return (
          `<div class="w-25px h-25px" style="margin:0 auto;background-color:${pmHtmlColor};color:white;border-radius:5px;font-weight:bold">` +
          val.pm +
          '</div>'
        )
      }
    },
    {
      label: '商品名称',
      overHidden: true,
      prop: 'name'
    },
    {
      label: '销量',
      overHidden: true,
      prop: 'sl'
    },
    {
      label: '销售额',
      overHidden: true,
      prop: 'sse',
      html: true,
      formatter: (val) => {
        let text = ''
        if (val.sse) {
          if (val.sse.toString().indexOf('￥') == -1) {
            text = '￥' + val.sse
          } else {
            text = val.sse
          }
        } else {
          text = '￥0'
        }
        return `<span>${text}</span>`
      }
    }
  ]
})

const fluctuateUtil = (data) => {
  fluctuateXAxis.value = []
  fluctuateSeries1.value = []
  fluctuateSeries2.value = []
  data.forEach((ele) => {
    fluctuateXAxis.value.push(ele.date)
    fluctuateSeries1.value.push(ele.xse)
    fluctuateSeries2.value.push(ele.ddl)
  })
  fluctuate_option.value.xAxis.data = fluctuateXAxis.value
  fluctuate_option.value.series[0].data = fluctuateSeries1.value
  fluctuate_option.value.series[1].data = fluctuateSeries2.value
}
const clickFluctuate = async (type) => {
  let res = await getTableList('example_order_sales', { type: type })
  fluctuateUtil(res.records)
  isActive1.value = type
}

const cyclicAnnularUtil = (data) => {
  cyclicAnnularSeriesNum.value = 0
  cyclicAnnularSeriesNum.value = data.reduce((a, b) => {
    let num = +b.xse
    return a + num
  }, 0)

  cyclicAnnularSeries.value = data
  cyclic_annular_option.value.series[0].data = cyclicAnnularSeries.value
}
const clickCyclicAnnular = async (type) => {
  let res = await getTableList('example_order_sales_percentage', { type: type })
  cyclicAnnularUtil(res.records)
  isActive2.value = type
}

const brokenLineUtil = (data) => {
  brokenLineXAxis.value = []
  brokenLineSeries1.value = []
  brokenLineSeries2.value = []
  data.forEach((ele) => {
    brokenLineXAxis.value.push(ele.date)
    brokenLineSeries1.value.push(ele.xzyh)
    brokenLineSeries2.value.push(ele.xzhy)
  })
  broken_line_option.value.xAxis.data = brokenLineXAxis.value
  broken_line_option.value.series[0].data = brokenLineSeries1.value
  broken_line_option.value.series[1].data = brokenLineSeries2.value
}
const clickBrokenLine = async (type) => {
  let res = await getTableList('example_new_user_num', { type: type })
  brokenLineUtil(res.records)
  isActive3.value = type
}

const bdtUtil = (data) => {
  fluctuate2XAxis.value = []
  fluctuate2Series.value = []
  data.forEach((ele) => {
    fluctuate2XAxis.value.push(ele.date)
    fluctuate2Series.value.push(ele.fwyh)
  })
  fluctuate_option2.value.xAxis.data = fluctuate2XAxis.value
  fluctuate_option2.value.series[0].data = fluctuate2Series.value
}

const clickBdt = async (type) => {
  let res = await getTableList('example_user_visits', { type: type })
  bdtUtil(res.records)
  isActive4.value = type
}

let data: any = ref()
let data2: any = ref()
const form = ref({})
const form2 = ref({})

function rowStyle({ row, rowIndex }) {
  if (appStore.isDark) return { backgroundColor: '#1D1E1F' }

  if (rowIndex % 2 === 1) {
    return {
      backgroundColor: '#F2F2F2'
    }
  }
}

function headerCellClassName() {
  if (appStore.isDark) return 'header-cell'
}

const appStore = useAppStore()

watch(
  () => appStore.isDark,
  (val) => {
    if (val) {
      cyclic_annular_option.value.legend.textStyle.color = '#CCCCCC'
    } else {
      cyclic_annular_option.value.legend.textStyle.color = 'rgba(0,0,0,0.65)'
    }
  }
)

const clickBtn = () => {
  ElMessage({
    message: '点击了查看更多',
    type: 'success'
  })
}

function tip(row: object, index: number): void {
  ElMessage({
    message: '订单详情',
    type: 'success'
  })
}

const init = async () => {
  let oneres = await batchGetTableList(
    'example_today_data,example_order_sales,example_order_sales_percentage'
  )

  let todayData = oneres.example_today_data.records[0]
  let orderSales = oneres.example_order_sales.records
  let salesPercentage = oneres.example_order_sales_percentage.records
  topCardList.value = topCardList.value.map((item) => {
    return (item = {
      ...item,
      button: todayData[item.dictionary].button,
      type: todayData[item.dictionary].type,
      value: todayData[item.dictionary].value
    })
  })
  fluctuateUtil(orderSales)
  cyclicAnnularUtil(salesPercentage)

  let endres = await batchGetTableList(
    'example_new_user_num,example_user_visits,example_product_sales_rank'
  )
  let userNum = endres.example_new_user_num.records
  let userVisits = endres.example_user_visits.records
  brokenLineUtil(userNum)
  bdtUtil(userVisits)
  data2.value = endres.example_product_sales_rank.records
  let { records: bdkfData } = await TableApi.getTableList(
    '1847456813371498498',
    { pageNo: 1, pageSize: 10 },
    false
  )
  data.value = bdkfData
}
onMounted(async () => {
  // 判断是否为暗色模式
  const { wsCache } = useCache()
  if (wsCache.get(CACHE_KEY.IS_DARK)) {
    cyclic_annular_option.value.legend.textStyle.color = '#CCCCCC'
  }
  init()
})
</script>

<style lang="scss" scoped>
.real-time-data {
  font-family: '微软雅黑 Bold', '微软雅黑 Regular', '微软雅黑', sans-serif;
  font-size: 12px;
  font-weight: 400;
  color: #999;
  align-items: flex-end;

  .title {
    // color: #666666;
    font-size: 15px;
    font-weight: 700;
  }
}

.top-card {
  padding: 15px;
  border-radius: 10px;
  box-shadow: var(--el-box-shadow-light);
  box-sizing: border-box;

  .card-box {
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 14px;

    .text-value {
      margin-bottom: 15px;
      font-size: 30px;
      font-weight: 700;
    }

    .tendency {
      width: 24px;
      height: 17px;
      background-position: center;
      background-repeat: no-repeat;
      background-size: 100%;
    }
  }

  .card-box.top {
    .text {
      color: rgb(7 183 138);
    }

    .ascent {
      background-image: url('@/assets/svgs/top.svg');
    }
  }

  .card-box.bottom {
    .text {
      color: rgb(250 80 135);
    }

    .descent {
      background-image: url('@/assets/svgs/bottom.svg');
    }
  }

  .text-value {
    margin-bottom: 15px;
    font-size: 28px;
    font-weight: bold;
  }
}

.real-echart {
  margin-top: 20px;
  background-color: #fff;
  border-radius: 8px;
  box-shadow: var(--el-box-shadow-light);
  flex-shrink: 0;

  .util-box {
    position: relative;
    z-index: 20;
    display: flex;
    width: 100%;
    font-family: '微软雅黑 Bold', '微软雅黑 Regular', '微软雅黑', sans-serif;

    .util-title {
      display: flex;
      font-size: 14px;
      font-weight: 600;
      color: rgb(102 102 102);
      align-items: center;

      .placeholder {
        width: 5px;
        height: 16px;
        background-color: rgb(49 167 255);
      }
    }

    .util {
      display: flex;
      padding-right: 30px;
      margin-left: auto;
      font-size: 12px;
      color: #999;
      text-align: right;
      align-items: center;

      .el-button-group {
        display: flex;
        margin-right: 27px;
        flex-wrap: nowrap;

        .el-button {
          height: 28px;
          font-size: 12px;
          border: 1px solid var(--el-color-primary);
        }
      }

      .look-more {
        text-wrap: nowrap;
        font-size: 14px;
      }
    }
  }
}

::v-deep(.el-card) {
  .avue-crud__header {
    display: none;
  }

  .header-cell {
    background-color: #1f1f1f !important;
    border-top: 1px solid var(--el-card-border-color);
  }

  .header-cell:first-child {
    border-left: 1px solid var(--el-card-border-color);
  }

  .header-cell:last-child {
    border-right: 1px solid var(--el-card-border-color);
  }

  .el-table__header {
    font-family: '微软雅黑 Bold', '微软雅黑 Regular', '微软雅黑', sans-serif;

    .el-table__cell {
      font-size: 14px;
      color: rgb(102 102 102);
      background-color: #efefef;
    }
  }

  .el-table__cell {
    height: 45px;
    padding: 0;

    .avue-crud__menu {
      .el-button {
        font-size: 14px;

        .bj-btn {
          display: flex;
          width: 14px;
          height: 13px;
          color: white;
          background-color: #2391ff;
          border-radius: 50%;
          align-items: center;
          justify-content: center;
        }
      }
    }
  }

  .el-table__row {
    height: 45px;
    font-size: 14px;
  }

  .el-table__row {
    td:last-child {
      border-right: 1px solid var(--el-card-border-color);
    }

    td:first-child {
      border-left: 1px solid var(--el-card-border-color);
    }

    .menuClassName {
      border-right: 1px solid var(--el-card-border-color);
    }
  }
}
</style>
