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

<template>
  <div class="dashboard-editor-container">

    <el-row :gutter="32">
      <el-col :xs="24" :sm="24" :lg="8">
        <div class="chart-wrapper">
          <div class="card-title"><i class="el-icon-data-line"></i>预警信息统计</div>
          <div class="data-overview">
            <div class="data-item">
              <div class="data-label">预警总数</div>
              <digital :configData="{number:[111]}" />
            </div>
            <div class="data-item">
              <div class="data-label">预警总数</div>
              <digital :configData="{number:[111]}" />
            </div>
            <div class="data-item">
              <div class="data-label">预警总数</div>
              <digital :configData="{number:[111]}" />
            </div>
            <div class="data-item">
              <div class="data-label">预警总数</div>
              <digital :configData="{number:[111]}" />
            </div>
            <div class="data-item">
              <div class="data-label">预警总数</div>
              <digital :configData="{number:[111]}" />
            </div>
            <div class="data-item">
              <div class="data-label">预警总数</div>
              <digital :configData="{number:[111]}" />
            </div>
            <div class="data-item">
              <div class="data-label">预警总数</div>
              <digital :configData="{number:[111]}" />
            </div>
            <div class="data-item">
              <div class="data-label">预警总数</div>
              <digital :configData="{number:[111]}" />
            </div>
            <div class="data-item">
              <div class="data-label">预警总数</div>
              <digital :configData="{number:[111]}" />
            </div>
          </div>
        </div>
      </el-col>
      <el-col :xs="24" :sm="24" :lg="8">
        <div class="chart-wrapper">
          <div class="card-title"><i class="el-icon-pie-chart"></i>检测设备信息</div>
          <pie-chart />
        </div>
      </el-col>
      <el-col :xs="24" :sm="24" :lg="8">
        <div class="chart-wrapper overflow-auto">
          <div class="card-title"><i class="el-icon-monitor"></i>设备预警信息</div>
          
          <div class="div0">
            <div class="div1" v-for="(alert, index) in alerts" :key="index" :class="`alert-level-${alert.level}`">
              <dv-border-box-13 class="div2">
                <el-row>
                  <el-col span="12">
                    <span class="alert-lable">预警时间:{{ alert.time }}</span>
                  </el-col>
                  <el-col span="12">
                    <span class="alert-lable">设备名称:{{ alert.deviceName }}</span>
                  </el-col>
                  <el-col span="12">
                    <span class="alert-lable">设备位置:{{ alert.deviceLocation }}</span>
                  </el-col>
                  <el-col span="12">
                    <span class="alert-lable">预警等级:<span class="alert-lable" :style="{ color: getLevelColor(alert.level) }">{{ alert.level }}</span></span>
                  </el-col>
                  <el-col span="12">
                    <span class="alert-lable">预警信息:{{ alert.message }}</span>
                  </el-col>
                  <el-col span="12">
                    <span class="alert-lable">预警状态:{{ alert.status }}</span>
                  </el-col>
                </el-row>
              </dv-border-box-13>
            </div>
          </div>
        </div>
      </el-col>
    </el-row>
    <el-row style="background:#fff;padding:16px;">
          <div class="card-title"><i class="el-icon-s-data"></i> 设备状态监控</div>
      <dv-scroll-board :config="scrollConfig" style="height:220px;" />
    </el-row>
    
  </div>
</template>

<script>
import PanelGroup from './dashboard/PanelGroup'
import LineChart from './dashboard/LineChart'
import RaddarChart from './dashboard/RaddarChart'
import PieChart from './dashboard/PieChart'
import BarChart from './dashboard/BarChart'
import digital from './dashboard/digital'

const lineChartData = {
  newVisitis: {
    expectedData: [100, 120, 161, 134, 105, 160, 165],
    actualData: [120, 82, 91, 154, 162, 140, 145]
  },
  messages: {
    expectedData: [200, 192, 120, 144, 160, 130, 140],
    actualData: [180, 160, 151, 106, 145, 150, 130]
  },
  purchases: {
    expectedData: [80, 100, 121, 104, 105, 90, 100],
    actualData: [120, 90, 100, 138, 142, 130, 130]
  },
  shoppings: {
    expectedData: [130, 140, 141, 142, 145, 150, 160],
    actualData: [120, 82, 91, 154, 162, 140, 130]
  }
}

