客户服务

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

@@ -0,0 +1,170 @@
+<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>