增加首页大屏显示

wangrong

2026-08-28 17b92e9b60dda6dcc20c748046a5ff3c3958d52e

 src/modules/report/views/screen/operation.vue

@@ -3,40 +3,46 @@
      <el-row :gutter="10" class="kpi-row">
         <el-col :lg="3" :sm="8" :xs="12">
            <kpi-card label="在线分拣员" :value="data.kpis.sorterOnline"
               :hint="`${data.kpis.sorterOnline} / ${data.kpis.sorterTotal}`" />
               :hint="`${data.kpis.sorterOnline} / ${data.kpis.sorterTotal}`"
               :demo="isDemoField('kpis.sorterOnline')" />
         </el-col>
         <el-col :lg="3" :sm="8" :xs="12">
            <kpi-card label="在线车辆" :value="data.kpis.vehicleOnline"
               :hint="`${data.kpis.vehicleOnline} / ${data.kpis.vehicleTotal}`" />
               :hint="`${data.kpis.vehicleOnline} / ${data.kpis.vehicleTotal}`"
               :demo="isDemoField('kpis.vehicleOnline')" />
         </el-col>
         <el-col :lg="3" :sm="8" :xs="12">
            <kpi-card label="在线分拣点" :value="data.kpis.siteOnline"
               :hint="`${data.kpis.siteOnline} / ${data.kpis.siteTotal}，按站点启用`" />
               :hint="`${data.kpis.siteOnline} / ${data.kpis.siteTotal}，按站点启用`"
               :demo="isDemoField('kpis.siteOnline')" />
         </el-col>
         <el-col :lg="3" :sm="8" :xs="12">
            <kpi-card label="今日回收订单" :value="data.kpis.todayOrders" :hint="``" />
            <kpi-card label="今日回收订单" :value="data.kpis.todayOrders" :demo="isDemoField('kpis.todayOrders')" />
         </el-col>
         <el-col :lg="4" :sm="8" :xs="12">
            <kpi-card label="今日预约 / 待处理" :value="data.kpis.todayAppointments"
               :hint="`待处理 ${data.kpis.pendingAppointments}`" />
               :hint="`待处理 ${data.kpis.pendingAppointments}`"
               :demo="isDemoField('kpis.todayAppointments')" />
         </el-col>
         <el-col :lg="4" :sm="8" :xs="12">
            <kpi-card label="异常告警" :value="data.kpis.alerts" alert
               :hint="`健康异常 ${data.kpis.healthAlerts}，不展示隐私体征`" />
               :hint="`健康异常 ${data.kpis.healthAlerts}，不展示隐私体征`"
               :demo="isDemoField('kpis.alerts')" />
         </el-col>
         <el-col :lg="4" :sm="8" :xs="12">
            <kpi-card label="车辆安全事件" :value="safetyCount" hint="超速 / 急刹等，来自车辆日汇总" />
            <kpi-card label="车辆安全事件" :value="safetyCount" hint="超速 / 急刹等，来自车辆日汇总"
               :demo="isDemoSection('vehicles')" />
         </el-col>
      </el-row>

      <el-row :gutter="10" class="mid-row">
         <el-col :lg="14" :xs="24">
            <panel-card title="订单趋势" sub="现场 / 预约 / 大屏 / 活动，按天对比">
            <panel-card title="订单趋势" sub="现场 / 预约 / 大屏 / 活动，按天对比" :demo="isDemoSection('ordersByType')">
               <v-chart :option="orderOption" autoresize class="chart" />
            </panel-card>
         </el-col>
         <el-col :lg="10" :xs="24">
            <panel-card title="预约订单漏斗" sub="新增/待审核 → 已确认/已接单 → 已完成">
            <panel-card title="预约订单漏斗" sub="新增/待审核 → 已确认/已接单 → 已完成" :demo="isDemoSection('appointmentFlow')">
               <div class="funnel">
                  <div v-for="(item, index) in data.appointmentFlow" :key="item.name" class="funnel__item">
                     <div class="funnel__name">{{ item.name }}</div>
@@ -54,7 +60,7 @@

      <el-row :gutter="10">
         <el-col :lg="8" :xs="24">
            <panel-card title="分拣员状态" sub="来自分拣员日表，只汇总状态，不展示体征明细">
            <panel-card title="分拣员状态" sub="来自分拣员日表，只汇总状态，不展示体征明细" :demo="isDemoSection('sorterStatus')">
               <div class="status-list">
                  <div v-for="item in data.sorterStatus" :key="item.name" class="status-list__item">
                     <i :style="{ background: item.color }" />
@@ -65,7 +71,7 @@
            </panel-card>
         </el-col>
         <el-col :lg="8" :xs="24">
            <panel-card title="车辆运行" sub="公司领导看运力与安全，不进校领导首页">
            <panel-card title="车辆运行" sub="公司领导看运力与安全，不进校领导首页" :demo="isDemoSection('vehicles')">
               <div class="table table--vehicle">
                  <div class="table__head">
                     <span>车牌</span>
@@ -85,7 +91,7 @@
            </panel-card>
         </el-col>
         <el-col :lg="8" :xs="24">
            <panel-card title="分拣点吞吐" sub="运营维度才下钻到点位">
            <panel-card title="分拣点吞吐" sub="运营维度才下钻到点位" :demo="isDemoSection('sites')">
               <div class="table table--site">
                  <div class="table__head">
                     <span>收集点</span>
@@ -112,9 +118,10 @@
import { computed } from 'vue';
import KpiCard from '../../components/kpi-card.vue';
import PanelCard from '../../components/panel-card.vue';
import { useChartTheme, useScreenData } from '../../hooks/use-screen';
import { useChartTheme, useScreenData, useScreenFieldSource } from '../../hooks/use-screen';

const { data } = useScreenData();
const { isDemoField, isDemoSection } = useScreenFieldSource();
const { mutedColor, splitColor, tooltip } = useChartTheme();

const safetyCount = computed(() => data.value.vehicles.reduce((s, e) => s + e.overspeed, 0));