feat: 添加生产驾驶舱路由跳转

yuan

2 天以前 6f3011dd56f545dcdbf56abf744e302ebc6e9c5e

feat: 添加生产驾驶舱路由跳转

 src/views/reportAnalysis/PSIDataAnalysis/components/left-bottom.vue

@@ -1,6 +1,6 @@
<template>
  <div>
    <PanelHeader title="采购品分布" to="/procurementManagement/paymentLedger" />
    <PanelHeader title="采购品分布" to="/procurementManagement/procurementLedger" />
    <div class="main-panel panel-item-customers">
      <CarouselCards :items="cardItems" :visible-count="3" />
      <div class="pie-chart-wrapper" ref="pieWrapperRef">

 src/views/reportAnalysis/PSIDataAnalysis/components/left-top.vue

@@ -1,6 +1,6 @@
<template>
  <div>
    <PanelHeader title="销售品分布" to="/salesManagement/receiptPaymentLedger" />
    <PanelHeader title="销售品分布" to="/salesManagement/salesLedger" />
    <div class="main-panel panel-item-customers">
      <CarouselCards :items="cardItems" :visible-count="3" />
      <div class="pie-chart-wrapper" ref="pieWrapperRef">

 src/views/reportAnalysis/PSIDataAnalysis/psiNavigation.js

