dtScreen/src/components/ui/DeviceStatusPanel.vue

<template>
  <div class="device-status-panel">
    <TechTabs v-model="onlineStatusActiveTab" type="segmented"   @tab-click="handleTabClick">
      <TechTabPane label="信号机" name="signalMachine" style="height: 100%;">
        <DynamicDonutChart v-if="onlineStatusDisplayData" :chartData="onlineStatusDisplayData.chartData"
          :centerTitle="onlineStatusDisplayData.centerTitle" :centerSubTitle="onlineStatusDisplayData.centerSubTitle" customHeight="133px"/>
      </TechTabPane>
      <TechTabPane label="检测器" name="detector">
        <DynamicDonutChart v-if="onlineStatusDisplayData" :chartData="onlineStatusDisplayData.chartData"
          :centerTitle="onlineStatusDisplayData.centerTitle" :centerSubTitle="onlineStatusDisplayData.centerSubTitle" customHeight="133px"/>
      </TechTabPane>
      <TechTabPane label="红路灯" name="trafficLight">
        <DynamicDonutChart v-if="onlineStatusDisplayData" :chartData="onlineStatusDisplayData.chartData"
          :centerTitle="onlineStatusDisplayData.centerTitle" :centerSubTitle="onlineStatusDisplayData.centerSubTitle" customHeight="133px"/>
      </TechTabPane>
    </TechTabs>
  </div>
</template>

<script>
import TechTabs from '@/components/ui/TechTabs.vue';
import TechTabPane from '@/components/ui/TechTabPane.vue';
import DynamicDonutChart from '@/components/ui/DynamicDonutChart.vue';


const mockDeviceData = {
  'signalMachine': {
    centerTitle: '98%',
    centerSubTitle: '980/1000',
    chartData: [
      { name: '在线', value: 980, color: '#32F6F8' },
      { name: '离线', value: 20, color: '#E4D552' }
    ]
  },
  'detector': {
    centerTitle: '85%',
    centerSubTitle: '425/500',
    chartData: [
      { name: '正常', value: 425, color: '#32F6F8' },
      { name: '故障', value: 50, color: '#faad14' },
    ]
  },
  'trafficLight': {
    centerTitle: '99%',
    centerSubTitle: '1188/1200',
    chartData: [
      { name: '正常发光', value: 1188, color: '#32F6F8' },
      { name: '灯组损坏', value: 12, color: '#ff4d4f' }
    ]
  }
};

export default {
  name: 'DeviceStatusPanel',
  components: {
    TechTabs,
    TechTabPane,
    DynamicDonutChart
  },
  data() {
    return {
      // 在线状态面板
      onlineStatusActiveTab: 'detector',
      onlineStatusDisplayData: mockDeviceData['detector'],
    };
  },
  computed: {
    // 获取当前激活 Tab 的数据
    currentData() {
      return this.tabs[this.activeIndex].data;
    }
  },
  mounted() {
    
  },
  beforeDestroy() {
    
  },
  methods: {
    // 监听 Tab 切换事件
    handleTabClick(selectedTabName) {
      console.log('用户切换了设备类型：', selectedTabName);

      // 从 mock 字典中取出对应的数据并赋值，图表会自动响应式更新！
      if (mockDeviceData[selectedTabName]) {
        this.onlineStatusDisplayData = mockDeviceData[selectedTabName];
      }
    },
  }
};
</script>

<style scoped>
.device-status-panel {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  /* box-sizing: border-box; */
}
</style>