【web】 首页处理

ALOps_sys_fe/alops-ui/package.json

@@ -24,6 +24,7 @@
     "url": "https://gitee.com/y_project/RuoYi-Vue.git"
   },
   "dependencies": {
+    "@jiaminghi/data-view": "^2.10.0",
     "@riophae/vue-treeselect": "0.4.0",
     "axios": "0.28.1",
     "clipboard": "2.0.8",

ALOps_sys_fe/alops-ui/src/api/device/files.js

@@ -1,6 +1,6 @@
 import request from '@/utils/request'
 import { parseStrEmpty } from "@/utils/ruoyi";
-const api = '/equipment/'
+const api = '/device/files/'
 
 // 查询详细
 export function getDict() {
@@ -13,8 +13,8 @@ export function getDict() {
 // 查询列表
 export function list(query) {
   return request({
-    url: api + 'queryByVO',
+    url: api + 'list',
-    method: 'get',
+    method: 'post',
     params: query
   })
 }

ALOps_sys_fe/alops-ui/src/main.js

@@ -35,6 +35,7 @@ import ImagePreview from "@/components/ImagePreview"
 import DictTag from '@/components/DictTag'
 // 字典数据组件
 import DictData from '@/components/DictData'
+import dataV from '@jiaminghi/data-view'
 
 // 全局方法挂载
 Vue.prototype.getDicts = getDicts
@@ -58,6 +59,7 @@ Vue.component('ImagePreview', ImagePreview)
 
 Vue.use(directive)
 Vue.use(plugins)
+Vue.use(dataV)
 DictData.install()
 
 /**

ALOps_sys_fe/alops-ui/src/views/QandA/Aiassistant/index.vue

@@ -10,7 +10,7 @@
       
       <div class="service-container">
         <!-- 左侧常见问题 -->
-        <div class="faq-section">
+        <!-- <div class="faq-section">
           <h3>常见问题</h3>
           <div 
             v-for="(faq, index) in faqs" 
@@ -20,7 +20,7 @@
           >
             {{ faq.question }}
           </div>
-        </div>
+        </div> -->
         
         <!-- 右侧聊天区域 -->
         <div class="chat-section">
@@ -205,7 +205,7 @@ export default {
       padding: 15px;
     }
     .chat-section {
-      width: 70%;
+      width: 100%;
       display: flex;
       flex-direction: column;
     }

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

@@ -1,187 +1,300 @@
 <template>
-  <div class="dashboard">
+  <div class="dashboard-editor-container">
-    <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-row :gutter="32">
-      <el-col :span="12">
+      <el-col :xs="24" :sm="24" :lg="8">
-        <el-card>
+        <div class="chart-wrapper">
-          <h2>检测设备信息 (按状态统计，饼状图)</h2>
+          <div class="card-title"><i class="el-icon-data-line"></i>预警信息统计</div>
-          <!-- 这里可以使用echarts或其他图表库来展示饼状图 -->
+          <div class="data-overview">
-          <div id="statusChart" style="width: 100%; height: 300px;"></div>
+            <div class="data-item">
-        </el-card>
+              <div class="data-label">预警总数</div>
-        
+              <digital :configData="{number:[111]}" />
-        <el-card>
+            </div>
-          <h2>检测设备信息 (按设备类型，饼状图)</h2>
+            <div class="data-item">
-          <div id="typeChart" style="width: 100%; height: 300px;"></div>
+              <div class="data-label">预警总数</div>
-        </el-card>
+              <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-row>
+      <el-col :xs="24" :sm="24" :lg="8">
-    
+        <div class="chart-wrapper">
-    <el-row :gutter="20" style="margin-top: 20px;">
+          <div class="card-title"><i class="el-icon-pie-chart"></i>检测设备信息</div>
-      <!-- 设备预警信息 -->
+          <pie-chart />
-      <el-col :span="12">
+        </div>
-        <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 :xs="24" :sm="24" :lg="8">
+        <div class="chart-wrapper">
+          <div class="card-title"><i class="el-icon-monitor"></i>设备预警信息</div>
           
-      <!-- 预警信息统计 -->
+          <div class="div0">
-      <el-col :span="12">
+            <div class="div1" v-for="(alert, index) in alerts" :key="index" :class="`alert-level-${alert.level}`">
-        <el-card>
+              <dv-border-box-13 class="div2">
-          <h2>预警信息统计</h2>
+                <el-row>
-          <div id="alertStatsChart" style="width: 100%; height: 300px;"></div>
+                  <el-col span="12">
-        </el-card>
+                    <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 * as echarts from 'echarts'
+import PanelGroup from './dashboard/PanelGroup'
-require('echarts/theme/macarons') // echarts theme
+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 {
-      deviceStatusData: [
+      lineChartData: lineChartData.newVisitis,
-        // 示例数据
+      scrollConfig:{
-        { name: '设备1', location: '位置1', cpuUsage: '30%', memoryUsage: '40%', status: '正常' },
+        header: ['设备名称', '设备位置', 'CPU使用率','内存使用率','温度', '健康度', '设备运行时长','采集时间'],
-        { name: '设备2', location: '位置2', cpuUsage: '70%', memoryUsage: '80%', status: '异常' },
+        data: [
-      ],
+          ['行1列1', '行1列2', '行1列3', '行1列4', '行1列5', '行1列6','行1列7', '行1列8'],
-      alertData: [
+          ['行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'],
-        { time: '2023-10-01 10:00:00', device: '设备2', location: '位置2', level: '高' },
+          ['行4列1', '行4列2', '行4列3', '行4列4', '行4列5', '行4列6','行4列7', '行4列8'],
-        { time: '2023-10-01 11:00:00', device: '设备3', location: '位置3', level: '中' },
+          ['行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'],
-  mounted() {
+          ['行9列1', '行9列2', '行9列3', '行9列4', '行9列5', '行9列6','行9列7', '行9列8'],
-    this.initCharts();
+          ['行10列1', '行10列2', '行10列3', '行10列4', '行10列5', '行10列6','行10列7', '行10列8']
-  },
-  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: '其他' },
-            ],
-          },
         ],
-      });
+        headerBGC:'#f8f8f9',
-
+        headerHeight:60,
-      // 初始化设备类型统计图表
+        oddRowBGC:'#f5f7fa',
-      const typeChart = echarts.init(document.getElementById('typeChart'));
+        evenRowBGC:'#fff',
-      typeChart.setOption({
+      },
-        title: { text: '设备类型统计', subtext: '按设备类型', left: 'center' },
+      alerts: [
-        tooltip: { trigger: 'item' },
+        {
-        series: [
+          time: '2021-10-16 14:54:11',
-          {
+          deviceName: 'PLC远程监控系统',
-            name: '设备类型',
+          deviceLocation: '污水处理监控系统',
-            type: 'pie',
+          level: 1,
-            radius: '50%',
+          message: '2#电机运行状态等于1',
-            data: [
+          status: '触发值: 1'
-              { 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: '预警统计',
+          time: '2021-10-16 14:54:04',
-          type: 'radar',
+          deviceName: 'PLC远程监控系统',
-          data: [
+          deviceLocation: '污水处理监控系统',
-            {
+          level: 0,
-              value: [75, 452, 64, 94, 44, 0, 29],
+          message: '2#电机运行状态报警恢复',
-              name: '预警次数',
+          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>
+<style lang="scss" scoped>
-.dashboard {
+.dashboard-editor-container {
-  padding: 20px;
+  padding: 32px;
-  background-color: #f0f2f5;
+  background-color: rgb(240, 242, 245);
-  min-height: 100vh;
+  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;
 }
 
-h1, h2 {
+.data-item {
+  flex: 1;
+  min-width: 30%;
   text-align: center;
+  padding: 15px 10px;
+  background: #f5f7fa;
+  border-radius: 8px;
+  transition: all 0.3s ease;
 }
 
-.el-card {
+.data-item:hover {
-  margin-bottom: 20px;
+  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;
+}
+ 
+.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>

ALOps_sys_fe/alops-ui/src/views/index_v1.vue

@@ -1,98 +0,0 @@
-<template>
-  <div class="dashboard-editor-container">
-
-    <panel-group @handleSetLineChartData="handleSetLineChartData" />
-
-    <el-row style="background:#fff;padding:16px 16px 0;margin-bottom:32px;">
-      <line-chart :chart-data="lineChartData" />
-    </el-row>
-
-    <el-row :gutter="32">
-      <el-col :xs="24" :sm="24" :lg="8">
-        <div class="chart-wrapper">
-          <raddar-chart />
-        </div>
-      </el-col>
-      <el-col :xs="24" :sm="24" :lg="8">
-        <div class="chart-wrapper">
-          <pie-chart />
-        </div>
-      </el-col>
-      <el-col :xs="24" :sm="24" :lg="8">
-        <div class="chart-wrapper">
-          <bar-chart />
-        </div>
-      </el-col>
-    </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'
-
-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
-  },
-  data() {
-    return {
-      lineChartData: lineChartData.newVisitis
-    }
-  },
-  methods: {
-    handleSetLineChartData(type) {
-      this.lineChartData = lineChartData[type]
-    }
-  }
-}
-</script>
-
-<style lang="scss" scoped>
-.dashboard-editor-container {
-  padding: 32px;
-  background-color: rgb(240, 242, 245);
-  position: relative;
-
-  .chart-wrapper {
-    background: #fff;
-    padding: 16px 16px 0;
-    margin-bottom: 32px;
-  }
-}
-
-@media (max-width:1024px) {
-  .chart-wrapper {
-    padding: 8px;
-  }
-}
-</style>