xiugai

.env.dev

@@ -5,8 +5,11 @@ ENV = 'development'
 VUE_APP_TITLE = 洛玻集团驾驶舱
 
 # 芋道管理系统/开发环境
-VUE_APP_BASE_API = 'http://172.16.32.18:7070'
-# VUE_APP_BASE_API = 'http://192.168.0.35:7070'
+# VUE_APP_BASE_API = 'http://172.16.32.18:7070'
+# VUE_APP_BASE_API = 'http://172.16.32.95:7070'
+# VUE_APP_BASE_API = 'http://172.16.33.83:7070'
+
+VUE_APP_BASE_API = 'http://192.168.0.35:7070'
 
 
 # 路由懒加载
@@ -22,4 +25,4 @@ VUE_APP_CAPTCHA_ENABLE = true
 VUE_APP_DOC_ENABLE = true
 
 # 百度统计
-VUE_APP_BAIDU_CODE = fadc1bd5db1a1d6f581df60a1807f8ab
+# VUE_APP_BAIDU_CODE = fadc1bd5db1a1d6f581df60a1807f8ab

.env.prod

@@ -1,16 +1,20 @@
 # 生产环境配置
-NODE_ENV = 'production'
+ENV = 'production'
 
 # 页面标题
 VUE_APP_TITLE = 洛玻集团驾驶舱
 
 # 芋道管理系统/生产环境
-VUE_APP_BASE_API = 'http://192.168.0.35:7070'
+# VUE_APP_BASE_API = '/prod-api'
+VUE_APP_BASE_API = ''
 
 # 根据服务器或域名修改
-# PUBLIC_PATH = 'http://192.168.0.35:7070'
+# PUBLIC_PATH = 'http://my-pi.com:8888/yudao-admin/'
+# PUBLIC_PATH = 'http://192.168.0.33:8888/'
+PUBLIC_PATH = ''
+
 # 二级部署路径
-# VUE_APP_APP_NAME ='yudao-admin'
+VUE_APP_APP_NAME ='yudao-admin'
 
 # 多租户的开关
 VUE_APP_TENANT_ENABLE = true

package.json

@@ -47,6 +47,7 @@
     "benz-amr-recorder": "^1.1.5",
     "bpmn-js-token-simulation": "0.10.0",
     "clipboard": "2.0.8",
+    "code-brick-zj": "^1.1.1",
     "core-js": "^3.26.0",
     "crypto-js": "^4.0.0",
     "echarts": "5.4.0",

src/api/cockpit.js

@@ -43,3 +43,283 @@ export function getAccountSumaryPage(data) {
     params: data,
   });
 }
+
+export function getProfitImpactList(data) {
+  return request({
+    url: "/lb/cost-analysis/profitImpactList",
+    method: "post",
+    data: data,
+  });
+}
+
+export function getSalesRevenueData(data) {
+  return request({
+    url: "lb/sales-revenue/getData",
+    method: "post",
+    data: data,
+  });
+}
+
+export function getOperateCockpit(data) {
+  return request({
+    url: "/lb/operate-cockpit/get",
+    method: "post",
+    data: data,
+  });
+}
+
+export function getOrderDetail(data) {
+  return request({
+    url: "/lb/operate-cockpit/getOrderDetail",
+    method: "post",
+    data: data,
+  });
+}
+
+export function getDataBackUp(data) {
+  return request({
+    url: "/lb/data-backup/page",
+    method: "post",
+    data: data,
+  });
+}
+
+export function recoverDataBackUp(data) {
+  return request({
+    url: "/lb/data-backup/recover",
+    method: "post",
+    data: data,
+  });
+}
+
+// 导出Banner Excel
+export function exportDataBackUp(data) {
+  return request({
+    url: "/lb/data-backup/export-excel",
+    method: "post",
+    data: data,
+    responseType: "blob",
+  });
+}
+export function getDataBackUpDetail(data) {
+  return request({
+    url: "/lb/data-backup/get",
+    method: "post",
+    data: data,
+  });
+}
+
+export function updateDataBackUpDetail(data) {
+  return request({
+    url: "/lb/data-backup/update",
+    method: "post",
+    data: data,
+  });
+}
+
+
+export function getSalesRevenueGroupData(data) {
+  return request({
+    url: "/lb/sales-revenue/getGroupData",
+    method: "post",
+    data: data,
+  });
+}
+
+export function getGrossMarginGroupData(data) {
+  return request({
+    url: "/lb/gross-margin/getGroupData",
+    method: "post",
+    data: data,
+  });
+}
+
+export function getExpenseAnalysisGroupData(data) {
+  return request({
+    url: "/lb/expense-analysis/getGroupData",
+    method: "post",
+    data: data,
+  });
+}
+
+export function getSheetYieldGroupData(data) {
+  return request({
+    url: "/lb/sheet-yield/getGroupData",
+    method: "post",
+    data: data,
+  });
+}
+
+export function getInputOutputRateGroupData(data) {
+  return request({
+    url: "/lb/input-output-rate/getGroupData",
+    method: "post",
+    data: data,
+  });
+}
+export function getSalesRevenueFactoryData(data) {
+  return request({
+    url: "/lb/sales-revenue/getFactoryData",
+    method: "post",
+    data: data,
+  });
+}
+export function getExpenseAnalysisFactoryData(data) {
+  return request({
+    url: "/lb/expense-analysis/getFactoryData",
+    method: "post",
+    data: data,
+  });
+}
+export function getGrossMarginFactoryData(data) {
+  return request({
+    url: "/lb/gross-margin/getFactoryData",
+    method: "post",
+    data: data,
+  });
+}
+
+export function getSheetYieldFactoryData(data) {
+  return request({
+    url: "/lb/sheet-yield/getFactoryData",
+    method: "post",
+    data: data,
+  });
+}
+
+export function getInputOutputRateFactoryData(data) {
+  return request({
+    url: "/lb/input-output-rate/getFactoryData",
+    method: "post",
+    data: data,
+  });
+}
+export function getUnitPriceAnalysisGroupData(data) {
+  return request({
+    url: "/lb/unit-price-analysis/getGroupData",
+    method: "post",
+    data: data,
+  });
+}
+export function getUnitPriceAnalysisBaseData(data) {
+  return request({
+    url: "/lb/unit-price-analysis/getBaseData",
+    method: "post",
+    data: data,
+  });
+}
+
+export function getProfitAnalysisManageList(data) {
+  return request({
+    url: "/lb/profit-analysis/manageList",
+    method: "post",
+    data: data,
+  });
+}
+
+export function getProfitAnalysisTotalList(data) {
+  return request({
+    url: "/lb/profit-analysis/profitTotalList",
+    method: "post",
+    data: data,
+  });
+}
+export function getCostAnalysisData(data) {
+  return request({
+    url: "/lb/cost-analysis/XXCostList2",
+    method: "post",
+    data: data,
+  });
+}
+
+export function getSingleMaterialAnalysis(data) {
+  return request({
+    url: "/lb/cost-analysis/singleMaterialAnalysis",
+    method: "post",
+    data: data,
+  });
+}
+export function getSingleMaterialCostAnalysis(data) {
+  return request({
+    url: "/lb/cost-analysis/singleMaterialCostAnalysis",
+    method: "post",
+    data: data,
+  });
+}
+
+export function getCalendar(data) {
+  return request({
+    url: "lb/index-target-month/getCalendar",
+    method: "post",
+    data: data,
+  });
+}
+export function getLevelStruc(data) {
+  return request({
+    url: "/lb/index-target-month/getLevelStruc",
+    method: "post",
+    data: data,
+  });
+}
+
+export function getTargetMonthPage(data) {
+  return request({
+    url: "/lb/index-target-month/list",
+    method: "post",
+    data: data,
+  });
+}
+
+export function updateTargetMonthData(data) {
+  return request({
+    url: "/lb/index-target-month/update",
+    method: "post",
+    data: data,
+  });
+}
+
+export function getTargetYearPage(data) {
+  return request({
+    url: "/lb/index-target-year/list",
+    method: "post",
+    data: data,
+  });
+}
+
+export function updateTargetYearData(data) {
+  return request({
+    url: "/lb/index-target-year/update",
+    method: "post",
+    data: data,
+  });
+}
+
+export function getRealMonthPage(data) {
+  return request({
+    url: "/lb/index-real-month/list",
+    method: "post",
+    data: data,
+  });
+}
+
+export function getRealMonthCalendar(data) {
+  return request({
+    url: "/lb/index-real-month/getCalendar",
+    method: "post",
+    data: data,
+  });
+}
+export function updateRealMonthData(data) {
+  return request({
+    url: "/lb/index-real-month/update",
+    method: "post",
+    data: data,
+  });
+}
+export function getDictListData(query) {
+  return request({
+    url: "/system/dict-data/page",
+    method: "get",
+    params: query,
+  });
+}

src/assets/icons/svg/openSider.svg

@@ -0,0 +1,12 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg width="32px" height="32px" viewBox="0 0 32 32" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+    <title>展开备份</title>
+    <g id="12-月修改-2-版" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+        <g id="01-运营驾驶舱展开" transform="translate(-1818.000000, -12.000000)" fill="#0B58FF">
+            <g id="展开备份" transform="translate(1818.000000, 12.000000)">
+                <rect id="矩形" stroke="#0B58FF" opacity="0" x="0.5" y="0.5" width="31" height="31"></rect>
+                <path d="M26.9054416,1.26315789 L27.1627614,1.2715785 C27.589262,1.29963047 28.0033877,1.39768715 28.3969525,1.56449606 C28.853625,1.75530116 29.2618455,2.03033772 29.6157539,2.38424612 C29.967102,2.73559426 30.2434779,3.1465945 30.4352441,3.6024321 C30.6356746,4.07532525 30.7368421,4.57721075 30.7368421,5.09455843 L30.7368421,26.9054416 L30.7284215,27.1627614 C30.7003695,27.589262 30.6023129,28.0033877 30.4355039,28.3969525 C30.2446988,28.853625 29.9696623,29.2618455 29.6157539,29.6157539 C29.2644057,29.967102 28.8534055,30.2434779 28.3975679,30.4352441 C27.9246748,30.6356746 27.4227892,30.7368421 26.9054416,30.7368421 L5.09455843,30.7368421 L4.83723859,30.7284215 C4.41073802,30.7003695 3.99661229,30.6023129 3.60304751,30.4355039 C3.14637497,30.2446988 2.73815452,29.9696623 2.38424612,29.6157539 C2.03289798,29.2644057 1.75652209,28.8534055 1.56475593,28.3975679 C1.36432537,27.9246748 1.26315789,27.4227892 1.26315789,26.9054416 L1.26315789,5.09455843 L1.2715785,4.83723859 C1.29963047,4.41073802 1.39768715,3.99661229 1.56449606,3.60304751 C1.75530116,3.14637497 2.03033772,2.73815452 2.38424612,2.38424612 C2.73559426,2.03289798 3.1465945,1.75652209 3.6024321,1.56475593 C4.07532525,1.36432537 4.57721075,1.26315789 5.09455843,1.26315789 L26.9054416,1.26315789 Z M26.9054416,3.17216771 L5.09455843,3.17216771 L4.94438644,3.17795455 C3.95326514,3.25463661 3.17216771,4.08386243 3.17216771,5.09455843 L3.17216771,26.9054416 L3.17795455,27.0556136 C3.25463661,28.0467349 4.08386243,28.8278323 5.09455843,28.8278323 L26.9054416,28.8278323 L27.0556136,28.8220454 C28.0467349,28.7453634 28.8278323,27.9161376 28.8278323,26.9054416 L28.8278323,5.09455843 L28.8220454,4.94438644 C28.7453634,3.95326514 27.9161376,3.17216771 26.9054416,3.17216771 Z M29.2015182,9.76714413 L29.2015182,11.8615014 L2.12281432,11.8615014 L2.12281432,9.76714413 L29.2015182,9.76714413 Z" id="形状结合" fill-rule="nonzero" opacity="0.79078311"></path>
+            </g>
+        </g>
+    </g>
+</svg>

src/assets/icons/svg/orderReturn.svg

@@ -0,0 +1 @@
+<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg t="1763973887412" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="5048" xmlns:xlink="http://www.w3.org/1999/xlink" width="200" height="200"><path d="M538.622846 950.291255c257.534448-171.658591 308.738643-462.119963-75.504648-453.027887l0 225.514173L121.893676 381.529483 463.118198 40.281425l0 220.701564c218.259956-5.67321 470.02705 96.270601 470.02705 280.69596C933.146271 813.119105 768.337691 874.762047 538.622846 950.291255" fill="#1296db" p-id="5049"></path></svg>

src/layout/components/Sidebar/Item.vue

