新增页面

src/views/home/productionCostAnalysisComponents/relateCombustibleCostAnalysis.vue

@@ -0,0 +1,185 @@
+<template>
+  <div style="flex: 1">
+    <Container :name="title" icon="cockpitItemIcon" size="opLargeBg" topSize="large">
+      <div class="kpi-content" style="padding: 14px 16px; display: flex; width: 100%;">
+        <div class="topItem-container" style="display: flex; gap: 8px;">
+          <!-- 1. 为每个dashboard绑定点击事件，传递物料名称参数 -->
+          <div class="dashboard left" @click="handleDashboardClick('天然气')">
+            <div class="title">天然气·单位/万元</div>
+            <div class="line">
+              <operatingSingleBar></operatingSingleBar>
+            </div>
+          </div>
+          <div class="dashboard right" @click="handleDashboardClick('LNG液化天然气')">
+            <div class="title">LNG液化天然气·单位/万元</div>
+            <div class="line">
+              <operatingSingleBar></operatingSingleBar>
+            </div>
+          </div>
+          <div class="dashboard right" @click="handleDashboardClick('重油')">
+            <div class="title">重油·单位/万元</div>
+            <div class="line">
+              <operatingSingleBar></operatingSingleBar>
+            </div>
+          </div>
+          <div class="dashboard right" @click="handleDashboardClick('水')">
+            <div class="title">水·单位/万元</div>
+            <div class="line">
+              <operatingSingleBar></operatingSingleBar>
+            </div>
+          </div>
+        </div>
+      </div>
+    </Container>
+  </div>
+</template>
+
+<script>
+import Container from '../components/container.vue'
+import operatingSingleBar from './operatingSingleBar.vue'
+
+export default {
+  name: 'ProductionStatus',
+  components: { Container, operatingSingleBar },
+  props: {
+    itemData: {
+      type: Array,
+      default: () => []
+    },
+    title: {
+      type: String,
+      default: ''
+    },
+    month: {
+      type: String,
+      default: ''
+    },
+  },
+  data() {
+    return {
+      chart: null,
+      // 可选：记录当前选中的物料
+      activeMaterial: ''
+    }
+  },
+  watch: {
+    itemData: {
+      handler(newValue, oldValue) {
+        // this.updateChart()
+      },
+      deep: true
+    }
+  },
+  mounted() {
+    // this.$nextTick(() => this.updateChart())
+  },
+  methods: {
+    /**
+     * dashboard点击事件处理函数
+     * @param {String} material 物料名称（硅砂/海砂/纯碱等）
+     */
+    handleDashboardClick(material) {
+      // 1. 记录选中状态（可选）
+      this.activeMaterial = material;
+
+      // 2. 基础逻辑：打印物料名称（可替换为业务逻辑）
+      console.log(`点击了【${material}】，月份：${this.month}`, '物料数据：', this.itemData);
+      this.$router.push({
+        path: 'singleCombustible',
+        month: this.month,
+        query: {
+          name: material
+        }
+      })
+      // 3. 扩展逻辑示例：
+      // - 触发父组件事件（如需向父组件传递数据）
+      this.$emit('dashboard-click', {
+        material,
+        month: this.month,
+        // data: this.itemData.find(item => item.name === material) || {}
+      });
+
+      // - 跳转详情页（如需路由跳转）
+      // this.$router.push({
+      //   path: '/material-detail',
+      //   query: { name: material, month: this.month }
+      // });
+
+      // - 打开弹窗/加载详情数据等
+      // this.openMaterialDetail(material);
+    },
+
+    /**
+     * 可选：打开物料详情弹窗（示例）
+     */
+    openMaterialDetail(material) {
+      // 此处可编写弹窗逻辑
+      alert(`查看【${material}】的详细成本分析`);
+    }
+  }
+}
+</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;
+}
+
+.dashboard {
+  width: 390px;
+  height: 205px;
+  background: #F9FCFF;
+  padding: 16px 0 0 16px;
+  // 核心：添加点击反馈样式
+  cursor: pointer; // 鼠标悬浮显示手型
+  transition: all 0.2s ease; // 过渡动画
+
+  // 选中状态样式（可选）
+  &.active {
+    background: #E8F4FF;
+    border: 1px solid #0B58FF;
+  }
+
+  // 悬浮样式
+  &:hover {
+    background: #F0F8FF;
+    box-shadow: 0 2px 8px rgba(11, 88, 255, 0.1);
+  }
+
+  .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;
+    font-style: normal;
+  }
+
+  .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;
+    font-style: normal;
+  }
+}
+</style>