lingji-work-fe/src/views/property-marketing/intelligent-solution/businessAnalysisReport.vue

<template>
  <view>
    <a-space direction="vertical" style="background-color: #fff; width: 100%; padding: 24px; margin: 24px 0">
      <a-space align="end">
        <span class="part-div-header-title">业务洞察报告 </span>
      </a-space>
      <a-space align="center" class="search-form-div" size="medium">
        <a-form-item field="name" class="search-form" label="服务/产品">
          <a-input v-model="listQuery.name" placeholder="请搜索...">
            <template #prefix>
              <icon-search />
            </template>
          </a-input>
        </a-form-item>
        <a-form-item field="name" label="时间筛选">
          <a-range-picker
            showTime
            :time-picker-props="{
              defaultValue: ['00:00:00', '00:00:00'],
            }"
            style="width: 380px"
          />
        </a-form-item>
        <a-form-item field="name">
          <a-space>
            <a-button type="outline" class="search-btn" @click="handleSearch">
              <template #icon>
                <icon-search />
              </template>
              <template #default>搜索</template>
            </a-button>
            <a-button type="outline" class="reset-btn" @click="handleSearch">
              <template #icon>
                <icon-refresh />
              </template>
              <template #default>重置</template>
            </a-button>
          </a-space>
        </a-form-item>
      </a-space>
      <a-table
        :columns="columns"
        :data="listResult.data"
        :filter-icon-align-left="alignLeft"
        @change="handleChange"
        :scroll="true"
        :pagination="false"
      >
      </a-table>
      <a-pagination
        style="float: right"
        :total="listResult.total"
        :size="listQuery.size"
        show-total
        show-jumper
        show-page-size
      />
    </a-space>
  </view>
</template>

<script setup lang="ts">
const listQuery = reactive({
  name: '',
  size: 0,
});

const listResult = reactive({
  data: [],
  total: 0,
});

const columns = [
  {
    title: '服务/产品',
    dataIndex: 'service_name',
    slotName: 'rank',
    width: 60,
    minWidth: 60,
  },
  {
    title: '生成日期',
    dataIndex: 'create_time',
    width: 120,
    minWidth: 120,
    sortable: {
      sortDirections: ['ascend', 'descend'],
    },
  },
  {
    titleSlotName: 'hotTitle',
    width: 180,
    minWidth: 180,
    title: '目标客群',
    dataIndex: 'customer',
    slotName: 'hot',
  },
  {
    title: '价格区间',
    dataIndex: 'price',
    width: 120,
    minWidth: 120,
  },
  {
    titleSlotName: 'lasterUpdateTime',
    title: '最后更新日期',
    dataIndex: 'volumeRate',
    width: 180,
    minWidth: 180,
    sortable: {
      sortDirections: ['ascend', 'descend'],
    },
    slotName: 'lasterUpdateTime',
  },
  {
    title: '操作人',
    dataIndex: 'operator',
    width: 120,
    minWidth: 120,
  },
];
</script>

<style scoped lang="less">
.part-div-header-title {
  justify-content: center;
  display: flex;
  flex-direction: column;
  color: var(--Text-1, #211f24);
  font-size: 18px;
  font-family: Alibaba PuHuiTi;
  font-weight: 400;
  line-height: 26px;
  word-wrap: break-word;
}

.search-form-div {
  margin-top: 10px;
}

:deep(.arco-picker),
:deep(.arco-input-wrapper) {
  border-radius: 4px;
  border-color: #d7d7d9;
  background-color: #fff;
  height: 32px;

  &:focus-within,
  &.arco-input-focus {
    background-color: var(--color-bg-2);
    border-color: rgb(var(--primary-6));
    box-shadow: 0 0 0 0 var(--color-primary-light-2);
  }
}

.reset-btn {
  min-width: 72px;
  color: black;
}
</style>