ALOps_sys1/ALOps_sys_fe/alops-ui/src/views/index.vue

<template>
  <div class="dashboard">
    <h1>唐山烟草智能网络设备运维与问答系统</h1>
    
    <el-row :gutter="20">
      <!-- 设备状态监控 -->
      <el-col :span="12">
        <el-card>
          <h2>设备状态监控</h2>
          <!-- 这里可以添加设备状态监控的具体内容，例如表格或图表 -->
          <el-table :data="deviceStatusData" style="width: 100%">
            <el-table-column prop="name" label="设备名称"></el-table-column>
            <el-table-column prop="location" label="设备位置"></el-table-column>
            <el-table-column prop="cpuUsage" label="CPU使用率"></el-table-column>
            <el-table-column prop="memoryUsage" label="内存使用率"></el-table-column>
            <el-table-column prop="status" label="状态">
              <template slot-scope="scope">
                <el-tag :type="scope.row.status === '正常' ? 'success' : 'danger'">
                  {{ scope.row.status }}
                </el-tag>
              </template>
            </el-table-column>
          </el-table>
        </el-card>
      </el-col>
      
      <!-- 设备状态统计图表 -->
      <el-col :span="12">
        <el-card>
          <h2>检测设备信息 (按状态统计，饼状图)</h2>
          <!-- 这里可以使用echarts或其他图表库来展示饼状图 -->
          <div id="statusChart" style="width: 100%; height: 300px;"></div>
        </el-card>
        
        <el-card>
          <h2>检测设备信息 (按设备类型，饼状图)</h2>
          <div id="typeChart" style="width: 100%; height: 300px;"></div>
        </el-card>
      </el-col>
    </el-row>
    
    <el-row :gutter="20" style="margin-top: 20px;">
      <!-- 设备预警信息 -->
      <el-col :span="12">
        <el-card>
          <h2>设备预警信息</h2>
          <el-table :data="alertData" style="width: 100%">
            <el-table-column prop="time" label="预警时间"></el-table-column>
            <el-table-column prop="device" label="设备名称"></el-table-column>
            <el-table-column prop="location" label="设备位置"></el-table-column>
            <el-table-column prop="level" label="预警等级">
              <template slot-scope="scope">
                <el-tag :type="getTagType(scope.row.level)">
                  {{ scope.row.level }}
                </el-tag>
              </template>
            </el-table-column>
          </el-table>
        </el-card>
      </el-col>
      
      <!-- 预警信息统计 -->
      <el-col :span="12">
        <el-card>
          <h2>预警信息统计</h2>
          <div id="alertStatsChart" style="width: 100%; height: 300px;"></div>
        </el-card>
      </el-col>
    </el-row>
  </div>
</template>

<script>
import * as echarts from 'echarts'
require('echarts/theme/macarons') // echarts theme

export default {
  data() {
    return {
      deviceStatusData: [
        // 示例数据
        { name: '设备1', location: '位置1', cpuUsage: '30%', memoryUsage: '40%', status: '正常' },
        { name: '设备2', location: '位置2', cpuUsage: '70%', memoryUsage: '80%', status: '异常' },
      ],
      alertData: [
        // 示例数据
        { time: '2023-10-01 10:00:00', device: '设备2', location: '位置2', level: '高' },
        { time: '2023-10-01 11:00:00', device: '设备3', location: '位置3', level: '中' },
      ],
    };
  },
  mounted() {
    this.initCharts();
  },
  methods: {
    getTagType(level) {
      const types = { '高': 'danger', '中': 'warning', '低': 'success' };
      return types[level] || 'info';
    },
    initCharts() {
      // 初始化状态统计图表
      const statusChart = echarts.init(document.getElementById('statusChart'));
      statusChart.setOption({
        title: { text: '设备状态统计', subtext: '按状态', left: 'center' },
        tooltip: { trigger: 'item' },
        series: [
          {
            name: '设备状态',
            type: 'pie',
            radius: '50%',
            data: [
              { value: 44, name: '自主房屋' },
              { value: 33, name: '出租房屋' },
              { value: 11, name: '空置房屋' },
              { value: 11, name: '其他' },
            ],
          },
        ],
      });

      // 初始化设备类型统计图表
      const typeChart = echarts.init(document.getElementById('typeChart'));
      typeChart.setOption({
        title: { text: '设备类型统计', subtext: '按设备类型', left: 'center' },
        tooltip: { trigger: 'item' },
        series: [
          {
            name: '设备类型',
            type: 'pie',
            radius: '50%',
            data: [
              { value: 44, name: '自主房屋' },
              { value: 33, name: '出租房屋' },
              { value: 11, name: '空置房屋' },
              { value: 11, name: '其他' },
            ],
          },
        ],
      });

      // 初始化预警信息统计图表
      const alertStatsChart = echarts.init(document.getElementById('alertStatsChart'));
      alertStatsChart.setOption({
        title: { text: '预警信息统计', left: 'center' },
        tooltip: {},
        radar: {
          indicator: [
            { name: '火警类', max: 500 },
            { name: '冲禁类', max: 500 },
            { name: '灾害', max: 500 },
            { name: '群体性', max: 500 },
            { name: '行政类', max: 500 },
            { name: '交通类', max: 500 },
            { name: '重大', max: 500 },
          ],
        },
        series: [{
          name: '预警统计',
          type: 'radar',
          data: [
            {
              value: [75, 452, 64, 94, 44, 0, 29],
              name: '预警次数',
            },
          ],
        }],
      });
    },
  },
};
</script>

<style>
.dashboard {
  padding: 20px;
  background-color: #f0f2f5;
  min-height: 100vh;
}

h1, h2 {
  text-align: center;
}

.el-card {
  margin-bottom: 20px;
}
</style>