export default {
  name: 'Index',
  components: {
    PanelGroup,
    LineChart,
    RaddarChart,
    PieChart,
    BarChart,
    digital
  },
  data() {
    return {
      lineChartData: lineChartData.newVisitis,
      scrollConfig:{
        header: ['设备名称', '设备位置', 'CPU使用率','内存使用率','温度', '健康度', '设备运行时长','采集时间'],
        data: [
          ['行1列1', '行1列2', '行1列3', '行1列4', '行1列5', '行1列6','行1列7', '行1列8'],
          ['行2列1', '行2列2', '行2列3', '行2列4', '行2列5', '行2列6','行2列7', '行2列8'],
          ['行3列1', '行3列2', '行3列3', '行3列4', '行3列5', '行3列6','行3列7', '行3列8'],
          ['行4列1', '行4列2', '行4列3', '行4列4', '行4列5', '行4列6','行4列7', '行4列8'],
          ['行5列1', '行5列2', '行5列3', '行5列4', '行5列5', '行5列6','行5列7', '行5列8'],
          ['行6列1', '行6列2', '行6列3', '行6列4', '行6列5', '行6列6','行6列7', '行6列8'],
          ['行7列1', '行7列2', '行7列3', '行7列4', '行7列5', '行7列6','行7列7', '行7列8'],
          ['行8列1', '行8列2', '行8列3', '行8列4', '行8列5', '行8列6','行8列7', '行8列8'],
          ['行9列1', '行9列2', '行9列3', '行9列4', '行9列5', '行9列6','行9列7', '行9列8'],
          ['行10列1', '行10列2', '行10列3', '行10列4', '行10列5', '行10列6','行10列7', '行10列8']
        ],
        headerBGC:'#f8f8f9',
        headerHeight:60,
        oddRowBGC:'#f5f7fa',
        evenRowBGC:'#fff',
      },
      alerts: [
        {
          time: '2021-10-16 14:54:11',
          deviceName: 'PLC远程监控系统',
          deviceLocation: '污水处理监控系统',
          level: 1,
          message: '2#电机运行状态等于1',
          status: '触发值: 1'
        },
        {
          time: '2021-10-16 14:54:04',
          deviceName: 'PLC远程监控系统',
          deviceLocation: '污水处理监控系统',
          level: 0,
          message: '2#电机运行状态报警恢复',
          status: '触发值: 0'
        },
        {
          time: '2021-10-16 14:54:11',
          deviceName: 'PLC远程监控系统',
          deviceLocation: '污水处理监控系统',
          level: 1,
          message: '2#电机运行状态等于1',
          status: '触发值: 1'
        },
        {
          time: '2021-10-16 14:54:04',
          deviceName: 'PLC远程监控系统',
          deviceLocation: '污水处理监控系统',
          level: 0,
          message: '2#电机运行状态报警恢复',
          status: '触发值: 0'
        },
        // 可以继续添加更多预警信息
      ]
    }
  },
  methods: {
    handleSetLineChartData(type) {
      this.lineChartData = lineChartData[type]
    },
    getLevelColor(level) {
      const levelColors = {
        0: 'green',
        1: 'orange',
        2: 'red'
      };
      return levelColors[level] || 'black'; // 默认颜色
    }
  }
}
</script>

<style lang="scss" scoped>
.dashboard-editor-container {
  padding: 32px;
  background-color: rgb(240, 242, 245);
  position: relative;

  .chart-wrapper {
    background: #fff;
    padding: 16px;
    margin-bottom: 32px;
    height: 420px;
  }
}

@media (max-width:1024px) {
  .chart-wrapper {
    padding: 8px;
  }
}
.dv-scroll-board{
  color: #3d3d3d;
}
.card-title {
  font-size: 16px;
  margin-bottom: 15px;
  display: flex;
  align-items: center;
  color: #3d3d3d;
  font-weight: bold;
}

.card-title i {
  margin-right: 8px;
  font-size: 18px;
}
    
.data-overview {
  display: flex;
  flex-wrap: wrap;
  gap: 15px;
}

.data-item {
  flex: 1;
  min-width: 30%;
  text-align: center;
  padding: 15px 10px;
  background: #f5f7fa;
  border-radius: 8px;
  transition: all 0.3s ease;
}

.data-item:hover {
  background: #f1f2f4;
  transform: translateY(-3px);
  box-shadow: 0 5px 15px rgba(0, 0, 0, 0.2);
}

.data-value {
  font-size: 24px;
  font-weight: bold;
  margin: 10px 0;
  color: #3d3d3d;
}

.data-label {
  font-size: 14px;
  color: #3d3d3d;
}
.alert-list .div0 {
  list-style-type: none;
  padding: 0;
}
.overflow-auto {
  overflow: auto;
}
.alert-list {
  background-color: #fff;
  padding: 16px;
  margin-bottom: 32px;
}
 
.alert-list .div1 {
  display: flex;
  justify-content: space-between;
}
.div1{
  margin-bottom: 5px;
}
.div2{
  padding: 20px 16px;
}
 
.alert-time, .alert-device-name, .alert-device-location, .alert-message, .alert-status {
  flex: 1;
}
 
.alert-level {
  flex: 0.5;
  text-align: center;
}
</style>