@@ -1,6 +1,6 @@
export const PSI_ROUTE_MAP = {
  é”€å”®å“åˆ†å¸ƒ: '/salesManagement/receiptPaymentLedger',
  é‡‡è´­å“åˆ†å¸ƒ: '/procurementManagement/paymentLedger',
  é”€å”®å“åˆ†å¸ƒ: '/salesManagement/salesLedger',
  é‡‡è´­å“åˆ†å¸ƒ: '/procurementManagement/procurementLedger',
  é”€å”®äº§å“æ•°: '/salesManagement/salesLedger',
  é‡‡è´­äº§å“æ•°: '/procurementManagement/procurementLedger',
  å‚¨å­˜äº§å“æ•°: '/inventoryManagement/stockManagement',

 src/views/reportAnalysis/productionAnalysis/components/PanelHeader.vue

@@ -1,17 +1,35 @@
<template>
  <div class="panel-header">
  <div
    class="panel-header"
    :class="{ clickable: !!to }"
    @click="handleClick"
  >
    <span class="panel-title">{{ title }}</span>
  </div>
</template>

<script setup>
defineProps({
import { useRouter } from 'vue-router'

const props = defineProps({
  title: {
    type: String,
    required: true,
    default: ''
  },
  to: {
    type: String,
    default: ''
  }
})

const router = useRouter()

const handleClick = () => {
  if (props.to) {
    router.push(props.to)
  }
}
</script>

<style scoped>
@@ -30,4 +48,12 @@
  padding-left: 46px;
  line-height: 36px;
}

.panel-header.clickable {
  cursor: pointer;
}

.panel-header.clickable:hover .panel-title {
  color: #43e8fc;
}
</style>

 src/views/reportAnalysis/productionAnalysis/components/center-bottom.vue

@@ -1,6 +1,6 @@
<template>
  <div>
    <PanelHeader title="生产订单完成进度" />
    <PanelHeader title="生产订单完成进度" to="/productionManagement/productionOrder" />
    <div class="main-panel">
      <div class="panel-item-customers">
        <CarouselCards :items="cardItems" :visible-count="4" />

 src/views/reportAnalysis/productionAnalysis/components/center-center.vue

@@ -2,7 +2,7 @@
  <div>
    <!-- è®¾å¤‡ç»Ÿè®¡ -->
    <div class="equipment-stats">
      <div class="equipment-header">
      <div class="equipment-header clickable" @click="handleNavigate">
        <img
          src="@/assets/BI/shujutongjiicon@2x.png"
          alt="图标"
@@ -32,10 +32,21 @@

<script setup>
import { ref, onMounted, inject, watch, nextTick } from 'vue'
import { useRouter } from 'vue-router'
import * as echarts from 'echarts'
import Echarts from '@/components/Echarts/echarts.vue'
import { inputOutputAnalysis } from '@/api/viewIndex.js'
import DateTypeSwitch from "@/views/reportAnalysis/productionAnalysis/components/DateTypeSwitch.vue";
import { getProductionRoute } from '../productionNavigation.js'

const router = useRouter()

const handleNavigate = () => {
  const path = getProductionRoute('投入产出分析')
  if (path) {
    router.push(path)
  }
}

const dateType = ref(3) // 1=周 2=月 3=季度
const chartRef = ref(null)
@@ -204,6 +215,14 @@
  padding-bottom: 2px;
}

.equipment-header.clickable {
  cursor: pointer;
}

.equipment-header.clickable:hover .equipment-title {
  opacity: 0.85;
}

.equipment-title {
  font-weight: 500;
  font-size: 18px;

 src/views/reportAnalysis/productionAnalysis/components/center-top.vue

@@ -6,6 +6,8 @@
        v-for="item in statItems"
        :key="item.name"
        class="stat-card"
        :class="{ clickable: !!getStatRoute(item.name) }"
        @click="handleStatClick(item.name)"
      >
        <img src="@/assets/BI/icon@2x.png" alt="图标" class="card-icon" />
        <div class="card-content">
@@ -25,9 +27,21 @@

<script setup>
import { ref, onMounted, inject, watch } from 'vue'
import { useRouter } from 'vue-router'
import { orderCount } from '@/api/viewIndex.js'
import { getProductionRoute } from '../productionNavigation.js'

const router = useRouter()
const statItems = ref([])

const getStatRoute = (name) => getProductionRoute(name)

const handleStatClick = (name) => {
  const path = getStatRoute(name)
  if (path) {
    router.push(path)
  }
}

const formatPercent = (val) => {
  const num = Number(val) || 0
@@ -81,6 +95,14 @@
  height: 142px;
}

.stat-card.clickable {
  cursor: pointer;
}

.stat-card.clickable:hover .card-label {
  color: #43e8fc;
}

.card-icon {
  width: 100px;
  height: 100px;

 src/views/reportAnalysis/productionAnalysis/components/left-bottom.vue

@@ -1,6 +1,6 @@
<template>
  <div>
    <PanelHeader title="在制品统计分析" />
    <PanelHeader title="在制品统计分析" to="/productionManagement/productionOrder" />
    <div class="main-panel panel-item-customers">
      <CarouselCards :items="cardItems" :visible-count="3" />
      <div class="chart-wrapper">

 src/views/reportAnalysis/productionAnalysis/components/left-top.vue

@@ -1,6 +1,6 @@
<template>
  <div>
    <PanelHeader title="工序产出分析" />
    <PanelHeader title="工序产出分析" to="/productionManagement/processStatistics" />
    <div class="main-panel panel-item-customers">
      <div class="filters-row">
        <DateTypeSwitch v-model="dateType" @change="handleDateTypeChange" />

 src/views/reportAnalysis/productionAnalysis/components/right-bottom.vue

@@ -1,6 +1,6 @@
<template>
  <div>
    <PanelHeader title="生产核算分析" />
    <PanelHeader title="生产核算分析" to="/productionManagement/productionCosting" />
    <div class="main-panel panel-item-customers">
      <div class="filters-row">
        <DateTypeSwitch v-model="dateType" @change="handleDateTypeChange" />

 src/views/reportAnalysis/productionAnalysis/components/right-top.vue

@@ -1,6 +1,6 @@
<template>
  <div>
    <PanelHeader title="工单执行效率分析" />
    <PanelHeader title="工单执行效率分析" to="/productionManagement/productionManagement/workOrderEdit/index" />
    <div class="main-panel panel-item-customers">
      <div class="filters-row">
        <DateTypeSwitch v-model="dateType" @change="handleDateTypeChange" />

 src/views/reportAnalysis/productionAnalysis/productionNavigation.js

¶Ô±ÈÐÂÎļþ
@@ -0,0 +1,19 @@
const PRODUCTION_ORDER_ROUTE = '/productionManagement/productionOrder'

export const PRODUCTION_ROUTE_MAP = {
  å·¥åºäº§å‡ºåˆ†æž: '/productionManagement/processStatistics',
  åœ¨åˆ¶å“ç»Ÿè®¡åˆ†æž: PRODUCTION_ORDER_ROUTE,
  ç”Ÿäº§è®¢å•æ•°: PRODUCTION_ORDER_ROUTE,
  å·²å®Œæˆè®¢å•æ•°: PRODUCTION_ORDER_ROUTE,
  å¾…生产订单: PRODUCTION_ORDER_ROUTE,
  å¾…生产订单数: PRODUCTION_ORDER_ROUTE,
  ç”Ÿäº§è®¢å•å®Œæˆè¿›åº¦: PRODUCTION_ORDER_ROUTE,
  ç”Ÿäº§è®¢å•å®Œæˆè¿›åº¦æ•°: PRODUCTION_ORDER_ROUTE,
  æŠ•å…¥äº§å‡ºåˆ†æž: '/productionManagement/productionReporting',
  å·¥å•æ‰§è¡Œæ•ˆçŽ‡åˆ†æž: '/productionManagement/productionManagement/workOrderEdit/index',
  ç”Ÿäº§æ ¸ç®—分析: '/productionManagement/productionCosting',
}

export function getProductionRoute(name) {
  return PRODUCTION_ROUTE_MAP[name] || ''
}