修改集团及基地图表样式

src/views/home/depreciationAnalysisComponents/yearRelatedMetrics.vue

@@ -0,0 +1,217 @@
+<template>
+  <div style="flex: 1">
+    <Container :name="title" icon="cockpitItemIcon" size="operatingRevenueBg" topSize="middle">
+      <div class="kpi-content" style="padding: 14px 16px; display: flex; width: 100%;">
+        <div class="topItem-container" style="display: flex; gap: 8px; width: 100%;">
+          <!-- 销量模块（直接传递整合了flag的salesData） -->
+          <div class="dashboard left" @click="handleDashboardClick('/salesVolumeAnalysis/salesVolumeAnalysisBase')">
+            <div style='position: relative;'>
+              <div class="title">
+                销量·万㎡
+              </div>
+              <div style='font-size: 16px;position: absolute;top:-4px;right:15px'>
+                <span>完成率:<span style='color: #0B58FF;'>{{ytdAnalysis[0].rate}}%</span></span>
+                <span style='display: inline-block;margin-left: 10px;'>差值:<span :style="{color:ytdAnalysis[0].flags>0?'#30B590':'#FF9423'}" >{{ytdAnalysis[0].diff}}</span></span>
+              </div>
+            </div>
+            <div class="chart-wrap">
+              <operatingSingleBar :detailData="salesData"></operatingSingleBar>
+            </div>
+          </div>
+          <!-- 单价模块（直接传递整合了flag的unitPriceData） -->
+          <div class="dashboard right" @click="handleDashboardClick('/unitPriceAnalysis/unitPriceAnalysisBase')">
+            <div style='position: relative;'>
+              <div class="title">
+                单价·元/㎡
+              </div>
+              <div style='font-size: 16px;position: absolute;top:-4px;right:15px'>
+                <span>完成率:<span style='color: #0B58FF;'>{{ytdAnalysis[1].rate}}%</span></span>
+                <span style='display: inline-block;margin-left: 10px;'>差值:<span :style="{color:ytdAnalysis[1].flags>0?'#30B590':'#FF9423'}" >{{ytdAnalysis[1].diff}}</span></span>
+              </div>
+            </div>
+            <div class="chart-wrap">
+              <operatingSingleBar :detailData="unitPriceData"></operatingSingleBar>
+            </div>
+          </div>
+        </div>
+      </div>
+    </Container>
+  </div>
+</template>
+
+<script>
+import Container from './container.vue'
+import operatingSingleBar from './operatingSingleBar.vue'
+
+export default {
+  name: 'ProductionStatus',
+  components: { Container, operatingSingleBar },
+  props: {
+    ytdAnalysis: {
+      type: Array,
+      default: () => [
+        { title: "销量", budget: 0, real: 0, rate: 0, diff: 0 },
+        { title: "单价", budget: 0, real: 0, rate: 0, diff: 0 }
+      ]
+    },
+    dateData: {
+      type: Object,
+      default: () => {}
+    },
+    title: {
+      type: String,
+      default: ''
+    },
+    month: {
+      type: String,
+      default: ''
+    },
+  },
+  data() {
+    return {
+      chart: null,
+      // 初始化数据包含flag字段
+      salesData: { title: "销量", budget: 0, real: 0, rate: 0, diff: 0, flag: 0 },
+      unitPriceData: { title: "单价", budget: 0, real: 0, rate: 0, diff: 0, flag: 0 }
+    }
+  },
+  watch: {
+    ytdAnalysis: {
+      handler(newVal) {
+        this.updateChart(newVal)
+      },
+      deep: true,
+      immediate: true
+    }
+  },
+  mounted() {
+    this.updateChart(this.ytdAnalysis)
+  },
+  methods: {
+    handleDashboardClick(path) {
+      this.$router.push({
+        path: path,
+        query: {
+          factory: this.$route.query.factory ? this.$route.query.factory : 5,
+          dateData: this.dateData
+        }
+      })
+    },
+    // 判断flag的核心方法
+getRateFlag(rate, real, target) {
+  if (isNaN(rate) || rate === null || rate === undefined) return 0;
+
+  // 1. 完成率 >= 100 => 达标
+  if (rate >= 100) return 1;
+
+  // 2. 完成率 = 0 且 (目标值=0 或 实际值=目标值=0) => 达标
+  if (rate === 0 && target === 0) return 1;
+
+  // 其他情况 => 未达标
+  return 0;
+},
+
+    updateChart(data) {
+      // 数据兜底
+      const salesItem = Array.isArray(data) && data[0] ? data[0] : { title: "销量", budget: 0, real: 0, rate: 0, diff: 0 };
+      const unitPriceItem = Array.isArray(data) && data[1] ? data[1] : { title: "单价", budget: 0, real: 0, rate: 0, diff: 0 };
+
+      // 核心修改：将flag整合到数据对象中，无需单独定义salesFlag/unitPriceFlag
+      this.salesData = {
+        ...salesItem, // 合并原有字段
+        flag: this.getRateFlag(salesItem.rate, salesItem.real, salesItem.budget) // 新增flag字段
+      };
+
+      this.unitPriceData = {
+        ...unitPriceItem, // 合并原有字段
+        flag: this.getRateFlag(unitPriceItem.rate, unitPriceItem.real, unitPriceItem.budget) // 新增flag字段
+      };
+
+      // 调试：确认整合后的数据
+      console.log('整合flag后的销量数据：', this.salesData);
+      console.log('整合flag后的单价数据：', this.unitPriceData);
+    }
+  }
+}
+</script>
+
+<style lang='scss' scoped>
+.scroll-container {
+  max-height: 210px;
+  overflow-y: auto;
+  overflow-x: hidden;
+  padding: 10px 0;
+
+  &::-webkit-scrollbar {
+    display: none;
+  }
+
+  scrollbar-width: none;
+  -ms-overflow-style: none;
+}
+
+.topItem-container {
+  display: flex;
+  justify-content: space-between;
+}
+
+.dashboard {
+  flex: 1;
+  min-width: 300px;
+  height: 205px;
+  background: #F9FCFF;
+  padding: 16px 0 0 10px;
+  margin: 0 4px;
+
+  .title {
+    height: 18px;
+    font-family: PingFangSC, PingFang SC;
+    font-weight: 400;
+    font-size: 18px;
+    color: #000000;
+    line-height: 18px;
+    letter-spacing: 2px;
+    text-align: left;
+    margin-bottom: 12px;
+  }
+
+  .chart-wrap {
+    width: 100%;
+    height: calc(100% - 30px);
+  }
+
+  .number {
+    display: flex;
+    align-items: center;
+    gap: 30px;
+    height: 32px;
+    font-family: YouSheBiaoTiHei;
+    font-size: 32px;
+    color: #0B58FF;
+    line-height: 32px;
+    letter-spacing: 2px;
+    text-align: left;
+  }
+
+  .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;
+    z-index: 1000;
+  }
+}
+
+.dashboard.left {
+  margin-left: 0;
+}
+
+.dashboard.right {
+  margin-right: 0;
+}
+</style>