dtScreen/src/views/Home.vue

<template>
  <DashboardLayout>
    <!-- 天气 -->
    <template #header-left>
      <WeatherWidget />
    </template>
    <!-- 日期 -->
    <template #header-right>
      <DateTimeWidget />
    </template>

    <!-- 地图 -->
    <template #map>
        <TongzhouTrafficMap
          amapKey="db2da7e3e248c3b2077d53fc809be63f"
          securityJsCode="a7413c674852c5eaf01d90813c5b7ef6"
        />
    </template>

    <template #left>
      <div class="panel-list">
        <div class="panel-item">
          <PanelContainer title="在线状态">
  
            <TechTabs v-model="onlineStatusActiveTab" type="segmented" autoPlay  @tab-click="handleTabClick">
              <TechTabPane label="信号机" name="signalMachine" style="height: 100%;">
                <DynamicDonutChart v-if="onlineStatusDisplayData" :chartData="onlineStatusDisplayData.chartData"
                  :centerTitle="onlineStatusDisplayData.centerTitle" :centerSubTitle="onlineStatusDisplayData.centerSubTitle" customHeight="163px" />
              </TechTabPane>
              <TechTabPane label="检测器" name="detector">
                <DynamicDonutChart v-if="onlineStatusDisplayData" :chartData="onlineStatusDisplayData.chartData"
                  :centerTitle="onlineStatusDisplayData.centerTitle" :centerSubTitle="onlineStatusDisplayData.centerSubTitle" customHeight="163px"/>
              </TechTabPane>
              <TechTabPane label="红绿灯" name="trafficLight">
                <DynamicDonutChart v-if="onlineStatusDisplayData" :chartData="onlineStatusDisplayData.chartData"
                  :centerTitle="onlineStatusDisplayData.centerTitle" :centerSubTitle="onlineStatusDisplayData.centerSubTitle" customHeight="163px"/>
              </TechTabPane>
            </TechTabs>
  
          </PanelContainer>
        </div>
        <div class="panel-item">
          <PanelContainer title="控制模式">
            <TickDonutChart 
              :chartData="controlInfoData"
              centerTitle="650个"
              centerSubTitle="控制信息"
            />
          </PanelContainer>
        </div>
        <div class="panel-item">
          <PanelContainer title="故障报警">
            <AlarmMessageList 
              :listData="alarmData" 
              @ignore="onAlarmIgnore" 
              @view="onAlarmView" 
            />
          </PanelContainer>
        </div>
      </div>
    </template>

    <template #right>
      <div class="panel-list">
        <div class="panel-item">
          <PanelContainer title="设备状态">
  
            <TechTabs v-model="onlineStatusActiveTab" type="segmented" autoPlay @tab-click="handleTabClick">
              <TechTabPane label="信号机" name="signalMachine" style="height: 100%;">
                <DynamicDonutChart v-if="onlineStatusDisplayData" :chartData="onlineStatusDisplayData.chartData"
                  :centerTitle="onlineStatusDisplayData.centerTitle" :centerSubTitle="onlineStatusDisplayData.centerSubTitle"/>
              </TechTabPane>
              <TechTabPane label="检测器" name="detector">
                <DynamicDonutChart v-if="onlineStatusDisplayData" :chartData="onlineStatusDisplayData.chartData"
                  :centerTitle="onlineStatusDisplayData.centerTitle" :centerSubTitle="onlineStatusDisplayData.centerSubTitle"/>
              </TechTabPane>
              <TechTabPane label="红绿灯" name="trafficLight">
                <DynamicDonutChart v-if="onlineStatusDisplayData" :chartData="onlineStatusDisplayData.chartData"
                  :centerTitle="onlineStatusDisplayData.centerTitle" :centerSubTitle="onlineStatusDisplayData.centerSubTitle"/>
              </TechTabPane>
            </TechTabs>
  
          </PanelContainer>
        </div>
        <div class="panel-item">
          <PanelContainer title="勤务执行" class="table-panel">
            <TechTable :columns="tableColumns" :data="tableData" height="263px">
      
              <template #level="{ row }">
                <span :style="{ color: row.level === '二级' ? '#FFDF0C' : 'inherit' }">
                  {{ row.level }}
                </span>
              </template>

              <template #status="{ row }">
                <span :style="{ color: row.status === '进行中' ? '#FFDF0C' : 'inherit' }">
                  {{ row.status }}
                </span>
              </template>

              <template #action="{ row }">
                <span 
                  class="action-btn" 
                  @click="handleView(row)"
                >
                  查看
                </span>
              </template>

            </TechTable>
          </PanelContainer>
        </div>
        <div class="panel-item">
          <PanelContainer title="关键路口" class="table-panel">
            <TechTable 
              :columns="keyIntersectionColumns" 
              :data="keyIntersectionData"
              height="263px"
              @row-click="onIntersectionRowClick"
            />
          </PanelContainer>
        </div>
      </div>
    </template>

    <template #center>
      
    </template>

  </DashboardLayout>
