admin-vben5/apps/web-antd/src/views/property/customerService/centerConsole/index.vue

<script setup lang="ts">
import { EditOutlined } from '@ant-design/icons-vue';
import {EchartsUI, type EchartsUIType, useEcharts} from "@vben/plugins/echarts";
import {onMounted, ref} from "vue";
import {statisticsByTime} from "#/api/property/reportStatistics";

const orderLineRef = ref<EchartsUIType>();
const { renderEcharts } = useEcharts(orderLineRef);
const xAxisData = ref<any[]>([]);
const seriesData = ref<any[]>([]);
async function fetchOrderTrend() {
  const res = await statisticsByTime({ timeUnit: 1 });
  xAxisData.value = res?.time ?? [];
  seriesData.value = res?.counts ?? [];
  renderEcharts({
    title: { text: '客户续租率趋势' },
    tooltip: { trigger: 'axis' },
    xAxis: {
      type: 'category',
      data: xAxisData.value,
      boundaryGap: false,
    },
    yAxis: { type: 'value', axisLabel: { formatter: (value) => `${value * 100}%` } },
    series: [
      {
        name: '订单趋势',
        type: 'line',
        data: seriesData.value || [],
        smooth: true,
      },
    ],
  });
}
onMounted(async () => {
  await fetchOrderTrend();
})
</script>

<template>
<div class="panel">

  <div class="bulletin-board">
    <div class="bulletin-board-title">工单看板</div>
    <div class="bulletin-board-content">
      <div>
        <div>
          <div>工单总数：</div>
          <div>56</div>
          <div style="color: #1890FF">点击前往工单池</div>
        </div>
        <div class="icon-edit"><EditOutlined /></div>
      </div>
      <div>
        <div>
          <div>待派工单数：</div>
          <div>56</div>
          <div style="color: #1890FF">点击前往工单待办</div>
        </div>
        <div class="icon-edit"><EditOutlined /></div>
      </div>
      <div>
        <div>
          <div>未办结超时工单：</div>
          <div>56</div>
          <div>处理中的工单数：<span style="color: green">5</span></div>
        </div>
        <div class="icon-edit"><EditOutlined /></div>
      </div>
      <div>
        <div>
          <div>当月工单超时率：</div>
          <div>56</div>
          <div>超时工单数：<span style="color: red">0</span></div>
        </div>
        <div class="icon-edit"><EditOutlined /></div>
      </div>
      <div>
        <div>
          <div>当月满意度：</div>
          <div>100%</div>
          <div>满意度：5</div>
        </div>
        <div class="icon-edit"><EditOutlined /></div>
      </div>
    </div>
  </div>
  <div class="chart">
    <div class="chart-one">
      <div>
        <EchartsUI
          ref="orderLineRef"
          height="350px"
          width="100%"
          style="background: #fff; border-radius: 8px"
        />
      </div>
      <div style="background-color: red"></div>
    </div>
    <div class="chart-two">
      <div>
        <EchartsUI
          ref="orderLineRef"
          height="350px"
          width="100%"
          style="background: #fff; border-radius: 8px"
        />
      </div>
      <div style="background-color: red"></div>
    </div>
  </div>
</div>
</template>

<style scoped lang="scss">
.panel{
  width: 100%;
  padding: 40px;
  box-sizing: border-box;

  .bulletin-board{

    .bulletin-board-title{
      font-size: 25px;
      font-weight: bold;
      margin-bottom: 20px;
    }
    .bulletin-board-content{
      display: grid;
      grid-template-columns: repeat(5, 1fr);
      gap: 40px;

      > div{
        height: auto;
        background-color: #FFFFFF;
        padding: 18px;
        border-radius: 10px;
        display: flex;
        justify-content: space-between;

        > div:first-child {
          line-height: 32px;

          div:nth-child(2) {
            font-size: 20px;
            font-weight: bold;
          }
        }
        .icon-edit{
          font-size: 30px;
        }
      }
    }
  }
  .chart{

    .chart-one{
      margin-top:40px;
      display: grid;
      grid-template-columns: 2fr 1fr;
      gap: 40px;
    }
    .chart-two{
      margin-top:40px;
      display: grid;
      grid-template-columns: repeat(2, 1fr);
      gap: 40px;
    }
  }
}
</style>