@@ -17,7 +17,7 @@ export default {
     const vnodes = []
 
     if (icon) {
-      vnodes.push(<svg-icon icon-class={icon}/>)
+      vnodes.push(<svg-icon icon-class={icon} />)
     }
 
     if (title) {

src/layout/components/Sidebar/SidebarItem.vue

@@ -1,9 +1,10 @@
 <template>
   <div v-if="!item.hidden">
-    <template v-if="hasOneShowingChild(item.children,item) && (!onlyOneChild.children||onlyOneChild.noShowingChildren)&&!item.alwaysShow">
+    <template
+      v-if="hasOneShowingChild(item.children, item) && (!onlyOneChild.children || onlyOneChild.noShowingChildren) && !item.alwaysShow">
       <app-link v-if="onlyOneChild.meta" :to="resolvePath(onlyOneChild.path)">
-        <el-menu-item :index="resolvePath(onlyOneChild.path)" :class="{'submenu-title-noDropdown':!isNest}">
-          <item :icon="onlyOneChild.meta.icon||(item.meta&&item.meta.icon)" :title="onlyOneChild.meta.title" />
+        <el-menu-item :index="resolvePath(onlyOneChild.path)" :class="{ 'submenu-title-noDropdown': !isNest }">
+          <item :icon="onlyOneChild.meta.icon || (item.meta && item.meta.icon)" :title="onlyOneChild.meta.title" />
         </el-menu-item>
       </app-link>
     </template>
@@ -12,14 +13,8 @@
       <template slot="title">
         <item v-if="item.meta" :icon="item.meta && item.meta.icon" :title="item.meta.title" />
       </template>
-      <sidebar-item
-        v-for="(child, index) in item.children"
-        :key="child.path + index"
-        :is-nest="true"
-        :item="child"
-        :base-path="resolvePath(child.path)"
-        class="nest-menu"
-      />
+      <sidebar-item v-for="(child, index) in item.children" :key="child.path + index" :is-nest="true" :item="child"
+        :base-path="resolvePath(child.path)" class="nest-menu" />
     </el-submenu>
   </div>
 </template>
@@ -76,7 +71,7 @@ export default {
 
       // Show parent if there are no child router to display
       if (showingChildren.length === 0) {
-        this.onlyOneChild = { ... parent, path: '', noShowingChildren: true }
+        this.onlyOneChild = { ...parent, path: '', noShowingChildren: true }
         return true
       }
 

src/layout/components/Sidebar/index.vue

@@ -1,24 +1,15 @@
 <template>
-  <div :class="{'has-logo':showLogo}" :style="{ backgroundColor: settings.sideTheme === 'theme-dark' ? variables.menuBackground : variables.menuLightBackground }">
+  <div :class="{ 'has-logo': showLogo }"
+    :style="{ backgroundColor: settings.sideTheme === 'theme-dark' ? variables.menuBackground : variables.menuLightBackground }">
     <logo v-if="showLogo" :collapse="isCollapse" />
     <el-scrollbar :class="settings.sideTheme" wrap-class="scrollbar-wrapper">
-      <el-menu
-        :default-active="activeMenu"
-        :collapse="isCollapse"
+      <el-menu :default-active="activeMenu" :collapse="isCollapse"
         :background-color="settings.sideTheme === 'theme-dark' ? variables.menuBackground : variables.menuLightBackground"
         :text-color="settings.sideTheme === 'theme-dark' ? variables.menuColor : variables.menuLightColor"
-        :unique-opened="true"
-        :active-text-color="settings.theme"
-        :collapse-transition="false"
-        mode="vertical"
-      >
+        :unique-opened="true" :active-text-color="settings.theme" :collapse-transition="false" mode="vertical">
         <!-- 根据 sidebarRouters 路由，生成菜单 -->
-        <sidebar-item
-          v-for="(route, index) in sidebarRouters"
-          :key="route.path  + index"
-          :item="route"
-          :base-path="route.path"
-        />
+        <sidebar-item v-for="(route, index) in sidebarRouters" :key="route.path + index" :item="route"
+          :base-path="route.path" />
       </el-menu>
     </el-scrollbar>
   </div>

src/main.js

@@ -17,6 +17,8 @@ import './tongji' // 百度统计
 import { getDicts } from "@/api/system/dict/data";
 import { getConfigKey } from "@/api/infra/config";
 import { parseTime, resetForm, handleTree, addBeginAndEndTime, divide } from "@/utils/ruoyi";
+import CodeBrickZj from "code-brick-zj";
+Vue.use(CodeBrickZj);
 import { isEmpty } from "@/utils";
 import Pagination from "@/components/Pagination";
 // 自定义表格工具扩展

src/store/modules/permission.js

@@ -76,6 +76,20 @@ function filterAsyncRouter(asyncRouterMap, lastRouter = false, type = false) {
       }
     }
     const needBlankLayout = [
+      "/operatingRevenue",
+      "/totalProfit",
+      "/operatingProfit",
+      "/expenseAnalysis",
+      "/grossMargin",
+      "/inputOutputRatio",
+      "/rawSheetYield",
+      "/productionCostAnalysis",
+      "/unitPriceAnalysis",
+      "/netPriceAnalysis",
+      "/salesVolumeAnalysis",
+      '/procurementGainAnalysis',
+      '/fullCostAnalysis',
+      // '/expenseAnalysis',
       "/cost", // cost 根路由
       "/cost/profitImpactAnalysis", // cost 子菜单（完整路径）
     ];

src/views/home/PSIAnal.vue

@@ -143,12 +143,6 @@ export default {
     this.destroy();
   },
   mounted() {
-    const startTime = moment().startOf("week").format("YYYY-MM-DD");
-    const endTime = moment().format("YYYY-MM-DD");
-    console.log(this.date, "date");
-    this.date = [startTime, endTime];
-    // this.weekDay = this.weekArr[moment(this.date).format('e')]
-    // this.getData()
     const _this = this;
     _this.beilv = document.documentElement.clientWidth / 1920;
     window.onresize = () => {
@@ -161,9 +155,9 @@ export default {
   methods: {
     getData(obj) {
       getProductSaleAnalysis({
-        startTime: 1762704000000,
-        endTime: 1762790400000,
-        mode: 1
+        startTime: obj.startTime,
+        endTime: obj.endTime,
+        mode: obj.mode,
       }).then((res) => {
         console.log(res);
         this.productSaleData = [

src/views/home/budgetSubmissionDetails.vue

@@ -0,0 +1,266 @@
+<template>
+  <div id="dayReport" class="dayReport" :style="styles">
+    <div v-if="device === 'mobile' && sidebar.opened" class="drawer-bg" @click="handleClickOutside" />
+    <sidebar v-if="!sidebar.hide" class="sidebar-container" />
+    <ReportHeader top-title="预算填报" :is-full-screen="isFullScreen" @screenfullChange="screenfullChange"
+      @getTimeType="handleTimeChange" :isBudget="true" />
+    <div class="main-body" style="
+        flex: 1;
+        display: flex;
+        padding: 0px 16px 0 272px;
+        flex-direction: column;
+      ">
+      <div class="top" style="margin-top: -20px;  display: flex; gap: 16px">
+        <div class="top-three" style="
+            display: grid;
+            gap: 12px;
+            grid-template-columns:416px 1192px;
+          ">
+          <indicatorCalendar :calendarList="calendarList" />
+          <indicatorDetails :timeType="timeType" />
+        </div>
+      </div>
+      <!-- <div class="top" style="margin-top: -20px;  display: flex; gap: 16px">
+        <div class="top-three" style="
+            display: grid;
+            gap: 12px;
+            grid-template-columns:416px 1192px;
+          ">
+
+        </div>
+      </div> -->
+      <!-- <div class="centerImg" style="
+        position: absolute;
+        top: 0;
+        left: 0;
+        width: 100%;
+        height: 100%;
+        z-index: 1; /* 确保在 backp 之上、内容之下 */
+      "></div> -->
+    </div>
+  </div>
+
+</template>
+<script>
+import ReportHeader from "./components/budgetHeader.vue";
+import { Sidebar } from "../../layout/components";
+import screenfull from "screenfull";
+import indicatorCalendar from "./components/budgetCalendar.vue";
+import indicatorDetails from "./components/budgetDetails.vue";
+
+// import premProdStatus from "./components/premProdStatus.vue";
+import { mapState } from "vuex";
+// import operatingLineChart from "../operatingComponents/operatingLineChart";
+// import operatingLineChartCumulative from "../operatingComponents/operatingLineChartCumulative.vue";
+
+import { getSalesRevenueGroupData, getCalendar } from '@/api/cockpit'
+import moment from "moment";
+export default {
+  name: "DayReport",
+  components: {
+    ReportHeader,
+    indicatorCalendar,
+    indicatorDetails,
+    // operatingLineChartCumulative,
+    // operatingLineChart,
+    // premProdStatus,
+    Sidebar,
+  },
+  data() {
+    return {
+      weekArr: ["周日", "周一", "周二", "周三", "周四", "周五", "周六"],
+      isFullScreen: false,
+      timer: null,
+      beilv: 1,
+      timeType:'month',
+      value: 100,
+      sort:1,
+      selectDate:{},
+      monthData: {},
+      ytdData: {},
+      calendarList:{},
+    };
+  },
+
+  created() {
+    this.init();
+    this.windowWidth(document.documentElement.clientWidth);
+  },
+  computed: {
+    ...mapState({
+      theme: (state) => state.settings.theme,
+      sideTheme: (state) => state.settings.sideTheme,
+      sidebar: (state) => state.app.sidebar,
+      device: (state) => state.app.device,
+      needTagsView: (state) => state.settings.tagsView,
+      fixedHeader: (state) => state.settings.fixedHeader,
+    }),
+    classObj() {
+      return {
+        hideSidebar: !this.sidebar.opened,
+        openSidebar: this.sidebar.opened,
+        withoutAnimation: this.sidebar.withoutAnimation,
+        mobile: this.device === "mobile",
+      };
+    },
+    variables() {
+      return variables;
+    },
+    // ...mapGetters(['sidebar']),
+    styles() {
+      const v = Math.floor(this.value * this.beilv * 100) / 10000;
+      return {
+        transform: `scale(${v})`,
+        transformOrigin: "left top",
+        // overflow: hidden;
+      };
+    },
+  },
+  watch: {
+    clientWidth(val) {
+      if (!this.timer) {
+        this.clientWidth = val;
+        this.beilv2 = this.clientWidth / 1920;
+        this.timer = true;
+        let _this = this;
+        setTimeout(function () {
+          _this.timer = false;
+        }, 500);
+      }
+      // 这里可以添加修改时的方法
+      this.windowWidth(val);
+    },
+  },
+  beforeDestroy() {
+    clearInterval(this.timer);
+    this.destroy();
+  },
+  mounted() {
+    const _this = this;
+    _this.beilv = document.documentElement.clientWidth / 1920;
+    window.onresize = () => {
+      return (() => {
+        _this.clientWidth = `${document.documentElement.clientWidth}`;
+        this.beilv = _this.clientWidth / 1920;
+      })();
+    };
+    this.getData()
+  },
+  methods: {
+    // sortChange(value) {
+    //   this.sort = value
+    //   this.getData()
+    // },
+    getData() {
+      getCalendar().then((res) => {
+        console.log(res, 'res');
+        this.calendarList = res.data
+        // this.monthData = res.data.month
+        // this.ytdData = res.data.ytd
+      })
+      // getSalesRevenueGroupData({
+      //   startTime: this.dateData.startTime,
+      //   endTime: this.dateData.endTime,
+      //   sort: this.sort,
+      //   index: undefined,
+      //   factory: undefined
+      //   // timeDim: obj.mode
+      // }).then((res) => {
+      //   console.log(res);
+      //   this.monthData= res.data.month
+      //   this.ytdData = res.data.ytd
+      // })
+    },
+    handleTimeChange(obj) {
+      console.log(obj, 'obj');
+      this.timeType = obj
+      // this.getData()
+    },
+    handleClickOutside() {
+      this.$store.dispatch("app/closeSideBar", { withoutAnimation: false });
+    },
+    windowWidth(value) {
+      this.clientWidth = value;
+      this.beilv2 = this.clientWidth / 1920;
+    },
+    change() {
+      this.isFullScreen = screenfull.isFullscreen;
+    },
+    init() {
+      if (!screenfull.isEnabled) {
+        this.$message({
+          message: "you browser can not work",
+          type: "warning",
+        });
+        return false;
+      }
+      screenfull.on("change", this.change);
+    },
+    destroy() {
+      if (!screenfull.isEnabled) {
+        this.$message({
+          message: "you browser can not work",
+          type: "warning",
+        });
+        return false;
+      }
+      screenfull.off("change", this.change);
+    },
+    // 全屏
+    screenfullChange() {
+      console.log("screenfull.enabled", screenfull.isEnabled);
+
+      if (!screenfull.isEnabled) {
+        this.$message({
+          message: "you browser can not work",
+          type: "warning",
+        });
+        return false;
+      }
+      screenfull.toggle(this.$refs.dayReportB);
+    },
+    // 导出
+    // exportPDF() {
+    //   this.$message.success('正在导出，请稍等！')
+    //   const element = document.getElementById('dayRepDom')
+    //   element.style.display = 'block'
+    //   const fileName = '株洲碲化镉生产日报' + moment().format('yyMMDD') + '.pdf'
+    //   html2canvas(element, {
+    //     dpi: 300, // Set to 300 DPI
+    //     scale: 3 // Adjusts your resolution
+    //   }).then(function(canvas) {
+    //     const imgWidth = 595.28
+    //     const imgHeight = 841.89
+    //     const pageData = canvas.toDataURL('image/jpeg', 1.0)
+    //     const PDF = new JsPDF('', 'pt', [imgWidth, imgHeight])
+    //     PDF.addImage(pageData, 'JPEG', 0, 0, imgWidth, imgHeight)
+    //     setTimeout(() => {
+    //       PDF.save(fileName) // 导出文件名
+    //     }, 1000)
+    //   })
+    //   element.style.display = 'none'
+    // }
+  },
+};
+</script>
+<style scoped lang="scss">
+@import "~@/assets/styles/mixin.scss";
+@import "~@/assets/styles/variables.scss";
+.dayReport {
+  width: 1920px;
+  height: 1080px;
+  background: url("../../assets/img/backp.png") no-repeat;
+  background-size: cover;
+}
+.hideSidebar .fixed-header {
+  width: calc(100% - 54px);
+}
+
+.sidebarHide .fixed-header {
+  width: calc(100%);
+}
+
+.mobile .fixed-header {
+  width: 100%;
+}
+</style>

src/views/home/components/CostsBottomBar.vue

@@ -10,10 +10,10 @@
         </div>
       </div>
     </div>
-    <div class="lineBottom" style="height: 214px; width: 100%">
-      <!-- 传递 series 数据给子组件，添加 key 确保数据更新时重新渲染 -->
-      <coreLineChart style="height: 214px; width: 680px" :chart-series="chartSeries"
-        :key="JSON.stringify(chartSeries)" />
+    <div class="lineBottom" style="height: 213px; width: 100%">
+      <!-- 传递动态生成的 series 数据和 xAxis 数据给子组件 -->
+      <coreLineChart style="height: 213px; width: 680px" :chart-series="chartSeries" :x-axis-data="xAxisData"
+        :dateData="dateData" />
     </div>
   </div>
 </template>
@@ -25,80 +25,96 @@ import * as echarts from 'echarts';
 export default {
   name: "Container",
   components: { coreLineChart },
-  props: ["name", "size", "icon"],
+  props: {
+    line: { // 接收父组件传递的 cost 数据对象
+      type: Object,
+      default: () => ({})
+    },
+    dateData: {
+      type: Object,
+      default: () => ({})
+    }
+  },
   data() {
     return {
-      activeButton: undefined,
-      itemList: [
-        { unit: "单价·元/m²", targetValue: 16, currentValue: 14.5, progress: 90 },
-        { unit: "净价·元/m²", targetValue: 16, currentValue: 15.2, progress: 85 },
-        { unit: "销量·万m²", targetValue: 20, currentValue: 16, progress: 80 },
-        { unit: "双镀面板·万m²", targetValue: 15, currentValue: 13.8, progress: 92 },
-      ],
-      // 定义要传递的 series 数据（对应图例的三个费用类型）
-      chartSeries: [
-        {
+      // 图表样式配置项，可以抽离出来方便管理
+      chartConfig: {
+        manageCost: {
           name: '管理费用',
-          type: 'line',
-          stack: 'Total',
-          symbol: 'circle',
-          lineStyle: { color: 'rgba(11, 88, 255, .5)' },
-          itemStyle: {
-            color: 'rgba(11, 88, 255, .5)',
-            borderColor: 'rgba(11, 88, 255, 1)',
-            borderWidth: 1
-          },
-          areaStyle: {
-            opacity: 0.5,
-            color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
-              { offset: 0, color: 'rgba(11, 88, 255, .4)' },
-              { offset: 1, color: 'rgba(18, 255, 245, 0)' },
-            ]),
-          },
-          data: [140, 232, 101, 264, 90, 340] // 与 xAxis 数据长度一致（6个月份）
+          lineColor: 'rgba(11, 88, 255, .5)',
+          itemColor: 'rgba(11, 88, 255, .5)',
+          borderColor: 'rgba(11, 88, 255, 1)',
+          areaGradient: [
+            { offset: 0, color: 'rgba(11, 88, 255, .4)' },
+            { offset: 1, color: 'rgba(18, 255, 245, 0)' },
+          ]
         },
-        {
+        saleCost: {
           name: '销售费用',
-          type: 'line',
-          stack: 'Total',
-          symbol: 'circle',
-          lineStyle: { color: 'rgba(54, 181, 138, .5)' },
-          itemStyle: {
-            color: 'rgba(54, 181, 138, .5)',
-            borderColor: 'rgba(54, 181, 138, 1)',
-            borderWidth: 1
-          },
-          areaStyle: {
-            opacity: 0.5,
-            color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
-              { offset: 0, color: 'rgba(54, 181, 138, .4)' },
-              { offset: 1, color: 'rgba(18, 255, 245, 0)' },
-            ]),
-          },
-          data: [120, 282, 111, 234, 220, 340]
+          lineColor: 'rgba(54, 181, 138, .5)',
+          itemColor: 'rgba(54, 181, 138, .5)',
+          borderColor: 'rgba(54, 181, 138, 1)',
+          areaGradient: [
+            { offset: 0, color: 'rgba(54, 181, 138, .4)' },
+            { offset: 1, color: 'rgba(18, 255, 245, 0)' },
+          ]
         },
-        {
+        financeCost: {
           name: '财务费用',
+          lineColor: 'rgba(255, 132, 0, .5)',
+          itemColor: 'rgba(255, 132, 0, .5)',
+          borderColor: 'rgba(255, 132, 0, 1)',
+          areaGradient: [
+            { offset: 0, color: 'rgba(255, 132, 0, .4)' },
+            { offset: 1, color: 'rgba(18, 255, 245, 0)' },
+          ]
+        }
+      }
+    };
+  },
+  computed: {
+    // 动态生成 X 轴数据
+    xAxisData() {
+      // 从 cost.line 中获取任意一个有数据的键的 keys 作为 X 轴
+      const lineData = this.line || {};
+      const firstKey = Object.keys(lineData)[0];
+      return firstKey ? Object.keys(lineData[firstKey]) : [];
+    },
+    // 动态生成 series 数据
+    chartSeries() {
+      const lineData = this.line || {};
+      const xAxisKeys = this.xAxisData;
+
+      // 如果没有 X 轴数据，则返回空数组
+      if (xAxisKeys.length === 0) {
+        return [];
+      }
+
+      // 遍历配置项，生成 series
+      return Object.keys(this.chartConfig).map(key => {
+        const config = this.chartConfig[key];
+        // 确保数据顺序和 X 轴一致
+        const dataValues = xAxisKeys.map(date => lineData[key] ? lineData[key][date] : 0);
+
+        return {
+          name: config.name,
           type: 'line',
-          stack: 'Total',
           symbol: 'circle',
-          lineStyle: { color: 'rgba(255, 132, 0, .5)' },
+          symbolSize: 6,
+          lineStyle: { color: config.lineColor },
           itemStyle: {
-            color: 'rgba(255, 132, 0, .5)',
-            borderColor: 'rgba(255, 132, 0, 1)',
+            color: config.itemColor,
+            borderColor: config.borderColor,
             borderWidth: 1
           },
           areaStyle: {
             opacity: 0.5,
-            color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
-              { offset: 0, color: 'rgba(255, 132, 0, .4)' },
-              { offset: 1, color: 'rgba(18, 255, 245, 0)' },
-            ]),
+            color: new echarts.graphic.LinearGradient(0, 0, 0, 1, config.areaGradient),
           },
-          data: [90, 150, 180, 120, 250, 280]
-        }
-      ]
-    };
+          data: dataValues
+        };
+      });
+    }
   },
   methods: {}
 };

src/views/home/components/Header.vue

@@ -2,20 +2,16 @@
   <header class="report-header">
     <!-- 左侧区域：logo + 标题 -->
     <div class="left-content">
-      <img style="height: 36px;" src="../../../assets/img/cnbm.png" alt="benmaLogo" >
+      <img style="height: 36px;" src="../../../assets/img/cnbm.png" alt="benmaLogo">
       <div class="top-title">{{ topTitle }}</div>
     </div>
 
-    <div class="center-content">
-      <!-- 循环 pageRoutes，不再硬编码文字 -->
-      <div class="item" v-for="(page, index) in pageRoutes" :key="index" @click="goToPage(page.path, index)">
-        <span class="item-text">{{ page.text }}</span>
-      </div>
-    </div>
-    <!-- :class="{ 'no-skew': activeIndex === index }
-    " -->
     <!-- 右侧区域：全屏按钮 -->
     <div class="right-content">
+      <el-button type="text" class="screen-btn" @click="changeHomeSider">
+        <svg-icon style="color: #0B58FF;" v-if="openSider" icon-class="closeSider" />
+        <svg-icon style="color: #0B58FF;" v-else icon-class="openSider" />
+      </el-button>
       <el-button type="text" class="screen-btn" :title="isFullScreen ? '退出全屏' : '全屏'" @click="changeFullScreen">
         <svg-icon style="color: #0B58FF;" v-if="isFullScreen" icon-class="unFullScreenView" />
         <svg-icon style="color: #0B58FF;" v-else icon-class="fullScreenView" />
@@ -24,150 +20,157 @@
 
     <!-- 时间选择区域：日/月/年按钮 + label + 日期选择器 -->
     <div class="timeType">
-      <div class="item" v-for="(item, index) in timeTypes" :key="index" @click="activeTime = index"
-        :class="{ 'no-skew': activeTime === index }">
-        <span class="item-text">{{ item.text }}</span>
-      </div>
       <div class="dateP">
         <div class="label">
-          <span class="label-text">日期选择</span>
+          <span class="label-text">月份选择</span>
         </div>
-        <el-date-picker v-model="date" :type="getPickerType" :placeholder="getPickerPlaceholder"
-          class="custom-date-picker" style="width: 132px;height: 29px;" @change="emitTimeRange" />
+        <el-date-picker :clearable="false" v-model="date" type="month" placeholder="请选择月份" class="custom-date-picker"
+          value-format="timestamp"
+          style="width: 132px;height: 29px;"
+          @change="emitTimeRange"
+          />
       </div>
     </div>
   </header>
 </template>
 
 <script>
+import moment from 'moment'
 export default {
   name: 'Header',
   props: {
     isFullScreen: { type: Boolean, default: false },
-    topTitle: { type: String, default: '' }
+    openSider: { type: Boolean, default: false },
+    topTitle: { type: String, default: '' },
+    dateData: {
+      type: Object,
+      default: () => ({})
+    },
   },
   data() {
     return {
       currentTime: '',
       timeTimer: null,
-      date: undefined,
-      activeIndex: -1,
-      activeTime: 1, // 0=日，1=月，2=年（默认选中“日”）
+      date: Date.now(), // 使用时间戳格式
+      activeTime: 1, // 0=日，1=月，2=年（默认选中"月"）
       pageRoutes: [
-        { text: '营业收入', path: '/operatingRevenue' },
+        { text: '营业收入', path: '/operatingRevenue/operatingRevenueIndex' },
         { text: '利润分析', path: '/profitAnalysis' },
         { text: '产销率库存分析', path: '/PSIAnal' },
         { text: '成本分析', path: '/cost/cost' },
         { text: '驾驶舱报表', path: '/cockpit' }
       ],
-      // 定义时间类型配置：text=按钮文字，pickerType=选择器类型，placeholder=占位符
-      timeTypes: [
-        { text: '日', pickerType: 'date', placeholder: '选择日期' },
-        { text: '月', pickerType: 'month', placeholder: '选择月份' },
-        { text: '年', pickerType: 'year', placeholder: '选择年份' }
-      ]
-    }
-  },
-  computed: {
-    // 动态获取日期选择器类型
-    getPickerType() {
-      return this.timeTypes[this.activeTime].pickerType;
-    },
-    // 动态获取日期选择器占位符
-    getPickerPlaceholder() {
-      return this.timeTypes[this.activeTime].placeholder;
     }
   },
   methods: {
     goToPage(path, index) {
-      // 1. 跳转到对应路由
       this.$router.push(path);
-      // 2. 更新activeIndex，让当前点击项高亮
-      this.activeIndex = index;
     },
+    changeHomeSider() { this.$emit('siderOpenChange') },
     changeFullScreen() { this.$emit('screenfullChange') },
     padZero(num) { return num < 10 ? '0' + num : num },
+
     /**
- * 核心方法1：根据维度计算时间区间（首次进入时基于赋值的当月日期，计算“当月第一天0点→次月第一天0点”）
- * @returns {Object} 包含 start（开始时间）、end（结束时间）、dimension（维度）的区间对象
- */
+     * 计算时间区间
+     * @returns {Object} 包含 startTime、endTime、mode、targetMonth 的区间对象
+     */
     calculateTimeRange() {
+      // 固定为月维度
+      const mode = 2;
+      // 初始化时间戳为0（兜底值）
       let startTime = 0;
       let endTime = 0;
-      const mode = this.activeTime + 1; // 1=日，2=月，3=年
-      const defaultMoment = moment(); // 默认当前时间
+      // 存储目标月份
+      let targetMonth = '';
 
-      // 处理选择的日期：转为moment对象（兼容不同选择器格式）
-      console.log('this.date', this.date);
+      try {
+        // 使用 this.date（时间戳）创建 moment 对象
+        let targetMoment = this.date
+          ? moment(this.date)  // 解析时间戳
+          : moment(); // 如果 date 无效，使用当前时间
 
-      const targetMoment = this.date
-        ? moment(this.date, this.getPickerType === 'date' ? 'YYYY-MM-DD' : (this.getPickerType === 'month' ? 'YYYY-MM' : 'YYYY'))
-        : defaultMoment;
+        // 验证日期是否有效
+        if (!targetMoment.isValid()) {
+          console.warn('无效的日期，已使用当前月份:', this.date);
+          targetMoment = moment();
+        }
 
-      // 验证日期有效性
-      if (!targetMoment.isValid()) {
-        console.error('无效日期:', this.date);
-        return { startTime, endTime, mode };
+        // 获取月份（数字格式，1-12）
+        targetMonth = targetMoment.format('M');
+        console.log('当前选择的月份:', targetMonth);
+
+        // 计算当月第一天00:00:00的时间戳
+        startTime = targetMoment.startOf('month').valueOf();
+        // 计算当月最后一天23:59:59的时间戳
+        endTime = targetMoment.clone()
+          .endOf('month')
+          .set({
+            hour: 23,
+            minute: 59,
+            second: 59,
+            millisecond: 0  // 毫秒设为0
+          })
+          .valueOf();
+
+        // 调试输出
+        console.log('月份时间范围计算结果:', {
+          startTime: moment(startTime).format('YYYY-MM-DD HH:mm:ss'),
+          endTime: moment(endTime).format('YYYY-MM-DD HH:mm:ss'),
+          startTimeStamp: startTime,
+          endTimeStamp: endTime,
+          targetMonth: targetMonth
+        });
+      } catch (error) {
+        console.error('计算月份时间范围时出错：', error);
       }
 
-      // 1. 日维度：当天0点 → 次日0点
-      if (this.activeTime === 0) {
-        startTime = targetMoment.startOf('day').valueOf(); // 当天00:00:00 时间戳
-        endTime = targetMoment.add(1, 'day').startOf('day').valueOf(); // 次日00:00:00 时间戳
-      }
-
-      // 2. 月维度：当月1日0点 → 次月1日0点
-      else if (this.activeTime === 1) {
-        startTime = targetMoment.startOf('month').valueOf(); // 当月1日00:00:00 时间戳
-        endTime = targetMoment.add(1, 'month').startOf('month').valueOf(); // 次月1日00:00:00 时间戳
-      }
-
-      // 3. 年维度：当年1月1日0点 → 次年1月1日0点
-      else if (this.activeTime === 2) {
-        startTime = targetMoment.startOf('year').valueOf(); // 当年1月1日00:00:00 时间戳
-        endTime = targetMoment.add(1, 'year').startOf('year').valueOf(); // 次年1月1日00:00:00 时间戳
-      }
-
-      // 调试输出（格式化显示，便于验证）
-      console.log('时间范围计算结果:', {
+      return {
+        startTime,
+        endTime,
         mode,
-        startTime: moment(startTime).format('YYYY-MM-DD HH:mm:ss'),
-        endTime: moment(endTime).format('YYYY-MM-DD HH:mm:ss'),
-        startTimeStamp: startTime,
-        endTimeStamp: endTime
-      });
-
-      return { startTime, endTime, mode };
+        targetMonth
+      };
     },
+
     /**
-     * 核心方法2：传递时间区间给父组件（首次进入时触发，传递“当月第一天0点→次月第一天0点”）
+     * 传递时间区间给父组件
      */
     emitTimeRange() {
       const timeRange = this.calculateTimeRange();
       this.$emit('timeRangeChange', timeRange);
-      // 调试用：查看首次传递的区间（如{start: "2025-10-01T00:00:00", end: "2025-11-01T00:00:00", dimension: "月"}）
-      console.log('当前时间区间：', timeRange);
+      console.log('触发时间范围变化:', timeRange);
     }
   },
   watch: {
-    // 维度切换时：清空选择的日期，并传递当前维度的默认区间
+    // 维度切换时：清空选择的日期
     activeTime(newVal, oldVal) {
       if (newVal !== oldVal) {
-        this.date = undefined;
-        // this.emitTimeRange();
+        this.date = Date.now(); // 重置为当前时间戳
+        this.emitTimeRange();
+      }
+    },
+    dateData: {
+      immediate: true, // 初始化时立即执行
+      handler(newVal) {
+        console.log('dateData 变化:', newVal);
+        if (newVal && (newVal.startTime || newVal.endTime)) {
+          // 优先使用 startTime
+          const timeStamp = newVal.startTime || newVal.endTime;
+          if (timeStamp && timeStamp !== 0) {
+            console.log('设置日期选择器时间为:', timeStamp);
+            this.date = timeStamp; // 直接使用时间戳
+          }
+        }
       }
     }
   },
   mounted() {
-    // 核心逻辑：首次进入页面，计算当月默认日期并赋值给选择器，同时传递区间
-    const now = new Date();
-    const year = now.getFullYear();
-    const month = this.padZero(now.getMonth() + 1); // 月份从0开始，+1后补零（如1月→01）
-    // 赋值当月默认日期（格式：YYYY-MM，适配month类型选择器）
-    this.date = `${year}-${month}`;
-    // 确保选择器渲染完成后，传递“当月第一天0点→次月第一天0点”的区间
-    this.$nextTick(() => this.emitTimeRange());
-  },
+    // 初始化默认日期为当前月份
+    console.log('初始化日期选择器，当前时间戳:', this.date);
+    this.$nextTick(() => {
+      this.emitTimeRange();
+    });
+  }
 }
 </script>
 
@@ -182,13 +185,12 @@ export default {
   height: 117px;
   width: 100%;
   display: flex;
-  justify-content: space-around;
+  justify-content: space-between;
   background: url('../../../assets/img/topTitle.png') no-repeat;
   background-size: cover;
   background-position: 0 0;
   box-sizing: border-box;
   position: relative;
-  /* 确保timeType绝对定位生效 */
 
   .left-content {
     margin-top: 11px;
@@ -255,12 +257,10 @@ export default {
     position: absolute;
     display: flex;
     align-items: center;
-    /* 垂直居中，避免元素高低错位 */
     top: 42px;
-    right:10px;
+    right: 10px;
     margin-top: 18px;
     gap: 0;
-    /* 清除间隙，让按钮与选择器紧密连接 */
   }
 
   .timeType .item {
@@ -277,7 +277,6 @@ export default {
     text-align: center;
     cursor: pointer;
     overflow: hidden;
-    /* 选中按钮与未选中按钮倾斜角度统一，避免切换时跳动 */
   }
 
   .timeType .item .item-text {
@@ -290,13 +289,11 @@ export default {
     background: rgba(11, 88, 255, 1);
     color: rgba(249, 252, 255, 1);
     transform: skew(-20deg) !important;
-    /* 统一倾斜角度，修复原30deg的错位 */
     box-shadow: 0 2px 8px rgba(11, 88, 255, 0.3);
   }
 
   .timeType .item.no-skew .item-text {
     transform: skew(20deg) !important;
-    /* 同步统一文字倾斜角度 */
   }
 
   .dateP {
@@ -308,11 +305,10 @@ export default {
   }
 
   .dateP .label {
-    width: 70px;
+    width: 165px;
     height: 28px;
     background: rgba(236, 244, 254, 1);
     transform: skew(-25deg);
-    /* 与按钮倾斜角度统一（原30deg改为25deg，避免视觉错位） */
     font-family: PingFangSC, PingFang SC;
     font-weight: 400;
     font-size: 14px;
@@ -322,19 +318,17 @@ export default {
     overflow: hidden;
   }
 
-  /* 补充：label文字抵消倾斜（原代码遗漏，导致文字倾斜） */
   .dateP .label-text {
     display: inline-block;
     transform: skew(25deg);
-    /* 与label倾斜角度相反，确保文字正立 */
   }
 
   .right-content {
     display: flex;
-    flex-direction: column;
-    margin-top: 12px;
-    margin-right: 4px;
-    gap: 20px;
+    margin-bottom: 60px;
+    margin-right: 16px;
+    justify-content: flex-end;
+    gap: 10px;
   }
 
   .current-time {
@@ -348,7 +342,6 @@ export default {
 
   .screen-btn {
     width: 26px;
-    margin-left: 300px;
     color: #00fff0;
     font-size: 26px;
     padding: 0;
@@ -359,25 +352,21 @@ export default {
 ::v-deep .custom-date-picker {
   position: absolute;
   right: 8px;
-  width: 132px !important;
+  width: 165px !important;
   height: 28px !important;
   position: relative;
   margin: 0 !important;
 
-  /* 1. 调整输入框文字：确保行高与输入框高度一致，垂直居中 */
   .el-input__inner {
     height: 28px !important;
-    width: 132px !important;
+    width: 165px !important;
     text-align: center;
     padding-left: 15px !important;
     padding-right: 32px !important;
-    /* 给图标留空间，避免文字被遮挡 */
     font-size: 14px !important;
     line-height: 28px !important;
-    /* 行高=输入框高度，文字垂直居中 */
     color: rgba(237, 245, 253, 1) !important;
     vertical-align: middle !important;
-    /* 强制文字垂直对齐 */
     clip-path: polygon(18px 0, 100% 0, 100% 100%, 0 100%);
     border: none !important;
     box-shadow: none !important;
@@ -385,38 +374,27 @@ export default {
     border-left: 1px solid rgba(255, 255, 255, 0.2);
   }
 
-  /* 2. 调整图标容器：让图标与文字在同一水平线上 */
   .el-input__prefix {
     left: auto !important;
     right: 8px !important;
     top: 50% !important;
-    /* 从40%改为50%，基于输入框垂直居中 */
     transform: translateY(-50%) !important;
-    /* 向上偏移自身50%，精准居中 */
     display: inline-flex !important;
-    /* 让容器内图标垂直居中 */
     align-items: center !important;
-    /* 图标在容器内垂直居中 */
     height: 28px !important;
-    /* 容器高度=输入框高度，避免偏移 */
   }
 
-  /* 3. 调整图标本身：确保图标大小和对齐方式 */
   .el-input__icon {
     color: #ffffff !important;
     font-size: 16px !important;
     line-height: 28px !important;
-    /* 图标行高=输入框高度，与文字对齐 */
     vertical-align: middle !important;
-    /* 强制图标垂直对齐 */
   }
 
-  /* 4. 图标伪类：确保颜色和对齐继承 */
   .el-icon-date::before {
     color: #ffffff !important;
     font-size: 16px !important;
     line-height: inherit !important;
-    /* 继承父级行高，避免错位 */
   }
 }
 </style>

src/views/home/components/KFAP.vue

@@ -1,6 +1,6 @@
 <template>
   <div style="">
-    <Container name="利润主要影响因素" icon="cockpitItemIcon" size="profitMiddleBasic" topSize="KFAPTopTitle">
+    <Container name="利润主要影响因素·万元" icon="cockpitItemIcon" size="profitMiddleBasic" topSize="KFAPTopTitle">
       <div class="kpi-content" style="padding: 14px 16px; display: flex;width: 100%;">
         <div class="left" style="width: 382px;">
           <top-item :itemList="targetItemList" />

src/views/home/components/PSDO.vue

@@ -137,7 +137,7 @@ export default {
           nameTextStyle: { color: 'rgba(255,255,255,0.7)', fontSize: 14, align: 'left' },
           min: () => 0,
           max: (value) => Math.ceil(value.max),
-          scale: true,
+
           axisTick: { show: false },
           axisLabel: { color: 'rgba(255,255,255,0.7)', fontSize: 12 },
           splitLine: { lineStyle: { color: 'RGBA(24, 88, 100, 0.6)', type: 'dashed' } },

src/views/home/components/bottomMiddleContainer.vue

@@ -6,6 +6,8 @@
         <span class="title-text">
           {{ name }}
         </span>
+        <svg-icon @click="handleShow" v-if="tableShow" class="title-icon" style="position: absolute;right: 20;" :icon-class="'orderReturn'" />
+
       </div>
     </div>
     <div class="container-body">
@@ -21,12 +23,16 @@ export default {
   name: 'Container',
   components: {},
   // eslint-disable-next-line vue/require-prop-types
-  props: ['name', 'size', 'icon', 'nameTwo'],
+  props: ['name', 'size', 'icon', 'nameTwo','tableShow'],
   data() {
     return {};
   },
   computed: {},
-  methods: {},
+  methods: {
+    handleShow() {
+      this.$emit('handleShow',false)
+    }
+  },
 };
 </script>
 
@@ -83,7 +89,7 @@ export default {
     position: absolute;
     top: 0;
     left: 0;
-    width: 100%;
+    width: 50%;
     height: 100%;
     border: 1px solid;
     border-image: linear-gradient(277deg, rgba(255, 255, 255, 0), rgba(92, 140, 255, 1)) 1 1;

src/views/home/components/budgetCalendar.vue

@@ -0,0 +1,144 @@
+<template>
+  <div style="flex: 1">
+    <Container name="预算填报日历" icon="cockpitItemIcon" size="calendarBg" topSize="calendarTitleBg">
+      <!-- 1. 移除 .kpi-content 的固定高度，改为自适应 -->
+      <div class="kpi-content" style="padding: 14px 14px; display: flex;flex-direction: column; width: 100%;">
+        <!-- 2. .top 保持 flex，无需固定高度，自动跟随子元素拉伸 -->
+        <div class="bottom"
+          style="display: flex; width: 100%;margin-top: 8px;background-color: rgba(249, 252, 255, 1);height: 844px;padding: 26px 16px;">
+          <!-- 动态生成12个月的容器：优化flex布局，缩小行间距 -->
+          <div class="month-list"
+            style="display: flex; gap: 16px; flex-wrap: wrap; align-content: flex-start; row-gap: 8px;">
+            <!-- 循环生成12个月：通过判断当前月份索引，添加current类 -->
+            <div class="monthItem" :class="{
+              'has-data': month.haveData,
+              'current': index === currentMonthIndex // 本月匹配current样式
+            }" v-for="(month, index) in monthList" :key="index">
+              {{ month.name }}
+            </div>
+          </div>
+        </div>
+      </div>
+    </Container>
+  </div>
+</template>
+
+<script>
+import Container from './container.vue'
+// import * as echarts from 'echarts'
+// import topItem from './operating-item.vue'
+
+export default {
+  name: 'ProductionStatus',
+  components: { Container },
+  // mixins: [resize],
+  props: {
+    calendarList: {  // 接收父组件传递的年月状态对象
+      type: Object, // 注意：父组件传递的是对象，不是数组，修正props类型
+      default: () => ({}) // 默认空对象，避免报错
+    },
+  },
+  data() {
+    return {
+      chart: null,
+      // 初始化12个月的列表，可根据实际需求修改haveData默认值
+      monthList: [
+        { name: '1月', haveData: false, isActive: false },
+        { name: '2月', haveData: false, isActive: false },
+        { name: '3月', haveData: false, isActive: false },
+        { name: '4月', haveData: false, isActive: false },
+        { name: '5月', haveData: false, isActive: false },
+        { name: '6月', haveData: false, isActive: false },
+        { name: '7月', haveData: false, isActive: false },
+        { name: '8月', haveData: false, isActive: false },
+        { name: '9月', haveData: false, isActive: false },
+        { name: '10月', haveData: false, isActive: false },
+        { name: '11月', haveData: false, isActive: false },
+        { name: '12月', haveData: false, isActive: false }
+      ],
+    }
+  },
+  computed: {
+    // 计算属性：获取当前月份对应的索引（0-11，对应1月-12月）
+    currentMonthIndex() {
+      // new Date().getMonth() 返回 0(1月) - 11(12月)，正好匹配monthList索引
+      return new Date().getMonth();
+    }
+  },
+  watch: {
+    // 监听calendarList变化，实时更新monthList的haveData状态
+    calendarList: {
+      immediate: true, // 组件挂载时立即执行一次
+      deep: true, // 深度监听对象内部属性变化
+      handler(newVal) {
+        this.updateMonthHaveData(newVal);
+      }
+    }
+  },
+  mounted() {
+    // 初始化图表（若需展示图表，需在模板中添加对应 DOM）
+    // this.$nextTick(() => this.updateChart())
+  },
+  methods: {
+    // 根据calendarList更新monthList的haveData状态
+    updateMonthHaveData(calendarObj) {
+      if (!calendarObj || typeof calendarObj !== 'object') return;
+
+      // 遍历12个月，匹配对应年月
+      this.monthList.forEach((month, index) => {
+        // 获取月份数字（索引+1，补两位，如1→01，10→10）
+        const monthNum = (index + 1).toString().padStart(2, '0');
+        // 拼接成calendarList中的键格式（如2025-01）
+        const yearMonthKey = `2025-${monthNum}`; // 若年份不固定，可改为props传递年份
+
+        // 判断calendarObj中该键对应的值：1→true，0→false，无该键则保持默认false
+        if (calendarObj.hasOwnProperty(yearMonthKey)) {
+          month.haveData = calendarObj[yearMonthKey] === 1;
+        }
+      });
+    },
+  }
+}
+</script>
+
+<style lang='scss' scoped>
+// 月份列表容器（flex布局，自动换行）
+.month-list {
+  // 内联样式已优化行间距，此处可留空或补充其他样式
+}
+
+// 基础月份样式
+.monthItem {
+  width: 164px;
+  height: 42px;
+  border-radius: 4px;
+  font-family: PingFangSC, PingFang SC;
+  font-weight: 400;
+  font-size: 20px;
+  color: rgba(0, 0, 0, 0.85);
+  line-height: 42px;
+  text-align: center;
+  font-style: normal;
+  cursor: pointer; // 鼠标悬浮手型
+  transition: all 0.2s ease; // 过渡效果，样式切换更平滑
+  border: 2px solid transparent; // 透明边框，避免选中时布局偏移
+  margin: 0; // 清除默认外边距，进一步缩小缝隙
+}
+
+// 有数据的样式（背景色#D1E8FF）
+.monthItem.has-data {
+  background-color: #D1E8FF;
+}
+
+// 无数据的样式（背景色#EFF3F8，基础样式默认值）
+.monthItem:not(.has-data) {
+  background-color: #EFF3F8;
+}
+
+// 本月样式（current类，边框2px solid #0B58FF）
+.monthItem.current {
+  border: 2px solid #0B58FF !important;
+}
+</style>
+
+<style></style>

src/views/home/components/budgetDetails.vue

@@ -0,0 +1,440 @@
+<template>
+  <div style="flex: 1">
+    <Container name="预算填报详情" icon="cockpitItemIcon" size="indicatorDetailsBg" topSize="indicatorDetailsTitleBg">
+      <div class="kpi-content" style="padding: 14px 14px; display: flex;flex-direction: column; width: 100%;">
+        <!-- 查询表单区域 -->
+        <div class="bottom"
+          style="display: flex;gap: 8px; width: 100%;margin-top: 8px;background-color: rgba(249, 252, 255, 1);height: 64px;padding: 16px 16px;">
+          <div style="width: 4px;height: 16px;background: #0B58FF;border-radius: 1px;margin-top: 10px;"></div>
+          <el-form :inline="true" :model="form" class="demo-form-inline">
+            <el-form-item label="所属层级">
+              <el-select v-model="form.levelId" placeholder="请选择">
+                <el-option v-for="item in levelLList" :key="item.id" :label="item.name" :value="item.id">
+                </el-option>
+              </el-select>
+            </el-form-item>
+
+            <el-form-item :label="timeType === 'month' ? '填报月份' : '填报年份'">
+              <!-- 根据timeType切换日期选择器类型：月/年 -->
+              <el-date-picker v-model="form.date" :type="timeType" :placeholder="timeType === 'month' ? '选择月' : '选择年'"
+                @change="handleDateChange">
+              </el-date-picker>
+            </el-form-item>
+            <el-form-item>
+              <el-button style="background-color: #0B58FF;" type="primary" @click="onSubmit">查询</el-button>
+              <!-- <el-button type="primary" plain size="medium">导入</el-button> -->
+            </el-form-item>
+          </el-form>
+        </div>
+
+        <!-- 表格操作区域 + 表格区域 -->
+        <div class="bottom"
+          style="display: flex; width: 100%;margin-top: 8px;background-color: rgba(249, 252, 255, 1);height: 772px;padding: 16px 16px;flex-direction: column; gap: 8px;">
+
+          <!-- 只读模式：显示编辑按钮 -->
+          <div v-if="!isDetail" style="display: flex;gap: 8px;align-items: center;height: 32px;">
+            <div style="width: 4px;height: 16px;background: #0B58FF;border-radius: 1px;"></div>
+            <div style="width: 58px;
+height: 16px;
+font-family: PingFangSC, PingFang SC;
+font-weight: 400;
+font-size: 14px;
+color: rgba(0,0,0,0.85);
+line-height: 16px;
+text-align: right;
+font-style: normal;">指标详情</div>
+            <el-button style="background-color: #0B58FF;height: 32px;line-height: 10px;" type="primary"
+              @click="handleEdit">编辑</el-button>
+          </div>
+
+          <!-- 编辑模式：显示快捷操作按钮 -->
+          <div v-if="isDetail" style="display: flex;gap: 8px;align-items: center;height: 32px;">
+            <div style="width: 4px;height: 16px;background: #0B58FF;border-radius: 1px;"></div>
+            <div
+              style="width: 58px;height: 16px;font-family: PingFangSC, PingFang SC;font-weight: 400;font-size: 14px;color: rgba(0,0,0,0.85);line-height: 16px;text-align: right;font-style: normal;">
+              快捷操作</div>
+            <!-- <el-button style="height: 32px;line-height: 10px;" type="primary" plain size="medium"
+              @click="onSubmit">复制上月</el-button>
+            <el-button style="height: 32px;line-height: 10px;" type="primary" plain size="medium"
+              @click="onSubmit">全部上调5%</el-button>
+            <el-button style="height: 32px;line-height: 10px;" type="primary" plain size="medium"
+              @click="onSubmit">全部下调5%</el-button> -->
+            <el-button style="height: 32px;line-height: 10px;" type="primary" plain size="medium"
+              @click="handleClear">清空配置</el-button>
+            <el-button style="background-color: #0B58FF;height: 32px;line-height: 10px;" type="primary"
+              @click="handleSave">保存</el-button>
+            <el-button text style="height: 32px;line-height: 10px;" plain size="medium"
+              @click="handleCancel">取消</el-button>
+          </div>
+
+          <!-- 表格组件：添加key属性强制刷新，绑定所有必要属性 -->
+          <base-table style="height: 700px;" :maxHeight=" '700' " @emitFun="inputChange" class="right-aside"
+            :table-props="tableProps" :page="form.pageNo" :limit="form.pageSize" :table-data="tableData" ref="baseTable"
+            :key="`base-table-${isDetail}-${timeType}`"></base-table>
+        </div>
+      </div>
+      <el-dialog :title="upload.title" :visible.sync="upload.open" width="400px" append-to-body>
+        <el-upload ref="upload" :limit="1" accept=".xlsx, .xls" :headers="upload.headers"
+          :action="upload.url + '?updateSupport=' + upload.updateSupport" :disabled="upload.isUploading"
+          :on-progress="handleFileUploadProgress" :on-success="handleFileSuccess" :auto-upload="false" drag>
+          <i class="el-icon-upload"></i>
+          <div class="el-upload__text">将文件拖到此处，或<em>点击上传</em></div>
+          <div class="el-upload__tip text-center" slot="tip">
+            <div class="el-upload__tip" slot="tip">
+              <el-checkbox v-model="upload.updateSupport" /> 是否更新已经存在的用户数据
+            </div>
+            <span>仅允许导入xls、xlsx格式文件。</span>
+            <el-link type="primary" :underline="false" style="font-size:12px;vertical-align: baseline;"
+              @click="importTemplate">下载模板</el-link>
+          </div>
+        </el-upload>
+        <div slot="footer" class="dialog-footer">
+          <el-button type="primary" @click="submitFileForm">确 定</el-button>
+          <el-button @click="upload.open = false">取 消</el-button>
+        </div>
+      </el-dialog>
+    </Container>
+  </div>
+</template>
+
+<script>
+import Container from './container.vue'
+import { getLevelStruc, getTargetMonthPage, updateTargetMonthData, getTargetYearPage, updateTargetYearData, getDictListData } from '@/api/cockpit'
+import inputArea from './inputArea.vue' // 导入输入组件
+import { getBaseHeader } from "@/utils/request";
+export default {
+  name: 'ProductionStatus',
+  components: {
+    Container,
+    inputArea // 注册输入组件
+  },
+  props: {
+    timeType: {
+      type: String,
+      default: 'month', // 默认月份维度
+      // validator: (val) => ['month', 'year'].includes(val) // 校验传入值只能是month/year
+    }
+  },
+  data() {
+    return {
+      form: {
+        levelId: 1,
+        pageNo: 1,
+        pageSize: 100,
+        date: undefined, // 统一存储日期（月份/年份）
+        startTime: undefined, // 起始时间戳
+        endTime: undefined    // 结束时间戳
+      },
+      dictData: [],
+      upload: {
+        // 是否显示弹出层（用户导入）
+        open: false,
+        // 弹出层标题（用户导入）
+        title: "",
+        // 是否禁用上传
+        isUploading: false,
+        // 是否更新已经存在的用户数据
+        updateSupport: 0,
+        // 设置上传的请求头部
+        headers: getBaseHeader(),
+        // 上传的地址
+        url: process.env.VUE_APP_BASE_API + '/admin-api/system/user/import'
+      },
+      getDataList: null, // 动态切换的查询接口
+      updateData: null,  // 动态切换的更新接口
+      isDetail: false, // 编辑状态标识：false=只读，true=编辑
+      tableData: [], // 表格数据
+      levelLList: [], // 所属层级下拉数据
+      tableProps: [] // 表格列配置
+    }
+  },
+  watch: {
+    // 监听timeType变化，动态切换接口并重新初始化
+    timeType: {
+      immediate: true, // 首次加载立即执行
+      handler(newVal) {
+        // 根据timeType切换接口
+        if (newVal === 'month') {
+          this.getDataList = getTargetMonthPage;
+          this.updateData = updateTargetMonthData;
+        } else if (newVal === 'year') {
+          this.getDataList = getTargetYearPage;
+          this.updateData = updateTargetYearData;
+        }
+        // 重新初始化日期和时间戳
+        this.initDefaultDate();
+        this.calculateTimeStamp();
+        // 重新初始化表格配置
+        this.initTableProps(this.isDetail);
+        // 重新请求数据
+        this.$nextTick(() => {
+          this.getData();
+        });
+      }
+    },
+    // 监听isDetail变化，确保配置同步（双重保障）
+    isDetail(newVal) {
+      this.initTableProps(newVal);
+    }
+  },
+  mounted() {
+    // 1. 初始化默认日期
+    this.initDefaultDate();
+    // 2. 计算对应时间戳
+    this.calculateTimeStamp();
+    this.getDictData()
+    // 3. 先初始化表格配置（优先于数据请求，避免表格空配置渲染）
+    this.initTableProps(this.isDetail);
+    // 4. 等待配置就绪后，再请求数据，避免异步冲突
+    this.$nextTick(() => {
+      this.getData();
+    });
+  },
+  methods: {
+    getDictData() {
+      getDictListData({ pageNo: 1, pageSize: 100, dictType: 'lb_dw' }).then((res) => {
+        this.dictData = res.data.list
+      })
+    },
+    // 表格单元格数据变更回调
+    inputChange(val) {
+      console.log('修改的数据：', val);
+      // 安全修改：判断索引是否存在，避免数组越界
+      if (this.tableData[val._pageIndex - 1]) {
+        this.tableData[val._pageIndex - 1][val.prop] = val[val.prop];
+        // 标记数据为已修改状态
+        this.tableData[val._pageIndex - 1].status = 1;
+      }
+    },
+
+    // 初始化表格列配置（核心：精准控制inputArea挂载）
+    initTableProps(isEdit) {
+      console.log('当前编辑状态：', isEdit, '当前时间维度：', this.timeType);
+
+      // 基础表格列配置（只读模式使用）
+      const baseTableProps = [
+        { prop: 'type', label: '指标类型', align: 'center' },
+        { prop: 'name', label: '指标名称', align: 'center' },
+        { prop: 'unit', label: '单位', align: 'center' },
+        { prop: 'target', label: '预估值', align: 'center' },
+      ];
+
+      if (isEdit) {
+        // 编辑模式：仅给「预估值」列添加inputArea（精准挂载，避免无效配置）
+        this.tableProps = baseTableProps.map(item => {
+          if (item.prop === 'target') { // 只给需要编辑的列添加子组件
+            return {
+              ...item,
+              subcomponent: inputArea // 挂载输入组件
+            };
+          }
+          return item; // 其他列保持原有配置
+        });
+      } else {
+        // 只读模式：深拷贝基础配置，避免引用污染
+        this.tableProps = JSON.parse(JSON.stringify(baseTableProps));
+      }
+      console.log('表格配置：', this.tableProps);
+    },
+
+    // 切换到编辑模式
+    handleEdit() {
+      this.isDetail = true;
+      // 先更新表格配置，再强制表格刷新（双重保障）
+      this.initTableProps(this.isDetail);
+      this.$nextTick(() => {
+        if (this.$refs.baseTable) {
+          this.$refs.baseTable.$forceUpdate(); // 强制表格组件刷新
+        }
+      });
+    },
+
+    // 保存数据（使用动态切换的updateData接口）
+    handleSave() {
+      // if (!this.updateData) {
+      //   this.$modal.msgWarning('当前时间维度异常，无法保存');
+      //   return;
+      // }
+      this.$modal.confirm('是否确认保存数据?').then(() => {
+        return this.updateData(this.tableData)
+      }).then(() => {
+        this.isDetail = false;
+        // 重置表格配置
+        this.initTableProps(this.isDetail);
+        // 清空并重新请求数据，恢复原始状态
+        this.$nextTick(() => {
+          this.tableData = [];
+          this.getData();
+        });
+        this.$modal.msgSuccess("保存成功");
+      }).catch(() => { });
+    },
+
+    // 取消编辑，恢复只读模式
+    handleCancel() {
+      this.isDetail = false;
+      // 重置表格配置
+      this.initTableProps(this.isDetail);
+      // 清空并重新请求数据，恢复原始状态
+      this.$nextTick(() => {
+        this.tableData = [];
+        this.getData();
+      });
+      console.log('已取消编辑，恢复原始数据');
+    },
+
+    // 清空配置
+    handleClear() {
+      this.isDetail = false;
+      // 重置表格配置
+      this.initTableProps(this.isDetail);
+      // 清空并重新请求数据，恢复原始状态
+      this.$nextTick(() => {
+        this.tableData = [];
+        this.getData();
+      });
+    },
+
+    // 初始化默认日期（根据timeType）
+    initDefaultDate() {
+      const currentDate = new Date();
+      this.form.date = currentDate;
+    },
+
+    // 计算时间戳（根据timeType切换：月/年）
+    calculateTimeStamp(selectDate) {
+      let targetDate = selectDate || this.form.date;
+      if (!targetDate) {
+        targetDate = new Date();
+      } else {
+        targetDate = new Date(targetDate);
+      }
+
+      const year = targetDate.getFullYear();
+      let month = targetDate.getMonth(); // 月份0-11
+
+      if (this.timeType === 'month') {
+        // 月维度：当月1号 00:00:00 → 当月最后一天 23:59:59
+        const startDate = new Date(year, month, 1, 0, 0, 0);
+        this.form.startTime = startDate.getTime();
+
+        const lastDay = new Date(year, month + 1, 0).getDate();
+        const endDatePrecise = new Date(year, month, lastDay, 23, 59, 59);
+        this.form.endTime = endDatePrecise.getTime();
+      } else if (this.timeType === 'year') {
+        // 年维度：当年1月1号 00:00:00 → 当年12月31号 23:59:59
+        const startDate = new Date(year, 0, 1, 0, 0, 0);
+        this.form.startTime = startDate.getTime();
+
+        const endDatePrecise = new Date(year, 11, 31, 23, 59, 59);
+        this.form.endTime = endDatePrecise.getTime();
+      }
+    },
+
+    // 日期选择器变更事件（统一处理月/年变更）
+    handleDateChange(val) {
+      if (!val) {
+        // 清空选择时，重置时间戳
+        this.form.startTime = undefined;
+        this.form.endTime = undefined;
+        return;
+      }
+      // 计算选中日期对应的时间戳
+      this.calculateTimeStamp(val);
+    },
+    getUnitLabel(unitCode) {
+      // 若字典为空或无匹配编码，返回原编码或空字符串
+      if (!this.dictData || this.dictData.length === 0) {
+        return unitCode || '';
+      }
+      // 查找匹配的字典项
+      const matchItem = this.dictData.find(item => item.value == unitCode);
+      // 返回匹配的label，无匹配则返回原unit编码
+      return matchItem ? matchItem.label : (unitCode || '');
+    },
+    // 请求下拉数据和表格数据（使用动态切换的getDataList接口）
+    getData() {
+      if (!this.getDataList) {
+        console.warn('当前时间维度异常，无法获取数据');
+        return;
+      }
+
+      // 1. 请求所属层级下拉数据
+      getLevelStruc().then((res) => {
+        console.log('所属层级数据：', res);
+        this.levelLList = res.data || [];
+      }).catch(err => {
+        console.error('获取所属层级失败：', err);
+        this.levelLList = [];
+      });
+
+      // 2. 请求表格分页数据（使用动态接口）
+      this.getDataList({
+        levelId: this.form.levelId,
+        startTime: this.form.startTime,
+        endTime: this.form.endTime,
+        pageSize: this.form.pageSize,
+        pageNo: this.form.pageNo
+      }).then((res) => {
+        console.log('表格数据：', res);
+        this.tableData = res.data.map(item => {
+          // 新增unitLabel字段，存储匹配后的显示名称
+          return {
+            ...item,
+            unitLabel: this.getUnitLabel(item.unit)
+          };
+        });
+      }).catch(err => {
+        console.error('获取表格数据失败：', err);
+        this.tableData = [];
+      });
+    },
+
+    // 查询按钮点击事件（可根据需求扩展逻辑）
+    onSubmit() {
+      // 清空原有表格数据，重新请求
+      this.tableData = [];
+      this.$nextTick(() => {
+        this.getData();
+      });
+    }
+  }
+}
+</script>
+
+<style lang='scss' scoped>
+// 月份列表容器样式（保留原有配置，若无使用可忽略）
+.month-list {
+  // 内联样式已优化行间距，此处可留空或补充
+}
+
+// 基础月份样式（保留原有配置，若无使用可忽略）
+.monthItem {
+  width: 164px;
+  height: 42px;
+  border-radius: 4px;
+  font-family: PingFangSC, PingFang SC;
+  font-weight: 400;
+  font-size: 20px;
+  color: rgba(0, 0, 0, 0.85);
+  line-height: 42px;
+  text-align: center;
+  font-style: normal;
+  cursor: pointer;
+  transition: all 0.2s ease;
+  border: 2px solid transparent;
+  margin: 0;
+}
+
+.monthItem.has-data {
+  background-color: #D1E8FF;
+}
+
+.monthItem:not(.has-data) {
+  background-color: #EFF3F8;
+}
+
+.monthItem.active {
+  border: 2px solid #0B58FF !important;
+}
+</style>

src/views/home/components/budgetHeader.vue

@@ -0,0 +1,379 @@
+<template>
+  <header class="report-header" :class="['report-header__' + size]">
+    <!-- 左侧区域：标题 -->
+    <div class="left-content" :style="{ marginLeft: leftMargin }">
+      <div class="top-title">{{ topTitle }}</div>
+    </div>
+
+    <!-- 右侧区域：全屏按钮 -->
+    <div class="right-content">
+      <el-button type="text" class="return-btn" :title="'返回'" @click="handleReturn">
+        <svg-icon style="color: #0B58FF;" icon-class="returnIcon" />
+      </el-button>
+      <el-button type="text" class="screen-btn" :title="isFullScreen ? '退出全屏' : '全屏'" @click="changeFullScreen">
+        <svg-icon style="color: #0B58FF;" v-if="isFullScreen" icon-class="unFullScreenView" />
+        <svg-icon style="color: #0B58FF;" v-else icon-class="fullScreenView" />
+      </el-button>
+    </div>
+
+    <!-- 时间选择区域：时间维度下拉框（月/年） + 日期选择下拉框 -->
+    <div class="timeType" v-if="isBudget">
+      <div class="dateP">
+        <div class="label">
+          <span class="label-text">时间范围</span>
+        </div>
+        <!-- 第一步：时间维度下拉框（月/年） -->
+        <el-select  v-model="timeDimension" class="time-dimension-select" @change="handleDimensionChange"
+          style="width: 150px; height: 29px; margin-right: 8px;">
+          <el-option label="月预算" value="month" />
+          <el-option label="年预算" value="year" />
+        </el-select>
+      </div>
+    </div>
+  </header>
+</template>
+
+<script>
+import moment from 'moment'; // 引入moment
+
+export default {
+  name: 'Header',
+  props: {
+    isFullScreen: { type: Boolean, default: false },
+    topTitle: { type: String, default: '' },
+    size: { type: String, default: 'basic' },
+    leftMargin: {
+      type: [String, Number],
+      default: '350px' // 默认值设为350px
+    },
+    isBudget: { type: Boolean, default: false },
+  },
+  data() {
+    return {
+      currentTime: '',
+      timeTimer: null,
+      timeDimension: 'month', // 默认时间维度：月（可选值：month/year）
+      selectedDate: '', // 选中的日期（格式：YYYY-MM 或 YYYY）
+      dateOptions: [] // 日期下拉框选项（动态生成）
+    }
+  },
+  mounted() {
+    // 初始化默认时间维度和日期
+    // this.initDateOptions();
+    // 默认选中当前月/年
+    // if (this.timeDimension === 'month') {
+    //   this.selectedDate = moment().format('YYYY-MM');
+    // } else {
+    //   this.selectedDate = moment().format('YYYY');
+    // }
+    // this.$nextTick(() => this.emitTimeRange());
+  },
+  methods: {
+    changeFullScreen() {
+      this.$emit('screenfullChange');
+    },
+    handleReturn() {
+      this.$router.go(-1);
+    },
+    exportPDF() {
+      this.$emit('exportPDF');
+    },
+
+    /**
+     * 初始化日期下拉框选项（生成近10年的年份/月份选项，可自定义范围）
+     */
+    initDateOptions() {
+      this.dateOptions = [];
+      const currentYear = moment().year();
+      const range = 10; // 生成近10年的选项
+
+      if (this.timeDimension === 'month') {
+        // 月维度：生成近10年的所有月份（格式：YYYY-MM）
+        for (let y = currentYear; y >= currentYear - range; y--) {
+          for (let m = 12; m >= 1; m--) {
+            const monthStr = m < 10 ? `0${m}` : `${m}`;
+            const value = `${y}-${monthStr}`;
+            const label = `${y}年${monthStr}月`;
+            this.dateOptions.push({ value, label });
+          }
+        }
+      } else if (this.timeDimension === 'year') {
+        // 年维度：生成近10年的年份（格式：YYYY）
+        for (let y = currentYear; y >= currentYear - range; y--) {
+          this.dateOptions.push({
+            value: `${y}`,
+            label: `${y}年`
+          });
+        }
+      }
+    },
+
+    /**
+     * 时间维度切换回调（月→年 / 年→月）
+     */
+    handleDimensionChange() {
+      // 重新初始化日期选项
+      this.$emit('getTimeType', this. timeDimension)
+    },
+
+    /**
+     * 核心方法：根据选中的维度和日期，计算时间范围（时间戳格式）
+     */
+    calculateTimeRange() {
+      // 初始化时间戳为0（兜底值）
+      let startTime = 0;
+      let endTime = 0;
+      // 时间维度对应mode（2=月，3=年，保持和原有逻辑一致）
+      const mode = this.timeDimension === 'month' ? 2 : 3;
+      // 默认当前时间
+      const defaultMoment = moment();
+
+      try {
+        let targetMoment;
+        // 根据维度解析选中的日期
+        if (this.timeDimension === 'month') {
+          targetMoment = this.selectedDate ? moment(this.selectedDate, 'YYYY-MM') : defaultMoment;
+        } else {
+          targetMoment = this.selectedDate ? moment(this.selectedDate, 'YYYY') : defaultMoment;
+        }
+
+        // 验证日期是否有效，无效则使用当前时间兜底
+        if (!targetMoment.isValid()) {
+          console.warn('无效的日期格式，已使用当前时间:', this.selectedDate);
+          targetMoment = defaultMoment;
+        }
+
+        // 根据维度计算时间范围
+        if (this.timeDimension === 'month') {
+          // 月维度：当月第一天00:00:00 → 当月最后一天23:59:59
+          startTime = targetMoment.startOf('month').millisecond(0).valueOf();
+          endTime = targetMoment.endOf('month').millisecond(0).valueOf();
+        } else if (this.timeDimension === 'year') {
+          // 年维度：当年第一天00:00:00 → 当年最后一天23:59:59
+          startTime = targetMoment.startOf('year').millisecond(0).valueOf();
+          endTime = targetMoment.endOf('year').millisecond(0).valueOf();
+        }
+      } catch (error) {
+        console.error('计算时间范围时出错：', error);
+      }
+
+      // 返回时间范围信息
+      return {
+        startTime,
+        endTime,
+        mode
+      };
+    },
+
+    // 传递时间范围给父组件
+    // emitTimeRange() {
+    //   const timeRange = this.calculateTimeRange();
+    //   this.$emit('timeRangeChange', timeRange);
+    // }
+  }
+}
+</script>
+
+<style scoped lang="scss">
+/* 字体引入 */
+@font-face {
+  font-family: "YouSheBiaoTiHei";
+  src: url('../../../assets/fonts/YouSheBiaoTiHe.ttf') format('truetype');
+}
+
+/* 头部容器基础样式 */
+.report-header {
+  height: 117px;
+  width: 100%;
+  display: flex;
+  justify-content: space-between;
+  box-sizing: border-box;
+  position: relative;
+
+  &__basic {
+    background: url(../../../assets/img/topBg.png) no-repeat;
+    background-size: cover;
+    background-position: 0 0;
+  }
+
+  &__psi {
+    background: url(../../../assets/img/psiTopTitle.png) no-repeat;
+    background-size: 100% 100%;
+    background-position: 0 0;
+  }
+
+  /* 左侧标题区域 */
+  .left-content {
+    margin-top: 11px;
+    // margin-left: 350px;
+    height: 55px;
+    display: flex;
+    align-items: center;
+    gap: 16px;
+  }
+
+  .top-title {
+    height: 55px;
+    font-family: "YouSheBiaoTiHei", sans-serif;
+    font-size: 42px;
+    color: #1E1651;
+    line-height: 55px;
+    letter-spacing: 6px;
+    text-align: left;
+  }
+
+  /* 时间选择区域 */
+  .timeType {
+    position: absolute;
+    display: flex;
+    align-items: center;
+    top: 42px;
+    right: 0px;
+    margin-top: 18px;
+    gap: 0;
+  }
+
+  .timeType .item {
+    width: 50px;
+    height: 28px;
+    background: rgba(236, 244, 254, 1);
+    transform: skew(-25deg);
+    font-family: PingFangSC, PingFang SC;
+    font-weight: 400;
+    font-size: 14px;
+    color: rgba(11, 88, 255, 1);
+    line-height: 28px;
+    letter-spacing: 2px;
+    text-align: center;
+    cursor: pointer;
+    overflow: hidden;
+  }
+
+  .timeType .item .item-text {
+    display: inline-block;
+    transform: skew(25deg);
+    transition: all 0.2s ease;
+  }
+
+  .timeType .item.no-skew {
+    background: rgba(11, 88, 255, 1);
+    color: rgba(249, 252, 255, 1);
+    transform: skew(-25deg) !important;
+    box-shadow: 0 2px 8px rgba(11, 88, 255, 0.3);
+  }
+
+  .timeType .item.no-skew .item-text {
+    transform: skew(25deg) !important;
+  }
+
+  .dateP {
+    position: relative;
+    margin-left: 10px;
+    display: flex;
+    align-items: center;
+    gap: 0;
+  }
+
+  .dateP .label {
+    width: 165px;
+    height: 28px;
+    background: rgba(236, 244, 254, 1);
+    transform: skew(-25deg);
+    font-family: PingFangSC, PingFang SC;
+    font-weight: 400;
+    font-size: 14px;
+    color: #0B58FF;
+    line-height: 28px;
+    text-align: center;
+    overflow: hidden;
+  }
+
+  .dateP .label-text {
+    display: inline-block;
+    transform: skew(25deg);
+  }
+
+  /* 右侧全屏按钮区域 */
+  .right-content {
+    display: flex;
+    // flex-direction: column;
+    margin-top: 12px;
+    margin-right: 10px;
+    gap: 21px;
+  }
+
+  // .current-time {
+  //   color: #FFFFFF;
+  //   font-family: PingFangSC, PingFang SC;
+  //   font-weight: 500;
+  //   font-size: 22px;
+  //   line-height: 24px;
+  //   letter-spacing: 1px;
+  // }
+
+  .screen-btn {
+    width: 26px;
+    height: 26px;
+    color: #00fff0;
+    font-size: 26px;
+    padding: 0;
+  }
+
+  .home-btn {
+    width: 26px;
+    height: 26px;
+    // margin-left: 300px;
+    color: #00fff0;
+    font-size: 26px;
+    padding: 0;
+  }
+
+  .return-btn {
+    width: 26px;
+    height: 26px;
+    // margin-left: 300px;
+    color: #00fff0;
+    font-size: 26px;
+    padding: 0;
+  }
+}
+
+/* 自定义下拉框样式（替换原有日期选择器样式） */
+::v-deep .time-dimension-select,
+::v-deep .custom-date-select {
+  height: 28px !important;
+
+  .el-input__inner {
+    height: 28px !important;
+    font-size: 14px !important;
+    line-height: 28px !important;
+    color: #fff !important;
+    background-color: rgba(11, 88, 255, 1) !important;
+    border: none !important;
+    box-shadow: none !important;
+    text-align: center;
+  }
+
+  .el-input__icon {
+    color: #fff !important;
+    font-size: 16px !important;
+    line-height: 28px !important;
+  }
+
+  .el-select-dropdown__item {
+    font-size: 14px !important;
+    padding: 6px 16px !important;
+  }
+}
+
+/* 时间维度下拉框额外样式 */
+::v-deep .time-dimension-select .el-input__inner {
+  border-right: 1px solid rgba(255, 255, 255, 0.2) !important;
+  border-radius: 4px 0 0 4px !important;
+}
+
+/* 日期选择下拉框额外样式 */
+::v-deep .custom-date-select .el-input__inner {
+  border-radius: 0 4px 4px 0 !important;
+}
+</style>

src/views/home/components/changeBase.vue

@@ -0,0 +1,145 @@
+<template>
+  <div class="changeBase">
+    <div class="base-item" @click="handleClick(index)" v-for="(item, index) in buttonList" :key="item"
+      :style="{ zIndex: activeButton === index ? 10 : 1 }">
+      <img :src="activeButton === index ? imgMap.bgBase[item] : imgMap.base[item]" :alt="`${item}基地`" :title="item">
+    </div>
+  </div>
+</template>
+
+<script>
+// 导入基地图片（按统一命名规范）
+import baseYixing from '@/assets/images/base/宜兴.png';
+import baseZhangzhou from '@/assets/images/base/漳州.png';
+import baseZigong from '@/assets/images/base/自贡.png';
+import baseTongcheng from '@/assets/images/base/桐城.png';
+import baseLuoyang from '@/assets/images/base/洛阳.png';
+import baseHefei from '@/assets/images/base/合肥.png';
+import baseSuqian from '@/assets/images/base/宿迁.png';
+import baseQinhuangdao from '@/assets/images/base/秦皇岛.png';
+
+// 导入选中态基地图片
+import bgBaseYixing from '@/assets/images/bgBase/宜兴.png';
+import bgBaseZhangzhou from '@/assets/images/bgBase/漳州.png';
+import bgBaseZigong from '@/assets/images/bgBase/自贡.png';
+import bgBaseTongcheng from '@/assets/images/bgBase/桐城.png';
+import bgBaseLuoyang from '@/assets/images/bgBase/洛阳.png';
+import bgBaseHefei from '@/assets/images/bgBase/合肥.png';
+import bgBaseSuqian from '@/assets/images/bgBase/宿迁.png';
+import bgBaseQinhuangdao from '@/assets/images/bgBase/秦皇岛.png';// 补充：江苏
+
+export default {
+  name: "BaseSelector",
+  props: {
+    factory: {
+      type: [String, Number],
+      default: 5, // 新映射中“宜兴”对应序号7
+      validator: (val) => [5, 2, 7, 3, 8, 9, 10].includes(val) // 校验序号范围（匹配新的baseNameToIndexMap）
+    }
+  },
+  data() {
+    return {
+      activeButton: 5, // 初始化默认选中索引2（对应buttonList中的“宜兴”）
+      buttonList: ['合肥', '桐城', '宜兴', '自贡', '漳州', '洛阳', '秦皇岛', '宿迁'], // 匹配截图顺序
+      imgMap: {
+        base: {
+          合肥: baseHefei,
+          桐城: baseTongcheng,
+          宜兴: baseYixing,
+          自贡: baseZigong,
+          漳州: baseZhangzhou,
+          洛阳: baseLuoyang,
+          秦皇岛: baseQinhuangdao,
+          宿迁: baseSuqian
+        },
+        bgBase: {
+          合肥: bgBaseHefei,
+          桐城: bgBaseTongcheng,
+          宜兴: bgBaseYixing,
+          自贡: bgBaseZigong,
+          漳州: bgBaseZhangzhou,
+          洛阳: bgBaseLuoyang,
+          秦皇岛: bgBaseQinhuangdao,
+          宿迁: bgBaseSuqian
+        }
+      },
+      baseNameToIndexMap: { // 新的名称→序号映射
+        宜兴: 7,
+        漳州: 8,
+        自贡: 3,
+        桐城: 2,
+        洛阳: 9,
+        合肥: 5,
+        秦皇岛: 10, // 补充
+        宿迁: 6  // 补充
+      }
+    };
+  },
+  watch: {
+    // 监听父组件传递的factory变化，同步本地选中索引
+    factory: {
+      handler(newVal) {
+        // 根据新的baseNameToIndexMap，找到对应的基地名称
+        const targetName = Object.keys(this.baseNameToIndexMap).find(name => this.baseNameToIndexMap[name] === newVal);
+        // 根据名称找到buttonList中的索引
+        const targetIndex = this.buttonList.indexOf(targetName);
+        // 合法索引则更新，否则默认选中宜兴
+        this.activeButton = targetIndex > -1 ? targetIndex : 2;
+        console.log('当前选中基地：', this.buttonList[this.activeButton], '序号：', newVal);
+      },
+      immediate: true // 初始化立即执行
+    },
+    // 监听本地选中索引变化，向父组件发送事件
+    activeButton(newVal) {
+      const selectedName = this.buttonList[newVal];
+      const selectedIndex = this.baseNameToIndexMap[selectedName] || 5; // 默认返回宜兴的序号7
+      this.$emit('baseChange', selectedIndex);
+    }
+  },
+  methods: {
+    handleClick(index) {
+      this.activeButton = index;
+    },
+    getIndexByName(name) {
+      return this.baseNameToIndexMap[name] || 5;
+    }
+  },
+  mounted() {
+    // 初始化时触发事件，传递默认选中的宜兴序号（7）
+    this.$emit('baseChange', 5);
+  }
+};
+</script>
+
+<style scoped lang="scss">
+.changeBase {
+  display: flex;
+  width: fit-content;
+  align-items: center;
+
+  .base-item {
+    width: 234px;
+    height: 81px;
+    font-family: YouSheBiaoTiHei;
+    font-size: 38px;
+    line-height: 54px;
+    text-align: center;
+    cursor: pointer;
+    white-space: nowrap;
+    margin-right: -35px; // 重叠效果，可根据需求调整
+    transition: all 0.2s ease;
+
+    &:hover,
+    &:active {
+      transform: scale(1.02);
+    }
+
+    img {
+      width: 100%;
+      height: 100%;
+      object-fit: cover;
+      pointer-events: none;
+    }
+  }
+}
+</style>

src/views/home/components/container.vue

@@ -8,6 +8,16 @@
           {{ name }}
         </span>
       </div>
+      <div v-if="isShowTab" class="tab-group">
+        <!-- 月度Tab：点击切换状态，动态绑定样式 -->
+        <div class="tab-item" :class="{ active: activeTab === 'month' }" @click="handleTabClick('month')">
+          月度
+        </div>
+        <!-- 累计Tab：点击切换状态，动态绑定样式 -->
+        <div class="tab-item" :class="{ active: activeTab === 'total' }" @click="handleTabClick('total')">
+          累计
+        </div>
+      </div>
     </div>
     <div class="cockpitContainer-body">
       <slot>
@@ -22,12 +32,22 @@ export default {
   name: 'Container',
   components: {},
   // eslint-disable-next-line vue/require-prop-types
-  props: ['name', 'size', 'icon', 'topSize'],
+  props: ['name', 'size', 'icon', 'topSize', 'isShowTab'],
   data() {
-    return {};
+    return {
+      activeTab: 'month' // 初始化激活的Tab（支持父组件传默认值）
+    };
   },
   computed: {},
-  methods: {},
+  methods: {
+    handleTabClick(tabType) {
+      this.activeTab = tabType;
+      // 向父组件派发Tab切换事件，传递当前选中的Tab类型
+      this.$emit('tabChange', tabType);
+      // 可选：同时传递更详细的信息（如标签名）
+      // this.$emit('tabChange', { type: tabType, name: tabType === 'month' ? '月度' : '累计' });
+    },
+  },
 };
 </script>
 
@@ -43,35 +63,37 @@ export default {
 
   .content-top {
     height: 60px;
-.title-wrapper {
-    display: flex;
-    align-items: center;
-    margin-left: 10px;
-    /* 垂直居中关键属性 */
-    height: 100%;
-    /* 继承父容器高度，确保垂直居中范围 */
-  }
 
-  .title-icon {
-    font-size: 30px;
-    margin-right: 12px;
-    margin-top: 4px;
-    /* 图标和文字之间的间距 */
-    flex-shrink: 0;
-    /* 防止图标被压缩 */
-  }
+    .title-wrapper {
+      display: flex;
+      align-items: center;
+      margin-left: 10px;
+      /* 垂直居中关键属性 */
+      height: 100%;
+      /* 继承父容器高度，确保垂直居中范围 */
+    }
+
+    .title-icon {
+      font-size: 30px;
+      margin-right: 12px;
+      margin-top: 4px;
+      /* 图标和文字之间的间距 */
+      flex-shrink: 0;
+      /* 防止图标被压缩 */
+    }
+
+    .title-text {
+      font-family: PingFangSC, PingFang SC;
+      font-weight: 400;
+      font-size: 24px;
+      color: #000000;
+      letter-spacing: 3px;
+      text-align: left;
+      font-style: normal;
+      // 移除固定行高，避免影响垂直对齐
+      // line-height: 60px;
+    }
 
-  .title-text {
-    font-family: PingFangSC, PingFang SC;
-    font-weight: 400;
-    font-size: 24px;
-    color: #000000;
-    letter-spacing: 3px;
-    text-align: left;
-    font-style: normal;
-    // 移除固定行高，避免影响垂直对齐
-    // line-height: 60px;
-  }
     // width: 547px;
     // background: url(../../../assets/img/contentTopBasic.png) no-repeat;
     // background-size: 100% 100%;
@@ -106,12 +128,24 @@ export default {
       background-size: 100% 100%;
       background-position: 0 0;
     }
-        &__rawTopTitleLarge {
-          background: url(../../../assets/img/rawTopTitleLarge.png) no-repeat;
-          background-size: 100% 100%;
-          background-position: 0 0;
-        }
 
+    &__rawTopTitleLarge {
+      background: url(../../../assets/img/rawTopTitleLarge.png) no-repeat;
+      background-size: 100% 100%;
+      background-position: 0 0;
+    }
+
+    &__calendarTitleBg {
+      background: url(../../../assets/img/calendarTitleBg.png) no-repeat;
+      background-size: 100% 100%;
+      background-position: 0 0;
+    }
+
+    &__indicatorDetailsTitleBg {
+      background: url(../../../assets/img/indicatorDetailsTitleBg.png) no-repeat;
+      background-size: 100% 100%;
+      background-position: 0 0;
+    }
   }
 
   &__topBasic {
@@ -167,11 +201,31 @@ export default {
     background-size: 100% 100%;
     background-position: 0 0;
   }
-        &__rawTopBg {
-          background: url(../../../assets/img/rawTopBg.png) no-repeat;
-          background-size: 100% 100%;
-          background-position: 0 0;
-        }
+
+  &__rawTopBg {
+    background: url(../../../assets/img/rawTopBg.png) no-repeat;
+    background-size: 100% 100%;
+    background-position: 0 0;
+  }
+
+  &__opLargeBg {
+    background: url(../../../assets/img/opLargeBg.png) no-repeat;
+    background-size: 100% 100%;
+    background-position: 0 0;
+  }
+
+  &__calendarBg {
+    background: url(../../../assets/img/calendarBg.png) no-repeat;
+    background-size: 100% 100%;
+    background-position: 0 0;
+  }
+
+  &__indicatorDetailsBg {
+    background: url(../../../assets/img/indicatorDetailsBg.png) no-repeat;
+    background-size: 100% 100%;
+    background-position: 0 0;
+  }
+
   // &__left {
   //   background: url(../../../../../../../assets/img/left.png) no-repeat;
   //   background-size: 100% 100%;
@@ -262,4 +316,42 @@ export default {
 .container-body {
   flex: 1;
 }
+
+.tab-group {
+  display: inline-flex;
+  position: absolute;
+  right: 5%;
+  top: 10%;
+  z-index: 9999;
+  align-items: center;
+  border-radius: 24px;
+  overflow: hidden;
+  gap: 8px; // Tab之间的间距
+}
+
+// Tab基础样式（统一）
+.tab-item {
+  padding: 0 24px;
+  width: 79px;
+  height: 24px;
+  line-height: 24px;
+  font-size: 12px;
+  cursor: pointer;
+  text-align: center;
+  border-radius: 12px;
+  transition: all 0.2s ease; // 样式切换动画
+}
+
+// 未激活的Tab样式（原first-child样式）
+.tab-item:not(.active) {
+  background: #ECF4FE;
+  color: #0B58FF;
+}
+
+// 激活的Tab样式（原last-child样式）
+.tab-item.active {
+  background: #3071FF;
+  color: #F9FCFF;
+  font-weight: bold;
+}
 </style>

src/views/home/components/core-bottom-leftItem.vue

@@ -1,12 +1,12 @@
 <template>
   <div class="coreItem">
-    <div class="item" v-for="(item, index) in itemList" :key="index">
+    <div @click="handleRoute(item.path)" class="item" v-for="(item, index) in itemList" :key="index">
       <div class="unit">{{ item.unit }}</div>
       <div class="item-content">
         <div class="content-wrapper">
           <div class="left">
             <div class="number">{{ item.targetValue }}</div>
-            <div class="title">目标值</div>
+            <div class="title">预算值</div>
           </div>
           <div class="line"></div>
           <div class="right">
@@ -42,40 +42,59 @@
 export default {
   name: "Container",
   components: {},
-  props: ["name", "size", "icon"],
+  props: ["purchase",'dateData'],
   data() {
     return {
-      progress: 90,
-      itemList: [
-        {
-          unit: "本月增效额·万元",
-          targetValue: 16,
-          currentValue: 14.5,
-          progress: 90
-        },
-        {
-          unit: "累计增效额·万元",
-          targetValue: 16,
-          currentValue: 15.2,
-          progress: 85
-        },
-        // {
-        //   unit: "销量·万㎡",
-        //   targetValue: 20,
-        //   currentValue: 16,
-        //   progress: 80
-        // },
-        // {
-        //   unit: "双镀面板·万㎡",
-        //   targetValue: 15,
-        //   currentValue: 13.8,
-        //   progress: 92
-        // }
-      ]
+      itemList: []
     };
   },
-  computed: {},
+  watch: {
+    purchase: {
+      handler(newVal) {
+        if (newVal) {
+          this.itemList = this.transformData(newVal);
+        }
+      },
+      immediate: true,
+      deep: true
+    }
+  },
   methods: {
+    handleRoute(path) {
+      this.$router.push({
+        path: path,
+        query: {
+          dateData: this.dateData
+        }
+      })
+    },
+    transformData(rawData) {
+      const dataMap = [
+        {
+          key: 'increase',
+          unit: '本月增效额·万元',
+          path:'/procurementGainAnalysis/procurementGainAnalysis'
+        },
+        {
+          key: 'totalIncrease',
+          unit: '累计增效额·万元',
+          path: '/procurementGainAnalysis/procurementGainAnalysis'
+        }
+      ];
+
+      return dataMap.map(itemInfo => {
+        const rawItem = rawData[itemInfo.key] || {};
+        const progress = Math.max(0, Math.round((rawItem.rate || 0)));
+
+        return {
+          unit: itemInfo.unit,
+          targetValue: rawItem.target || 0,
+          currentValue: rawItem.real || 0,
+          progress: progress,
+          path: itemInfo.path
+        };
+      });
+    },
     getTargetColor(currentValue, targetValue) {
       return currentValue >= targetValue
         ? "rgba(98, 213, 180, 1)"
@@ -98,7 +117,9 @@ export default {
   background: #f9fcff;
   padding: 12px 12px 0 12px;
   box-sizing: border-box;
-
+  &:hover {
+      box-shadow: 0px 4px 12px 2px #B5CDE5;
+    }
   .unit {
     height: 18px;
     font-family: PingFangSC, PingFang SC;

src/views/home/components/coreBottomBar.vue

@@ -3,7 +3,7 @@
     <div class="barTop">
       <div class="title">销售指标趋势</div>
       <div class="legend">
-        <span class="legend-item target">目标</span>
+        <span class="legend-item target">预算</span>
         <span class="legend-item real">实际</span>
       </div>
       <div class="button-group">
@@ -23,14 +23,14 @@
         </div>
         <div class="button-line lineThree" v-if="activeButton !== 2 && activeButton !== 3"></div>
         <div class="item-button" :class="{ active: activeButton === 3 }" @click="activeButton = 3">
-          双镀产品
+          双镀销量
         </div>
       </div>
     </div>
     <div class="lineBottom" style="height: 219px; width: 100%">
       <!-- 传递当前选中的 series 数据给子组件，key 确保数据更新时重新渲染 -->
-      <coreLineChart style="height: 219px; width: 500px" :chart-series="currentSeries"
-        :key="activeButton + JSON.stringify(currentSeries)" />
+      <coreLineChart style="height: 219px; width: 500px" :chart-series="currentSeries" :x-axis-data="xAxisData"
+        :dateData="dateData" :key="activeButton + JSON.stringify(currentSeries)" />
     </div>
   </div>
 </template>
@@ -42,204 +42,101 @@ import * as echarts from 'echarts';
 export default {
   name: "Container",
   components: { coreLineChart },
-  props: ["name", "size", "icon"],
+  props: {
+    line: { // 接收父组件传递的 sale 数据对象
+      type: Object,
+      default: () => ({})
+    },
+    dateData: { // 接收父组件传递的 sale 数据对象
+      type: Object,
+      default: () => ({})
+    }
+  },
   data() {
     return {
       activeButton: 0,
-      itemList: [
-        { unit: "单价·元/m²", targetValue: 16, currentValue: 14.5, progress: 90 },
-        { unit: "净价·元/m²", targetValue: 16, currentValue: 15.2, progress: 85 },
-        { unit: "销量·万m²", targetValue: 20, currentValue: 16, progress: 80 },
-        { unit: "双镀面板·万m²", targetValue: 15, currentValue: 13.8, progress: 92 },
-      ],
-      // 4个按钮对应的 series 数据（目标+实际两条线）
-      seriesMap: [
-        // 0: 单价（元/m²）
-        [
-          {
-            name: '目标',
-            type: 'line',
-            stack: 'Total',
-            symbol: 'circle',
-            symbolSize: 6,
-            lineStyle: { color: 'rgba(91, 230, 190, 1)', width: 2 },
-            itemStyle: {
-              color: 'rgba(91, 230, 190, 1)',
-              borderColor: 2
-            },
-            areaStyle: {
-              opacity: 0.3,
-              color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
-                { offset: 0, color: 'rgba(91, 230, 190, 0.4)' },
-                { offset: 1, color: 'rgba(91, 230, 190, 0)' },
-              ]),
-            },
-            data: [16, 16.2, 15.8, 16.1, 15.9, 16] // 6-11月目标数据
-          },
-          {
-            name: '实际',
-            type: 'line',
-            stack: 'Total',
-            symbol: 'circle',
-            symbolSize: 6,
-            lineStyle: { color: 'rgba(255, 132, 0, 1)', width: 2 },
-            itemStyle: {
-              color: 'rgba(255, 132, 0, 1)',
-              borderColor: 'rgba(255, 132, 0, 1)',
-              borderWidth: 2,
-            },
-            areaStyle: {
-              opacity: 0.3,
-              color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
-                { offset: 0, color: 'rgba(255, 132, 0, 0.4)' },
-                { offset: 1, color: 'rgba(255, 132, 0, 0)' },
-              ]),
-            },
-            data: [14.5, 14.8, 15.2, 14.6, 15, 14.7] // 6-11月实际数据
-          }
-        ],
-        // 1: 净价（元/m²）
-        [
-          {
-            name: '目标',
-            type: 'line',
-            stack: 'Total',
-            symbol: 'circle',
-            symbolSize: 6,
-            lineStyle: { color: 'rgba(91, 230, 190, 1)', width: 2 },
-            itemStyle: {
-              color: 'rgba(91, 230, 190, 1)',
-              borderColor: '#fff',
-              borderWidth: 1
-            },
-            areaStyle: {
-              opacity: 0.3,
-              color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
-                { offset: 0, color: 'rgba(91, 230, 190, 0.4)' },
-                { offset: 1, color: 'rgba(91, 230, 190, 0)' },
-              ]),
-            },
-            data: [16, 16.1, 15.9, 16.2, 16, 16.1]
-          },
-          {
-            name: '实际',
-            type: 'line',
-            stack: 'Total',
-            symbol: 'circle',
-            symbolSize: 6,
-            lineStyle: { color: 'rgba(255, 132, 0, 1)', width: 2 },
-            itemStyle: {
-              color: 'rgba(255, 132, 0, 1)',
-              borderColor: '#fff',
-              borderWidth: 1
-            },
-            areaStyle: {
-              opacity: 0.3,
-              color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
-                { offset: 0, color: 'rgba(255, 132, 0, 0.4)' },
-                { offset: 1, color: 'rgba(255, 132, 0, 0)' },
-              ]),
-            },
-            data: [15.2, 15.5, 15.3, 15.6, 15.4, 15.5]
-          }
-        ],
-        // 2: 销量（万m²）
-        [
-          {
-            name: '目标',
-            type: 'line',
-            stack: 'Total',
-            symbol: 'circle',
-            symbolSize: 6,
-            lineStyle: { color: 'rgba(91, 230, 190, 1)', width: 2 },
-            itemStyle: {
-              color: 'rgba(91, 230, 190, 1)',
-              borderColor: '#fff',
-              borderWidth: 1
-            },
-            areaStyle: {
-              opacity: 0.3,
-              color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
-                { offset: 0, color: 'rgba(91, 230, 190, 0.4)' },
-                { offset: 1, color: 'rgba(91, 230, 190, 0)' },
-              ]),
-            },
-            data: [20, 20.5, 19.8, 21, 20.2, 20.8]
-          },
-          {
-            name: '实际',
-            type: 'line',
-            stack: 'Total',
-            symbol: 'circle',
-            symbolSize: 6,
-            lineStyle: { color: 'rgba(255, 132, 0, 1)', width: 2 },
-            itemStyle: {
-              color: 'rgba(255, 132, 0, 1)',
-              borderColor: '#fff',
-              borderWidth: 1
-            },
-            areaStyle: {
-              opacity: 0.3,
-              color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
-                { offset: 0, color: 'rgba(255, 132, 0, 0.4)' },
-                { offset: 1, color: 'rgba(255, 132, 0, 0)' },
-              ]),
-            },
-            data: [16, 16.8, 17.2, 16.5, 17, 17.5]
-          }
-        ],
-        // 3: 双镀产品（万m²）
-        [
-          {
-            name: '目标',
-            type: 'line',
-            stack: 'Total',
-            symbol: 'circle',
-            symbolSize: 6,
-            lineStyle: { color: 'rgba(91, 230, 190, 1)', width: 2 },
-            itemStyle: {
-              color: 'rgba(91, 230, 190, 1)',
-              borderColor: '#fff',
-              borderWidth: 1
-            },
-            areaStyle: {
-              opacity: 0.3,
-              color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
-                { offset: 0, color: 'rgba(91, 230, 190, 0.4)' },
-                { offset: 1, color: 'rgba(91, 230, 190, 0)' },
-              ]),
-            },
-            data: [15, 15.2, 14.8, 15.5, 15.1, 15.3]
-          },
-          {
-            name: '实际',
-            type: 'line',
-            stack: 'Total',
-            symbol: 'circle',
-            symbolSize: 6,
-            lineStyle: { color: 'rgba(255, 132, 0, 1)', width: 2 },
-            itemStyle: {
-              color: 'rgba(255, 132, 0, 1)',
-              borderColor: '#fff',
-              borderWidth: 1
-            },
-            areaStyle: {
-              opacity: 0.3,
-              color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
-                { offset: 0, color: 'rgba(255, 132, 0, 0.4)' },
-                { offset: 1, color: 'rgba(255, 132, 0, 0)' },
-              ]),
-            },
-            data: [13.8, 14.2, 14, 14.5, 14.3, 14.6]
-          }
-        ]
+      // 定义按钮与 line 数据中 key 的映射关系
+      buttonToDataKey: [
+        '单价',
+        '净价',
+        '销量',
+        '双镀销量' // 注意：数据中的 key 是“双镀面板”，按钮显示的是“双镀产品”
       ]
     };
   },
   computed: {
+    // 动态生成 X 轴数据
+    xAxisData() {
+      const lineData = this.line || {};
+      // 获取当前激活按钮对应的数据
+      const currentDataKey = this.buttonToDataKey[this.activeButton];
+      const currentIndicatorData = lineData[currentDataKey];
+
+      // 使用 'target' 的键作为 x 轴，如果 'target' 不存在，则使用 'real' 的键
+      if (currentIndicatorData && currentIndicatorData.target) {
+        return Object.keys(currentIndicatorData.target);
+      } else if (currentIndicatorData && currentIndicatorData.real) {
+        return Object.keys(currentIndicatorData.real);
+      }
+      return [];
+    },
     // 根据激活按钮动态返回对应 series 数据
     currentSeries() {
-      return this.seriesMap[this.activeButton] || [];
+      const lineData = this.line || {};
+      const currentDataKey = this.buttonToDataKey[this.activeButton];
+      const chartData = lineData[currentDataKey];
+
+      if (!chartData) {
+        return [];
+      }
+
+      // 提取目标和实际数据的值，并确保顺序与 X 轴一致
+      const xAxisKeys = this.xAxisData;
+      const targetDataValues = xAxisKeys.map(date => chartData.target ? chartData.target[date] : 0);
+      const realDataValues = xAxisKeys.map(date => chartData.real ? chartData.real[date] : 0);
+
+      return [
+        {
+          name: '预算',
+          type: 'line',
+          stack: 'Total',
+          symbol: 'circle',
+          symbolSize: 6,
+          lineStyle: { color: 'rgba(91, 230, 190, 1)', width: 2 },
+          itemStyle: {
+            color: 'rgba(91, 230, 190, 1)',
+            borderColor: 2
+          },
+          areaStyle: {
+            opacity: 0.3,
+            color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+              { offset: 0, color: 'rgba(91, 230, 190, 0.4)' },
+              { offset: 1, color: 'rgba(91, 230, 190, 0)' },
+            ]),
+          },
+          data: targetDataValues
+        },
+        {
+          name: '实际',
+          type: 'line',
+          symbol: 'circle',
+          symbolSize: 6,
+          lineStyle: { color: 'rgba(255, 132, 0, 1)', width: 2 },
+          itemStyle: {
+            color: 'rgba(255, 132, 0, 1)',
+            borderColor: 'rgba(255, 132, 0, 1)',
+            borderWidth: 2,
+          },
+          areaStyle: {
+            opacity: 0.3,
+            color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+              { offset: 0, color: 'rgba(255, 132, 0, 0.4)' },
+              { offset: 1, color: 'rgba(255, 132, 0, 0)' },
+            ]),
+          },
+          data: realDataValues
+        }
+      ];
     }
   }
 };

src/views/home/components/coreBottomLeft.vue

@@ -3,7 +3,7 @@
     <Container name="采购重点指标" nameTwo="存货重点指标" icon="cockpitItemIcon" size="bottomBasic">
       <!-- 1. 移除 .kpi-content 的固定高度，改为自适应 -->
       <div class="bottom-left-content" style="display: flex;gap: 9px;padding: 14px 16px;">
-        <coreBottomLeftItem>
+        <coreBottomLeftItem :dateData="dateData" :purchase="purchase">
         </coreBottomLeftItem>
         <div class="content-right" style="background: #F9FCFF;padding: 15px 12px;">
           <base-table style="height: 180px;width: 260px;" :page="1" :limit="10" :show-index="true" :beilv="1"
@@ -25,11 +25,15 @@ export default {
   components: { Container, coreBottomLeftItem, baseTable },
   // mixins: [resize],
   props: {
-    leftEqInfoData: {  // 接收父组件传递的设备数据数组
-      type: Array,
-      default: () => []  // 默认空数组，避免报错
+    purchase: {  // 接收父组件传递的设备数据数组
+      type: Object,
+      default: () => {}  // 默认空数组，避免报错
     },
-    productionOverviewVo: { // 恢复生产概览数据（原代码注释了，需根据实际需求保留）
+    dateData: {  // 接收父组件传递的设备数据数组
+      type: Object,
+      default: () => { }  // 默认空数组，避免报错
+    },
+    inventory: { // 恢复生产概览数据（原代码注释了，需根据实际需求保留）
       type: Object,
       default: () => ({})
     }
@@ -37,12 +41,12 @@ export default {
   data() {
     return {
       maintenanceTasks: [
-        { id: 1, eqName: '纯碱', taskName: '1313,252', },
-        { id: 2, eqName: '硅砂', taskName: '14,252', },
-        { id: 2, eqName: '白云石', taskName: '23,252', },
-        { id: 2, eqName: '石灰石', taskName: '34,421', },
-        { id: 2, eqName: '氧化铝', taskName: '1,251.34', },
-        { id: 2, eqName: '氢氧化铝', taskName: '14,252', },
+        { id: 1, name: '纯碱', number: '1313,252', },
+        { id: 2, name: '硅砂', number: '14,252', },
+        { id: 2, name: '白云石', number: '23,252', },
+        { id: 2, name: '石灰石', number: '34,421', },
+        { id: 2, name: '氧化铝', number: '1,251.34', },
+        { id: 2, name: '氢氧化铝', number: '14,252', },
 
         // { id: 2, eqName: '螺杆挤出', taskName: '例行维护', },
         // { id: 2, eqName: '螺杆挤出', taskName: '例行维护', },
@@ -53,22 +57,26 @@ export default {
       ],
       tableProps: [
         // { prop: 'id', label: '序号', width: 50, align: 'center' },
-        { prop: 'eqName', label: '物料', align: 'left' },
-        { prop: 'taskName', label: '库存/吨', align: 'left' },
+        { prop: 'name', label: '物料', align: 'left' },
+        { prop: 'number', label: '库存/吨', align: 'left' },
       ]
     }
   },
   watch: {
-    productionOverviewVo: {
-      handler(newValue, oldValue) {
-        this.updateChart()
+    inventory: {
+      handler(newInventoryData) {
+        // 当 inventory 数据变化时，执行转换函数
+        this.maintenanceTasks = this.transformInventoryData(newInventoryData);
       },
-      deep: true // 若对象内属性变化需触发，需加 deep: true
+      immediate: true, // 组件初始化时立即执行一次
+      deep: true       // 深度监听对象内部属性的变化
     }
   },
   mounted() {
-    // 初始化图表（若需展示图表，需在模板中添加对应 DOM）
-    // this.$nextTick(() => this.updateChart())
+    // 组件挂载时，如果有初始 inventory 数据，也执行一次转换
+    if (this.inventory) {
+      this.maintenanceTasks = this.transformInventoryData(this.inventory);
+    }
   },
   beforeDestroy() {
     // 销毁图表，避免内存泄漏
@@ -78,115 +86,25 @@ export default {
     }
   },
   methods: {
-    updateChart() {
-      // 注意：原代码中图表依赖 id 为 "productionStatusChart" 的 DOM，需在模板中补充，否则会报错
-      // 示例：在 Container 内添加 <div id="productionStatusChart" style="height: 200px;"></div>
-      if (!document.getElementById('productionStatusChart')) return
-
-      if (this.chart) this.chart.dispose()
-      this.chart = echarts.init(document.getElementById('productionStatusChart'))
-
-      const data = [
-        this.productionOverviewVo.input || 0,
-        this.productionOverviewVo.output || 0,
-        this.productionOverviewVo.ng || 0,
-        this.productionOverviewVo.lowValue || 0,
-        this.productionOverviewVo.scrap || 0,
-        this.productionOverviewVo.inProcess || 0,
-        this.productionOverviewVo.engineer || 0
-      ]
-
-      const option = {
-        type: 'bar',
-        grid: { left: 51, right: 40, top: 50, bottom: 45 },
-        tooltip: {
-          trigger: 'axis',
-          axisPointer: { type: 'shadow' },
-          className: 'production-status-chart-tooltip'
-        },
-        xAxis: {
-          type: 'category',
-          offset: 8,
-          data: ['投入', '产出', '待判', '低价值', '报废', '在制', '实验片'],
-          axisTick: { show: false },
-          axisLine: { show: true, onZero: false, lineStyle: { color: '#00E8FF' } },
-          axisLabel: {
-            color: 'rgba(255,255,255,0.7)',
-            fontSize: 12,
-            interval: 0,
-            width: 38,
-            overflow: 'break'
-          }
-        },
-        yAxis: {
-          type: 'value',
-          name: '单位/片',
-          nameTextStyle: { color: 'rgba(255,255,255,0.7)', fontSize: 14, align: 'left' },
-          min: () => 0,
-          max: (value) => Math.ceil(value.max),
-          scale: true,
-          axisTick: { show: false },
-          axisLabel: { color: 'rgba(255,255,255,0.7)', fontSize: 12 },
-          splitLine: { lineStyle: { color: 'RGBA(24, 88, 100, 0.6)', type: 'dashed' } },
-          axisLine: { show: true, lineStyle: { color: '#00E8FF' } }
-        },
-        series: [
-          {
-            type: 'pictorialBar',
-            label: { show: true, position: 'top', distance: -3, color: '#89CDFF', fontSize: 11 },
-            symbolSize: [20, 8],
-            symbolOffset: [0, 5],
-            z: 20,
-            itemStyle: {
-              borderColor: '#3588C7',
-              color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
-                { offset: 0, color: 'RGBA(22, 89, 98, 1)' },
-                { offset: 1, color: '#3588C7' }
-              ])
-            },
-            data: data
-          },
-          {
-            type: 'bar',
-            barWidth: 20,
-            itemStyle: {
-              borderWidth: 1,
-              borderColor: '#3588C7',
-              opacity: 0.8,
-              color: {
-                x: 0, y: 0, x2: 0, y2: 1,
-                type: 'linear',
-                global: false,
-                colorStops: [
-                  { offset: 0, color: 'rgba(73,178,255,0)' },
-                  { offset: 0.5, color: 'rgba(0, 232, 255, .5)' },
-                  { offset: 1, color: 'rgba(0, 232, 255, 1)' }
-                ]
-              }
-            },
-            tooltip: { show: false },
-            data: data
-          },
-          {
-            type: 'pictorialBar',
-            symbolSize: [20, 8],
-            symbolOffset: [0, -4],
-            z: 12,
-            symbolPosition: 'end',
-            itemStyle: {
-              borderColor: 'rgba(0, 232, 255, 1)',
-              color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
-                { offset: 0, color: 'RGBA(22, 89, 98, 1)' },
-                { offset: 1, color: '#3588C7' }
-              ])
-            },
-            tooltip: { show: false },
-            data: data
-          }
-        ]
+    /**
+     * 核心转换函数：将 inventory 对象转换为 maintenanceTasks 数组
+     * @param {Object} inventoryData - 格式如: { "纯碱": 0, "硅砂": 0, ... }
+     * @returns {Array} - 格式如: [ { id: 1, name: '纯碱', number: '0' }, ... ]
+     */
+    transformInventoryData(inventoryData) {
+      // 检查输入是否为有效的非空对象
+      if (!inventoryData || typeof inventoryData !== 'object' || Object.keys(inventoryData).length === 0) {
+        return []; // 如果无效，返回空数组
       }
 
-      this.chart.setOption(option)
+      // 使用 Object.entries() 和 map() 进行转换
+      return Object.entries(inventoryData).map(([name, value], index) => {
+        return {
+          id: index + 1,          // id 从 1 开始自增
+          name: name,             // 物料名称
+          number: String(value)   // 将数值转换为字符串，以匹配 "number" 字段
+        };
+      });
     }
   }
 }

src/views/home/components/coreSalesKPIs.vue

@@ -5,12 +5,12 @@
       <div class="kpi-content" style="padding: 14px 16px; display: flex;flex-direction: column; width: 100%;">
         <!-- 2. .top 保持 flex，无需固定高度，自动跟随子元素拉伸 -->
         <div class="top" style="display: flex; width: 100%;">
-          <top-item />
+          <top-item :sale="sale" :dateData="dateData" />
         </div>
         <div class="bottom"
           style="display: flex; width: 100%;margin-top: 8px;background-color: rgba(249, 252, 255, 1);">
           <!-- <top-item /> -->
-          <coreBottomBar />
+          <coreBottomBar :line="sale.line" :dateData="dateData" />
 
         </div>
       </div>
@@ -28,11 +28,11 @@ export default {
   components: { Container, topItem, coreBottomBar },
   // mixins: [resize],
   props: {
-    leftEqInfoData: {  // 接收父组件传递的设备数据数组
-      type: Array,
-      default: () => []  // 默认空数组，避免报错
+    sale: {  // 接收父组件传递的设备数据数组
+      type: Object,
+      default: () => ({})
     },
-    productionOverviewVo: { // 恢复生产概览数据（原代码注释了，需根据实际需求保留）
+    dateData: { // 恢复生产概览数据（原代码注释了，需根据实际需求保留）
       type: Object,
       default: () => ({})
     }
@@ -43,135 +43,12 @@ export default {
     }
   },
   watch: {
-    productionOverviewVo: {
-      handler(newValue, oldValue) {
-        this.updateChart()
-      },
-      deep: true // 若对象内属性变化需触发，需加 deep: true
-    }
   },
   mounted() {
     // 初始化图表（若需展示图表，需在模板中添加对应 DOM）
     // this.$nextTick(() => this.updateChart())
   },
-  beforeDestroy() {
-    // 销毁图表，避免内存泄漏
-    if (this.chart) {
-      this.chart.dispose()
-      this.chart = null
-    }
-  },
   methods: {
-    updateChart() {
-      // 注意：原代码中图表依赖 id 为 "productionStatusChart" 的 DOM，需在模板中补充，否则会报错
-      // 示例：在 Container 内添加 <div id="productionStatusChart" style="height: 200px;"></div>
-      if (!document.getElementById('productionStatusChart')) return
-
-      if (this.chart) this.chart.dispose()
-      this.chart = echarts.init(document.getElementById('productionStatusChart'))
-
-      const data = [
-        this.productionOverviewVo.input || 0,
-        this.productionOverviewVo.output || 0,
-        this.productionOverviewVo.ng || 0,
-        this.productionOverviewVo.lowValue || 0,
-        this.productionOverviewVo.scrap || 0,
-        this.productionOverviewVo.inProcess || 0,
-        this.productionOverviewVo.engineer || 0
-      ]
-
-      const option = {
-        type: 'bar',
-        grid: { left: 51, right: 40, top: 50, bottom: 45 },
-        tooltip: {
-          trigger: 'axis',
-          axisPointer: { type: 'shadow' },
-          className: 'production-status-chart-tooltip'
-        },
-        xAxis: {
-          type: 'category',
-          offset: 8,
-          data: ['投入', '产出', '待判', '低价值', '报废', '在制', '实验片'],
-          axisTick: { show: false },
-          axisLine: { show: true, onZero: false, lineStyle: { color: '#00E8FF' } },
-          axisLabel: {
-            color: 'rgba(255,255,255,0.7)',
-            fontSize: 12,
-            interval: 0,
-            width: 38,
-            overflow: 'break'
-          }
-        },
-        yAxis: {
-          type: 'value',
-          name: '单位/片',
-          nameTextStyle: { color: 'rgba(255,255,255,0.7)', fontSize: 14, align: 'left' },
-          min: () => 0,
-          max: (value) => Math.ceil(value.max),
-          scale: true,
-          axisTick: { show: false },
-          axisLabel: { color: 'rgba(255,255,255,0.7)', fontSize: 12 },
-          splitLine: { lineStyle: { color: 'RGBA(24, 88, 100, 0.6)', type: 'dashed' } },
-          axisLine: { show: true, lineStyle: { color: '#00E8FF' } }
-        },
-        series: [
-          {
-            type: 'pictorialBar',
-            label: { show: true, position: 'top', distance: -3, color: '#89CDFF', fontSize: 11 },
-            symbolSize: [20, 8],
-            symbolOffset: [0, 5],
-            z: 20,
-            itemStyle: {
-              borderColor: '#3588C7',
-              color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
-                { offset: 0, color: 'RGBA(22, 89, 98, 1)' },
-                { offset: 1, color: '#3588C7' }
-              ])
-            },
-            data: data
-          },
-          {
-            type: 'bar',
-            barWidth: 20,
-            itemStyle: {
-              borderWidth: 1,
-              borderColor: '#3588C7',
-              opacity: 0.8,
-              color: {
-                x: 0, y: 0, x2: 0, y2: 1,
-                type: 'linear',
-                global: false,
-                colorStops: [
-                  { offset: 0, color: 'rgba(73,178,255,0)' },
-                  { offset: 0.5, color: 'rgba(0, 232, 255, .5)' },
-                  { offset: 1, color: 'rgba(0, 232, 255, 1)' }
-                ]
-              }
-            },
-            tooltip: { show: false },
-            data: data
-          },
-          {
-            type: 'pictorialBar',
-            symbolSize: [20, 8],
-            symbolOffset: [0, -4],
-            z: 12,
-            symbolPosition: 'end',
-            itemStyle: {
-              borderColor: 'rgba(0, 232, 255, 1)',
-              color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
-                { offset: 0, color: 'RGBA(22, 89, 98, 1)' },
-                { offset: 1, color: '#3588C7' }
-              ])
-            },
-            tooltip: { show: false },
-            data: data
-          }
-        ]
-      }
-
-      this.chart.setOption(option)
-    }
   }
 }
 </script>

src/views/home/components/coresBar.vue

@@ -12,9 +12,16 @@ export default {
   props: {
     chartSeries: {
       type: Array,
-      required: true,
       default: () => [] // 默认空数组，避免报错
-    }
+    },
+    xAxisData: {
+      type: Array,
+      default: () => [] // 默认空数组，避免报错
+    },
+    dateData: {
+      type: Object,
+      default: () => {} // 默认空数组，避免报错
+    },
   },
   data() {
     return {
@@ -61,6 +68,7 @@ export default {
     // 单独提取更新图表的方法，方便复用
     updateChart() {
       if (!this.myChart) return;
+      console.log('this.chartSeries', this.chartSeries,this.xAxisData);
 
       const option = {
         tooltip: {
@@ -70,7 +78,7 @@ export default {
             label: { backgroundColor: '#6a7985' }
           }
         },
-        grid: { top: 10, bottom: 20, right: 25, left: 50 },
+        grid: { top: 35, bottom: 20, right: 25, left: 70 },
         xAxis: [
           {
             type: 'category',
@@ -85,18 +93,28 @@ export default {
               color: 'rgba(0, 0, 0, 0.45)',
               fontSize: 12,
               interval: 0,
-              width: 38,
-              overflow: 'break'
+              // width: 38,
+              overflow: 'break',
+              formatter: (value) => {
+                const dateParts = value.split('-'); // ["2025", "07", "01"]
+                if (dateParts.length < 2) return value;
+
+                // 去掉月份前面的0，然后加上"月"
+                const month = dateParts[1].replace(/^0+/, '');
+                return `${month}月`;
+              }
             },
-            data: ['6月', '7月', '8月', '9月', '10月', '11月']
+            data: this.xAxisData
           }
         ],
         yAxis: {
-          type: 'value',
-          nameTextStyle: { color: 'rgba(0, 0, 0, 0.45)', fontSize: 14, align: 'left' },
+          // type: 'value',
+          name: '元/㎡',
+          // nameLocation:'center',
+          nameTextStyle: { color: 'rgba(0, 0, 0, 0.45)', fontSize: 14, align: 'right' },
           // min: () => 0,
           // max: (value) => Math.ceil(value.max),
-          // scale: true,
+
           axisTick: { show: false },
           axisLabel: { color: 'rgba(0, 0, 0, 0.45)', fontSize: 12 },
           splitLine: { lineStyle: { color: 'rgba(0, 0, 0, 0.15)' } },

src/views/home/components/cost-Item.vue

@@ -1,8 +1,8 @@
 <template>
   <div class="coreItem">
     <!-- 动态生成每个 item -->
-    <div class="item" v-for="(item, index) in itemList" :key="index">
-      <div class="unit">{{ item.unit }}</div>
+    <div @click="handleDashboardClick(item.path)" class="item" v-for="(item, index) in itemList" :key="index">
+      <div class="unit">{{ item.name }}</div>
       <div class="item-content">
         <!-- 左右内容容器 -->
         <div class="content-wrapper">
@@ -24,7 +24,7 @@
         <div class="right">
           <!-- 环比额：计算差值并动态绑定颜色 -->
           <div class="number" :style="{ color: getColor(item.currentValue, item.targetValue) }">
-            {{ get环比额(item.currentValue, item.targetValue) }}
+            {{ item.hbe }}
           </div>
           <div class="title">环比额</div>
         </div>
@@ -37,46 +37,97 @@
 export default {
   name: "Container",
   components: {},
-  props: ["name", "size", "icon"],
+  props: {
+    cost: {  // 接收父组件传递的 cost 数据对象
+      type: Object,
+      default: () => ({})
+    },
+    dateData: {  // 接收父组件传递的 cost 数据对象
+      type: Object,
+      default: () => ({})
+    },
+  },
   data() {
     return {
-      itemList: [
-        {
-          unit: "管理费用·万元",
-          targetValue: 16, // 上月值
-          currentValue: 14.5, // 本月值（小于上月，应显示橙色）
-        },
-        {
-          unit: "销售费用·万元",
-          targetValue: 16,
-          currentValue: 17, // 大于上月，应显示绿色
-        },
-        {
-          unit: "财务费用·万元",
-          targetValue: 16,
-          currentValue: 16, // 等于上月，应显示绿色
-        },
-      ]
+      itemList: [] // 初始化为空数组，等待数据加载
     };
   },
+  watch: {
+    // 监听 cost 数据变化，实时更新 itemList
+    cost: {
+      handler(newVal) {
+        if (newVal) {
+          this.itemList = this.transformData(newVal);
+        }
+      },
+      immediate: true, // 组件初始化时立即执行一次
+      deep: true       // 深度监听对象内部属性变化
+    }
+  },
   methods: {
+    handleDashboardClick(path) {
+      this.$router.push({
+        path: path,
+        query: {
+          factory: this.$route.query.factory ? this.$route.query.factory : 5,
+          dateData: this.dateData
+        }
+      })
+    },
+    /**
+     * 核心转换函数：将 cost 对象转换为 itemList 数组
+     * @param {Object} rawData - 原始的 cost 数据对象
+     * @returns {Array} - 转换后的 itemList 数组
+     */
+    transformData(rawData) {
+      // 定义费用类型映射关系（键名、显示名称、单位）
+      const costMapping = [
+        {
+          key: 'totalCost', name: '总费用·万元',
+          path:"/expenseAnalysis/expenseAnalysisBase"
+        },
+        {
+          key: 'manageCost', name: '管理费用·万元',
+          path: "/expenseAnalysis/expenseAnalysisBase"
+        },
+        { key: 'saleCost', name: '销售费用·万元', path: "/expenseAnalysis/expenseAnalysisBase" },
+        { key: 'financeCost', name: '财务费用·万元', path: "/expenseAnalysis/expenseAnalysisBase" }
+      ];
+
+      // 遍历映射关系，转换数据
+      return costMapping.map(mappingItem => {
+        // 获取对应费用类型的数据，若不存在则使用默认值
+        const costData = rawData[mappingItem.key] || { last: 0, this: 0, hbe: 0 };
+
+        return {
+          name: mappingItem.name,
+          path: mappingItem.path,
+          hbe: costData.hbe,
+          targetValue: costData.last,  // 上月值
+          currentValue: costData.this  // 本月值
+        };
+      });
+    },
+
     // 颜色判断：本月 >= 上月 绿色，否则 橙色
     getColor(current, target) {
       return current >= target
-        ? "rgba(98, 213, 180, 1)"
-        : "rgba(249, 164, 74, 1)";
+        ? "rgba(98, 213, 180, 1)"  // 绿色：增长或持平
+        : "rgba(249, 164, 74, 1)"; // 橙色：下降
     },
+
     // 计算环比额（本月 - 上月），保留一位小数
-    get环比额(current, target) {
-      const diff = current - target;
-      // 正数加"+"号，负数和零保持原样
-      return diff > 0 ? `${diff.toFixed(1)}` : diff.toFixed(1);
-    }
+    // getData(current, target) {
+    //   const diff = current - target;
+    //   // 正数加"+"号，负数和零保持原样
+    //   return diff > 0 ? `+${diff.toFixed(1)}` : diff.toFixed(1);
+    // }
   },
 };
 </script>
 
 <style scoped lang="scss">
+/* 样式保持不变 */
 .coreItem {
   display: flex;
   gap: 8px;
@@ -88,7 +139,10 @@ export default {
   background: #f9fcff;
   padding: 12px 0px 17px 12px;
   box-sizing: border-box;
-
+  &:hover {
+      box-shadow: 0px 4px 12px 2px #B5CDE5;
+      transform: translateY(-2px);
+    }
   .unit {
     height: 18px;
     font-family: PingFangSC, PingFang SC;

src/views/home/components/financeCosts.vue

@@ -6,18 +6,18 @@
         <!-- 根据activeTab状态，切换显示采购/存货内容 -->
         <template v-if="activeTab === 'purchase'">
           <!-- 采购重点指标对应的内容 -->
-          <coreBottomLeftItem></coreBottomLeftItem>
+          <coreBottomLeftItem :dateData="dateData" :finance="finance"></coreBottomLeftItem>
           <div class="bottom"
             style="display: flex; width: 100%;margin-top: 8px;background-color: rgba(249, 252, 255, 1);">
-            <coreBottomBar></coreBottomBar>
+            <coreBottomBar :dateData="dateData" :line="finance.line"></coreBottomBar>
           </div>
         </template>
         <template v-else-if="activeTab === 'inventory'">
           <!-- 存货重点指标对应的内容 -->
-          <costItem></costItem>
+          <costItem :dateData="dateData" :cost="cost"></costItem>
           <div class="bottom"
             style="display: flex; width: 100%;margin-top: 8px;background-color: rgba(249, 252, 255, 1);">
-            <CostsBottomBar>
+            <CostsBottomBar :line="cost.line" :dateData="dateData">
             </CostsBottomBar>
           </div>
         </template>
@@ -41,14 +41,18 @@ export default {
   name: 'ProductionStatus',
   components: { Container, coreBottomLeftItem, coreBottomBar, costItem, CostsBottomBar },
   props: {
-    leftEqInfoData: {
-      type: Array,
-      default: () => []
+    finance: {
+      type: Object,
+      default: () => {}
     },
-    productionOverviewVo: {
+    cost: {
       type: Object,
       default: () => ({})
-    }
+    },
+    dateData: {
+      type: Object,
+      default: () => ({})
+    },
   },
   data() {
     return {
@@ -140,7 +144,7 @@ export default {
           nameTextStyle: { color: 'rgba(255,255,255,0.7)', fontSize: 14, align: 'left' },
           min: 0,
           max: (value) => Math.ceil(value.max),
-          scale: true,
+
           axisTick: { show: false },
           axisLabel: { color: 'rgba(255,255,255,0.7)', fontSize: 12 },
           splitLine: { lineStyle: { color: 'RGBA(24, 88, 100, 0.6)', type: 'dashed' } },

src/views/home/components/financeCostsBottomBar.vue

@@ -4,7 +4,7 @@
       <div class="barTop-left" style="display: flex;">
         <div class="title">财务指标趋势</div>
         <div class="legend">
-          <span class="legend-item target">目标</span>
+          <span class="legend-item target">预算</span>
           <span class="legend-item real">实际</span>
         </div>
       </div>
@@ -30,9 +30,9 @@
       </div>
     </div>
     <div class="lineBottom" style="height: 210px; width: 100%">
-      <!-- 传递当前选中的 series 数据给子组件 -->
-      <coreLineChart style="height: 210px; width: 680px" :chart-series="currentSeries"
-        :key="activeButton + JSON.stringify(currentSeries)" />
+      <!-- 传递当前选中的 series 数据和 xAxis 数据给子组件 -->
+      <coreLineChart style="height: 210px; width: 680px" :chart-series="currentSeries" :x-axis-data="xAxisData"
+        :dateData="dateData" />
     </div>
   </div>
 </template>
@@ -44,197 +44,91 @@ import * as echarts from 'echarts';
 export default {
   name: "Container",
   components: { coreLineChart },
-  props: ["name", "size", "icon"],
+  props: {
+    line: { // 接收父组件传递的 line 数据
+      type: Object,
+      default: () => ({})
+    },
+    dateData: { // 接收父组件传递的 line 数据
+      type: Object,
+      default: () => ({})
+    },
+  },
   data() {
     return {
       activeButton: 0, // 初始激活第一个按钮（索引0）
-      itemList: [
-        { unit: "单价·元/m²", targetValue: 16, currentValue: 14.5, progress: 90 },
-        { unit: "净价·元/m²", targetValue: 16, currentValue: 15.2, progress: 85 },
-        { unit: "销量·万m²", targetValue: 20, currentValue: 16, progress: 80 },
-        { unit: "双镀面板·万m²", targetValue: 15, currentValue: 13.8, progress: 92 },
-      ],
-      // 存储4个按钮对应的 series 数据（每个按钮对应「目标+实际」两条线）
-      seriesMap: [
-        // 0: 营业收入
-        [
-          {
-            name: '目标',
-            type: 'line',
-            stack: 'Total',
-            symbol: 'circle',
-            lineStyle: { color: 'rgba(91, 230, 190, 1)' },
-            itemStyle: {
-              color: 'rgba(91, 230, 190, 1)',
-              borderColor: 'rgba(91, 230, 190, 1)',
-              borderWidth: 2
-            },
-            areaStyle: {
-              opacity: 0.3,
-              color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
-                { offset: 0, color: 'rgba(91, 230, 190, 0.4)' },
-                { offset: 1, color: 'rgba(91, 230, 190, 0)' },
-              ]),
-            },
-            data: [500, 620, 580, 720, 650, 800] // 6-11月目标数据
-          },
-          {
-            name: '实际',
-            type: 'line',
-            stack: 'Total',
-            symbol: 'circle',
-            lineStyle: { color: 'rgba(255, 132, 0, 1)' },
-            itemStyle: {
-              color: 'rgba(255, 132, 0, 1)',
-              borderColor: 'rgba(255, 132, 0, 1)',
-              borderWidth: 2
-            },
-            areaStyle: {
-              opacity: 0.3,
-              color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
-                { offset: 0, color: 'rgba(255, 132, 0, 0.4)' },
-                { offset: 1, color: 'rgba(255, 132, 0, 0)' },
-              ]),
-            },
-            data: [480, 590, 610, 680, 700, 750] // 6-11月实际数据
-          }
-        ],
-        // 1: 经营性利润
-        [
-          {
-            name: '目标',
-            type: 'line',
-            stack: 'Total',
-            symbol: 'circle',
-            lineStyle: { color: 'rgba(91, 230, 190, 1)' },
-            itemStyle: {
-              color: 'rgba(91, 230, 190, 1)',
-              borderColor: '#fff',
-              borderWidth: 1
-            },
-            areaStyle: {
-              opacity: 0.3,
-              color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
-                { offset: 0, color: 'rgba(91, 230, 190, 0.4)' },
-                { offset: 1, color: 'rgba(91, 230, 190, 0)' },
-              ]),
-            },
-            data: [150, 180, 160, 200, 190, 220]
-          },
-          {
-            name: '实际',
-            type: 'line',
-            stack: 'Total',
-            symbol: 'circle',
-            lineStyle: { color: 'rgba(255, 132, 0, 1)' },
-            itemStyle: {
-              color: 'rgba(255, 132, 0, 1)',
-              borderColor: '#fff',
-              borderWidth: 1
-            },
-            areaStyle: {
-              opacity: 0.3,
-              color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
-                { offset: 0, color: 'rgba(255, 132, 0, 0.4)' },
-                { offset: 1, color: 'rgba(255, 132, 0, 0)' },
-              ]),
-            },
-            data: [140, 170, 180, 190, 210, 200]
-          }
-        ],
-        // 2: 利润总额
-        [
-          {
-            name: '目标',
-            type: 'line',
-            stack: 'Total',
-            symbol: 'circle',
-            lineStyle: { color: 'rgba(91, 230, 190, 1)' },
-            itemStyle: {
-              color: 'rgba(91, 230, 190, 1)',
-              borderColor: '#fff',
-              borderWidth: 1
-            },
-            areaStyle: {
-              opacity: 0.3,
-              color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
-                { offset: 0, color: 'rgba(91, 230, 190, 0.4)' },
-                { offset: 1, color: 'rgba(91, 230, 190, 0)' },
-              ]),
-            },
-            data: [120, 150, 140, 170, 160, 190]
-          },
-          {
-            name: '实际',
-            type: 'line',
-            stack: 'Total',
-            symbol: 'circle',
-            lineStyle: { color: 'rgba(255, 132, 0, 1)' },
-            itemStyle: {
-              color: 'rgba(255, 132, 0, 1)',
-              borderColor: '#fff',
-              borderWidth: 1
-            },
-            areaStyle: {
-              opacity: 0.3,
-              color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
-                { offset: 0, color: 'rgba(255, 132, 0, 0.4)' },
-                { offset: 1, color: 'rgba(255, 132, 0, 0)' },
-              ]),
-            },
-            data: [110, 140, 150, 160, 180, 170]
-          }
-        ],
-        // 3: 毛利率（百分比数据）
-        [
-          {
-            name: '目标',
-            type: 'line',
-            stack: 'Total',
-            symbol: 'circle',
-            lineStyle: { color: 'rgba(91, 230, 190, 1)' },
-            itemStyle: {
-              color: 'rgba(91, 230, 190, 1)',
-              borderColor: '#fff',
-              borderWidth: 1
-            },
-            areaStyle: {
-              opacity: 0.3,
-              color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
-                { offset: 0, color: 'rgba(91, 230, 190, 0.4)' },
-                { offset: 1, color: 'rgba(91, 230, 190, 0)' },
-              ]),
-            },
-            data: [35, 36, 35.5, 37, 36.5, 38]
-          },
-          {
-            name: '实际',
-            type: 'line',
-            stack: 'Total',
-            symbol: 'circle',
-            lineStyle: { color: 'rgba(255, 132, 0, 1)' },
-            itemStyle: {
-              color: 'rgba(255, 132, 0, 1)',
-              borderColor: '#fff',
-              borderWidth: 1
-            },
-            areaStyle: {
-              opacity: 0.3,
-              color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
-                { offset: 0, color: 'rgba(255, 132, 0, 0.4)' },
-                { offset: 1, color: 'rgba(255, 132, 0, 0)' },
-              ]),
-            },
-            data: [34, 35.5, 36, 36.2, 37, 37.5]
-          }
-        ]
+      // 定义按钮与 line 数据中 key 的映射关系
+      buttonToDataKey: [
+        '营业收入',
+        '经营性利润', // 注意：数据中的 key 是“经营收入”，按钮显示的是“经营性利润”
+        '利润总额',
+        '毛利率'
       ]
     };
   },
   computed: {
-    // 根据当前激活的按钮，返回对应的 series 数据
+    // 根据当前激活的按钮，动态生成对应的 series 数据
     currentSeries() {
-      return this.seriesMap[this.activeButton] || [];
+
+      const dataKey = this.buttonToDataKey[this.activeButton];
+      const chartData = this.line[dataKey];
+      console.log('this.line[dataKey', this.buttonToDataKey[this.activeButton]);
+
+      if (!chartData) {
+        return [];
+      }
+
+      // 提取目标和实际数据的值
+      const targetDataValues = Object.values(chartData.target || {});
+      const realDataValues = Object.values(chartData.real || {});
+      console.log('realDataValues', realDataValues);
+
+      return [
+        {
+          name: '预算',
+          type: 'line',
+          symbol: 'circle',
+          symbolSize: 6,
+          lineStyle: { color: 'rgba(91, 230, 190, 1)' },
+          itemStyle: { color: 'rgba(91, 230, 190, 1)', borderColor: 'rgba(91, 230, 190, 1)', borderWidth: 2 },
+          areaStyle: {
+            opacity: 0.3,
+            color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+              { offset: 0, color: 'rgba(91, 230, 190, 0.4)' },
+              { offset: 1, color: 'rgba(91, 230, 190, 0)' },
+            ]),
+          },
+          data: targetDataValues
+        },
+        {
+          name: '实际',
+          type: 'line',
+          symbol: 'circle',
+          symbolSize: 6,
+          lineStyle: { color: 'rgba(255, 132, 0, 1)' },
+          itemStyle: { color: 'rgba(255, 132, 0, 1)', borderColor: 'rgba(255, 132, 0, 1)', borderWidth: 2 },
+          areaStyle: {
+            opacity: 0.3,
+            color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+              { offset: 0, color: 'rgba(255, 132, 0, 0.4)' },
+              { offset: 1, color: 'rgba(255, 132, 0, 0)' },
+            ]),
+          },
+          data: realDataValues
+        }
+      ];
+    },
+    // 提取 x 轴数据（日期）
+    xAxisData() {
+      const dataKey = this.buttonToDataKey[this.activeButton];
+      const chartData = this.line[dataKey];
+      // 使用 'target' 的键作为 x 轴，如果 'target' 不存在，则使用 'real' 的键
+      if (chartData && chartData.target) {
+        return Object.keys(chartData.target);
+      } else if (chartData && chartData.real) {
+        return Object.keys(chartData.real);
+      }
+      return [];
     }
   },
   methods: {}

src/views/home/components/indicatorCalendar.vue

@@ -0,0 +1,144 @@
+<template>
+  <div style="flex: 1">
+    <Container name="指标填报日历" icon="cockpitItemIcon" size="calendarBg" topSize="calendarTitleBg">
+      <!-- 1. 移除 .kpi-content 的固定高度，改为自适应 -->
+      <div class="kpi-content" style="padding: 14px 14px; display: flex;flex-direction: column; width: 100%;">
+        <!-- 2. .top 保持 flex，无需固定高度，自动跟随子元素拉伸 -->
+        <div class="bottom"
+          style="display: flex; width: 100%;margin-top: 8px;background-color: rgba(249, 252, 255, 1);height: 844px;padding: 26px 16px;">
+          <!-- 动态生成12个月的容器：优化flex布局，缩小行间距 -->
+          <div class="month-list"
+            style="display: flex; gap: 16px; flex-wrap: wrap; align-content: flex-start; row-gap: 8px;">
+            <!-- 循环生成12个月：通过判断当前月份索引，添加current类 -->
+            <div class="monthItem" :class="{
+              'has-data': month.haveData,
+              'current': index === currentMonthIndex // 本月匹配current样式
+            }" v-for="(month, index) in monthList" :key="index">
+              {{ month.name }}
+            </div>
+          </div>
+        </div>
+      </div>
+    </Container>
+  </div>
+</template>
+
+<script>
+import Container from './container.vue'
+// import * as echarts from 'echarts'
+// import topItem from './operating-item.vue'
+
+export default {
+  name: 'ProductionStatus',
+  components: { Container },
+  // mixins: [resize],
+  props: {
+    calendarList: {  // 接收父组件传递的年月状态对象
+      type: Object, // 注意：父组件传递的是对象，不是数组，修正props类型
+      default: () => ({}) // 默认空对象，避免报错
+    },
+  },
+  data() {
+    return {
+      chart: null,
+      // 初始化12个月的列表，可根据实际需求修改haveData默认值
+      monthList: [
+        { name: '1月', haveData: false, isActive: false },
+        { name: '2月', haveData: false, isActive: false },
+        { name: '3月', haveData: false, isActive: false },
+        { name: '4月', haveData: false, isActive: false },
+        { name: '5月', haveData: false, isActive: false },
+        { name: '6月', haveData: false, isActive: false },
+        { name: '7月', haveData: false, isActive: false },
+        { name: '8月', haveData: false, isActive: false },
+        { name: '9月', haveData: false, isActive: false },
+        { name: '10月', haveData: false, isActive: false },
+        { name: '11月', haveData: false, isActive: false },
+        { name: '12月', haveData: false, isActive: false }
+      ],
+    }
+  },
+  computed: {
+    // 计算属性：获取当前月份对应的索引（0-11，对应1月-12月）
+    currentMonthIndex() {
+      // new Date().getMonth() 返回 0(1月) - 11(12月)，正好匹配monthList索引
+      return new Date().getMonth();
+    }
+  },
+  watch: {
+    // 监听calendarList变化，实时更新monthList的haveData状态
+    calendarList: {
+      immediate: true, // 组件挂载时立即执行一次
+      deep: true, // 深度监听对象内部属性变化
+      handler(newVal) {
+        this.updateMonthHaveData(newVal);
+      }
+    }
+  },
+  mounted() {
+    // 初始化图表（若需展示图表，需在模板中添加对应 DOM）
+    // this.$nextTick(() => this.updateChart())
+  },
+  methods: {
+    // 根据calendarList更新monthList的haveData状态
+    updateMonthHaveData(calendarObj) {
+      if (!calendarObj || typeof calendarObj !== 'object') return;
+
+      // 遍历12个月，匹配对应年月
+      this.monthList.forEach((month, index) => {
+        // 获取月份数字（索引+1，补两位，如1→01，10→10）
+        const monthNum = (index + 1).toString().padStart(2, '0');
+        // 拼接成calendarList中的键格式（如2025-01）
+        const yearMonthKey = `2025-${monthNum}`; // 若年份不固定，可改为props传递年份
+
+        // 判断calendarObj中该键对应的值：1→true，0→false，无该键则保持默认false
+        if (calendarObj.hasOwnProperty(yearMonthKey)) {
+          month.haveData = calendarObj[yearMonthKey] === 1;
+        }
+      });
+    },
+  }
+}
+</script>
+
+<style lang='scss' scoped>
+// 月份列表容器（flex布局，自动换行）
+.month-list {
+  // 内联样式已优化行间距，此处可留空或补充其他样式
+}
+
+// 基础月份样式
+.monthItem {
+  width: 164px;
+  height: 42px;
+  border-radius: 4px;
+  font-family: PingFangSC, PingFang SC;
+  font-weight: 400;
+  font-size: 20px;
+  color: rgba(0, 0, 0, 0.85);
+  line-height: 42px;
+  text-align: center;
+  font-style: normal;
+  cursor: pointer; // 鼠标悬浮手型
+  transition: all 0.2s ease; // 过渡效果，样式切换更平滑
+  border: 2px solid transparent; // 透明边框，避免选中时布局偏移
+  margin: 0; // 清除默认外边距，进一步缩小缝隙
+}
+
+// 有数据的样式（背景色#D1E8FF）
+.monthItem.has-data {
+  background-color: #D1E8FF;
+}
+
+// 无数据的样式（背景色#EFF3F8，基础样式默认值）
+.monthItem:not(.has-data) {
+  background-color: #EFF3F8;
+}
+
+// 本月样式（current类，边框2px solid #0B58FF）
+.monthItem.current {
+  border: 2px solid #0B58FF !important;
+}
+</style>
+
+<style></style>

src/views/home/components/indicatorDetails.vue

@@ -0,0 +1,340 @@
+<template>
+  <div style="flex: 1">
+    <Container name="指标填报详情" icon="cockpitItemIcon" size="indicatorDetailsBg" topSize="indicatorDetailsTitleBg">
+      <div class="kpi-content" style="padding: 14px 14px; display: flex;flex-direction: column; width: 100%;">
+        <!-- 查询表单区域 -->
+        <div class="bottom"
+          style="display: flex;gap: 8px; width: 100%;margin-top: 8px;background-color: rgba(249, 252, 255, 1);height: 64px;padding: 16px 16px;">
+          <div style="width: 4px;height: 16px;background: #0B58FF;border-radius: 1px;margin-top: 10px;"></div>
+          <el-form :inline="true" :model="form" class="demo-form-inline">
+            <el-form-item label="所属层级">
+              <el-select v-model="form.levelId" placeholder="请选择">
+                <el-option v-for="item in levelLList" :key="item.id" :label="item.name" :value="item.id">
+                </el-option>
+              </el-select>
+            </el-form-item>
+
+            <el-form-item label="填报月份">
+              <el-date-picker v-model="form.month" type="month" placeholder="选择月" @change="handleMonthChange">
+              </el-date-picker>
+            </el-form-item>
+            <el-form-item>
+              <el-button style="background-color: #0B58FF;" type="primary" @click="onSubmit">查询</el-button>
+              <!-- <el-button type="primary" plain size="medium">导入</el-button> -->
+            </el-form-item>
+          </el-form>
+        </div>
+
+        <!-- 表格操作区域 + 表格区域 -->
+        <div class="bottom"
+          style="display: flex; width: 100%;margin-top: 8px;background-color: rgba(249, 252, 255, 1);height: 772px;padding: 16px 16px;flex-direction: column; gap: 8px;">
+
+          <!-- 只读模式：显示编辑按钮 -->
+          <div v-if="!isDetail" style="display: flex;gap: 8px;align-items: center;height: 32px;">
+            <div style="width: 4px;height: 16px;background: #0B58FF;border-radius: 1px;"></div>
+            <div style="width: 58px;
+height: 16px;
+font-family: PingFangSC, PingFang SC;
+font-weight: 400;
+font-size: 14px;
+color: rgba(0,0,0,0.85);
+line-height: 16px;
+text-align: right;
+font-style: normal;">指标详情</div>
+            <el-button style="background-color: #0B58FF;height: 32px;line-height: 10px;" type="primary"
+              @click="handleEdit">编辑</el-button>
+          </div>
+
+          <!-- 编辑模式：显示快捷操作按钮 -->
+          <div v-if="isDetail" style="display: flex;gap: 8px;align-items: center;height: 32px;">
+            <div style="width: 4px;height: 16px;background: #0B58FF;border-radius: 1px;"></div>
+            <div
+              style="width: 58px;height: 16px;font-family: PingFangSC, PingFang SC;font-weight: 400;font-size: 14px;color: rgba(0,0,0,0.85);line-height: 16px;text-align: right;font-style: normal;">
+              指标详情</div>
+            <el-button style="background-color: #0B58FF;height: 32px;line-height: 10px;" type="primary"
+              @click="handleSave">保存</el-button>
+            <el-button text style="height: 32px;line-height: 10px;" plain size="medium"
+              @click="handleCancel">取消</el-button>
+          </div>
+
+          <!-- 表格组件：添加key属性强制刷新，绑定所有必要属性 -->
+          <base-table style="height: 700px;"  @emitFun="inputChange" class="right-aside" :table-props="tableProps"
+            :page="form.pageNo" :limit="form.pageSize" :table-data="tableData" ref="baseTable"
+            :key="`base-table-${isDetail}`" :maxHeight="700"
+            ></base-table>
+        </div>
+      </div>
+    </Container>
+  </div>
+</template>
+
+<script>
+import Container from './container.vue'
+import { getLevelStruc, getRealMonthPage, updateRealMonthData, getDictListData, } from '@/api/cockpit'
+import inputArea from './inputArea.vue' // 导入输入组件
+
+export default {
+  name: 'ProductionStatus',
+  components: {
+    Container,
+    inputArea // 注册输入组件
+  },
+  props: {
+    // 可保留原有props配置，若无需求可忽略
+  },
+  data() {
+    return {
+      form: {
+        levelId: 1,
+        pageNo: 1,
+        pageSize: 100,
+        month: undefined,
+        startTime: undefined, // 当月起始时间戳（1号00:00:00）
+        endTime: undefined    // 当月结束时间戳（月末23:59:59）
+      },
+      dictData:[],
+      isDetail: false, // 编辑状态标识：false=只读，true=编辑
+      tableData: [], // 表格数据
+      levelLList: [], // 所属层级下拉数据
+      tableProps: [] // 表格列配置
+    }
+  },
+  watch: {
+    // 可选：监听isDetail变化，确保配置同步（双重保障）
+    isDetail(newVal) {
+      this.initTableProps(newVal);
+    }
+  },
+  mounted() {
+    // 1. 初始化当前月份到日期选择器
+    const currentDate = new Date();
+    this.form.month = currentDate;
+    // 2. 计算当月起止时间戳
+    this.setMonthTimeStamp();
+    // 3. 先初始化表格配置（优先于数据请求，避免表格空配置渲染）
+    this.initTableProps(this.isDetail);
+    // 4. 等待配置就绪后，再请求数据，避免异步冲突
+    this.getDictData()
+    this.$nextTick(() => {
+      this.getData();
+    });
+  },
+  methods: {
+    getDictData() {
+      getDictListData({ pageNo: 1, pageSize: 100, dictType: 'lb_dw' }).then((res) => {
+        this.dictData = res.data.list
+      })
+    },
+    // 表格单元格数据变更回调
+    inputChange(val) {
+      console.log('修改的数据：', val);
+      // 安全修改：判断索引是否存在，避免数组越界
+      if (this.tableData[val._pageIndex - 1]) {
+        this.tableData[val._pageIndex - 1][val.prop] = val[val.prop];
+        // 标记数据为已修改状态
+        this.tableData[val._pageIndex - 1].status = 1;
+      }
+    },
+
+    // 初始化表格列配置（核心：精准控制inputArea挂载）
+    initTableProps(isEdit) {
+      console.log('当前编辑状态：', isEdit);
+
+      // 基础表格列配置（只读模式使用）
+      const baseTableProps = [
+        { prop: 'type', label: '指标类型', align: 'center' },
+        { prop: 'name', label: '指标名称', align: 'center' },
+        { prop: 'unitLabel', label: '单位', align: 'center' },
+        { prop: 'value', label: '实际值', align: 'center' },
+      ];
+
+      if (isEdit) {
+        // 编辑模式：仅给「预估值」列添加inputArea（精准挂载，避免无效配置）
+        this.tableProps = baseTableProps.map(item => {
+          if (item.prop === 'value') { // 只给需要编辑的列添加子组件
+            return {
+              ...item,
+              subcomponent: inputArea // 挂载输入组件
+            };
+          }
+          return item; // 其他列保持原有配置
+        });
+      } else {
+        // 只读模式：深拷贝基础配置，避免引用污染
+        this.tableProps = JSON.parse(JSON.stringify(baseTableProps));
+      }
+      console.log('表格配置：', this.tableProps);
+    },
+
+    // 切换到编辑模式
+    handleEdit() {
+      this.isDetail = true;
+      // 先更新表格配置，再强制表格刷新（双重保障）
+      this.initTableProps(this.isDetail);
+      this.$nextTick(() => {
+        if (this.$refs.baseTable) {
+          this.$refs.baseTable.$forceUpdate(); // 强制表格组件刷新
+        }
+      });
+    },
+    handleSave() {
+      this.$modal.confirm('是否确认保存数据?').then(() => {
+        return updateRealMonthData(this.tableData)
+      }).then(() => {
+        this.isDetail = false;
+        // 重置表格配置
+        this.initTableProps(this.isDetail);
+        // 清空并重新请求数据，恢复原始状态
+        this.$nextTick(() => {
+          this.tableData = [];
+          this.getData();
+        });
+        this.$modal.msgSuccess("保存成功");
+      }).catch(() => { });
+    },
+    // 取消编辑，恢复只读模式
+    handleCancel() {
+      this.isDetail = false;
+      // 重置表格配置
+      this.initTableProps(this.isDetail);
+      // 清空并重新请求数据，恢复原始状态
+      this.$nextTick(() => {
+        this.tableData = [];
+        this.getData();
+      });
+      console.log('已取消编辑，恢复原始数据');
+    },
+    handleClear() {
+      this.isDetail = false;
+      // 重置表格配置
+      this.initTableProps(this.isDetail);
+      // 清空并重新请求数据，恢复原始状态
+      this.$nextTick(() => {
+        this.tableData = [];
+        this.getData();
+      });
+    },
+
+    // 通用方法：计算指定月份（默认当前月）的起止时间戳
+    setMonthTimeStamp(selectDate) {
+      let targetDate;
+      if (selectDate) {
+        targetDate = new Date(selectDate); // 传入选中日期，计算对应月份
+      } else {
+        targetDate = new Date(); // 未传入，使用当前系统日期
+      }
+      const year = targetDate.getFullYear();
+      const month = targetDate.getMonth(); // 月份0-11
+
+      // 计算当月1号 00:00:00 时间戳
+      const startDate = new Date(year, month, 1, 0, 0, 0);
+      this.form.startTime = startDate.getTime();
+
+      // 计算当月最后一天 23:59:59 时间戳（精准版）
+      const lastDay = new Date(year, month + 1, 0).getDate();
+      const endDatePrecise = new Date(year, month, lastDay, 23, 59, 59);
+      this.form.endTime = endDatePrecise.getTime();
+    },
+
+    // 日期选择器变更事件：更新对应月份的起止时间戳
+    handleMonthChange(val) {
+      if (!val) {
+        // 清空选择时，重置时间戳
+        this.form.startTime = undefined;
+        this.form.endTime = undefined;
+        return;
+      }
+      // 计算选中月份的起止时间戳
+      this.setMonthTimeStamp(val);
+    },
+    getUnitLabel(unitCode) {
+      // 若字典为空或无匹配编码，返回原编码或空字符串
+      if (!this.dictData || this.dictData.length === 0) {
+        return unitCode || '';
+      }
+      // 查找匹配的字典项
+      const matchItem = this.dictData.find(item => item.value == unitCode);
+      // 返回匹配的label，无匹配则返回原unit编码
+      return matchItem ? matchItem.label : (unitCode || '');
+    },
+    // 请求下拉数据和表格数据
+    getData() {
+      // 1. 请求所属层级下拉数据
+      getLevelStruc().then((res) => {
+        console.log('所属层级数据：', res);
+        this.levelLList = res.data || [];
+      }).catch(err => {
+        console.error('获取所属层级失败：', err);
+        this.levelLList = [];
+      });
+
+      // 2. 请求表格分页数据
+      getRealMonthPage({
+        levelId: this.form.levelId,
+        startTime: this.form.startTime,
+        endTime: this.form.endTime,
+        pageSize: this.form.pageSize,
+        pageNo: this.form.pageNo
+      }).then((res) => {
+        console.log('表格数据：', res);
+        this.tableData = res.data.map(item => {
+          // 新增unitLabel字段，存储匹配后的显示名称
+          return {
+            ...item,
+            unitLabel: this.getUnitLabel(item.unit)
+          };
+        });
+      }).catch(err => {
+        console.error('获取表格数据失败：', err);
+        this.tableData = [];
+      });
+    },
+
+    // 查询按钮点击事件（可根据需求扩展逻辑）
+    onSubmit() {
+      // 清空原有表格数据，重新请求
+      this.tableData = [];
+      this.$nextTick(() => {
+        this.getData();
+      });
+    }
+  }
+}
+</script>
+
+<style lang='scss' scoped>
+// 月份列表容器样式（保留原有配置，若无使用可忽略）
+.month-list {
+  // 内联样式已优化行间距，此处可留空或补充
+}
+
+// 基础月份样式（保留原有配置，若无使用可忽略）
+.monthItem {
+  width: 164px;
+  height: 42px;
+  border-radius: 4px;
+  font-family: PingFangSC, PingFang SC;
+  font-weight: 400;
+  font-size: 20px;
+  color: rgba(0, 0, 0, 0.85);
+  line-height: 42px;
+  text-align: center;
+  font-style: normal;
+  cursor: pointer;
+  transition: all 0.2s ease;
+  border: 2px solid transparent;
+  margin: 0;
+}
+
+.monthItem.has-data {
+  background-color: #D1E8FF;
+}
+
+.monthItem:not(.has-data) {
+  background-color: #EFF3F8;
+}
+
+.monthItem.active {
+  border: 2px solid #0B58FF !important;
+}
+</style>

src/views/home/components/inputArea.vue

@@ -0,0 +1,38 @@
+
+<template>
+  <div class="tableInner">
+    <el-input v-model="list[itemProp]" @blur="changeInput" />
+  </div>
+</template>
+<script>
+export default {
+  name: 'InputArea',
+  props: {
+    injectData: {
+      type: Object,
+      default: () => ({})
+    },
+    itemProp: {
+      type: String
+    }
+  },
+  data() {
+    return {
+      list: this.injectData
+    }
+  },
+  methods: {
+    changeInput() {
+      console.log(this.list)
+      this.$emit('emitData', this.list)
+    }
+  }
+}
+</script>
+<style scoped>
+.tableInner .el-input__inner {
+  border: none;
+  padding: 0;
+  height: 33px;
+}
+</style>

src/views/home/components/keyProductionIndicators.vue

@@ -5,11 +5,11 @@
       <div class="kpi-content" style="padding: 14px 16px; display: flex;flex-direction: column; width: 100%;">
         <!-- 2. .top 保持 flex，无需固定高度，自动跟随子元素拉伸 -->
         <div class="top" style="display: flex; width: 100%;">
-          <top-item />
+          <top-item :rawItemList='productData' :dateData="dateData" />
         </div>
         <div class="bottom" style="display: flex;margin-top: 8px;background-color: rgba(249, 252, 255, 1);">
           <!-- <top-item /> -->
-          <coreBottomBar />
+          <coreBottomBar :lineData="productData.line" :dateData="dateData" />
 
         </div>
       </div>
@@ -27,14 +27,14 @@ export default {
   components: { Container, topItem, coreBottomBar },
   // mixins: [resize],
   props: {
-    leftEqInfoData: {  // 接收父组件传递的设备数据数组
-      type: Array,
-      default: () => []  // 默认空数组，避免报错
-    },
-    productionOverviewVo: { // 恢复生产概览数据（原代码注释了，需根据实际需求保留）
+    productData: {
       type: Object,
-      default: () => ({})
-    }
+      default: () => {}  // 默认空数组，避免报错
+    },
+    dateData: {
+      type: Object,
+      default: () => { }  // 默认空数组，避免报错
+    },
   },
   data() {
     return {
@@ -42,12 +42,6 @@ export default {
     }
   },
   watch: {
-    productionOverviewVo: {
-      handler(newValue, oldValue) {
-        // this.updateChart()
-      },
-      deep: true // 若对象内属性变化需触发，需加 deep: true
-    }
   },
   mounted() {
     // 初始化图表（若需展示图表，需在模板中添加对应 DOM）

src/views/home/components/keyWork.vue

@@ -1,7 +1,6 @@
 <template>
   <div style="flex: 1">
     <Container name="重点工作/三大攻坚战" icon="cockpitItemIcon" size="bottomBasic" topSize="basic">
-      <!-- 1. 移除 .kpi-content 的固定高度，改为自适应 -->
       <div class="kpi-content"
         style="padding: 14px 16px; display: flex;flex-direction: column; width: 100%;height: 280px;">
         <div class="bottom"
@@ -16,76 +15,78 @@
               <span class="legend-text">未完成</span>
             </div>
           </div>
-          <base-table style="height: 180px;" :page="1" :limit="10" :show-index="true" :beilv="1" :tableConfig="tableProps"
-            :table-data="maintenanceTasks" />
-
+          <base-table style="height: 180px;" :page="1" :limit="10" :show-index="true" :beilv="1"
+            :tableConfig="tableProps" :table-data="tableData" />
         </div>
       </div>
     </Container>
   </div>
 </template>
+
 <script>
 import Container from './container.vue'
-// import * as echarts from 'echarts'
-import topItem from './top-product-item.vue'
-import coreBottomBar from './productBottomBar.vue'
 import baseTable from './baseTable.vue'
 import finishDiv from './finishDiv.vue'
 
-
 export default {
   name: 'ProductionStatus',
-  components: { Container, topItem, coreBottomBar, baseTable },
-  // mixins: [resize],
+  components: { Container, baseTable },
   props: {
-    leftEqInfoData: {  // 接收父组件传递的设备数据数组
-      type: Array,
-      default: () => []  // 默认空数组，避免报错
-    },
-    productionOverviewVo: { // 恢复生产概览数据（原代码注释了，需根据实际需求保留）
+    importantWork: {
       type: Object,
       default: () => ({})
     }
   },
   data() {
     return {
-      maintenanceTasks: [
-        { id: 1, eqName: '研发经费入强度/%', taskName: '例行维护', monthlyActual: '85%', accumulated: '78%', status: 'done' }, // 已完成-绿色
-        { id: 2, eqName: '存货/亿元', taskName: '例行维护', monthlyActual: '60%', accumulated: '65%', status: 'pending' }, // 未完成-橙色
-        { id: 3, eqName: '三年以上应收款/亿元', taskName: '故障排查', monthlyActual: '100%', accumulated: '92%', status: 'done' },
-        { id: 4, eqName: '非经营性资产处置到账金额/万元', taskName: '部件更换', monthlyActual: '45%', accumulated: '50%', status: 'pending' },
-        { id: 4, eqName: '研发经费投入/万元', taskName: '部件更换', monthlyActual: '45%', accumulated: '50%', status: 'pending' },
-        { id: 4, eqName: '经营性现金流/万元', taskName: '部件更换', monthlyActual: '45%', accumulated: '50%', status: 'pending' },
-
-        // { id: 2, eqName: '螺杆挤出', taskName: '例行维护', },
-
-      ],
+      tableData: [],
       tableProps: [
-        // { prop: 'id', label: '序号', width: 50, align: 'center' },
-        { prop: 'eqName', label: '攻坚指标', align: 'center' },
-        { prop: 'taskName', label: '攻坚目标', align: 'center' },
-        { prop: 'taskName', label: '当月实际', align: 'center' },
-        { prop: 'taskName', label: '累计', align: 'center', subcomponent: finishDiv },
-
+        { prop: 'name', label: '攻坚指标', align: 'center' },
+        { prop: 'target', label: '攻坚预算', align: 'center' },
+        { prop: 'monthlyActual', label: '当月实际', align: 'center' },
+        { prop: 'accumulated', label: '累计', align: 'center', subcomponent: finishDiv },
       ]
     }
   },
   watch: {
-    productionOverviewVo: {
-      handler(newValue, oldValue) {
-        this.updateChart()
+    importantWork: {
+      handler(newVal) {
+        this.tableData = this.transformData(newVal);
       },
-      deep: true // 若对象内属性变化需触发，需加 deep: true
+      immediate: true,
+      deep: true
     }
   },
-  mounted() {
-    // 初始化图表（若需展示图表，需在模板中添加对应 DOM）
-    // this.$nextTick(() => this.updateChart())
-  },
-  beforeDestroy() {
-    // 销毁图表，避免内存泄漏
-  },
   methods: {
+    transformData(rawData) {
+      if (!rawData || typeof rawData !== 'object') return [];
+
+      const mapping = [
+        { key: 'jyxxjl', name: '经营现金流', unit: '万元' },
+        { key: 'yszk', name: '应收账款', unit: '万元' },
+        { key: 'ch', name: '存货', unit: '万元' },
+        { key: 'yysr', name: '营业收入', unit: '万元' },
+        { key: 'snysysk', name: '三年以上应收款', unit: '万元' },
+        { key: 'dzje', name: '非经营性资产处置到账金额', unit: '万元' },
+        { key: 'yfjftr', name: '研发经费投入', unit: '万元' },
+        { key: 'yfjftrqd', name: '研发经费投入强度', unit: '%' }
+      ];
+
+      return mapping.map((item, index) => {
+        const data = rawData[item.key] || { monValue: 0, real: 0, target: 0 };
+        const accumulated = data.real || 0;
+        const target = data.target || 0;
+
+        return {
+          id: index + 1,
+          name: item.name + '/' + item.unit,
+          target: target,
+          monthlyActual: data.monValue,
+          accumulated: accumulated,
+          status: accumulated > 0 && target > 0 && accumulated / target >= 1 ? 'done' : 'pending'
+        };
+      });
+    }
   }
 }
 </script>
@@ -95,41 +96,31 @@ export default {
   display: flex;
   align-items: center;
   gap: 10px;
-  /* 两个图例项之间的间距 */
 }
 
-/* 单个图例项 */
 .legend-item {
   display: flex;
   align-items: center;
 }
 
-/* 图例小方块 */
 .legend-dot {
   display: inline-block;
   width: 12px;
   height: 12px;
   margin-right: 5px;
   border-radius: 2px;
-  /* 可选：轻微圆角 */
 }
 
-/* 已完成（绿色） */
 .legend-dot.done {
   background-color: #4CAF50;
-  /* 绿色，可根据需求调整色值 */
 }
 
-/* 未完成（橙色） */
 .legend-dot.pending {
   background-color: #FF9800;
-  /* 橙色，可根据需求调整色值 */
 }
 
-/* 图例文字 */
 .legend-text {
   font-size: 14px;
   color: #333;
 }
-
 </style>

src/views/home/components/noRouterHeader.vue

@@ -1,7 +1,7 @@
 <template>
   <header class="report-header" :class="['report-header__' + size]">
     <!-- 左侧区域：标题 -->
-    <div class="left-content">
+    <div class="left-content" :style="{ marginLeft: leftMargin }">
       <div class="top-title">{{ topTitle }}</div>
     </div>
 
@@ -18,17 +18,12 @@
 
     <!-- 时间选择区域：日/月/年按钮 + 日期选择器 -->
     <div class="timeType">
-      <div class="item" v-for="(item, index) in timeTypes" :key="index" @click="activeTime = index"
-        :class="{ 'no-skew': activeTime === index }">
-        <span class="item-text">{{ item.text }}</span>
-      </div>
       <div class="dateP">
         <div class="label">
-          <span class="label-text">日期选择</span>
+          <span class="label-text">月份选择</span>
         </div>
-        <el-date-picker v-model="date" :type="getPickerType" :placeholder="getPickerPlaceholder"
-          class="custom-date-picker" value-format="yyyy-MM-dd" :clearable="false" style="width: 132px;height: 29px;"
-          @change="emitTimeRange" />
+        <el-date-picker v-model="date" type="month" placeholder="请选择月份" class="custom-date-picker"
+          value-format="timestamp" :clearable="false" style="width: 132px;height: 29px;" @change="emitTimeRange" />
       </div>
     </div>
   </header>
@@ -43,112 +38,135 @@ export default {
     isFullScreen: { type: Boolean, default: false },
     topTitle: { type: String, default: '' },
     size: { type: String, default: 'basic' },
+    leftMargin: {
+      type: [String, Number],
+      default: '350px' // 默认值设为350px
+    },
+    dateData: {
+      type: Object,
+      default: () => ({})
+    },
   },
   data() {
     return {
       currentTime: '',
       timeTimer: null,
-      date: undefined, // 存储选择的日期（字符串格式：yyyy-MM-dd/yyyy-MM/yyyy）
+      date: Date.now(), // 使用当前时间戳作为初始值
       activeTime: 1, // 默认月维度（0=日，1=月，2=年）
-      timeTypes: [
-        { text: '日', pickerType: 'date', placeholder: '选择日期' },
-        { text: '月', pickerType: 'month', placeholder: '选择月份' },
-        { text: '年', pickerType: 'year', placeholder: '选择年份' }
-      ]
-    }
-  },
-  computed: {
-    getPickerType() {
-      return this.timeTypes[this.activeTime].pickerType;
-    },
-    getPickerPlaceholder() {
-      return this.timeTypes[this.activeTime].placeholder;
     }
   },
   watch: {
     activeTime(newVal, oldVal) {
       if (newVal !== oldVal) {
-        this.date = undefined;
-        // this.emitTimeRange();
+        this.date = Date.now();
+        this.emitTimeRange();
+      }
+    },
+    dateData: {
+      immediate: true, // 初始化时立即执行
+      handler(newVal) {
+        console.log('dateData 变化:', newVal);
+        if (newVal && (newVal.startTime || newVal.endTime)) {
+          // 优先使用 startTime，如果没有则使用 endTime
+          const timeStamp = newVal.startTime || newVal.endTime;
+          if (timeStamp && timeStamp !== 0) {
+            console.log('设置日期选择器时间为:', timeStamp);
+            this.date = timeStamp; // 直接使用时间戳
+          }
+        }
       }
     }
   },
   mounted() {
-    // 初始化默认日期（当前月，格式：yyyy-MM）
-    console.log(this.$router);
-    this.date = moment().format('YYYY-MM');
-    this.$nextTick(() => this.emitTimeRange());
+    // 初始化默认日期为当前月份
+    console.log('初始化日期选择器，当前时间戳:', this.date);
+    this.$nextTick(() => {
+      this.emitTimeRange();
+    });
+  },
+  beforeDestroy() {
+    // 清理定时器
+    if (this.timeTimer) {
+      clearInterval(this.timeTimer);
+    }
   },
   methods: {
     changeFullScreen() {
       this.$emit('screenfullChange');
     },
     handleReturn() {
-      console.log(this.$router);
-
-      this.$router.go(-1);
-    },
-    exportPDF() {
-      this.$emit('exportPDF');
+      console.log('返回上一页');
+      if (this.$router) {
+        this.$router.go(-1);
+      }
     },
     /**
-     * 核心方法：用moment计算时间范围（时间戳格式）
-     * 日：选择日00:00:00 → 次日00:00:00
-     * 月：当月1日00:00:00 → 次月1日00:00:00
-     * 年：当年1月1日00:00:00 → 次年1月1日00:00:00
+     * 计算时间范围（时间戳格式）
+     * 固定为月维度：当月1日00:00:00 → 当月最后一天23:59:59
      */
     calculateTimeRange() {
+      // 固定为月维度
+      const mode = 2;
+      // 初始化时间戳为0（兜底值）
       let startTime = 0;
       let endTime = 0;
-      const mode = this.activeTime + 1; // 1=日，2=月，3=年
-      const defaultMoment = moment(); // 默认当前时间
+      // 存储目标月份（仅数字，如10、12）
+      let targetMonth = '';
 
-      // 处理选择的日期：转为moment对象（兼容不同选择器格式）
-      console.log('this.date', this.date);
+      try {
+        // 使用 this.date（时间戳）创建 moment 对象
+        let targetMoment = this.date
+          ? moment(this.date)
+          : moment(); // 如果 date 无效，使用当前时间
 
-      const targetMoment = this.date
-        ? moment(this.date, this.getPickerType === 'date' ? 'YYYY-MM-DD' : (this.getPickerType === 'month' ? 'YYYY-MM' : 'YYYY'))
-        : defaultMoment;
+        // 验证日期是否有效
+        if (!targetMoment.isValid()) {
+          console.warn('无效的日期，已使用当前月份:', this.date);
+          targetMoment = moment();
+        }
 
-      // 验证日期有效性
-      if (!targetMoment.isValid()) {
-        console.error('无效日期:', this.date);
-        return { startTime, endTime, mode };
+        // 获取月份（数字格式，1-12）
+        targetMonth = targetMoment.format('M');
+        console.log('当前选择的月份:', targetMonth);
+
+        // 计算当月第一天00:00:00的时间戳
+        startTime = targetMoment.startOf('month').valueOf();
+        // 计算当月最后一天23:59:59的时间戳
+        endTime = targetMoment.clone()
+          .endOf('month')
+          .set({
+            hour: 23,
+            minute: 59,
+            second: 59,
+            millisecond: 0  // 毫秒设为0
+          })
+          .valueOf();
+
+        // 调试输出
+        console.log('月份时间范围计算结果:', {
+          startTime: moment(startTime).format('YYYY-MM-DD HH:mm:ss'),
+          endTime: moment(endTime).format('YYYY-MM-DD HH:mm:ss'),
+          startTimeStamp: startTime,
+          endTimeStamp: endTime,
+          targetMonth: targetMonth
+        });
+      } catch (error) {
+        console.error('计算月份时间范围时出错：', error);
       }
 
-      // 1. 日维度：当天0点 → 次日0点
-      if (this.activeTime === 0) {
-        startTime = targetMoment.startOf('day').valueOf(); // 当天00:00:00 时间戳
-        endTime = targetMoment.add(1, 'day').startOf('day').valueOf(); // 次日00:00:00 时间戳
-      }
-
-      // 2. 月维度：当月1日0点 → 次月1日0点
-      else if (this.activeTime === 1) {
-        startTime = targetMoment.startOf('month').valueOf(); // 当月1日00:00:00 时间戳
-        endTime = targetMoment.add(1, 'month').startOf('month').valueOf(); // 次月1日00:00:00 时间戳
-      }
-
-      // 3. 年维度：当年1月1日0点 → 次年1月1日0点
-      else if (this.activeTime === 2) {
-        startTime = targetMoment.startOf('year').valueOf(); // 当年1月1日00:00:00 时间戳
-        endTime = targetMoment.add(1, 'year').startOf('year').valueOf(); // 次年1月1日00:00:00 时间戳
-      }
-
-      // 调试输出（格式化显示，便于验证）
-      console.log('时间范围计算结果:', {
+      // 返回月份相关的所有信息：时间戳、维度、月份值
+      return {
+        startTime,
+        endTime,
         mode,
-        startTime: moment(startTime).format('YYYY-MM-DD HH:mm:ss'),
-        endTime: moment(endTime).format('YYYY-MM-DD HH:mm:ss'),
-        startTimeStamp: startTime,
-        endTimeStamp: endTime
-      });
-
-      return { startTime, endTime, mode };
+        targetMonth
+      };
     },
 
     // 传递时间范围给父组件
     emitTimeRange() {
       const timeRange = this.calculateTimeRange();
+      console.log('触发时间范围变化:', timeRange);
       this.$emit('timeRangeChange', timeRange);
     }
   }
@@ -186,7 +204,6 @@ export default {
   /* 左侧标题区域 */
   .left-content {
     margin-top: 11px;
-    margin-left: 350px;
     height: 55px;
     display: flex;
     align-items: center;
@@ -256,7 +273,7 @@ export default {
   }
 
   .dateP .label {
-    width: 70px;
+    width: 165px;
     height: 28px;
     background: rgba(236, 244, 254, 1);
     transform: skew(-25deg);
@@ -275,62 +292,50 @@ export default {
   }
 
   /* 右侧全屏按钮区域 */
-    .right-content {
-      display: flex;
-      // flex-direction: column;
-      margin-top: 12px;
-      margin-right: 10px;
-      gap: 21px;
-    }
+  .right-content {
+    display: flex;
+    margin-top: 12px;
+    margin-right: 10px;
+    gap: 21px;
+  }
 
-    // .current-time {
-    //   color: #FFFFFF;
-    //   font-family: PingFangSC, PingFang SC;
-    //   font-weight: 500;
-    //   font-size: 22px;
-    //   line-height: 24px;
-    //   letter-spacing: 1px;
-    // }
+  .screen-btn {
+    width: 26px;
+    height: 26px;
+    color: #00fff0;
+    font-size: 26px;
+    padding: 0;
+  }
 
-    .screen-btn {
-      width: 26px;
-      height: 26px;
-      color: #00fff0;
-      font-size: 26px;
-      padding: 0;
-    }
+  .home-btn {
+    width: 26px;
+    height: 26px;
+    color: #00fff0;
+    font-size: 26px;
+    padding: 0;
+  }
 
-    .home-btn {
-      width: 26px;
-      height: 26px;
-      // margin-left: 300px;
-      color: #00fff0;
-      font-size: 26px;
-      padding: 0;
-    }
-
-    .return-btn {
-      width: 26px;
-      height: 26px;
-      // margin-left: 300px;
-      color: #00fff0;
-      font-size: 26px;
-      padding: 0;
-    }
+  .return-btn {
+    width: 26px;
+    height: 26px;
+    color: #00fff0;
+    font-size: 26px;
+    padding: 0;
+  }
 }
 
 /* 日期选择器自定义样式 */
 ::v-deep .custom-date-picker {
   position: absolute;
   right: 8px;
-  width: 132px !important;
+  width: 165px !important;
   height: 28px !important;
   position: relative;
   margin: 0 !important;
 
   .el-input__inner {
     height: 28px !important;
-    width: 132px !important;
+    width: 165px !important;
     text-align: center;
     padding-left: 15px !important;
     padding-right: 32px !important;

src/views/home/components/operating-item.vue

@@ -8,7 +8,7 @@
         <div class="content-wrapper">
           <div class="left">
             <div class="number">{{ item.targetValue || 0 }}</div>
-            <div class="title">目标值</div>
+            <div class="title">预算值</div>
           </div>
           <div class="line"></div>
           <div class="right">

src/views/home/components/operatingBar.vue

@@ -36,7 +36,7 @@
       </div>
     </div>
     <div class="lineBottom" style="height: 100%; width: 100%">
-      <operatingLineBar :chartData="chartData" style="height: 99%; width: 100%" />
+      <operatingLineBar :chartData="chartD" style="height: 99%; width: 100%" />
     </div>
   </div>
 </template>
@@ -48,18 +48,31 @@ import * as echarts from 'echarts';
 export default {
   name: "Container",
   components: { operatingLineBar },
-  props: ["name", "size", "icon"],
+  props: ["chartData"],
   data() {
     return {
       activeButton: 0,
     };
   },
   computed: {
+    currentDataSource() {
+      console.log('yyyy',this.chartData);
+
+      return this.activeButton === 0 ? this.chartData.sales : this.chartData.grossMargin;
+    },
+    locations() {
+      console.log('this.chartData', this.chartData);
+
+      return this.activeButton === 0 ? this.chartData.salesLocations : this.chartData.grossMarginLocations;
+    },
     // 根据按钮切换生成对应的 chartData
-    chartData() {
+    chartD() {
       // 销量场景数据
+      const data = this.currentDataSource;
+      console.log(this.currentDataSource,'currentDataSource');
+
       const salesData = {
-        allPlaceNames: ['桐城', '合肥', '宜兴', '漳州', '自贡', '洛阳'], // x轴刻度
+        allPlaceNames: this.locations,
         series: [
           // 1. 完成率（折线图）
           {
@@ -83,13 +96,13 @@ export default {
                 { offset: 1, color: 'rgba(40, 138, 255, 0)' }
               ])
             },
-            data: [104, 96.7, 107.3, 97.1, 107.7, 93.8], // 完成率（%）
+            data: data.rates, // 完成率（%）
             symbol: 'circle',
             symbolSize: 6
           },
           // 2. 目标（柱状图）
           {
-            name: '目标',
+            name: '预算',
             type: 'bar',
             yAxisIndex: 0, // 左侧Y轴（万元）
             barWidth: 14,
@@ -105,7 +118,7 @@ export default {
               borderRadius: [4, 4, 0, 0],
               borderWidth: 0
             },
-            data: [50, 60, 55, 70, 65, 80] // 目标销量（万元）
+            data: data.targets // 目标销量（万元）
           },
           // 3. 实际（柱状图，含达标状态）
           {
@@ -116,7 +129,7 @@ export default {
             itemStyle: {
               color: (params) => {
                 // 达标状态：1=达标（绿色），0=未达标（橙色）
-                const safeFlag = [1, 0, 1, 0, 1, 0];
+                const safeFlag = data.flags;
                 const currentFlag = safeFlag[params.dataIndex] || 0;
                 return currentFlag === 1
                   ? {
@@ -139,14 +152,13 @@ export default {
               borderRadius: [4, 4, 0, 0],
               borderWidth: 0
             },
-            data: [52, 58, 59, 68, 70, 75] // 实际销量（万元）
+            data: data.reals // 实际销量（万元）
           }
         ]
       };
 
       // 毛利率场景数据
       const grossProfitData = {
-        allPlaceNames: ['1月', '2月', '3月', '4月', '5月', '6月'],
         series: [
           // 1. 完成率（折线图）
           {
@@ -173,7 +185,7 @@ export default {
           },
           // 2. 目标（柱状图）
           {
-            name: '目标',
+            name: '预算',
             type: 'bar',
             yAxisIndex: 0,
             barWidth: 14,

src/views/home/components/operatingBottomLineBar.vue

@@ -83,11 +83,11 @@ export default {
             return html;
           }
         },
-        grid: {
+       grid: {
           top: 30,
           bottom: 30,
-          right: 70,
-          left: 40,
+          right: 20,
+          left: 60,
         },
         xAxis: [
           {
@@ -111,15 +111,16 @@ export default {
           // 左侧Y轴：营业收入、成本（单位万元）
           {
             type: 'value',
+            splitNumber: 4,
             name: '万元',
             nameTextStyle: {
               color: 'rgba(0, 0, 0, 0.45)',
               fontSize: 12,
               align: 'right'
             },
-            min: 0,
-            max: (value) => Math.ceil((value.max || 0) * 1.1),
-            scale: false,
+            // min: 0,
+            // max: (value) => Math.ceil((value.max || 0) * 1.1),
+
             axisTick: { show: false },
             axisLabel: {
               color: 'rgba(0, 0, 0, 0.45)',
@@ -138,8 +139,10 @@ export default {
               fontSize: 12,
               align: 'left'
             },
-            min: 0,
-            max: 100,
+            // min: 0,
+            // max: 100,
+            scale:true,
+            splitNumber: 4,
             axisTick: { show: false },
             axisLabel: {
               color: 'rgba(0, 0, 0, 0.45)',

src/views/home/components/operatingLineBar.vue

@@ -83,11 +83,11 @@ export default {
           //   return html;
           // }
         },
-        grid: {
+       grid: {
           top: 30,
           bottom: 30,
-          right: 70,
-          left: 40,
+          right: 20,
+          left: 60,
         },
         xAxis: [
           {
@@ -117,9 +117,8 @@ export default {
               fontSize: 12,
               align: 'right'
             },
-            min: 0,
-            max: (value) => Math.ceil((value.max || 0) * 1.1),
-            scale: false,
+
+            splitNumber: 4,
             axisTick: { show: false },
             axisLabel: {
               color: 'rgba(0, 0, 0, 0.45)',

src/views/home/components/operatingLineBarSale.vue

@@ -16,13 +16,11 @@ export default {
     chartData: {
       type: Object,
       default: () => ({
-        series: [],
-        allPlaceNames: []
       }),
       // 校验数据格式
-      validator: (value) => {
-        return Array.isArray(value.series) && Array.isArray(value.allPlaceNames);
-      }
+      // validator: (value) => {
+      //   return Array.isArray(value.series) && Array.isArray(value.allPlaceNames);
+      // }
     }
   },
   mounted() {
@@ -37,7 +35,6 @@ export default {
     chartData: {
       handler() {
         console.log(this.chartData,'chartData');
-
         this.updateChart();
       },
       deep: true,
@@ -58,6 +55,7 @@ export default {
 
       this.myChart = echarts.init(chartDom);
       const { allPlaceNames, series } = this.chartData || {};
+      console.log('chartData', this.chartData);
 
       // 处理空数据
       const xData = allPlaceNames || [];
@@ -83,11 +81,11 @@ export default {
           //   return html;
           // }
         },
-        grid: {
+       grid: {
           top: 30,
           bottom: 30,
-          right: 70,
-          left: 40,
+          right: 20,
+          left: 60,
         },
         xAxis: [
           {
@@ -117,9 +115,8 @@ export default {
               fontSize: 12,
               align: 'right'
             },
-            min: 0,
-            max: (value) => Math.ceil((value.max || 0) * 1.1),
-            scale: false,
+
+            splitNumber: 4,
             axisTick: { show: false },
             axisLabel: {
               color: 'rgba(0, 0, 0, 0.45)',
@@ -128,7 +125,6 @@ export default {
             },
             splitLine: { lineStyle: { color: 'rgba(0, 0, 0, 0.15)' } },
             axisLine: { lineStyle: { color: 'rgba(0, 0, 0, 0.15)' } },
-            splitNumber: 4
           },
           // 右侧Y轴：利润占比（百分比）
           {
@@ -148,7 +144,8 @@ export default {
             },
             splitLine: { show: false },
             axisLine: { lineStyle: { color: 'rgba(0, 0, 0, 0.15)' } },
-            splitNumber: 4
+            //
+            splitNumber: 4,
           }
         ],
         series: chartSeries // 直接使用父组件传递的 series

src/views/home/components/operatingLineChart.vue

@@ -3,10 +3,9 @@
     <Container name="趋势图" icon="cockpitItemIcon" size="operatingLarge" topSize="large">
       <!-- 1. 移除 .kpi-content 的固定高度，改为自适应 -->
       <div class="kpi-content" style="padding: 14px 16px; display: flex;width: 100%;">
-        <div class="bottom"
-          style="height: 380px; display: flex; width: 100%;background-color: rgba(249, 252, 255, 1);">
+        <div class="bottom" style="height: 380px; display: flex; width: 100%;background-color: rgba(249, 252, 255, 1);">
           <!-- <top-item /> -->
-          <coreBottomBar />
+          <coreBottomBar :chartData="chartData" />
 
         </div>
       </div>
@@ -15,157 +14,124 @@
 </template>
 <script>
 import Container from './container.vue'
-// import * as echarts from 'echarts'
 import coreBottomBar from './operatingBar.vue'
 
 export default {
   name: 'ProductionStatus',
   components: { Container, coreBottomBar },
-  // mixins: [resize],
   props: {
-    leftEqInfoData: {  // 接收父组件传递的设备数据数组
-      type: Array,
-      default: () => []  // 默认空数组，避免报错
+    salesTrendMap: {
+      type: Object,
+      default: () => ({})
     },
-    productionOverviewVo: { // 恢复生产概览数据（原代码注释了，需根据实际需求保留）
+    grossMarginTrendMap: {
       type: Object,
       default: () => ({})
     }
   },
   data() {
     return {
-      chart: null
+      chartData: null // 初始化 chartData 为 null
     }
   },
   watch: {
-    productionOverviewVo: {
-      handler(newValue, oldValue) {
-        this.updateChart()
+    grossMarginTrendMap: {
+      handler() {
+        this.processChartData();
       },
-      deep: true // 若对象内属性变化需触发，需加 deep: true
-    }
-  },
-  mounted() {
-    // 初始化图表（若需展示图表，需在模板中添加对应 DOM）
-    // this.$nextTick(() => this.updateChart())
-  },
-  beforeDestroy() {
-    // 销毁图表，避免内存泄漏
-    if (this.chart) {
-      this.chart.dispose()
-      this.chart = null
+      immediate: true,
+      deep: true
+    },
+    salesTrendMap: {
+      handler() {
+        this.processChartData();
+      },
+      immediate: true,
+      deep: true
     }
   },
   methods: {
-    updateChart() {
-      // 注意：原代码中图表依赖 id 为 "productionStatusChart" 的 DOM，需在模板中补充，否则会报错
-      // 示例：在 Container 内添加 <div id="productionStatusChart" style="height: 200px;"></div>
-      if (!document.getElementById('productionStatusChart')) return
+    /**
+     * 核心处理函数：在所有数据都准备好后，才组装 chartData
+     */
+    processChartData() {
+      // 关键改动：增加数据有效性检查
+      // 检查 salesTrendMap 是否有实际数据（不只是空对象）
+      const isSalesDataReady = Object.keys(this.salesTrendMap).length > 0;
+      // 检查 grossMarginTrendMap 是否有实际数据
+      const isGrossMarginDataReady = Object.keys(this.grossMarginTrendMap).length > 0;
 
-      if (this.chart) this.chart.dispose()
-      this.chart = echarts.init(document.getElementById('productionStatusChart'))
+      // 如果任一数据未准备好，则不更新 chartData，或传递一个加载中的状态
+      // 你可以根据业务需求调整这里的逻辑，比如：
+      // 1. 等待两者都准备好
+      // 2. 只要有一个准备好了就更新，但确保另一个有合理的默认值
 
-      const data = [
-        this.productionOverviewVo.input || 0,
-        this.productionOverviewVo.output || 0,
-        this.productionOverviewVo.ng || 0,
-        this.productionOverviewVo.lowValue || 0,
-        this.productionOverviewVo.scrap || 0,
-        this.productionOverviewVo.inProcess || 0,
-        this.productionOverviewVo.engineer || 0
-      ]
+      // --- 方案一：等待两者都准备好 ---
+      // if (!isSalesDataReady || !isGrossMarginDataReady) {
+      //   console.log('数据尚未全部准备好，暂不更新图表');
+      //   this.chartData = {
+      //     grossMarginLocations: [],
+      //     salesLocations: [],
+      //     grossMargin: { rates: [], reals: [], targets: [], flags: [] },
+      //     sales: { rates: [], reals: [], targets: [], flags: [] },
+      //   };
+      //   return;
+      // }
 
-      const option = {
-        type: 'bar',
-        grid: { left: 51, right: 40, top: 50, bottom: 45 },
-        tooltip: {
-          trigger: 'axis',
-          axisPointer: { type: 'shadow' },
-          className: 'production-status-chart-tooltip'
-        },
-        xAxis: {
-          type: 'category',
-          offset: 8,
-          data: ['投入', '产出', '待判', '低价值', '报废', '在制', '实验片'],
-          axisTick: { show: false },
-          axisLine: { show: true, onZero: false, lineStyle: { color: '#00E8FF' } },
-          axisLabel: {
-            color: 'rgba(255,255,255,0.7)',
-            fontSize: 12,
-            interval: 0,
-            width: 38,
-            overflow: 'break'
-          }
-        },
-        yAxis: {
-          type: 'value',
-          name: '单位/片',
-          nameTextStyle: { color: 'rgba(255,255,255,0.7)', fontSize: 14, align: 'left' },
-          min: () => 0,
-          max: (value) => Math.ceil(value.max),
-          scale: true,
-          axisTick: { show: false },
-          axisLabel: { color: 'rgba(255,255,255,0.7)', fontSize: 12 },
-          splitLine: { lineStyle: { color: 'RGBA(24, 88, 100, 0.6)', type: 'dashed' } },
-          axisLine: { show: true, lineStyle: { color: '#00E8FF' } }
-        },
-        series: [
-          {
-            type: 'pictorialBar',
-            label: { show: true, position: 'top', distance: -3, color: '#89CDFF', fontSize: 11 },
-            symbolSize: [20, 8],
-            symbolOffset: [0, 5],
-            z: 20,
-            itemStyle: {
-              borderColor: '#3588C7',
-              color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
-                { offset: 0, color: 'RGBA(22, 89, 98, 1)' },
-                { offset: 1, color: '#3588C7' }
-              ])
-            },
-            data: data
-          },
-          {
-            type: 'bar',
-            barWidth: 20,
-            itemStyle: {
-              borderWidth: 1,
-              borderColor: '#3588C7',
-              opacity: 0.8,
-              color: {
-                x: 0, y: 0, x2: 0, y2: 1,
-                type: 'linear',
-                global: false,
-                colorStops: [
-                  { offset: 0, color: 'rgba(73,178,255,0)' },
-                  { offset: 0.5, color: 'rgba(0, 232, 255, .5)' },
-                  { offset: 1, color: 'rgba(0, 232, 255, 1)' }
-                ]
-              }
-            },
-            tooltip: { show: false },
-            data: data
-          },
-          {
-            type: 'pictorialBar',
-            symbolSize: [20, 8],
-            symbolOffset: [0, -4],
-            z: 12,
-            symbolPosition: 'end',
-            itemStyle: {
-              borderColor: 'rgba(0, 232, 255, 1)',
-              color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
-                { offset: 0, color: 'RGBA(22, 89, 98, 1)' },
-                { offset: 1, color: '#3588C7' }
-              ])
-            },
-            tooltip: { show: false },
-            data: data
-          }
-        ]
-      }
+      // --- 方案二 (推荐)：有什么数据就显示什么，没有的就显示空 ---
+      // 这种方式更友好，用户可以先看到部分数据
+      const grossMarginLocations = isGrossMarginDataReady ? Object.keys(this.grossMarginTrendMap) : [];
+      const salesLocations = isSalesDataReady ? Object.keys(this.salesTrendMap) : [];
 
-      this.chart.setOption(option)
+      const processedGrossMarginData = isGrossMarginDataReady
+        ? this.processSingleDataset(grossMarginLocations, this.grossMarginTrendMap)
+        : { rates: [], reals: [], targets: [], flags: [] };
+
+      const processedSalesData = isSalesDataReady
+        ? this.processSingleDataset(salesLocations, this.salesTrendMap)
+        : { rates: [], reals: [], targets: [], flags: [] };
+
+      // 3. 组装最终的 chartData 对象
+      this.chartData = {
+        grossMarginLocations: grossMarginLocations,
+        salesLocations: salesLocations,
+        grossMargin: processedGrossMarginData,
+        sales: processedSalesData
+      };
+
+      console.log('chartData 已更新:', this.chartData);
+    },
+
+    /**
+     * 通用数据处理函数（纯函数）
+     * @param {Array} locations - 某个指标的地点数组
+     * @param {Object} dataMap - 该指标的原始数据映射
+     * @returns {Object} - 格式化后的数据对象
+     */
+    processSingleDataset(locations, dataMap) {
+      const rates = [];
+      const reals = [];
+      const targets = [];
+      const flags = [];
+
+      locations.forEach(location => {
+        const data = dataMap[location] || {};
+        // 优化：处理 data.rate 为 null/undefined 的情况
+        const rate = data.rate !== null && data.rate !== undefined ? Math.round(data.rate * 100) : 0;
+
+        rates.push(rate);
+        reals.push(data.real ?? 0); // 使用空值合并运算符
+        targets.push(data.target ?? 0);
+
+        // 优化：更清晰的逻辑
+        if (data.target === 0) {
+          flags.push(1); // 如果目标为0，默认达标
+        } else {
+          flags.push(rate >= 100 ? 1 : 0);
+        }
+      });
+
+      return { rates, reals, targets, flags };
     }
   }
 }

src/views/home/components/operatingSalesRevenue.vue

@@ -5,7 +5,7 @@
       <div class="kpi-content" style="padding: 14px 14px; display: flex;flex-direction: column; width: 100%;">
         <!-- 2. .top 保持 flex，无需固定高度，自动跟随子元素拉伸 -->
         <div class="top" style="display: flex; width: 100%;">
-          <top-item :height="367" :itemList="parentItemList" />
+          <top-item v-if="saleData" :height="367" :itemList="formattedParentItemList" />
         </div>
         <div class="bottom"
           style="display: flex; width: 100%;margin-top: 8px;background-color: rgba(249, 252, 255, 1);">
@@ -27,14 +27,10 @@ export default {
   components: { Container, topItem },
   // mixins: [resize],
   props: {
-    leftEqInfoData: {  // 接收父组件传递的设备数据数组
-      type: Array,
-      default: () => []  // 默认空数组，避免报错
-    },
-    productionOverviewVo: { // 恢复生产概览数据（原代码注释了，需根据实际需求保留）
+    saleData: {  // 接收父组件传递的设备数据数组
       type: Object,
-      default: () => ({})
-    }
+      default: () => {}  // 默认空数组，避免报错
+    },
   },
   data() {
     return {
@@ -42,57 +38,57 @@ export default {
       parentItemList: [
         {
           name: "利润总额",
-          targetValue: 50,
-          value: 58,
-          proportion: 116,
+          targetValue: 0,
+          value: 0,
+          proportion: 0,
           route: 'profitAnalysis',
           completed: 1  // 实际超目标，达标
         },
         {
           name: "毛利率",
-          targetValue: 30,
-          value: 28.5,
-          proportion: 95,
+          targetValue: 0,
+          value: 0,
+          proportion: 0,
           route: 'profitAnalysis',
-          completed: 0  // 未达30%目标，不达标
+          completed: 1  // 未达30%目标，不达标
         },
         {
           name: "单价",
-          targetValue: 12,
-          value: 12.5,
-          proportion: 104.2,
+          targetValue: 0,
+          value: 0,
+          proportion: 0,
           route: 'cost/cost',
           completed: 1  // 单价达标
         },
         {
           name: "净价",
-          targetValue: 9,
-          value: 8.8,
-          proportion: 97.8,
+          targetValue: 0,
+          value: 0,
+          proportion: 0,
           route: 'cost/cost',
-          completed: 0  // 未达目标，不达标
+          completed: 1  // 未达目标，不达标
         },
         {
           name: "销量",
-          targetValue: 100,
-          value: 120,
-          proportion: 120,
+          targetValue: 0,
+          value: 0,
+          proportion: 0,
           route: 'profitAnalysis',
           completed: 1  // 销量超额达标
         },
         {
           name: "双镀面板",
-          targetValue: 30,
-          value: 29,
-          proportion: 96.7,
+          targetValue: 0,
+          value: 0,
+          proportion: 0,
           route: 'profitAnalysis',
-          completed: 0  // 略低目标，不达标
+          completed: 1  // 略低目标，不达标
         },
         {
           name: "溢价产品销量",
-          targetValue: 15,
-          value: 18,
-          proportion: 120,
+          targetValue: 0,
+          value: 0,
+          proportion: 0,
           route: 'profitAnalysis',
           completed: 1  // 超额达标
         }
@@ -100,135 +96,59 @@ export default {
     }
   },
   watch: {
-    productionOverviewVo: {
-      handler(newValue, oldValue) {
-        this.updateChart()
-      },
-      deep: true // 若对象内属性变化需触发，需加 deep: true
-    }
+  },
+  computed: {
+    formattedParentItemList() {
+      // --- 新增判断 ---
+      // 如果 saleData 不存在、为 null，或者是不包含任何属性的空对象，则返回原始的 parentItemList
+      if (!this.saleData || Object.keys(this.saleData).length === 0) {
+        return this.parentItemList;
+      }
+      // --- 判断结束 ---
+
+      // 定义一个名称到键的映射表，方便查找
+      const nameToKeyMap = {
+        "利润总额": "totalProfit",
+        "毛利率": "grossMargin",
+        "单价": "unitPrice",
+        "净价": "netPrice",
+        "销量": "sales",
+        "双镀面板": "panel",
+        "溢价产品销量": "premiumProduct"
+      };
+
+      // 遍历原始的 parentItemList
+      return this.parentItemList.map(item => {
+        // 根据当前 item 的 name 找到 SaleData 中对应的键
+        const key = nameToKeyMap[item.name];
+
+        // 如果找到了对应的键，并且 saleItem 存在，就从 SaleData 中获取数据
+        if (key && this.saleData[key]) {
+          const saleItem = this.saleData[key];
+          return {
+            ...item,
+            value: saleItem.real,
+            targetValue: saleItem.target,
+            // proportion: saleItem.rate !== null && saleItem.rate !== undefined
+            //   ? Math.round(saleItem.rate * 100)
+            //   : 0,
+            // 直接使用处理好的 rate
+            proportion: saleItem.rate,
+            // 根据完成率判断是否达标 (假设 >=100% 为达标)
+            completed: saleItem.rate >= 1 ? 1 : 0,
+          };
+        }
+
+        // 如果没有找到对应的数据，则返回原始 item
+        return item;
+      });
+    },
   },
   mounted() {
     // 初始化图表（若需展示图表，需在模板中添加对应 DOM）
     // this.$nextTick(() => this.updateChart())
   },
-  beforeDestroy() {
-    // 销毁图表，避免内存泄漏
-    if (this.chart) {
-      this.chart.dispose()
-      this.chart = null
-    }
-  },
   methods: {
-    updateChart() {
-      // 注意：原代码中图表依赖 id 为 "productionStatusChart" 的 DOM，需在模板中补充，否则会报错
-      // 示例：在 Container 内添加 <div id="productionStatusChart" style="height: 200px;"></div>
-      if (!document.getElementById('productionStatusChart')) return
-
-      if (this.chart) this.chart.dispose()
-      this.chart = echarts.init(document.getElementById('productionStatusChart'))
-
-      const data = [
-        this.productionOverviewVo.input || 0,
-        this.productionOverviewVo.output || 0,
-        this.productionOverviewVo.ng || 0,
-        this.productionOverviewVo.lowValue || 0,
-        this.productionOverviewVo.scrap || 0,
-        this.productionOverviewVo.inProcess || 0,
-        this.productionOverviewVo.engineer || 0
-      ]
-
-      const option = {
-        type: 'bar',
-        grid: { left: 51, right: 40, top: 50, bottom: 45 },
-        tooltip: {
-          trigger: 'axis',
-          axisPointer: { type: 'shadow' },
-          className: 'production-status-chart-tooltip'
-        },
-        xAxis: {
-          type: 'category',
-          offset: 8,
-          data: ['投入', '产出', '待判', '低价值', '报废', '在制', '实验片'],
-          axisTick: { show: false },
-          axisLine: { show: true, onZero: false, lineStyle: { color: '#00E8FF' } },
-          axisLabel: {
-            color: 'rgba(255,255,255,0.7)',
-            fontSize: 12,
-            interval: 0,
-            width: 38,
-            overflow: 'break'
-          }
-        },
-        yAxis: {
-          type: 'value',
-          name: '单位/片',
-          nameTextStyle: { color: 'rgba(255,255,255,0.7)', fontSize: 14, align: 'left' },
-          min: () => 0,
-          max: (value) => Math.ceil(value.max),
-          scale: true,
-          axisTick: { show: false },
-          axisLabel: { color: 'rgba(255,255,255,0.7)', fontSize: 12 },
-          splitLine: { lineStyle: { color: 'RGBA(24, 88, 100, 0.6)', type: 'dashed' } },
-          axisLine: { show: true, lineStyle: { color: '#00E8FF' } }
-        },
-        series: [
-          {
-            type: 'pictorialBar',
-            label: { show: true, position: 'top', distance: -3, color: '#89CDFF', fontSize: 11 },
-            symbolSize: [20, 8],
-            symbolOffset: [0, 5],
-            z: 20,
-            itemStyle: {
-              borderColor: '#3588C7',
-              color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
-                { offset: 0, color: 'RGBA(22, 89, 98, 1)' },
-                { offset: 1, color: '#3588C7' }
-              ])
-            },
-            data: data
-          },
-          {
-            type: 'bar',
-            barWidth: 20,
-            itemStyle: {
-              borderWidth: 1,
-              borderColor: '#3588C7',
-              opacity: 0.8,
-              color: {
-                x: 0, y: 0, x2: 0, y2: 1,
-                type: 'linear',
-                global: false,
-                colorStops: [
-                  { offset: 0, color: 'rgba(73,178,255,0)' },
-                  { offset: 0.5, color: 'rgba(0, 232, 255, .5)' },
-                  { offset: 1, color: 'rgba(0, 232, 255, 1)' }
-                ]
-              }
-            },
-            tooltip: { show: false },
-            data: data
-          },
-          {
-            type: 'pictorialBar',
-            symbolSize: [20, 8],
-            symbolOffset: [0, -4],
-            z: 12,
-            symbolPosition: 'end',
-            itemStyle: {
-              borderColor: 'rgba(0, 232, 255, 1)',
-              color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
-                { offset: 0, color: 'RGBA(22, 89, 98, 1)' },
-                { offset: 1, color: '#3588C7' }
-              ])
-            },
-            tooltip: { show: false },
-            data: data
-          }
-        ]
-      }
-
-      this.chart.setOption(option)
-    }
   }
 }
 </script>
@@ -391,14 +311,4 @@ export default {
 </style>
 
 <style>
-/* 全局 tooltip 样式（不使用 scoped，确保生效） */
-.production-status-chart-tooltip {
-  background: #0a2b4f77 !important;
-  border: none !important;
-  backdrop-filter: blur(12px);
-}
-
-.production-status-chart-tooltip * {
-  color: #fff !important;
-}
 </style>

src/views/home/components/order-bottom-leftItem.vue

@@ -7,7 +7,7 @@
         <div class="content-wrapper">
           <div class="left">
             <div class="number">{{ itemList[0].targetValue }}</div>
-            <div class="title">目标值</div>
+            <div class="title">预算值</div>
           </div>
           <div class="line"></div>
           <div class="right">
@@ -31,7 +31,9 @@
         <div class="yield" style="display: flex;justify-content: space-between;">
           <div class="progress-percent">完成率</div>
           <!-- 百分比颜色动态绑定 -->
-          <div class="progress-percent">
+          <div class="progress-percent" :style="{
+            color: getColor(itemList[0].currentValue, itemList[0].targetValue)
+          }">
             {{ itemList[0].progress }}%
           </div>
         </div>
@@ -41,12 +43,12 @@
     <!-- 循环渲染剩余的item（从索引1开始） -->
     <div class="item groupData" style="display: flex;padding: 0;" v-for="(item, index) in itemList.slice(1)"
       :key="index">
-      <!-- 左侧目标值/实际值部分（不变） -->
+      <!-- 左侧预算值/实际值部分（不变） -->
       <div class="left" style="display: flex;align-items: start;gap: 4px;padding: 12px 0 0 12px;">
         <div class="groupName">{{ item.unit }}</div>
         <div class="left-target">
           <div class="number">{{ item.targetValue }}</div>
-          <div class="title">目标值</div>
+          <div class="title">预算值</div>
         </div>
         <div class="left-real">
           <div class="number" :style="{ color: getColor(item.currentValue, item.targetValue) }">
@@ -71,7 +73,7 @@
 
         <!-- 动态渲染城市进度：循环 item.cities -->
         <div class="right-city" v-for="(city, cityIdx) in item.cities" :key="cityIdx"
-          :style="{ marginTop: cityIdx > 0 ? '2px' : '0' }">
+          :style="{ marginTop: cityIdx > 0 ? '2px' : '0' }" @click="getTableData(city.num)" style="cursor: pointer;">
           <div class="city">{{ city.name }}</div> <!-- 动态城市名 -->
           <div class="city-progress-group">
             <div class="city-progress-container">
@@ -102,72 +104,145 @@
 export default {
   name: "Container",
   components: {},
-  props: ["name", "size", "icon"],
+  props: ["orderOutput"],
   data() {
     return {
       progress: 90, // 进度值基础参数
       itemList: [
+        // {
+        //   unit: "总进度",
+        //   targetValue: 16,
+        //   currentValue: 14.5,
+        //   progress: 90,
+        //   cities: [] // 总进度无需城市数据，留空
+        // },
+        // {
+        //   unit: "一组",
+        //   targetValue: 16,
+        //   currentValue: 17,
+        //   progress: 106,
+        //   cities: [
+        //     { name: "桐城", completed: 12, total: 13, progress: 92 },
+        //     { name: "自贡", completed: 15, total: 16, progress: 93 } // 新增城市示例
+        //   ]
+        // },
+        // {
+        //   unit: "二组",
+        //   targetValue: 16,
+        //   currentValue: 16,
+        //   progress: 100,
+        //   cities: [
+        //     { name: "蚌埠", completed: 10, total: 12, progress: 83 },
+        //     { name: "合肥", completed: 8, total: 10, progress: 80 }
+        //   ]
+        // },
+        // // 其他组同理，按需添加 cities 数据
+        // {
+        //   unit: "三组",
+        //   targetValue: 16,
+        //   currentValue: 15.2,
+        //   progress: 85,
+        //   cities: [{ name: "宜兴", completed: 9, total: 11, progress: 81 }]
+        // },
+        // {
+        //   unit: "四组",
+        //   targetValue: 16,
+        //   currentValue: 18,
+        //   progress: 112,
+        //   cities: [
+        //     { name: "漳州", completed: 14, total: 15, progress: 93 },
+        //     { name: "洛阳", completed: 12, total: 14, progress: 85 }
+        //   ]
+        // },
+        // {
+        //   unit: "五组",
+        //   targetValue: 16,
+        //   currentValue: 14,
+        //   progress: 80,
+        //   cities: [{ name: "桐城", completed: 7, total: 9, progress: 77 }]
+        // }
+      ]
+    };
+  },
+  watch: {
+    orderOutput: {
+      handler(newValue, oldValue) {
+        this.getItemData(newValue)
+      },
+      deep: true // 若对象内属性变化需触发，需加 deep: true
+    }
+  },
+  methods: {
+    getItemData(data) {
+       this.itemList = [
         {
           unit: "总进度",
-          targetValue: 16,
-          currentValue: 14.5,
-          progress: 90,
+          targetValue: data.totalProgress.target,
+          currentValue: data.totalProgress.real,
+          progress: data.totalProgress.rate,
           cities: [] // 总进度无需城市数据，留空
         },
         {
           unit: "一组",
-          targetValue: 16,
-          currentValue: 17,
-          progress: 106,
+          targetValue: data.group1.target,
+          currentValue: data.group1.real,
+          progress: data.group1.rate,
           cities: [
-            { name: "桐城", completed: 12, total: 13, progress: 92 },
-            { name: "自贡", completed: 15, total: 16, progress: 93 } // 新增城市示例
+            { name: "桐城", completed: data[2].real, total: data[2].target, progress: data[2].rate,num:2 },
+            { name: "自贡", completed: data[3].real, total: data[3].target, progress: data[3].rate, num: 3 } // 新增城市示例
           ]
         },
         {
           unit: "二组",
-          targetValue: 16,
-          currentValue: 16,
-          progress: 100,
+          targetValue: data.group2.target,
+          currentValue: data.group2.real,
+          progress: data.group2.rate,
           cities: [
-            { name: "蚌埠", completed: 10, total: 12, progress: 83 },
-            { name: "合肥", completed: 8, total: 10, progress: 80 }
+            { name: "蚌埠", completed: data[4].real, total: data[4].target, progress: data[4].rate, num: 4 },
+            { name: "合肥", completed: data[5].real, total: data[5].target, progress: data[5].rate, num: 5 }
           ]
         },
         // 其他组同理，按需添加 cities 数据
         {
           unit: "三组",
-          targetValue: 16,
-          currentValue: 15.2,
-          progress: 85,
-          cities: [{ name: "宜兴", completed: 9, total: 11, progress: 81 }]
+          targetValue: data.group3.target,
+          currentValue: data.group3.real,
+          progress: data.group3.rate,
+          cities: [{ name: "江苏凯盛", completed: data[6].real, total: data[6].target, progress: data[6].rate, num: 6 },
+            { name: "宜兴", completed: data[7].real, total: data[7].target, progress: data[7].rate, num: 7 }
+          ]
         },
         {
           unit: "四组",
-          targetValue: 16,
-          currentValue: 18,
-          progress: 112,
+          targetValue: data.group4.target,
+          currentValue: data.group4.real,
+          progress: data.group4.rate,
           cities: [
-            { name: "漳州", completed: 14, total: 15, progress: 93 },
-            { name: "洛阳", completed: 12, total: 14, progress: 85 }
+            { name: "漳州", completed: data[8].real, total: data[8].target, progress: data[8].rate, num: 8 },
+            { name: "洛阳", completed: data[9].real, total: data[9].target, progress: data[9].rate, num: 9 }
           ]
         },
         {
           unit: "五组",
-          targetValue: 16,
-          currentValue: 14,
-          progress: 80,
-          cities: [{ name: "桐城", completed: 7, total: 9, progress: 77 }]
+          targetValue: data.group5.target,
+          currentValue: data.group5.real,
+          progress: data.group5.rate,
+          cities: [{ name: "秦皇岛", completed: data[10].real, total: data[10].target, progress: data[10].rate, num: 10 },
+            // { name: "秦皇岛", completed: 7, total: 9, progress: 77 }
+          ]
         }
       ]
-    };
-  },
-  methods: {
-    // 颜色判断核心方法：实际值≥目标值返回绿色，否则返回橙色
+    },
+    // 颜色判断核心方法：实际值≥预算值返回绿色，否则返回橙色
     getColor(currentValue, targetValue) {
       return currentValue >= targetValue
         ? "rgba(98, 213, 180, 1)"
         : "rgba(249, 164, 74, 1)";
+    },
+    getTableData(data) {
+      console.log(data, 'data');
+      this.$emit('handleShowTable',data)
+
     }
   }
 };
@@ -269,7 +344,7 @@ export default {
           background-image: url("../../../assets/img/order-item-bg.png");
         }
 
-        // 实际值 >= 目标值：绿色背景图
+        // 实际值 >= 预算值：绿色背景图
         .bg-green {
           background-image: url("../../../assets/img/order-item-greenbg.png");
         }
@@ -466,15 +541,16 @@ export default {
 }
 
 /* 右上角折现边框（主边框） */
-.groupData::before {
-  content: "";
-  position: absolute;
-  top: 0;
-  left: 0;
-  width: 100%;
-  height: 100%;
-  clip-path: polygon(0 0, calc(100% - 20px) 0, 100% 20px, 100% 100%, 0 100%);
-}
+// .groupData::before {
+//   content: "";
+//   position: absolute;
+//   top: 0;
+//   left: 0;
+//   width: 100%;
+//   height: 100%;
+//   background-color: #000000;
+//   clip-path: polygon(0 0, calc(100% - 20px) 0, 100% 20px, 100% 100%, 0 100%);
+// }
 
 /* 右上角折现细节 */
 .groupData::after {

src/views/home/components/orderColor.vue

@@ -0,0 +1,38 @@
+<template>
+  <!-- 对象语法：根据status的值动态添加类名 -->
+  <div class="accumulated-value" :class="{ pending: injectData.status === 1, done: injectData.status === 2 }">
+    <!-- 同样可添加状态文本（可选） -->
+    {{ injectData.status === 2 ? '已完成' : injectData.status === 1 ? '生产中' : '' }}
+  </div>
+</template>
+
+<script>
+export default {
+  name: 'FinishDiv',
+  props: {
+    injectData: {
+      type: Object,
+      default: () => ({})
+    }
+  }
+}
+</script>
+
+<!-- style部分与方式1完全一致 -->
+<style scoped>
+.accumulated-value {
+  font-size: 14px;
+  padding: 2px 4px;
+  border-radius: 4px;
+}
+
+.accumulated-value.done {
+  color: #4CAF50;
+  /* background-color: rgba(76, 175, 80, 0.1); */
+}
+
+.accumulated-value.pending {
+  color: #FF9800;
+  /* background-color: rgba(255, 152, 0, 0.1); */
+}
+</style>

src/views/home/components/orderProgress.vue

@@ -1,9 +1,12 @@
 <template>
   <div style="flex: 1">
-    <bottomMiddleContainer name="订单产量跟踪·万m²" icon="cockpitItemIcon" size="bottomBasic">
+    <bottomMiddleContainer name="订单产量跟踪·万m²" icon="cockpitItemIcon" size="bottomBasic" :tableShow="tableShow"
+      @handleShow="showTable">
       <!-- 1. 移除 .kpi-content 的固定高度，改为自适应 -->
       <div style="display: flex;gap: 9px;padding: 14px 16px;">
-        <orderItem />
+        <orderItem v-show="!tableShow" :orderOutput="orderOutput" @handleShowTable="getTable" />
+        <base-table v-show="tableShow" style="height: 252px;width: 100%;" :page="1" :limit="10" :show-index="true"
+          :beilv="1" :tableConfig="tableProps" :table-data="tableData" />
       </div>
     </bottomMiddleContainer>
   </div>
@@ -11,52 +14,56 @@
 <script>
 import bottomMiddleContainer from './bottomMiddleContainer.vue'
 // import * as echarts from 'echarts'
-import topItem from './top-product-item.vue'
-import coreBottomBar from './productBottomBar.vue'
 import orderItem from './order-bottom-leftItem.vue'
-
-
+import baseTable from './baseTable.vue'
+import orderColor from './orderColor.vue'
+import proColor from './proColor.vue'
+import moment from 'moment'
 export default {
   name: 'ProductionStatus',
-  components: { bottomMiddleContainer, topItem, coreBottomBar, orderItem },
+  components: { bottomMiddleContainer, orderItem, baseTable },
   // mixins: [resize],
   props: {
-    leftEqInfoData: {  // 接收父组件传递的设备数据数组
-      type: Array,
-      default: () => []  // 默认空数组，避免报错
-    },
-    productionOverviewVo: { // 恢复生产概览数据（原代码注释了，需根据实际需求保留）
+    orderOutput: {  // 接收父组件传递的设备数据数组
       type: Object,
       default: () => ({})
-    }
+    },
+    baseOrder: {  // 接收父组件传递的设备数据数组
+      type: Array,
+      default: () => []
+    },
   },
   data() {
     return {
-      maintenanceTasks: [
-        { id: 1, eqName: '连续化', taskName: '例行维护', },
-        { id: 2, eqName: '螺杆挤出', taskName: '例行维护', },
-        { id: 2, eqName: '螺杆挤出', taskName: '例行维护', },
-        // { id: 2, eqName: '螺杆挤出', taskName: '例行维护', },
-        // { id: 2, eqName: '螺杆挤出', taskName: '例行维护', },
-
-      ],
+      tableData: [],
+      tableShow:false,
       tableProps: [
-        // { prop: 'id', label: '序号', width: 50, align: 'center' },
-        { prop: 'eqName', label: '攻坚指标', align: 'left' },
-        { prop: 'taskName', label: '攻坚目标', align: 'left' },
-        { prop: 'taskName', label: '当月实际', align: 'left' },
-        { prop: 'taskName', label: '累计', align: 'left' },
-
+        { prop: 'code', label: '订单编号', align: 'center' },
+        { prop: 'customerName', label: '客户名称', align: 'center' },
+        {
+          prop: 'deliveryTime', label: '交货时间', align: 'center',
+          filter: (val) => moment(val).format('yyyy-MM-DD HH:mm:ss'),
+         },
+        { prop: 'spec', label: '规格(mm)', align: 'center', },
+        { prop: 'num', label: '生产量(平方米)', align: 'center', },
+        { prop: 'progress', label: '生产进度', align: 'center', subcomponent: proColor },
+        { prop: 'status', label: '订单状态', align: 'center', subcomponent: orderColor },
       ]
     }
   },
   watch: {
-    productionOverviewVo: {
+    baseOrder: {
       handler(newValue, oldValue) {
-        this.updateChart()
+        this.tableData = newValue
       },
       deep: true // 若对象内属性变化需触发，需加 deep: true
-    }
+    },
+    // orderOutput: {
+    //   handler(newValue, oldValue) {
+    //     this.tableData = newValue
+    //   },
+    //   deep: true // 若对象内属性变化需触发，需加 deep: true
+    // }
   },
   mounted() {
     // 初始化图表（若需展示图表，需在模板中添加对应 DOM）
@@ -66,6 +73,16 @@ export default {
     // 销毁图表，避免内存泄漏
   },
   methods: {
+    showTable(flag) {
+      this.tableShow = flag
+      console.log('this.tableShow', this.tableShow);
+
+    },
+    getTable(num) {
+      this.tableShow = true
+      console.log('num', num);
+      this.$emit('getData', num)
+    }
   }
 }
 </script>

src/views/home/components/pieChart.vue

@@ -17,21 +17,35 @@ export default {
       //   // 验证：ref 名不能为空，确保有效
       //   return value.trim() !== '';
       // }
-    }
+    },
+    pieData: {
+      type: Object,
+      default: () => { } // 默认空数组，避免报错
+    },
   },
-  components: {},
   data() {
     return {};
   },
   computed: {},
+  watch: {
+    // 监听 pieData 变化，只要数据变了，就更新图表
+    pieData: {
+      handler() {
+        this.initData(); // 直接调用更新，无需判断 myChart 是否存在
+      },
+      deep: true,
+      immediate: true // 初始化时立即执行
+    },
+  },
   mounted() {
     this.$nextTick(() => {
-      this.initData();
+      this.initChart(); // 只负责初始化图表实例
     });
   },
   methods: {
     initData() {
-      // 2. 动态获取 DOM：通过 props 中的 chartRef 拿到对应的 ref 元素
+      console.log(this.pieData,'this.pieData.value');
+
       const chartDom = this.$refs[this.chartRef];
       if (!chartDom) {
         console.error(`图表容器未找到！请确认父组件传递的 chartRef 为 "${this.chartRef}"`);
@@ -94,7 +108,7 @@ export default {
             labelLine: {
               show: true,
               length: 0,
-              length2: 30,
+              length2: 10,
               lineStyle: {
                 color: (params) => customColors[params.dataIndex]
               }
@@ -104,7 +118,7 @@ export default {
             },
             data: [
               {
-                value: 1048, name: '单镀面板',
+                value: this.pieData?.value || 0,  name: '单镀面板',
                 label: {
                   normal: {
                     align: 'left',
@@ -133,7 +147,9 @@ export default {
                   }
                 },
                 labelLine: {
-                  lineStyle: { color: 'rgba(39, 96, 255, 1)' }
+                  lineStyle: { color: 'rgba(39, 96, 255, 1)' },
+                  length: 10,
+                  length2: 20,
                 },
                 itemStyle: { color: 'rgba(39, 96, 255, 1)' }
               },
@@ -168,8 +184,8 @@ export default {
                 },
                 labelLine: {
                   length: 0,
-                  length2: 50,
-                  lineStyle: { color: 'rgba(40, 138, 255, 1)' }
+                  length2: 10,
+                  lineStyle: { color: 'rgba(40, 138, 255, 1)' },
                 },
                 itemStyle: { color: 'rgba(40, 138, 255, 1)' }
               },
@@ -203,7 +219,9 @@ export default {
                   }
                 },
                 labelLine: {
-                  lineStyle: { color: 'rgba(118, 218, 190, 1)' }
+                  lineStyle: { color: 'rgba(118, 218, 190, 1)' },
+                  length: 0,
+                  length2: 10,
                 },
                 itemStyle: { color: 'rgba(118, 218, 190, 1)' }
               },
@@ -237,7 +255,9 @@ export default {
                   }
                 },
                 labelLine: {
-                  lineStyle: { color: 'rgba(255, 206, 106, 1)' }
+                  lineStyle: { color: 'rgba(255, 206, 106, 1)' },
+                  length: 10,
+                  length2: 10,
                 },
                 itemStyle: { color: 'rgba(255, 206, 106, 1)' }
               }

src/views/home/components/premProdStatus.vue

@@ -5,7 +5,7 @@
       <div class="kpi-content" style="padding: 14px 16px 8px 16px; display: flex;flex-direction: column; width: 100%;">
         <!-- 2. .top 保持 flex，无需固定高度，自动跟随子元素拉伸 -->
         <div class="top" style="display: flex; width: 100%;">
-          <top-item :itemList="parentItemList" />
+          <top-item :itemList="formattedPremiumProductList" />
         </div>
       </div>
       <div class="bottom-content" style="display: flex;flex-direction: column; width: 100%;">
@@ -28,10 +28,10 @@
         </div>
         <div class="pie" style="display: flex;gap: 8px;margin-top: 68px;padding: 0 16px;">
           <div class="month-pie" style="height: 212px;width: 382px;background: #F9FCFF;">
-            <pieChart :chartRef=" 'monthChart' " />
+            <pieChart :pieData="monthPieData" :chartRef=" 'monthChart' " />
           </div>
           <div class="-pie" style="height: 212px;width: 382px;background: #F9FCFF;">
-            <pieChartTwo :chartRef="'yearChart'" />
+            <pieChartTwo :pieData="yearPieData" :chartRef="'yearChart'" />
 
           </div>
         </div>
@@ -54,11 +54,11 @@ export default {
   components: { Container, topItem, coreBottomBar, pieChart, pieChartTwo },
   // mixins: [resize],
   props: {
-    leftEqInfoData: {  // 接收父组件传递的设备数据数组
-      type: Array,
-      default: () => []  // 默认空数组，避免报错
+    premiumProduct: {  // 接收父组件传递的设备数据数组
+      type: Object,
+      default: () => {} // 默认空数组，避免报错
     },
-    productionOverviewVo: { // 恢复生产概览数据（原代码注释了，需根据实际需求保留）
+    salesProportion: { // 恢复生产概览数据（原代码注释了，需根据实际需求保留）
       type: Object,
       default: () => ({})
     }
@@ -66,155 +66,91 @@ export default {
   data() {
     return {
       chart: null,
+      monthPieData: {},
+      yearPieData:{},
       parentItemList: [
         {
           name: "月度",
-          targetValue: 80,
-          value: 76,
-          proportion: 95,
+          targetValue: 0,
+          value: 0,
+          proportion: 0,
           route: 'profitAnalysis',
-          completed: 0  // 未达目标值，不达标
+          completed: 1  // 未达预算值，不达标
         },
         {
           name: "年度",
-          targetValue: 900,
-          value: 920,
-          proportion: 102.2,
+          targetValue: 0,
+          value: 0,
+          proportion: 0,
           route: 'profitAnalysis',
-          completed: 1  // 超出目标值，达标
+          completed: 1  // 超出预算值，达标
         }
       ]
     }
   },
   watch: {
-    productionOverviewVo: {
+    salesProportion: {
       handler(newValue, oldValue) {
-        this.updateChart()
+        console.log('salesProportion',newValue);
+
+        this.getPieData()
       },
       deep: true // 若对象内属性变化需触发，需加 deep: true
     }
   },
+  computed: {
+    formattedPremiumProductList() {
+      const premiumProductData = this.premiumProduct || {};
+
+      const nameToKeyMap = {
+        "月度": "month",
+        "年度": "year"
+      };
+
+      return this.parentItemList.map(item => {
+        const key = nameToKeyMap[item.name];
+
+        if (key && premiumProductData[key]) {
+          const periodData = premiumProductData[key];
+
+          let completed = 0;
+
+          // 新增：判断三个值是否都为0
+          const allZeros = periodData.real === 0 &&
+            periodData.target === 0 &&
+            periodData.rate === 0;
+
+          if (allZeros) {
+            completed = 1;
+          } else if (periodData.rate !== null && periodData.rate !== undefined) {
+            completed = periodData.rate >= 1 ? 1 : 0;
+          }
+
+          return {
+            ...item,
+            value: periodData.real,
+            targetValue: periodData.target,
+            proportion: periodData.rate !== null && periodData.rate !== undefined
+              ? Math.round(periodData.rate * 100)
+              : 0,
+            completed: completed,
+          };
+        }
+
+        return item;
+      });
+    }
+  },
   mounted() {
     // 初始化图表（若需展示图表，需在模板中添加对应 DOM）
     // this.$nextTick(() => this.updateChart())
   },
-  beforeDestroy() {
-    // 销毁图表，避免内存泄漏
-    if (this.chart) {
-      this.chart.dispose()
-      this.chart = null
-    }
-  },
   methods: {
-    updateChart() {
-      // 注意：原代码中图表依赖 id 为 "productionStatusChart" 的 DOM，需在模板中补充，否则会报错
-      // 示例：在 Container 内添加 <div id="productionStatusChart" style="height: 200px;"></div>
-      if (!document.getElementById('productionStatusChart')) return
+    getPieData() {
+      this.monthPieData = this.salesProportion ? this.salesProportion.month : {}
+      this.yearPieData = this.salesProportion ? this.salesProportion.year : {}
+      console.log('this.monthPieData', this.monthPieData, this.yearPieData);
 
-      if (this.chart) this.chart.dispose()
-      this.chart = echarts.init(document.getElementById('productionStatusChart'))
-
-      const data = [
-        this.productionOverviewVo.input || 0,
-        this.productionOverviewVo.output || 0,
-        this.productionOverviewVo.ng || 0,
-        this.productionOverviewVo.lowValue || 0,
-        this.productionOverviewVo.scrap || 0,
-        this.productionOverviewVo.inProcess || 0,
-        this.productionOverviewVo.engineer || 0
-      ]
-
-      const option = {
-        type: 'bar',
-        grid: { left: 51, right: 40, top: 50, bottom: 45 },
-        tooltip: {
-          trigger: 'axis',
-          axisPointer: { type: 'shadow' },
-          className: 'production-status-chart-tooltip'
-        },
-        xAxis: {
-          type: 'category',
-          offset: 8,
-          data: ['投入', '产出', '待判', '低价值', '报废', '在制', '实验片'],
-          axisTick: { show: false },
-          axisLine: { show: true, onZero: false, lineStyle: { color: '#00E8FF' } },
-          axisLabel: {
-            color: 'rgba(255,255,255,0.7)',
-            fontSize: 12,
-            interval: 0,
-            width: 38,
-            overflow: 'break'
-          }
-        },
-        yAxis: {
-          type: 'value',
-          name: '单位/片',
-          nameTextStyle: { color: 'rgba(255,255,255,0.7)', fontSize: 14, align: 'left' },
-          min: () => 0,
-          max: (value) => Math.ceil(value.max),
-          scale: true,
-          axisTick: { show: false },
-          axisLabel: { color: 'rgba(255,255,255,0.7)', fontSize: 12 },
-          splitLine: { lineStyle: { color: 'RGBA(24, 88, 100, 0.6)', type: 'dashed' } },
-          axisLine: { show: true, lineStyle: { color: '#00E8FF' } }
-        },
-        series: [
-          {
-            type: 'pictorialBar',
-            label: { show: true, position: 'top', distance: -3, color: '#89CDFF', fontSize: 11 },
-            symbolSize: [20, 8],
-            symbolOffset: [0, 5],
-            z: 20,
-            itemStyle: {
-              borderColor: '#3588C7',
-              color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
-                { offset: 0, color: 'RGBA(22, 89, 98, 1)' },
-                { offset: 1, color: '#3588C7' }
-              ])
-            },
-            data: data
-          },
-          {
-            type: 'bar',
-            barWidth: 20,
-            itemStyle: {
-              borderWidth: 1,
-              borderColor: '#3588C7',
-              opacity: 0.8,
-              color: {
-                x: 0, y: 0, x2: 0, y2: 1,
-                type: 'linear',
-                global: false,
-                colorStops: [
-                  { offset: 0, color: 'rgba(73,178,255,0)' },
-                  { offset: 0.5, color: 'rgba(0, 232, 255, .5)' },
-                  { offset: 1, color: 'rgba(0, 232, 255, 1)' }
-                ]
-              }
-            },
-            tooltip: { show: false },
-            data: data
-          },
-          {
-            type: 'pictorialBar',
-            symbolSize: [20, 8],
-            symbolOffset: [0, -4],
-            z: 12,
-            symbolPosition: 'end',
-            itemStyle: {
-              borderColor: 'rgba(0, 232, 255, 1)',
-              color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
-                { offset: 0, color: 'RGBA(22, 89, 98, 1)' },
-                { offset: 1, color: '#3588C7' }
-              ])
-            },
-            tooltip: { show: false },
-            data: data
-          }
-        ]
-      }
-
-      this.chart.setOption(option)
     }
   }
 }
@@ -392,16 +328,3 @@ export default {
 }
 
 </style>
-
-<style>
-/* 全局 tooltip 样式（不使用 scoped，确保生效） */
-.production-status-chart-tooltip {
-  background: #0a2b4f77 !important;
-  border: none !important;
-  backdrop-filter: blur(12px);
-}
-
-.production-status-chart-tooltip * {
-  color: #fff !important;
-}
-</style>

src/views/home/components/proColor.vue

@@ -0,0 +1,41 @@
+<template>
+  <!-- 对象语法：根据status的值动态添加类名 -->
+  <div class="accumulated-value" :class="{
+    pending: injectData.progress < 100,  // 进度小于100%时，添加 pending 类
+    done: injectData.progress >= 100
+  }">
+    <!-- 同样可添加状态文本（可选） -->
+    {{ injectData.progress }}
+  </div>
+</template>
+
+<script>
+export default {
+  name: 'FinishDiv',
+  props: {
+    injectData: {
+      type: Object,
+      default: () => ({})
+    }
+  }
+}
+</script>
+
+<!-- style部分与方式1完全一致 -->
+<style scoped>
+.accumulated-value {
+  font-size: 14px;
+  padding: 2px 4px;
+  border-radius: 4px;
+}
+
+.accumulated-value.done {
+  color: #4CAF50;
+  /* background-color: rgba(76, 175, 80, 0.1); */
+}
+
+.accumulated-value.pending {
+  color: #FF9800;
+  /* background-color: rgba(255, 152, 0, 0.1); */
+}
+</style>

src/views/home/components/productBar.vue

@@ -3,7 +3,7 @@
     <div class="legend">
       <span class="legend-item-line">
         <span class="line target"></span>
-        目标
+        预算
       </span>
       <span class="legend-item-line">
         <span class="line real"></span>
@@ -19,30 +19,74 @@ import * as echarts from 'echarts';
 
 export default {
   name: 'Container',
+  props: ["chartData",'dateData'],
   components: {},
   data() {
-    return {};
+    return {
+      myChart: null, // 存储 echarts 实例
+    };
+  },
+  // 关键：监听 chartData 变化
+  watch: {
+    chartData: {
+      handler(newData) {
+        this.updateChart(newData);
+      },
+      immediate: true, // 组件初始化时立即执行一次
+      deep: true,      // 深度监听对象内部变化
+    }
   },
-  computed: {},
   mounted() {
     this.$nextTick(() => {
-      this.initData();
+      this.initChart();
     });
   },
   methods: {
-    initData() {
-      // 优先使用 ref 获取 DOM，避免 id 冲突
+    // 初始化图表实例
+    initChart() {
       const chartDom = this.$refs.cockpitEffChip;
       if (!chartDom) {
         console.error('图表容器未找到！');
         return;
       }
-      const myChart = echarts.init(chartDom);
+      this.myChart = echarts.init(chartDom);
+
+      // 初始化时调用一次更新
+      this.updateChart(this.chartData);
+
+      // 监听窗口缩放
+      window.addEventListener('resize', () => {
+        this.myChart?.resize();
+      });
+    },
+
+    // 核心：根据数据更新图表
+    updateChart(data) {
+      if (!this.myChart) {
+        // 如果实例还未初始化，则等待 initChart 完成后再更新
+        setTimeout(() => this.updateChart(data), 0);
+        return;
+      }
+
+      // 1. 处理数据，如果 data 无效则清空图表
+      if (!data || typeof data !== 'object' || (!data.real && !data.target)) {
+        this.myChart.setOption({
+          xAxis: { data: [] },
+          series: [{ data: [] }, { data: [] }]
+        });
+        return;
+      }
+
+      // 2. 提取 X 轴数据（从 real 或 target 中取键名）
+      const xAxisData = data.real ? Object.keys(data.real) : Object.keys(data.target);
+      console.log('xAxisData', xAxisData);
+
+      // 3. 提取 "实际" 和 "目标" 系列的数据
+      const realData = data.real ? Object.values(data.real) : [];
+      const targetData = data.target ? Object.values(data.target) : [];
+
+      // 4. 准备 echarts 的 option 配置
       const option = {
-        // color: ['#80FFA5', '#00DDFF', '#37A2FF', '#FF0087', '#FFBF00'],
-        // title: {
-        //   text: 'Gradient Stacked Area Chart'
-        // },
         tooltip: {
           trigger: 'axis',
           axisPointer: {
@@ -53,62 +97,47 @@ export default {
           }
         },
         grid: {
-          top: 20,
+          top: 35,
           bottom: 20,
-          // top: 10,
-          // bottom: 20,
           right: 25,
         },
-        // legend: {
-        //   data: ['Line 1', 'Line 2', 'Line 3', 'Line 4', 'Line 5']
-        // },
-        // toolbox: {
-        //   feature: {
-        //     saveAsImage: {}
-        //   }
-        // },
         xAxis: [
           {
             type: 'category',
             boundaryGap: false,
-            axisTick: {
-              show: false
-            },
+            axisTick: { show: false },
             axisLine: {
               show: true,
               onZero: false,
-              lineStyle: {
-                color: 'rgba(0, 0, 0, 0.15)'
-              }
+              lineStyle: { color: 'rgba(0, 0, 0, 0.15)' }
             },
             axisLabel: {
               color: 'rgba(0, 0, 0, 0.45)',
               fontSize: 12,
               interval: 0,
-              width: 38,
-              overflow: 'break'
+              // width: 38,
+              overflow: 'break',
+              formatter: (value) => {
+                const dateParts = value.split('-'); // ["2025", "07", "01"]
+                if (dateParts.length < 2) return value;
+
+                // 去掉月份前面的0，然后加上"月"
+                const month = dateParts[1].replace(/^0+/, '');
+                return `${month}月`;
+              }
             },
-            data: ['6月', '7月', '8月', '9月', '10月', '11月']
+            data: xAxisData
           }
         ],
         yAxis: {
           type: 'value',
-          // name: '单位/片',
-          nameTextStyle: {
-            color: 'rgba(0, 0, 0, 0.45)',
-            fontSize: 14,
-            align: 'left'
-          },
-          min: function (value) {
-            return 0
-          },
-          max: function (value) {
-            return Math.ceil(value.max)
-          },
-          scale: true,
-          axisTick: {
-            show: false
-          },
+          name: '元/㎡',
+          // nameLocation:'center',
+          nameTextStyle: { color: 'rgba(0, 0, 0, 0.45)', fontSize: 14, align: 'right' },
+          min: 0,
+          // max: function (value) { return Math.ceil(value.max * 1.1); }, // 增加一点余量
+
+          axisTick: { show: false },
           axisLabel: {
             color: 'rgba(0, 0, 0, 0.45)',
             fontSize: 12
@@ -116,101 +145,88 @@ export default {
           splitLine: {
             lineStyle: {
               color: 'rgba(0, 0, 0, 0.15)',
-              // type: 'dashed'
             }
           },
           axisLine: {
             show: true,
-            lineStyle: {
-              color: 'rgba(0, 0, 0, 0.15)'
-            }
+            lineStyle: { color: 'rgba(0, 0, 0, 0.15)' }
           }
         },
         series: [
           {
             name: '实际',
             type: 'line',
-            stack: 'Total',
-            symbol: 'circle', // 点的形状（circle为圆形）
+            // stack: 'Total', // 趋势图通常不需要堆叠
+            symbol: 'circle',
+            symbolSize: 8,
             lineStyle: {
-              color: 'rgba(255, 132, 0, .5)',
+              color: 'rgba(255, 132, 0, 1)', // 加深颜色
+              width: 2,
             },
             itemStyle: {
-              color: 'rgba(255, 132, 0, .5)',
-              borderColor: 'rgba(255, 132, 0, .5)', // 数据点边框色（白色）
-              borderWidth: 2, // 数据点边框宽度
+              color: 'rgba(255, 132, 0, 1)',
+              borderColor: '#fff',
+              borderWidth: 2,
             },
             areaStyle: {
-              opacity: 0.5,
+              opacity: 0.3,
               color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
-                {
-                  offset: 0,
-                  color: 'rgba(255, 132, 0, .4)',
-                },
-                {
-                  offset: 1,
-                  color: 'rgba(18, 255, 245, 0)',
-                },
+                { offset: 0, color: 'rgba(255, 132, 0, .5)' },
+                { offset: 1, color: 'rgba(255, 132, 0, 0)' },
               ]),
             },
-            // emphasis: { focus: 'series' },
-            data: [140, 232, 101, 264, 90, 340, 250]
+            data: realData // 使用提取出的 "实际" 数据
           },
           {
-            name: '目标',
+            name: '预算',
             type: 'line',
-            stack: 'Total',
-            symbol: 'circle', // 点的形状（circle为圆形）
+            // stack: 'Total',
+            symbol: 'circle',
+            symbolSize: 8,
             lineStyle: {
-              color: 'rgba(98, 213, 180, .5)',
+              color: 'rgba(98, 213, 180, 1)', // 加深颜色
+              width: 2,
+              // type: 'dashed' // 目标线使用虚线
             },
             itemStyle: {
-              color: 'rgba(98, 213, 180, .5)',
-              borderColor: 'rgba(98, 213, 180, .5)', // 数据点边框色（白色）
-              borderWidth: 2, // 数据点边框宽度
+              color: 'rgba(98, 213, 180, 1)',
+              borderColor: '#fff',
+              borderWidth: 2,
             },
             areaStyle: {
-              opacity: 0.5,
+              opacity: 0.3,
               color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
-                {
-                  offset: 0,
-                  color: 'rgba(98, 213, 180,.4)',
-                },
-                {
-                  offset: 1,
-                  color: 'rgba(18, 255, 245, 0)',
-                },
+                { offset: 0, color: 'rgba(98, 213, 180, .5)' },
+                { offset: 1, color: 'rgba(98, 213, 180, 0)' },
               ]),
             },
-            // emphasis: { focus: 'series' },
-            data: [120, 282, 111, 234, 220, 340, 310]
+            data: targetData // 使用提取出的 "目标" 数据
           },
         ]
       };
 
-      option && myChart.setOption(option);
-
-      // 监听窗口缩放
-      window.addEventListener('resize', () => {
-        myChart.resize();
-      });
-
-      // 组件销毁时清理
-      this.$once('hook:destroyed', () => {
-        window.removeEventListener('resize', () => {
-          myChart.resize();
-        });
-        myChart.dispose();
-      });
+      // 5. 应用配置项更新图表
+      this.myChart.setOption(option, true);
     }
   },
+  beforeDestroy() {
+    // 组件销毁时清理
+    window.removeEventListener('resize', () => {
+      this.myChart?.resize();
+    });
+    this.myChart?.dispose();
+  }
 };
 </script>
 <style lang="scss" scoped>
+/* (你的样式代码保持不变) */
 .legend {
   position: absolute;
   right: 10px;
   top: -5px;
+  display: flex;
+  /* 使用 flex 布局让两个图例项并排且对齐 */
+  gap: 20px;
 }
 
 .legend-item-line {
@@ -220,25 +236,27 @@ export default {
   color: rgba(0, 0, 0, 0.8);
   text-align: left;
   font-style: normal;
-  margin-right: 20px;
-  /* 增加两个图例项之间的间距 */
   position: relative;
-  padding-left: 8px;
-  /* 给文字左侧增加内边距 */
+  padding-left: 20px;
+  /* 为圆点和线条留出空间 */
+  display: flex;
+  align-items: center;
 
   .line {
     position: absolute;
-    left: 5px;
-    /* 调整线条位置 */
-    top: 10px;
+    left: 6px;
+    /* 线条从圆点右侧开始 */
+    top: 50%;
+    transform: translateY(-50%);
     display: inline-block;
-    width: 12px;
+    width: 16px;
+    /* 线条长度 */
     height: 2px;
     margin-right: 4px;
   }
 
   .target {
-    background: rgba(91, 230, 190, 1);
+    background: rgba(98, 213, 180, 1);
   }
 
   .real {
@@ -251,23 +269,18 @@ export default {
     width: 6px;
     height: 6px;
     border-radius: 50%;
-    margin-right: 10px;
-    /* 关键：增加图例圆点和文字之间的间距 */
-    margin-bottom: 2px;
+    margin-right: 8px;
     background-color: rgba(255, 132, 0, 1);
+    position: absolute;
+    left: 10px;
+    top: 50%;
+    transform: translateY(-50%);
   }
 }
 
 .legend-item-line:nth-child(1) {
   &::before {
-    content: "";
-    display: inline-block;
-    width: 6px;
-    height: 6px;
-    margin-right: 10px;
-    /* 关键：增加图例圆点和文字之间的间距 */
-    margin-bottom: 2px;
-    background-color: rgba(91, 230, 190, 1);
+    background-color: rgba(98, 213, 180, 1);
   }
 }
 </style>

src/views/home/components/productBottomBar.vue

@@ -1,107 +1,81 @@
 <template>
   <div class="coreBar" style="width: 100%;">
-    <!-- 循环渲染item，data中配置的每一项对应一个卡片 -->
     <div class="barTop">
       <div class="title">生产指标趋势</div>
-
       <div class="button-group">
-        <!-- 按钮1：单价 -->
-        <div class="item-button" :class="{ active: activeButton === 0 }" @click="activeButton = 0">
-          总成本
-        </div>
-        <!-- 分割线0：单价右侧 -->
+        <div class="item-button" :class="{ active: activeButton === 0 }" @click="activeButton = 0">制造成本</div>
         <div class="button-line lineOne" v-if="activeButton !== 0 && activeButton !== 1"></div>
-
-        <!-- 按钮2：净价 -->
-        <div class="item-button" :class="{ active: activeButton === 1 }" @click="activeButton = 1">
-          原片成本
-        </div>
-        <!-- 分割线1：净价右侧 -->
+        <div class="item-button" :class="{ active: activeButton === 1 }" @click="activeButton = 1">原片成本</div>
         <div class="button-line lineTwo" v-if="activeButton !== 1 && activeButton !== 2"></div>
-
-        <!-- 按钮3：销量 -->
-        <div class="item-button" :class="{ active: activeButton === 2 }" @click="activeButton = 2">
-          加工成本
-        </div>
-        <!-- 分割线2：销量右侧 -->
+        <div class="item-button" :class="{ active: activeButton === 2 }" @click="activeButton = 2">加工成本</div>
         <div class="button-line lineThree" v-if="activeButton !== 2 && activeButton !== 3"></div>
-
-        <!-- 按钮4：双镀产品 -->
         <div class="item-button" style="width: 75px;" :class="{ active: activeButton === 3 }" @click="activeButton = 3">
-          原片成品率
-        </div>
+          原片成品率</div>
         <div class="button-line lineFour" v-if="activeButton !== 3 && activeButton !== 4"></div>
-
-        <!-- 按钮5：投入产出率 -->
         <div class="item-button" style="width: 75px;" :class="{ active: activeButton === 4 }" @click="activeButton = 4">
-          投入产出率
-        </div>
+          投入产出率</div>
       </div>
     </div>
-    <div class="lineBottom" style="height: 219px; width: 100%">
-      <coreLineChart style="height: 219px; width: 500px" />
+    <div class="lineBottom" style="height: 219px; width: 100%" v-if="isLineDataReady">
+      <!-- 核心改动：动态传递数据给子组件 -->
+      <coreLineChart style="height: 219px; width: 100%" :chart-data="selectedChartData" :dateData="dateData" />
     </div>
   </div>
 </template>
 
 <script>
 import coreLineChart from './productBar.vue';
+
 export default {
   name: "Container",
   components: { coreLineChart },
-  props: ["name", "size", "icon"],
+  props: ["lineData",'dateData'], // 接收父组件传递的完整line数据对象
   data() {
     return {
-      // 所有item的数据配置，后续修改直接操作这个数组即可
       activeButton: 0, // 初始激活第一个按钮（索引0）
-      itemList: [
-        {
-          unit: "单价·元/m²", // 标题
-          targetValue: 16, // 左侧目标值
-          currentValue: 14.5, // 右侧当前值（可根据实际需求修改）
-          progress: 90, // 进度百分比
-        },
-        {
-          unit: "净价·元/m²",
-          targetValue: 16,
-          currentValue: 15.2,
-          progress: 85,
-        },
-        {
-          unit: "销量·万m²",
-          targetValue: 20,
-          currentValue: 16,
-          progress: 80,
-        },
-        {
-          unit: "双镀面板·万m²",
-          targetValue: 15,
-          currentValue: 13.8,
-          progress: 92,
-        },
-      ],
     };
   },
-  computed: {},
-  methods: {
+  computed: {
+    isLineDataReady() {
+      // 确保 lineData 是一个对象，而不是 null 或 undefined
+      return this.lineData && typeof this.lineData === 'object';
+    },
+    // 核心改动：计算属性，根据activeButton动态返回选中的数据
+    selectedChartData() {
+      // 定义按钮索引与lineData中key的映射关系
+      const dataKeyMap = [
+        '制造成本',
+        '原片成本',
+        '加工成本',
+        '原片成品率',
+        '投入产出率'
+      ];
+
+      // 根据当前激活的按钮索引获取对应的数据key
+      const selectedKey = dataKeyMap[this.activeButton];
+      console.log(this.lineData[selectedKey]);
+
+
+      // 从lineData中获取对应的数据，如果不存在则返回一个空对象以防止报错
+      return this.lineData ? this.lineData[selectedKey] || {} : {};
+    }
   },
+  methods: {},
 };
 </script>
 
 <style scoped lang="scss">
+/* (你的样式代码保持不变) */
 .coreBar {
   display: flex;
   flex-direction: column;
   padding: 12px;
 
-  // grid-template-columns: 1fr 1fr;
-  // grid-template-rows: 1fr 1fr;
-  // gap: 8px;
   .barTop {
     display: flex;
     gap: 40px;
+
     .title {
-      // width: 124px;
       height: 18px;
       font-family: PingFangSC, PingFang SC;
       font-weight: 400;
@@ -116,42 +90,40 @@ export default {
     .button-group {
       display: flex;
       position: relative;
-      // justify-content: space-around;
       gap: 2px;
       width: 327px;
       align-items: center;
       height: 24px;
       background: #ecf4fe;
       border-radius: 12px;
-            .button-line {
-                position: absolute;
-                // top: 5px;
-                // left: 54px;
-                width: 1px;
-                height: 14px;
-                border: 1px solid rgba(11, 88, 255, 0.25);
-              }
+
+      .button-line {
+        position: absolute;
+        width: 1px;
+        height: 14px;
+        border: 1px solid rgba(11, 88, 255, 0.25);
+      }
+
       .lineOne {
         top: 5px;
         left: 57px;
       }
+
       .lineTwo {
         top: 5px;
         left: 118px;
       }
+
       .lineThree {
         top: 5px;
         left: 177px;
       }
-                .lineFour {
-                  top: 5px;
-                  left: 268px;
-                }
 
-      // .button-line:nth-child(3) {
-      //   top: 5px;
-      //   left: 216px;
-      // }
+      .lineFour {
+        top: 5px;
+        left: 268px;
+      }
+
       .item-button {
         cursor: pointer;
         width: 59px;
@@ -164,21 +136,14 @@ export default {
         text-align: center;
         font-style: normal;
       }
-      // .item-button:nth-child(6){
-      //   width: 75px;
 
-      // }
-      //           .item-button:nth-child(8) {
-      //             width: 75px;
-
-      //           }
       .item-button.active {
         width: 59px;
         height: 24px;
         background: #3071ff;
         border-radius: 12px;
-        color: #ffffff; // 文字变白，提高对比度
-        font-weight: 500; // 文字加粗，突出激活状态
+        color: #ffffff;
+        font-weight: 500;
       }
     }
   }

src/views/home/components/profit-item-middle.vue

@@ -8,7 +8,7 @@
         <div class="content-wrapper">
           <div class="left">
             <div class="number">{{ item.targetValue || 0 }}</div>
-            <div class="title">目标值</div>
+            <div class="title">预算值</div>
           </div>
           <div class="line"></div>
           <div class="right">

src/views/home/components/profit-item.vue

@@ -9,7 +9,7 @@
         <div class="content-wrapper">
           <div class="left">
             <div class="number">{{ item.targetValue ||0 }}</div>
-            <div class="title">目标值</div>
+            <div class="title">预算值</div>
           </div>
           <div class="line"></div>
           <div class="right">

src/views/home/components/profitBar.vue

@@ -113,13 +113,25 @@ export default {
           symbolSize: 6
         },
         {
-          name: '目标',
+          name: '预算',
           type: 'bar',
           yAxisIndex: 0,
           barWidth: 18,
           itemStyle: {
-            color: '#2889FF',
-            borderRadius: [4, 4, 0, 0]
+            // 移除多余的 normal 层级，直接配置 color 渐变
+            color: {
+              type: 'linear',
+              x: 0,
+              y: 0,
+              x2: 0,
+              y2: 1,
+              colorStops: [
+                { offset: 0, color: 'rgba(130, 204, 255, 1)' },
+                { offset: 1, color: 'rgba(75, 157, 255, 1)' }
+              ]
+            },
+            borderRadius: [4, 4, 0, 0],
+            borderWidth: 0
           },
           data: targetData.map(item => item.targetValue)
         },

src/views/home/components/profitLineChart.vue

@@ -78,7 +78,7 @@ export default {
         return PlaceNames.map(place => {
           const targetItem = dataSource.find(item => item.name === place);
           return {
-            targetValue: targetItem?.[`${field}Target`] || 0, // 对应指标的目标值字段（如 profitTarget）
+            targetValue: targetItem?.[`${field}Target`] || 0, // 对应指标的预算值字段（如 profitTarget）
             value: targetItem?.[field] || 0, // 对应指标的实际值
             proportion: (targetItem?.[`${field}Proportion`] || 0), // 对应指标的占比（转百分比）
             completed: targetItem?.[`${field}Completed`]  ?? 0 // 状态字段（复用分公司的 completed）

src/views/home/components/profitOverview.vue

@@ -1,6 +1,6 @@
 <template>
   <div style="flex: 1">
-    <Container name="利润数据总览" icon="cockpitItemIcon" size="profitTopBasic" topSize="middle">
+    <Container name="利润数据总览·万元" icon="cockpitItemIcon" size="profitTopBasic" topSize="middle">
       <!-- 1. 移除 .kpi-content 的固定高度，改为自适应 -->
       <div class="kpi-content" style="padding: 14px 16px; display: flex;flex-direction: column; width: 100%;">
         <!-- 2. .top 保持 flex，无需固定高度，自动跟随子元素拉伸 -->

src/views/home/components/psiLineBar.vue

@@ -118,11 +118,11 @@ export default {
             return html;
           }
         },
-        grid: {
+       grid: {
           top: 30,
           bottom: 30,
-          right: 70,
-          left: 40,
+          right: 20,
+          left: 60,
         },
         xAxis: [
           {
@@ -151,9 +151,8 @@ export default {
               fontSize: 12,
               align: 'right'
             },
-            min: 0,
-            max: (value) => value.max > 0 ? Math.ceil(value.max * 1.1) : 10,
-            scale: false,
+
+            splitNumber: 4,
             axisTick: { show: false },
             axisLabel: {
               color: 'rgba(0, 0, 0, 0.45)',
@@ -162,7 +161,6 @@ export default {
             },
             splitLine: { lineStyle: { color: 'rgba(0, 0, 0, 0.15)' } },
             axisLine: { lineStyle: { color: 'rgba(0, 0, 0, 0.15)' } },
-            splitNumber: 4
           },
           {
             type: 'value',
@@ -171,8 +169,8 @@ export default {
               fontSize: 12,
               align: 'left'
             },
-            min: 0,
-            max: 100,
+            // min: 0,
+            // max: 100,
             axisTick: { show: false },
             axisLabel: {
               color: 'rgba(0, 0, 0, 0.45)',

src/views/home/components/psr-item.vue

@@ -8,7 +8,7 @@
         <div class="content-wrapper">
           <div class="left">
             <div class="number">{{ item.targetValue || 0 }}</div>
-            <div class="title">目标值</div>
+            <div class="title">预算值</div>
           </div>
           <div class="line"></div>
           <div class="right">

src/views/home/components/psrChartBar.vue

@@ -93,11 +93,11 @@ export default {
             return html;
           }
         },
-        grid: {
+       grid: {
           top: 30,
           bottom: 30,
-          right: 70,
-          left: 40,
+          right: 20,
+          left: 60,
         },
         xAxis: [
           {

src/views/home/components/purchase-Item.vue

@@ -1,7 +1,7 @@
 <template>
   <div class="coreItem">
     <div class="item" @click="handleRoute(item.route)" v-for="(item, index) in itemList" :key="index">
-      <div class="unit">{{ item.unit }}</div>
+      <div class="name">{{ item.name }}</div>
       <div class="item-content">
         <div class="content-wrapper">
           <div class="left">
@@ -25,7 +25,7 @@
         <!-- 进度条：同步绑定类名 -->
         <div class="progress-group">
           <div class="progress-container">
-            <div class="progress-bar" :style="{ width: item.progress + '%' }" :class="{
+            <div class="progress-bar" :style="{ width: item.progressWidth + '%' }" :class="{
               'bar-exceed': item.currentValue >= item.targetValue,
               'bar-below': item.currentValue < item.targetValue
             }"></div>
@@ -42,7 +42,7 @@
             'percent-exceed': item.currentValue >= item.targetValue,
             'percent-below': item.currentValue < item.targetValue
           }">
-            {{ item.progress }}%
+            {{ item.progressDisplay }}
           </div>
         </div>
       </div>
@@ -54,45 +54,161 @@
 export default {
   name: "Container",
   components: {},
-  props: ["name", "size", "icon"],
+  props: {
+    finance: {
+      type: Object,
+      default: () => ({}) // 明确props默认值为空对象
+    },
+    dateData: {
+      type: Object,
+      default: () => ({})
+    }
+  },
   data() {
     return {
-      itemList: [
-        {
-          unit: "营业收入·万元",
-          targetValue: 16,
-          currentValue: 17.2, // 大于目标值（绿色）
-          progress: 107.5,
-          route: 'operatingRevenue'
-        },
-        {
-          unit: "经营性利润·万元",
-          targetValue: 16,
-          currentValue: 16, // 等于目标值（绿色）
-          progress: 100,
-          route: 'profitAnalysis'
-        },
-        {
-          unit: "利润总额·万元",
-          targetValue: 16,
-          currentValue: 14.8, // 小于目标值（黄色）
-          progress: 92.5,
-          route: 'profitAnalysis'
-        },
-        {
-          unit: "毛利率·%",
-          targetValue: 16,
-          currentValue: 15.5, // 小于目标值（黄色）
-          progress: 96.875,
-          route: 'profitAnalysis'
-        }
-      ]
+      // 关键修复1：初始化itemList为空数组（必选，否则初始状态下v-for报错且数据无法响应式更新）
+      itemList: []
     };
   },
+  watch: {
+    finance: {
+      handler(newVal) {
+        // 关键修复2：增强数据判断，避免空值/无效值触发错误
+        if (newVal && Object.keys(newVal).length > 0) {
+          // 转换数据并赋值给itemList（响应式更新）
+          this.itemList = this.transformData(newVal);
+          console.log('finance更新，itemList已同步', this.itemList);
+        } else {
+          // 当finance为空时，重置itemList为空数组
+          this.itemList = [];
+        }
+      },
+      immediate: true, // 组件挂载时立即执行，初始化数据
+      deep: true       // 深度监听finance对象内部属性变化
+    }
+  },
   methods: {
+    // 解析rate字符串，提取百分比数值
+    // 改进的 parseRateString 方法：能处理数字和字符串类型
+    parseRateString(rateValue) {
+      // 如果是 undefined 或 null，返回默认值
+      if (rateValue === undefined || rateValue === null) {
+        return { displayText: '0%', progressValue: 0 };
+      }
+
+      // 如果是数字类型，直接处理
+      if (typeof rateValue === 'number') {
+        return {
+          displayText: `${rateValue.toFixed(2)}%`,
+          progressValue: Math.min(Math.max(rateValue, 0), 100)
+        };
+      }
+
+      // 如果是字符串类型，使用正则表达式处理
+      if (typeof rateValue === 'string') {
+        // 尝试匹配百分比数字，如"减亏93%"中的93
+        const match = rateValue.match(/(\d+(\.\d+)?)%/);
+        if (match) {
+          const percentValue = parseFloat(match[1]);
+          return {
+            displayText: rateValue,
+            progressValue: Math.min(Math.max(percentValue, 0), 100)
+          };
+        }
+
+        // 如果没有匹配到百分比，尝试解析纯数字
+        const numMatch = rateValue.match(/\d+(\.\d+)?/);
+        if (numMatch) {
+          const numValue = parseFloat(numMatch[0]);
+          return {
+            displayText: rateValue,
+            progressValue: Math.min(Math.max(numValue, 0), 100)
+          };
+        }
+      }
+
+      // 默认返回
+      return {
+        displayText: '0%',
+        progressValue: 0
+      };
+    },
+
+    transformData(rawData) {
+      // 定义指标映射关系，包括名称、对应的数据键和路由
+      const Mapping = [
+        {
+          key: 'operatingRevenue',
+          name: '营业收入·万元',
+          route: '/operatingRevenue/operatingRevenueIndex',
+          isPercentage: true  // 需要加%符号
+        },
+        {
+          key: 'operatingIncome',
+          name: '经营性利润·万元',
+          route: '/operatingProfit/operatingProfit',
+          isPercentage: false  // 不需要加%符号，使用原始rate字符串
+        },
+        {
+          key: 'totalProfit',
+          name: '利润总额·万元',
+          route: '/totalProfit/totalProfit',
+          isPercentage: false  // 不需要加%符号，使用原始rate字符串
+        },
+        {
+          key: 'grossMargin',
+          name: '毛利率·%',
+          route: '/grossMargin/grossMargin',
+          isPercentage: true  // 需要加%符号
+        }
+      ];
+
+      // 遍历映射关系，转换数据
+      return Mapping.map(mappingItem => {
+        // 关键修复3：兜底更严谨，避免rawData[mappingItem.key]不存在导致报错
+        const data = rawData[mappingItem.key] || { rate: '0%', real: 0, target: 0 };
+        // 额外兜底：避免data中的属性为undefined
+        const target = data.target || 0;
+        const real = data.real || 0;
+        const rate = data.rate || '0%';
+
+        // 解析rate字符串
+        const parsedRate = this.parseRateString(rate);
+
+        // 进度条宽度：限制在0-100之间
+        const progressWidth = Math.min(Math.max(parsedRate.progressValue, 0), 100);
+
+        // 显示文本处理
+        let progressDisplay;
+        if (mappingItem.isPercentage) {
+          // 对于需要加%的指标，确保有%符号
+          progressDisplay = parsedRate.displayText.includes('%')
+            ? parsedRate.displayText
+            : `${parsedRate.displayText}%`;
+        } else {
+          // 对于经营性利润和利润总额，直接使用原始rate字符串
+          progressDisplay = parsedRate.displayText;
+        }
+
+        return {
+          name: mappingItem.name,
+          targetValue: target,
+          currentValue: real,
+          progressWidth: progressWidth, // 用于进度条宽度
+          progressDisplay: progressDisplay, // 用于显示文本
+          route: mappingItem.route
+        };
+      });
+    },
     handleRoute(route) {
       if (route) {
-        this.$router.push({ path: route });
+        this.$router.push({
+          path: route,
+          query: {
+            // 关键修复4：dateData是对象，需序列化后传递（否则路由query无法正常接收对象）
+            dateData: this.dateData
+          }
+        });
       }
     }
   }
@@ -120,7 +236,7 @@ export default {
     transform: translateY(-2px);
   }
 
-  .unit {
+  .name {
     height: 18px;
     font-family: PingFangSC, PingFang SC;
     font-weight: 400;
@@ -216,7 +332,7 @@ export default {
 
   /* 进度条 - 实际值≥目标值（绿色） */
   .bar-exceed {
-    background:rgba(98, 213, 180, 1) !important;
+    background: rgba(98, 213, 180, 1) !important;
     opacity: 1 !important;
   }
 

src/views/home/components/salesDataOverview.vue

@@ -1,6 +1,6 @@
 <template>
   <div style="flex: 1">
-    <Container name="产销数据总览" icon="cockpitItemIcon" size="profitTopBasic" topSize="middle">
+    <Container name="产销数据总览·万㎡" icon="cockpitItemIcon" size="profitTopBasic" topSize="middle">
       <!-- 1. 移除 .kpi-content 的固定高度，改为自适应 -->
       <div class="kpi-content" style="padding: 14px 16px; display: flex;flex-direction: column; width: 100%;">
         <!-- 2. .top 保持 flex，无需固定高度，自动跟随子元素拉伸 -->

src/views/home/components/top-item.vue

@@ -47,46 +47,63 @@
 export default {
   name: "Container",
   components: {},
-  props: ["name", "size", "icon"],
+  props: ["sale", "dateData"],
   data() {
     return {
-      itemList: [
-        {
-          unit: "单价·元/㎡",
-          targetValue: 16,
-          currentValue: 14.5, // 小于目标值（黄色）
-          progress: 90,
-          path: "/cost/cost"
-        },
-        {
-          unit: "净价·元/㎡",
-          targetValue: 16,
-          currentValue: 16, // 等于目标值（默认灰色）
-          progress: 100,
-          path: "/cost/cost"
-        },
-        {
-          unit: "销量·万㎡",
-          targetValue: 20,
-          currentValue: 22, // 大于目标值（绿色）
-          progress: 110,
-          path: "PSIAnal"
-        },
-        {
-          unit: "双镀面板·万㎡",
-          targetValue: 15,
-          currentValue: 13.8, // 小于目标值（黄色）
-          progress: 92,
-          path: "PSIAnal"
-        }
-      ]
+      itemList: [] // 初始化为空数组，等待数据加载
     };
   },
+  watch: {
+    // 监听 sale 数据变化，实时更新 itemList
+    sale: {
+      handler(newVal) {
+        if (newVal) {
+          this.itemList = this.transformData(newVal);
+        }
+      },
+      immediate: true, // 组件初始化时立即执行一次
+      deep: true       // 深度监听对象内部属性变化
+    }
+  },
   methods: {
+    /**
+     * 核心转换函数：将 sale 对象转换为 itemList 数组
+     * @param {Object} rawData - 原始的 sale 数据对象
+     * @returns {Array} - 转换后的 itemList 数组
+     */
+    transformData(rawData) {
+      // 定义销售指标映射关系（键名、显示名称、单位、路由路径）
+      const saleMapping = [
+        { key: 'unitPrice', unit: '单价·元/㎡', path: '/unitPriceAnalysis/unitPriceAnalysis' },
+        { key: 'netPrice', unit: '净价·元/㎡', path: '/netPriceAnalysis/netPriceAnalysis' },
+        { key: 'sales', unit: '销量·万㎡', path: '/salesVolumeAnalysis/salesVolumeAnalysis' },
+        { key: 'panel', unit: '双镀面板·万㎡', path: '/salesVolumeAnalysis/salesVolumeAnalysis' }
+      ];
+
+      // 遍历映射关系，转换数据
+      return saleMapping.map(mappingItem => {
+        // 获取对应指标的数据，若不存在则使用默认值
+        const indicatorData = rawData[mappingItem.key] || { rate: 0, real: 0, target: 0 };
+
+        return {
+          unit: mappingItem.unit,
+          targetValue: indicatorData.target,  // 目标值
+          currentValue: indicatorData.real,   // 实际值
+          progress: indicatorData.rate ? Math.round(indicatorData.rate) : 0, // 完成率（百分比，四舍五入）
+          path: mappingItem.path              // 路由路径
+        };
+      });
+    },
+
     // 处理路由跳转
     handleRouter(obj) {
       if (obj.path) {
-        this.$router.push({ path: obj.path });
+        this.$router.push({
+          path: obj.path,
+          query: {
+            dateData:this.dateData
+          }
+         });
       }
     }
   }
@@ -103,7 +120,7 @@ export default {
 }
 
 .item {
-  width: 252px;
+  width: 253px;
   height: 110px;
   background: #f9fcff;
   padding: 12px;

src/views/home/components/top-product-item.vue

@@ -7,7 +7,7 @@
         <div class="content-wrapper">
           <div class="left">
             <div class="number">{{ item.target }}</div>
-            <div class="title">目标值</div>
+            <div class="title">预算值</div>
           </div>
           <div class="line"></div>
           <div class="right">
@@ -40,69 +40,114 @@
 export default {
   name: "Container",
   components: {},
-  props: ["name", "size", "icon"],
+  // 接收父组件传递过来的原始 itemList 对象
+  props: ['rawItemList','dateData'],
   data() {
     return {
-      itemList: [
-        {
-          unit: "总成本·元/㎡",
-          route: "cost/cost",
-          target: 16,
-          actual: 16,
-          progress: 100
-        },
-        {
-          unit: "原片成本·元/㎡",
-          route: "cost/cost",
-          target: 16,
-          actual: 16,
-          progress: 110
-        },
-        {
-          unit: "加工成本·元/㎡",
-          route: "cost/cost",
-          target: 16,
-          actual: 16,
-          progress: 85
-        },
-        {
-          unit: "原片成品率·%",
-          target: 95,
-          actual: 92,
-          progress: 97
-        },
-        {
-          unit: "投入产出率·%",
-          target: 88,
-          actual: 90,
-          progress: 102
-        }
-      ],
+      // 组件内部用于渲染的数组
+      itemList: [],
       activeIndex: -1
     };
   },
+  // 监听 props 中的 rawItemList 变化
+  watch: {
+    rawItemList: {
+      handler(newVal) {
+        if (newVal) {
+          this.itemList = this.transformData(newVal);
+        }
+      },
+      immediate: true, // 组件初始化时立即执行一次
+      deep: true       // 深度监听对象内部变化
+    }
+  },
   methods: {
+    /**
+     * 核心转换函数：将对象转换为组件需要的数组格式
+     * @param {Object} rawData - 父组件传递的原始数据对象
+     * @returns {Array} - 转换后的数组
+     */
+    transformData(rawData) {
+      // 定义一个映射关系，将后端字段名与前端显示信息关联起来
+      const dataMap = [
+        {
+          key: 'processCost',
+          unit: '制造成本·元/㎡',
+          route: '/productionCostAnalysis/productionCostAnalysis'
+        },
+        {
+          key: 'rawCost',
+          unit: '原片成本·元/㎡',
+          route: '/productionCostAnalysis/originalSheetCost'
+        },
+        {
+          key: 'processCost',
+          unit: '加工成本·元/㎡',
+          route: '/productionCostAnalysis/processingCostAnalysis'
+        },
+        {
+          key: 'rawYield',
+          unit: '原片成品率·%',
+          route: '/rawSheetYield/rawSheetYield' // 假设这个没有路由
+        },
+        {
+          key: 'ioYield',
+          unit: '投入产出率·%',
+          route: '/inputOutputRatio/inputOutputRatio' // 假设这个没有路由
+        }
+      ];
+
+      // 使用 map 方法将 dataMap 数组转换为组件需要的 itemList 数组
+      return dataMap.map(itemInfo => {
+        const rawItem = rawData[itemInfo.key] || {};
+        // 计算进度百分比，确保不小于0
+        const progress = Math.max(0, Math.round((rawItem.rate || 0)));
+
+        return {
+          unit: itemInfo.unit,
+          route: itemInfo.route,
+          target: rawItem.target || 0,
+          actual: rawItem.real || 0,
+          progress: progress
+        };
+      });
+    },
+
     handleItemClick(index) {
       const currentItem = this.itemList[index];
       console.log(`点击了第${index + 1}个item:`, currentItem.unit);
       this.$emit('item-click', { index, ...currentItem });
       this.activeIndex = index;
       if (currentItem.route) {
-        this.$router.push({ path: currentItem.route });
+        this.$router.push({
+          path: currentItem.route,
+          query: {
+            dateData: this.dateData
+          }
+         });
       }
     },
+
     // 判断颜色的方法
     getColor(index) {
-      const { actual, target } = this.itemList[index];
-      return actual >= target
-        ? "rgba(98, 213, 180, 1)"
-        : "rgba(249, 164, 74, 1)";
+      const { actual, target, progress } = this.itemList[index];
+
+      // 新增条件：如果实际值、预算值和进度都为0，则显示绿色
+      if (actual === 0 && target === 0 && progress === 0) {
+        return "rgba(98, 213, 180, 1)"; // 绿色
+      }
+
+      // 原有的通用判断逻辑
+      return progress >= 100
+        ? "rgba(98, 213, 180, 1)" // 绿色
+        : "rgba(249, 164, 74, 1)"; // 橙色
     }
   }
 };
 </script>
 
 <style scoped lang="scss">
+/* (你的样式代码保持不变) */
 .coreItem {
   display: flex;
   flex-wrap: wrap;
@@ -136,10 +181,16 @@ export default {
 
 .coreItem> :nth-child(4) {
   grid-area: item4;
+    &:hover {
+        box-shadow: 0px 4px 12px 2px #B5CDE5;
+      }
 }
 
 .coreItem> :nth-child(5) {
   grid-area: item5;
+    &:hover {
+        box-shadow: 0px 4px 12px 2px #B5CDE5;
+      }
 }
 
 .item {

src/views/home/cost.vue

@@ -162,9 +162,9 @@ export default {
     getData(obj) {
       // obj.levelId = 1
       getCostAnalysisList({
-        startTime: 1762704000000,
-        endTime: 1762790400000,
-        mode:1
+        startTime: obj.startTime,
+        endTime: obj.endTime,
+        mode: obj.mode,
       }).then((res) => {
         this.costOverviews = res.data.costOverviews
         this.piecesCostViews = res.data.piecesCostViews

src/views/home/costComponents/baseTable.vue

@@ -9,14 +9,14 @@
   <div class="visual-base-table-container">
     <el-table :max-height="maxHeight" ref="scroll_Table" @mouseenter.native="autoScroll(true)"
       @mouseleave.native="autoScroll(false)" v-loading="isLoading"
-      :header-cell-style="{ background: 'rgba(218, 226, 237, 1)', color: 'rgba(0, 0, 0, .6)',padding:'3px 2px'}" :row-style="setRowStyle"
-      :data="renderData" border style="width: 100%; background: transparent">
+      :header-cell-style="{ background: 'rgba(218, 226, 237, 1)', color: 'rgba(0, 0, 0, .6)', padding: '3px 2px' }"
+      :row-style="setRowStyle" :data="renderData" border style="width: 100%; background: transparent">
       <el-table-column v-if="page && limit && showIndex" prop="_pageIndex" label="序号" :width="70" align="center" />
       <el-table-column v-for="item in renderTableHeadList" :key="item.prop" :show-overflow-tooltip="showOverflow"
         v-bind="item">
         <template slot-scope="scope">
 
-          <component :is="item.subcomponent" v-if="item.subcomponent" :inject-data="{...scope.row, ...item}"
+          <component :is="item.subcomponent" v-if="item.subcomponent" :inject-data="{ ...scope.row, ...item }"
             @emitData="emitData" />
           <span v-else>{{ scope.row[item.prop] | commonFilter(item.filter) }}</span>
 
@@ -39,7 +39,7 @@ export default {
     maxHeight: {
       type: [Number, String],  // 支持数字（如300）或字符串（如'300px'）
       required: false,
-      default: 230  // 原固定值，作为默认 fallback
+      default: 200  // 原固定值，作为默认 fallback
     },
     tableData: {
       type: Array,
@@ -130,7 +130,7 @@ export default {
           if (divData.scrollTop + divData.clientHeight >= divData.scrollHeight - 1) {
             // 滚动到底部后，重置到顶部（延迟一点更自然）
             // setTimeout(() => {
-              divData.scrollTop = 0
+            divData.scrollTop = 0
             // }, 2000); // 停顿500ms后再从头滚动
           }
         }, 200) // 滚动速度（数值越小越快）
@@ -144,19 +144,19 @@ export default {
         return {
           background: '#F9FCFF',
           color: 'rgba(87, 87, 87, 1)',
-          height: 35  + 'px',
+          height: 35 + 'px',
           lineHeight: 26 + 'px',
           padding: 0,
-          fontSize: 12  + 'px'
+          fontSize: 12 + 'px'
         }
       } else {
         return {
           background: 'rgba(239, 243, 248, 1)',
           color: 'rgba(87, 87, 87, 1)',
-          height: 35  + 'px',
-          lineHeight: 26  + 'px',
+          height: 35 + 'px',
+          lineHeight: 26 + 'px',
           padding: 0,
-          fontSize: 12  + 'px'
+          fontSize: 12 + 'px'
         }
       }
     },
@@ -171,19 +171,25 @@ export default {
 <style lang="scss" scoped>
 // @import "./styles/index.scss";
 .visual-base-table-container {
-.el-table {
+  .el-table {
     border: 0;
 
+    //  .el-table__body-wrapper::-webkit-scrollbar-thumb {
+    //       background-color: blue;
+    //       border-radius: 3px;
+    //     }
     // 关键修改：隐藏滚动条但保留滚动功能
     &::-webkit-scrollbar {
       width: 0;
       height: 0;
       background: transparent;
     }
-        // 隐藏表头的gutter
-        .el-table__header .el-table__cell.gutter {
-          display: none !important;
-        }
+
+    // 隐藏表头的gutter
+    .el-table__header .el-table__cell.gutter {
+      display: none !important;
+    }
+
     // 表格主体内容区滚动条处理
     .el-table__body-wrapper {
       &::-webkit-scrollbar {
@@ -217,24 +223,31 @@ export default {
       }
     }
   }
-  .el-table::before,.el-table--border::after {
+
+  .el-table::before,
+  .el-table--border::after {
     background-color: transparent;
   }
-  .el-table th,td{
+
+  .el-table th,
+  td {
     border-color: rgba(221, 221, 221, 1) !important;
     padding: 0;
   }
+
   .el-table tr {
     background: transparent;
   }
-  .el-table__row:hover > td {
-    background-color: rgba(79,114,136,0.29) !important;
-    }
 
-  .el-table__row--striped:hover > td {
-    background-color: rgba(79,114,136,0.29) !important;
+  .el-table__row:hover>td {
+    background-color: rgba(79, 114, 136, 0.29) !important;
+  }
+
+  .el-table__row--striped:hover>td {
+    background-color: rgba(79, 114, 136, 0.29) !important;
   }
 }
+
 // .setting {
 //   text-align: right;
 //   padding: 15px;
@@ -246,5 +259,4 @@ export default {
 //     @extend .pointer;
 //   }
 // }
-
 </style>

src/views/home/costComponents/changeBase.vue

@@ -56,16 +56,16 @@ export default {
     margin-right: -35px;
   }
 
-  .isChecked {
-    color: #F9FBFE;
-    background: url(../../../assets//img/baseChecked.png) no-repeat;
-    background-size: cover;
-  }
+  // .isChecked {
+  //   color: #F9FBFE;
+  //   background: url(../../../assets//img/baseChecked.png) no-repeat;
+  //   background-size: cover;
+  // }
 
-  .noChecked {
-    color: rgba(30, 22, 81, 1);
-    background: url(../../../assets//img/baseNoChecked.png) no-repeat;
-    background-size: cover;
-  }
+  // .noChecked {
+  //   color: rgba(30, 22, 81, 1);
+  //   background: url(../../../assets//img/baseNoChecked.png) no-repeat;
+  //   background-size: cover;
+  // }
 }
 </style>

src/views/home/costComponents/cost-item.vue

@@ -7,7 +7,7 @@
         <div class="content-wrapper">
           <div class="left">
             <div class="number"> {{ item.targetValue || 0 }}</div>
-            <div class="title">目标值</div>
+            <div class="title">预算值</div>
           </div>
           <div class="line"></div>
           <!-- 实际值：使用当前item的flag判断颜色 -->

src/views/home/costComponents/costBar.vue

@@ -1,33 +1,24 @@
 <template>
   <div class="coreBar">
     <div class="barTop">
-      <!-- 标题：单独左对齐 -->
-      <!-- <div class="title">销售指标趋势</div> -->
-      <!-- 关键：新增右侧容器，包裹图例和按钮组，实现整体靠右 -->
       <div class="right-container">
         <div class="legend">
           <span class="legend-item">
             <span class="legend-icon square target"></span>
             目标
           </span>
-          <!-- 给第三个、第四个图例项加 close-item 类 -->
           <span class="legend-item">
             <span class="legend-icon square achieved"></span>
             实际
           </span>
-          <!-- <span class="legend-item close-item">
-            <span class="legend-icon square unachieved"></span>
-
-          </span> -->
         </div>
-        <!-- 按钮组：改为下拉框样式，仅宽度与第二个组件一致 -->
         <div class="button-group">
           <div class="item-button category-btn">
             <span class="item-text" style="width: 88px;">类目选择</span>
           </div>
           <div class="dropdown-container">
             <div class="item-button profit-btn active" @click.stop="isDropdownShow = !isDropdownShow">
-              <span class="item-text profit-text">{{ selectedProfit || '原料' }}</span>
+              <span class="item-text profit-text">{{ selectedProfit || '请选择' }}</span>
               <span class="dropdown-arrow" :class="{ 'rotate': isDropdownShow }"></span>
             </div>
             <div class="dropdown-options" v-if="isDropdownShow">
@@ -41,7 +32,8 @@
       </div>
     </div>
     <div class="lineBottom" style="height: 100%; width: 1590px">
-      <costBaseBarChart :yName="yName" style="height: 99%; width: 1590px" />
+      <!-- 传递筛选后的数据给图表组件 -->
+      <costBaseBarChart :yName="yName" :chartData="filteredData" style="height: 99%; width: 1590px" />
     </div>
   </div>
 </template>
@@ -51,15 +43,40 @@ import costBaseBarChart from './costBaseBarChart.vue';
 export default {
   name: "Container",
   components: { costBaseBarChart },
-  props: ['dateData','yName'],
+  props: ['dateData', 'yName', 'categoryData'],
   data() {
     return {
       isDropdownShow: false,
-      selectedProfit: '原料', // 默认选中"原料"
-      profitOptions: ['原料', '其他选项1', '其他选项2'], // 可根据实际需求修改选项
+      selectedProfit: null, // 选中的名称，初始为null
     };
   },
-  computed: {},
+  computed: {
+    // 从categoryData中提取name作为下拉选项
+    profitOptions() {
+      return this.categoryData.map(item => item.name) || [];
+    },
+    // 根据选中的名称筛选数据
+    filteredData() {
+      if (!this.selectedProfit || !this.categoryData.length) {
+        // 未选择时默认取第一个分类的数据（或空）
+        return this.categoryData[0] || {};
+      }
+      // 找到选中名称对应的分类数据
+      return this.categoryData.find(item => item.name === this.selectedProfit) || {};
+    }
+  },
+  watch: {
+    categoryData: {
+      handler() {
+        // 当分类数据变化时，若没有选中项则默认选中第一个
+        if (this.categoryData.length && !this.selectedProfit) {
+          this.selectedProfit = this.categoryData[0].name;
+        }
+      },
+      deep: true,
+      immediate: true
+    }
+  },
   methods: {
     selectProfit(item) {
       this.selectedProfit = item;
@@ -82,6 +99,7 @@ export default {
 </script>
 
 <style scoped lang="scss">
+/* 原有样式保持不变 */
 .coreBar {
   display: flex;
   flex-direction: column;
@@ -95,19 +113,6 @@ export default {
     gap: 16px;
     width: 100%;
 
-    .title {
-      height: 18px;
-      font-family: PingFangSC, PingFang SC;
-      font-weight: 400;
-      font-size: 18px;
-      color: #000000;
-      line-height: 18px;
-      letter-spacing: 1px;
-      text-align: left;
-      font-style: normal;
-      white-space: nowrap;
-    }
-
     .right-container {
       display: flex;
       align-items: center;
@@ -138,32 +143,11 @@ export default {
       display: inline-block;
     }
 
-    .legend-icon.line {
-      width: 12px;
-      height: 2px;
-      position: relative;
-
-      &::before {
-        position: absolute;
-        content: "";
-        top: -2px;
-        left: 3px;
-        width: 6px;
-        border-radius: 50%;
-        height: 6px;
-        background-color: rgba(40, 138, 255, 1);
-      }
-    }
-
     .legend-icon.square {
       width: 8px;
       height: 8px;
     }
 
-    .yield {
-      background: rgba(40, 138, 255, 1);
-    }
-
     .target {
       background: #2889FF;
     }
@@ -172,15 +156,6 @@ export default {
       background: rgba(40, 203, 151, 1);
     }
 
-    .unachieved {
-      background: rgba(255, 132, 0, 1);
-    }
-
-    .legend-item.close-item+.legend-item.close-item {
-      margin-left: -8px;
-    }
-
-    // 按钮组：完全复用第二个组件样式，仅保持原有宽度适配
     .button-group {
       display: flex;
       position: relative;
@@ -222,7 +197,7 @@ export default {
       }
 
       .profit-btn {
-        width: 102px; // 保持原组件要求的宽度，其余样式与第二个组件一致
+        width: 102px;
         border-top-right-radius: 12px;
         border-bottom-right-radius: 12px;
         position: relative;
@@ -264,7 +239,7 @@ export default {
         top: 100%;
         right: 0;
         margin-top: 2px;
-        width: 102px; // 与按钮宽度一致
+        width: 102px;
         background: #ffffff;
         border-radius: 8px;
         box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);

src/views/home/costComponents/costBaseBarChart.vue

@@ -8,27 +8,68 @@ import * as echarts from 'echarts';
 export default {
   components: {},
   data() {
-    return {};
+    return {
+      myChart: null // 保存图表实例，方便更新
+    };
   },
   props: {
     yName: {
       type: String,
       default: () => '元/㎡'
     },
+    chartData: {
+      type: Object,
+      default: () => { }
+    },
+  },
+  watch: {
+    chartData: {
+      handler() {
+        this.updateChart(); // 数据变化时更新图表
+      },
+      deep: true,
+      immediate: true
+    }
   },
   mounted() {
     this.$nextTick(() => {
-      this.initData();
+      this.initChart();
     });
   },
   methods: {
-    initData() {
+    initChart() {
       const chartDom = this.$refs.cockpitEffChip;
       if (!chartDom) {
         console.error('图表容器未找到！');
         return;
       }
-      const myChart = echarts.init(chartDom);
+      this.myChart = echarts.init(chartDom);
+      this.updateChart(); // 初始化图表数据
+
+      // 窗口缩放适配
+      window.addEventListener('resize', () => {
+        this.myChart && this.myChart.resize();
+      });
+
+      // 组件销毁清理
+      this.$once('hook:destroyed', () => {
+        window.removeEventListener('resize', () => {
+          this.myChart && this.myChart.resize();
+        });
+        this.myChart && this.myChart.dispose();
+      });
+    },
+
+    updateChart() {
+      if (!this.myChart || !this.chartData.rawData || !this.chartData.timeArray) {
+        return; // 图表未初始化或数据不完整时不更新
+      }
+
+      // 从rawData中提取目标和实际数据
+      const targetData = this.chartData.rawData.map(item => item.target); // 目标数据数组
+      const actualData = this.chartData.rawData.map(item => item.value);  // 实际数据数组
+      const xAxisData = this.chartData.timeArray;                        // 横坐标时间数组
+
       const option = {
         tooltip: {
           trigger: 'axis',
@@ -38,26 +79,24 @@ export default {
               backgroundColor: '#6a7985'
             }
           },
-          // 优化tooltip内容，区分各系列含义
           formatter: (params) => {
             let html = `${params[0].axisValue}<br/>`;
             params.forEach(item => {
-              // 直接使用系列名，无需映射，仅保留单位判断
-              html += `${item.marker} ${item.seriesName}: ${item.value}${item.seriesName === '完成率' ? '%' : '片'}<br/>`;
+              html += `${item.marker} ${item.seriesName}: ${item.value}${this.yName}<br/>`;
             });
             return html;
           }
         },
         grid: {
           top: 30,
-          bottom: 30, // 增大底部间距，避免柱子与X轴标签重叠
+          bottom: 30,
           right: 70,
-          left: 40,
+          left: 60,
         },
         xAxis: [
           {
             type: 'category',
-            boundaryGap: true, // 开启边界间隙，让柱子居中显示，不贴边
+            boundaryGap: true,
             axisTick: { show: false },
             axisLine: {
               show: true,
@@ -67,13 +106,12 @@ export default {
               color: 'rgba(0, 0, 0, 0.45)',
               fontSize: 12,
               interval: 0,
-              padding: [5, 0, 0, 0] // 标签向下偏移，避免与柱子底部重叠
+              padding: [5, 0, 0, 0]
             },
-            data: ['6月', '7月', '8月', '9月', '10月', '11月']
+            data: xAxisData // 使用timeArray作为横坐标
           }
         ],
         yAxis: [
-          // 左侧Y轴：目标/达标/未达标（数量，单位“片”）
           {
             type: 'value',
             name: this.yName,
@@ -82,77 +120,28 @@ export default {
               fontSize: 12,
               align: 'right'
             },
-            min: 0, // 最小值设0，确保柱子从X轴底部开始，不超过X轴
-            max: (value) => Math.ceil(value.max * 1.1), // 最大值留10%余量，避免柱子顶满
-            scale: false, // 关闭缩放，强制从0开始
+            // min: 0,
+            // max: (value) => value.max > 0 ? Math.ceil(value.max * 1.1) : 100, // 留10%余量
+
             axisTick: { show: false },
             axisLabel: {
               color: 'rgba(0, 0, 0, 0.45)',
               fontSize: 12,
-              formatter: '{value}'
+              formatter: `{value}`
             },
             splitLine: { lineStyle: { color: 'rgba(0, 0, 0, 0.15)' } },
             axisLine: { lineStyle: { color: 'rgba(0, 0, 0, 0.15)' } },
-            splitNumber: 4
-          },
-          // 右侧Y轴：完成率（百分比）
-          // {
-          //   type: 'value',
-          //   // name: '%',
-          //   nameTextStyle: {
-          //     color: 'rgba(0, 0, 0, 0.45)',
-          //     fontSize: 12,
-          //     align: 'left'
-          //   },
-          //   min: 0,
-          //   max: 100, // 完成率最大100%，符合业务逻辑
-          //   axisTick: { show: false },
-          //   axisLabel: {
-          //     color: 'rgba(0, 0, 0, 0.45)',
-          //     fontSize: 12,
-          //     formatter: '{value}%'
-          //   },
-          //   splitLine: { show: false }, // 不重复显示分割线
-          //   axisLine: { lineStyle: { color: 'rgba(0, 0, 0, 0.15)' } },
-          //   splitNumber: 4
-          // }
+            splitNumber: 3
+          }
         ],
         series: [
-          // 1. 完成率：折线图（绑定右侧百分比Y轴）
-          // {
-          //   name: '产销率',
-          //   type: 'line',
-          //   yAxisIndex: 1, // 绑定右侧Y轴
-          //   lineStyle: {
-          //     color: 'rgba(40, 138, 255, .5)',
-          //     width: 2 // 线条加粗，突出重点
-          //   },
-          //   itemStyle: {
-          //     color: 'rgba(40, 138, 255, 1)',
-          //     borderColor: 'rgba(40, 138, 255, 1)', // 数据点白色边框，增强辨识度
-          //     borderWidth: 2,
-          //     radius: 4 // 数据点圆角，更圆润
-          //   },
-          //   areaStyle: {
-          //     opacity: 0.2, // 降低面积透明度，不抢柱状图视觉焦点
-          //     color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
-          //       { offset: 0, color: 'rgba(40, 138, 255, .9)' },
-          //       { offset: 1, color: 'rgba(255, 132, 0, 0)' }
-          //     ])
-          //   },
-          //   data: [65, 78, 52, 85, 60, 95, 72], // 完成率数据（0-100）
-          //   symbol: 'circle', // 数据点为圆形
-          //   symbolSize: 6 // 数据点大小
-          // },
-          // 2. 目标：柱状图（绑定左侧数量Y轴）
+          // 目标数据柱状图
           {
-            name: '销量',
+            name: '预算',
             type: 'bar',
             yAxisIndex: 0,
             barWidth: 24,
-            // 关键修复：label 直接放在 series 下，而非 itemStyle 内
             itemStyle: {
-              // 移除多余的 normal 层级，直接配置 color 渐变
               color: {
                 type: 'linear',
                 x: 0,
@@ -167,17 +156,15 @@ export default {
               borderRadius: [4, 4, 0, 0],
               borderWidth: 0
             },
-            data: [200, 280, 180, 300, 220, 350]
+            data: targetData // 目标数据数组
           },
-          // 3. 达标：柱状图（绑定左侧数量Y轴）
+          // 实际数据柱状图
           {
-            name: '产量',
+            name: '实际',
             type: 'bar',
             yAxisIndex: 0,
             barWidth: 24,
-            // 关键修复：label 直接放在 series 下，而非 itemStyle 内
             itemStyle: {
-              // 移除多余的 normal 层级，直接配置 color 渐变
               color: {
                 type: 'linear',
                 x: 0,
@@ -192,50 +179,12 @@ export default {
               borderRadius: [4, 4, 0, 0],
               borderWidth: 0
             },
-            data: [130, 220, 95, 255, 132, 332] // 达标数据（小于目标）
-          },
-          // 4. 未达标：柱状图（绑定左侧数量Y轴）
-          // {
-          //   name: '未达标',
-          //   type: 'bar',
-          //   yAxisIndex: 0,
-          //   barWidth: 18,
-          //   itemStyle: {
-          //     color: 'rgba(249, 164, 74, 1)',
-          //     borderRadius: [4, 4, 0, 0],
-          //     borderWidth: 0
-          //   },
-          //   data: [70, 60, 85, 45, 88, 18, 78] // 未达标数据（目标-达标）
-          // }
-        ],
-        // 图例：区分各系列，点击可控制显示隐藏
-        // legend: {
-        //   top: 0,
-        //   left: 'center',
-        //   itemWidth: 12,
-        //   itemHeight: 8,
-        //   textStyle: {
-        //     color: 'rgba(0, 0, 0, 0.45)',
-        //     fontSize: 12
-        //   },
-        //   data: ['完成率', '目标', '达标', '未达标']
-        // }
+            data: actualData // 实际数据数组
+          }
+        ]
       };
 
-      option && myChart.setOption(option);
-
-      // 窗口缩放适配
-      window.addEventListener('resize', () => {
-        myChart.resize();
-      });
-
-      // 组件销毁清理
-      this.$once('hook:destroyed', () => {
-        window.removeEventListener('resize', () => {
-          myChart.resize();
-        });
-        myChart.dispose();
-      });
+      this.myChart.setOption(option);
     }
   },
 };

src/views/home/costComponents/operatingLineBar.vue

@@ -90,11 +90,11 @@ export default {
             return html;
           }
         },
-        grid: {
+       grid: {
           top: 30,
           bottom: 30,
-          right: 70,
-          left: 40,
+          right: 20,
+          left: 60,
         },
         xAxis: [
           {
@@ -183,7 +183,7 @@ export default {
             symbolSize: 6
           },
           {
-            name: '目标',
+            name: '预算',
             type: 'bar',
             yAxisIndex: 0,
             barWidth: 14,

src/views/home/costComponents/processingCost-Item.vue

@@ -9,11 +9,11 @@
         </div>
         <div class="item-content">
           <div class="content-wrapper">
-            <!-- 目标值 + 分割线 + 实际值 -->
+            <!-- 预算值 + 分割线 + 实际值 -->
             <div class="value-group">
               <div class="value-item">
                 <div class="number">{{ item.targetValue || 0 }}</div>
-                <div class="title">目标值</div>
+                <div class="title">预算值</div>
               </div>
               <div class="middle-line"></div>
               <div class="value-item">
@@ -260,7 +260,7 @@ export default {
   .middle-line {
     width: 100%;
     height: 1px;
-    background: linear-gradient(to right, rgba(40, 203, 151, 0.3), rgba(40, 203, 151, 0.8), rgba(40, 203, 151, 0.3));
+  background: linear-gradient(to right, #cbcbcb rgba(255, 255, 255, 0));
   }
 
   .number {

src/views/home/costComponents/product-Item.vue

@@ -9,11 +9,11 @@
         </div>
         <div class="item-content">
           <div class="content-wrapper">
-            <!-- 目标值 + 分割线 + 实际值 -->
+            <!-- 预算值 + 分割线 + 实际值 -->
             <div class="value-group">
               <div class="value-item">
                 <div class="number">{{ item.value }}</div>
-                <!-- <div class="title">目标值</div> -->
+                <!-- <div class="title">预算值</div> -->
               </div>
             </div>
           </div>