xiugai

2026-01-06 13:48:11 +08:00
parent 20ef2b9763
commit 5605eeab06
287 changed files with 1890 additions and 1381 deletions
--- a/src/views/home/productionCostAnalysisComponents/relateSingleFuelCostAnalysisDian.vue
+++ b/src/views/home/productionCostAnalysisComponents/relateSingleFuelCostAnalysisDian.vue
@@ -0,0 +1,264 @@
+<template>
+  <div style="flex: 1">
+    <Container :isShowTab="true" :name="title" icon="cockpitItemIcon" size="opLargeBg" topSize="large"
+      @tabChange="handleChange">
+      <!-- 1. 移除 .kpi-content 的固定高度，改为自适应 -->
+      <div class="kpi-content" style="padding: 14px 16px; display: flex; width: 100%;">
+        <!-- 新增：topItem 专属包裹容器，统一控制样式和布局 -->
+        <div class="topItem-container" style="display: flex; gap: 8px;">
+          <div class="dashboard left">
+            <div class="title">
+              采购单价·元/㎡
+            </div>
+            <div class="line">
+              <operatingSingleBar :detailData="unitPriceData"></operatingSingleBar>
+            </div>
+          </div>
+          <div class="dashboard right">
+            <div class="title">
+              产量·万㎡
+            </div>
+            <div class="line">
+              <operatingSingleBar :detailData="productData"></operatingSingleBar>
+            </div>
+          </div>
+          <div class="dashboard right">
+            <div class="title">
+              单耗·度/m²
+            </div>
+            <div class="line">
+              <operatingSingleBar :detailData="unitHaoData"></operatingSingleBar>
+            </div>
+          </div>
+          <div class="dashboard right">
+            <div class="title">
+              消耗量·度
+            </div>
+            <div class="line">
+              <operatingSingleBar :detailData="haoNumData"></operatingSingleBar>
+            </div>
+          </div>
+        </div>
+      </div>
+    </Container>
+  </div>
+</template>
+<script>
+import Container from '../components/container.vue'
+import operatingSingleBar from './operatingSingleBar.vue'
+
+// import * as echarts from 'echarts'
+// import rawItem from './raw-Item.vue'
+
+export default {
+  name: 'ProductionStatus', // 如需区分可重命名为MaterialProductionStatus
+  components: { Container, operatingSingleBar },
+  props: {
+    // 对齐第二个组件：改为Object类型，支持月度/累计物料数据，格式统一
+    relatedData: {
+      type: Object,
+      default: () => ({
+        relatedMon: [], // 物料月度数据（数组格式，存储各物料项）
+        relatedTotal: [] // 物料累计数据（数组格式，存储各物料项）
+      })
+    },
+    dateData: {
+      type: Object,
+      default: () => ({})
+    },
+    title: {
+      type: String,
+      default: ''
+    },
+    month: {
+      type: String,
+      default: ''
+    },
+  },
+  data() {
+    return {
+      chart: null,
+      // 核心：当前激活的物料数据集（默认月度数据，与第二个组件逻辑一致）
+      activeData: this.relatedData.relatedMon || [],
+      activeMaterial: '' // 记录选中的物料状态，与第二个组件一致
+    }
+  },
+  // 对齐第二个组件：添加计算属性，精准筛选各物料数据
+  computed: {
+    // 1. 硅砂数据：从激活数据集中筛选，兜底值与第二个组件统一
+    unitPriceData() {
+      return this.activeData.find(item => (item.name || '').includes('采购单价')) || {
+        targetValue: 0,
+        value: 0,
+        completed: 0,
+        diffValue: 0
+      };
+    },
+    // 2. 海砂数据：精准筛选
+    productData() {
+      return this.activeData.find(item => (item.name || '').includes('产量')) || {
+        targetValue: 0,
+        value: 0,
+        completed: 0,
+        diffValue: 0
+      };
+    },
+    // 3. 纯碱数据：精准筛选
+    unitHaoData() {
+      return this.activeData.find(item => (item.name || '').includes('单耗')) || {
+        targetValue: 0,
+        value: 0,
+        completed: 0,
+        diffValue: 0
+      };
+    },
+    // 4. 白云石数据：精准筛选
+    haoNumData() {
+      return this.activeData.find(item => (item.name || '').includes('消耗量')) || {
+        targetValue: 0,
+        value: 0,
+        completed: 0,
+        diffValue: 0
+      };
+    },
+  },
+  watch: {
+    // 对齐第二个组件：监听物料数据变化，同步更新激活数据集
+    relatedData: {
+      handler(newVal) {
+        this.activeData = newVal.relatedMon || [];
+      },
+      immediate: true, // 组件挂载时立即执行
+      deep: true // 深度监听对象内部变化
+    }
+  },
+  mounted() {
+    console.log('物料组件挂载时的激活数据：', this.activeData);
+  },
+  methods: {
+    handleChange(value) {
+      console.log('Tab 切换值：', value);
+      // 根据 Tab 值更新当前激活的数据集
+      if (value === 'month') {
+        // 切换为月度数据
+        this.activeData = this.relatedData.relatedMon || [];
+      } else {
+        // 切换为累计数据（非 month 均视为累计，可根据实际需求调整判断条件）
+        this.activeData = this.relatedData.relatedTotal || [];
+      }
+      console.log('当前激活数据集：', this.activeData);
+    },
+    // 对齐第二个组件：优化点击事件，接收物料名和路由路径参数
+  }
+}
+</script>
+
+<style lang='scss' scoped>
+/* 3. 核心：滚动容器样式（固定高度+溢出滚动+隐藏滚动条） */
+.scroll-container {
+  /* 1. 固定容器高度：根据页面布局调整（示例300px，超出则滚动） */
+  max-height: 210px;
+  /* 2. 溢出滚动：内容超出高度时显示滚动功能 */
+  overflow-y: auto;
+  /* 3. 隐藏横向滚动条（防止设备名过长导致横向滚动） */
+  overflow-x: hidden;
+  /* 4. 内边距：与标题栏和容器边缘对齐 */
+  padding: 10px 0;
+
+  /* 5. 隐藏滚动条（兼容主流浏览器） */
+  /* Chrome/Safari */
+  &::-webkit-scrollbar {
+    display: none;
+  }
+
+  /* Firefox */
+  scrollbar-width: none;
+  /* IE/Edge */
+  -ms-overflow-style: none;
+}
+
+.dashboard {
+  width: 390px;
+  height: 205px;
+  background: #F9FCFF;
+  padding: 16px 0 0 16px;
+
+  .title {
+    // width: 190px;
+    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;
+    letter-spacing: 2px;
+  }
+
+  .number {
+    display: flex;
+    align-items: center;
+    gap: 30px;
+    // width: 190px;
+    height: 32px;
+    font-family: YouSheBiaoTiHei;
+    font-size: 32px;
+    color: #0B58FF;
+    line-height: 32px;
+    letter-spacing: 2px;
+    text-align: left;
+    font-style: normal;
+  }
+
+  .mom {
+    width: 97px;
+    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;
+  }
+}
+
+// .line {
+//   width: 500px;
+//   height: 205px;
+//   background: #F9FCFF;
+// }
+
+// .leftTitle {
+//   .item {
+//     width: 67px;
+//     height: 180px;
+//     padding: 37px 23px;
+//     background: #F9FCFF;
+//     font-family: PingFangSC, PingFang SC;
+//     font-weight: 400;
+//     font-size: 18px;
+//     color: #000000;
+//     line-height: 25px;
+//     letter-spacing: 1px;
+//     // text-align: left;
+//     font-style: normal;
+//   }
+// }
+</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> -->