klp-mono/apps/l2/src/views/l2/pdo/components/line.vue

<template>
  <div class="monitoring-container">
    <div style="height: 100%; display: flex; box-sizing: border-box;">
      <!-- 左侧树形选择器（最多勾选4个） -->
      <div style="height: 100%; width: 320px; overflow-y: scroll; border-right: 1px solid #e8e8e8; padding: 10px;">
        <el-tree :data="paramFields" :props="treeProps" node-key="value" show-checkbox @check="handleCheckChange"
          ref="paramTree" :check-strictly="true"></el-tree>
      </div>

      <!-- 右侧图表布局容器（总高度100%） -->
      <div class="charts-layout-wrapper"
        :style="{ height: '100%', width: '100%', padding: '10px', boxSizing: 'border-box' }">
        <!-- 核心：根据勾选数量动态控制布局样式 -->
        <div class="charts-container" :class="{
          'count-1': checkedCount === 1,
          'count-2': checkedCount === 2,
          'count-3': checkedCount === 3,
          'count-4': checkedCount === 4
        }" :style="{ height: '100%', width: '100%' }">
          <!-- 替换为封装后的 ECharts 组件，循环渲染 -->
          <div v-for="(param, index) in checkedNodes" :key="param.value" class="preset-chart-item"
            :style="{ display: index < maxCheckCount ? 'block' : 'none' }">
            <!-- 传入 enCoilID 和 paramField（即 param.value） -->
            <ParamEcharts :enCoilID="enCoilID" :paramField="param.value" />
          </div>

          <!-- 无勾选时显示提示 -->
          <div v-if="checkedCount === 0" class="no-param-tip">
            请在左侧勾选参数以显示图表（最多4个）
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import ParamEcharts from './ParamEcharts.vue' // 引入封装后的 ECharts 组件

export default {
  name: 'DeviceMonitoring',
  components: { ParamEcharts }, // 注册组件
  props: {
    enCoilID: {
      type: String,
      required: true,
    }
  },
  data() {
    return {
      // 参数列表（汉化：冷轧行业专业术语）
      paramFields: [
        { label: '带钢速度', value: 'stripSpeed' },
        { label: '1#开卷机张力', value: 'tensionPorBr1' },
        { label: '2#开卷机张力', value: 'tensionPorBr2' },
        { label: '清洗电压', value: 'cleaningVoltage' },
        { label: '清洗电流', value: 'cleaningCurrent' },
        { label: '碱液浓度', value: 'alkaliConcentration' },
        { label: '碱液温度', value: 'alkaliTemperature' },
        { label: '预热段出口板温', value: 'phfExitStripTemp' },
        { label: '加热段出口板温', value: 'rtfExitStripTemp' },
        { label: '冷却段出口板温', value: 'jcsExitStripTemp' },
        { label: '均热段出口板温', value: 'scsExitStripTemp' },
        { label: '锌锅温度', value: 'potTemperature' },
        { label: '锌锅功率', value: 'zincPotPower' },
        { label: '燃气消耗量', value: 'gasConsumption' },
        { label: '冷却塔带钢温度', value: 'coolingTowerStripTemp' },
        { label: '光整机张力', value: 'tensionBr5Tm' },
        { label: '光整机出口速度', value: 'stripSpeedTmExit' },
        { label: '拉矫机延伸率', value: 'tlElongation' },
        { label: '拉矫机张力', value: 'tensionTlBr7' }
      ],
      treeProps: {
        children: 'children',
        label: 'label'
      },
      checkedNodes: [], // 已勾选参数列表
      checkedCount: 0, // 已勾选数量（用于布局控制）
      maxCheckCount: 4 // 最大勾选数量
    }
  },
  watch: {
    // 监听钢卷ID变化，无需手动更新图表（子组件已自行监听）
    enCoilID: {
      handler(newVal) {
        console.log('钢卷ID发生变化:', newVal);
      },
      immediate: true
    },
    // 监听勾选数量变化，触发布局更新
    checkedCount: {
      handler() {
        this.$nextTick(() => {
          // 窗口resize强制刷新（可选，子组件已监听resize，此处为兜底）
          window.dispatchEvent(new Event('resize'))
        });
      }
    }
  },
  methods: {
    // 处理树形节点勾选（限制最多4个）
    handleCheckChange() {
      const checkedNodes = this.$refs.paramTree.getCheckedNodes();
      const checkedCount = checkedNodes.length;

      // 超过4个时取消最后一个并提示
      if (checkedCount > this.maxCheckCount) {
        this.$message.warning(`最多只能选择${this.maxCheckCount}个参数`);
        const lastNode = checkedNodes[checkedNodes.length - 1];
        this.$refs.paramTree.setChecked(lastNode.value, false, false);
        return;
      }

      // 更新勾选列表和数量
      this.checkedNodes = this.$refs.paramTree.getCheckedNodes();
      this.checkedCount = this.checkedNodes.length;
    }
  }
}
</script>

<style lang="scss" scoped>
.monitoring-container {
  height: 100%;
  box-sizing: border-box;
}

.charts-container {
  width: 100%;
  height: 100%;
  position: relative;
  box-sizing: border-box;
}

/* 1个勾选：占满所有空间 */
.count-1 {
  display: flex;
  flex-direction: column;

  .preset-chart-item {
    width: 100%;
    height: 100%;
    box-sizing: border-box;
  }
}

/* 2个勾选：纵向排布，横向占满，上下各50% */
.count-2 {
  display: flex;
  flex-direction: column;
  gap: 10px; /* 上下图表间距 */

  .preset-chart-item {
    width: 100%;
    height: calc(50% - 5px); /* 减去间距的一半，保证总高度100% */
    box-sizing: border-box;
  }
}

/* 3个/4个勾选：2*2格子布局 */
.count-3,
.count-4 {
  display: flex;
  flex-wrap: wrap;
  gap: 10px; /* 图表间距 */

  .preset-chart-item {
    width: calc(50% - 5px); /* 横向两列，减去间距的一半 */
    height: calc(50% - 5px); /* 纵向两行，减去间距的一半 */
    box-sizing: border-box;
  }
}

/* 图表项容器样式 */
.preset-chart-item {
  position: relative;
  box-sizing: border-box;
}

/* 无勾选提示 */
.no-param-tip {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 18px;
  color: #999;
}
</style>