</template>

<script>
import DashboardLayout from '@/layouts/DashboardLayout.vue';
import WeatherWidget from '@/components/ui/WeatherWidget.vue';
import DateTimeWidget from '@/components/ui/DateTimeWidget.vue';
import PanelContainer from '@/components/ui/PanelContainer.vue';
import DynamicDonutChart from '@/components/ui/DynamicDonutChart.vue';
import TechTabs from '@/components/ui/TechTabs.vue';
import TechTabPane from '@/components/ui/TechTabPane.vue';
import TickDonutChart from '@/components/ui/TickDonutChart.vue';
import AlarmMessageList from '@/components/ui/AlarmMessageList.vue';
import TechTable from '@/components/ui/TechTable.vue';
import TongzhouTrafficMap from '@/components/TongzhouTrafficMap.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' },
      { name: '掉线', value: 25, color: '#ff4d4f' }
    ]
  },
  'trafficLight': {
    centerTitle: '99%',
    centerSubTitle: '1188/1200',
    chartData: [
      { name: '正常发光', value: 1188, color: '#32F6F8' },
      { name: '灯组损坏', value: 12, color: '#ff4d4f' }
    ]
  }
};

export default {
  name: "HomePage",
  components: {
    DashboardLayout,
    WeatherWidget,
    DateTimeWidget,
    PanelContainer,
    DynamicDonutChart,
    TechTabs,
    TechTabPane,
    TickDonutChart,
    AlarmMessageList,
    TechTable,
    TongzhouTrafficMap
  },
  data() {
    return {
      // 在线状态面板
      onlineStatusActiveTab: 'detector',
      onlineStatusDisplayData: mockDeviceData['detector'],
      controlInfoData: [
        { name: '定周期控制', value: 400, color: '#33a3ff' }, // 蓝色
        { name: '感应控制',   value: 50,  color: '#e6734d' }, // 橙色
        { name: '干线协调',   value: 200, color: '#10b981' }, // 绿色
        { name: '黄闪控制',   value: 6,   color: '#eab308' }, // 黄色
        { name: '关灯控制',   value: null,color: '#64748b' }, // 灰色 (没有值传入null即可隐藏数字)
        { name: '自适应控制', value: 10,  color: '#2dd4bf' }, // 青色
        { name: '中心控制',   value: null,color: '#8b5cf6' }, // 紫色
        { name: '全红控制',   value: null,color: '#f43f5e' }  // 红色
      ],
      // 消息模拟数据
      alarmData: [
        {
          id: '1',
          title: '通讯中断',
          type: 'error', // 渲染为红色
          time: '16:28:28',
          description: '中关村大街-科学院南路口-设备离线'
        },
        {
          id: '2',
          title: '2.降级黄闪',
          type: 'warning', // 渲染为黄色
          time: '', // 
          description: '中关村大街-科学院南路口-设备离线'
        },
        {
          id: '3',
          title: '3.降级黄闪',
          type: 'warning',
          time: '16:28:28',
          description: '中关村大街-科学院南路口-设备离线'
        }
      ],
      // 1. 表头
      tableColumns: [
        { label: '序号', key: 'id', width: '60px' },
        { label: '名称', key: 'name' },
        { label: '执行人', key: 'executor' },
        { label: '等级', key: 'level' },
        { label: '状态', key: 'status' },
        { label: '操作', key: 'action', width: '80px' }
      ],
      // 2. 模拟数据源
      tableData: [
        { id: 1, name: '测试', executor: '测试', level: '一级', status: '未开始' },
        { id: 2, name: '张飞', executor: '张飞', level: '一级', status: '未开始' },
        { id: 3, name: '关将', executor: '关将', level: '二级', status: '进行中' },
        { id: 4, name: '刘备', executor: '刘备', level: '一级', status: '未开始' },
        { id: 5, name: '孙权', executor: '孙权', level: '一级', status: '未开始' },
      ],
      // 1. 表头
      keyIntersectionColumns: [
        { label: '路口', key: 'intersection', align: 'left' }, // 路口名称较长，建议左对齐更好看
        { label: '运营模式', key: 'mode', width: '120px' },
        { label: '方案号', key: 'plan', width: '80px' }
      ],
      // 2. 模拟数据源 (完美还原截图内容)
      keyIntersectionData: [
        { intersection: '实行东街双园路交叉路口', mode: '定周期控制', plan: '4' },
        { intersection: '实行东街双园路交叉路口', mode: '自适应控制', plan: '1' },
        { intersection: '实行东街双园路交叉路口', mode: '感应控制', plan: '5' }
      ],
      // 搜索数据
      currentMapSearch: 'all',
      mapSearchOptions: [
        {label: '全部', value: 'all' },
        {label: '选项2', value: '1' },
        {label: '选项3', value: '2' },
      ]
    };
  },
  mounted() {

  },
  methods: {
    // 监听 Tab 切换事件
    handleTabClick(selectedTabName) {
      console.log('用户切换了设备类型：', selectedTabName);

      // 从 mock 字典中取出对应的数据并赋值，图表会自动响应式更新！
      if (mockDeviceData[selectedTabName]) {
        this.onlineStatusDisplayData = mockDeviceData[selectedTabName];
      }
    },
    // 处理忽略逻辑
    onAlarmIgnore({ item, index }) {
      console.log('点击了忽略:', item.title);
      // 真实业务中可能会调接口，这里我们可以演示本地移除：
      // this.alarmData.splice(index, 1);
    },
    // 处理查看逻辑
    onAlarmView({ item, index }) {
      console.log('点击了查看:', item.title);
      // 这里可以触发打开一个弹窗 (调用你之前的 SmartDialog 或者路由跳转)
    },
    handleView(row) {
      console.log('点击了查看，当前行数据：', row);
      // 这里可以触发弹窗或路由跳转
    },
    onIntersectionRowClick({ row, index }) {
      console.log(`用户点击了第 ${index + 1} 行，路口名称是：`, row.intersection);
      
    },
    // 处理搜索
    handleSearch() {
      console.log('搜索', this.currentMapSearch);
    }
  }
}
</script>
<style scoped>
.panel-list {
  display: flex;
  flex-direction: column;
  gap: 16px;
}
.panel-item {
  height: 254px;
}
.table-panel ::v-deep .panel-content {
  padding: 0;
}
.action-btn {
  color: #c4d7f0;
  cursor: pointer;
  transition: color 0.3s;
  user-select: none;
}
.action-btn:hover {
  color: #32F6F8;
  text-decoration: underline;
}
.map-legend-pos {
  position: absolute;
  bottom: 100px;
  right: 0;
}
.top-search-pos {
  position: absolute;
  top: 0;
  right: 0;
  display: flex;
  flex-direction: row;
  column-gap: 9px;
}
</style>