[Feat 0000]支架检测模块开发

src/views/vent/monitorManager/betKy/index.vue

@@ -1,14 +1,27 @@
 <template>
   <div class="pressure-monitor">
-    <div class="header">
-      <h2>矿压监测系统</h2>
-      <div class="time-display">{{ currentTime }}</div>
-    </div>
-
+    <!-- <div class="device-selector">
+      <a-select style="width: 220px" v-model:value="selectedDeviceId" allowClear placeholder="请选择" class="code-mode-select" @change="changeSelect">
+        <a-select-option v-for="item in IdList" :key="item.deviceId" :value="item.strname" />
+      </a-select>
+    </div> -->
     <div class="chart-container">
       <div ref="chartEl" class="chart"></div>
     </div>
-
+    <div class="table-container">
+      <MonitorTable
+        ref="MonitorDataTable"
+        class="monitor-table"
+        :dataSource="dataSource"
+        :columnsType="deviceType"
+        @selectRow="getSelectRow"
+        :scroll="{ y: scroll.y - 40 }"
+        design-scope="gate-monitor"
+        title="支架监测"
+        :isShowPagination="false"
+      >
+      </MonitorTable>
+    </div>
     <div class="info-panel">
       <div class="legend-section">
         <h3>状态说明</h3>
@@ -21,7 +34,7 @@
       </div>
 
       <div class="range-section">
-        <h3>数据范围(kPa)</h3>
+        <h3>数据范围</h3>
         <div class="range-grid">
           <div v-for="(item, idx) in dataRanges" :key="idx" class="range-item">
             <span class="color-indicator" :style="{ backgroundColor: item.color }"></span>
@@ -34,186 +47,229 @@
 </template>
 
 <script setup lang="ts">
-  import { ref, onMounted, computed } from 'vue';
-  import * as echarts from 'echarts';
-
-  const chartEl = ref<HTMLElement>();
-  const currentTime = computed(() => new Date().toLocaleString());
-
-  const colorRanges = [
-    { min: -Infinity, max: 0, color: '#999999', label: '异常数据' },
-    { min: 0, max: 252, color: '#5470c6', label: '初撑力不足' },
-    { min: 252, max: 375, color: '#91cc75', label: '正常' },
-    { min: 375, max: 425, color: '#fac858', label: '轻微来压' },
-    { min: 425, max: 475, color: '#ee6666', label: '强来压' },
-    { min: 475, max: Infinity, color: '#fc8452', label: '剧烈来压' },
-  ];
-  const dataRanges = [
-    { min: -Infinity, max: 0, color: '#999', label: '<0' },
-    { min: 0, max: 252, color: '#5470c6', label: '0-252' },
-    { min: 252, max: 375, color: '#91cc75', label: '252-375' },
-    { min: 375, max: 425, color: '#fac858', label: '375-425' },
-    { min: 425, max: 475, color: '#ee6666', label: '425-475' },
-    { min: 475, max: Infinity, color: '#fc8452', label: '>475' },
-  ];
-
-  const legendData = colorRanges.map((item) => ({
-    color: item.color,
-    label: item.label,
-  }));
-
-  onMounted(() => {
-    if (!chartEl.value) return;
-
-    const chart = echarts.init(chartEl.value);
-    const data = Array.from({ length: 50 }, () => Math.floor(Math.random() * 700) - 100);
-
-    const option = {
-      tooltip: {
-        trigger: 'axis',
-        formatter: (params: any) => {
-          const value = params[0].value;
-          const range = colorRanges.find((r) => value >= r.min && value < r.max);
-          return `${params[0].dataIndex + 1}#<br/>
+import { ref, onMounted, computed, reactive } from 'vue';
+import * as echarts from 'echarts';
+import { list } from './main.api';
+import MonitorTable from '../comment/MonitorTable.vue';
+import GroupMonitorTable from '../comment/GroupMonitorTable.vue';
+const chartEl = ref<HTMLElement>();
+const currentTime = computed(() => new Date().toLocaleString());
+const scroll = reactive({
+  y: 230,
+});
+const deviceType = ref('Minepressure');
+const dataSource = ref<Array<any>>([]);
+const IdList = ref<Array<{ deviceId: string; strname: string }>>([]);
+const chartData = ref<Array<any>>([]);
+const chartDataShow = ref<Array<any>>([]);
+const selectRowIndex = ref(-1); // 选中行
+const colorRanges = [
+  { min: -Infinity, max: 0, color: '#999999', label: '异常数据' },
+  { min: 0, max: 252, color: '#5470c6', label: '初撑力不足' },
+  { min: 252, max: 375, color: '#91cc75', label: '正常' },
+  { min: 375, max: 425, color: '#fac858', label: '轻微来压' },
+  { min: 425, max: 475, color: '#ee6666', label: '强来压' },
+  { min: 475, max: Infinity, color: '#fc8452', label: '剧烈来压' },
+];
+const dataRanges = [
+  { min: -Infinity, max: 0, color: '#999', label: '<0' },
+  { min: 0, max: 252, color: '#5470c6', label: '0-252' },
+  { min: 252, max: 375, color: '#91cc75', label: '252-375' },
+  { min: 375, max: 425, color: '#fac858', label: '375-425' },
+  { min: 425, max: 475, color: '#ee6666', label: '425-475' },
+  { min: 475, max: Infinity, color: '#fc8452', label: '>475' },
+];
+
+const legendData = colorRanges.map((item) => ({
+  color: item.color,
+  label: item.label,
+}));
+async function getDataSource() {
+  const res = await list({ devicetype: 'Minepressure', pagetype: 'normal' });
+  const dataArr = res.msgTxt[0].datalist || [];
+  dataSource.value = [];
+  IdList.value = [];
+  dataArr.forEach((data) => {
+    const readData = data.readData;
+    chartData.value.push(Object.values(readData));
+    chartDataShow.value = chartData.value[0];
+    data = Object.assign(data, readData);
+    dataSource.value.push(data);
+    IdList.value.push({
+      deviceId: data.deviceID,
+      strname: data.strname,
+    });
+  });
+}
+// 切换检测数据
+async function getSelectRow(selectRow, index) {
+  if (!selectRow) return;
+  selectRowIndex.value = index;
+  chartDataShow.value = chartData.value[index];
+  initChart();
+}
+function initChart() {
+  if (!chartEl.value) return;
+  const chart = echarts.init(chartEl.value);
+  const data = chartDataShow.value;
+
+  const option = {
+    tooltip: {
+      trigger: 'axis',
+      formatter: (params: any) => {
+        const value = params[0].value;
+        const range = colorRanges.find((r) => value >= r.min && value < r.max);
+        return `${params[0].dataIndex + 1}#<br/>
                 值: ${value}kPa<br/>
                 状态: ${range?.label || '未知'}`;
-        },
       },
-      xAxis: {
-        type: 'category',
-        data: data.map((_, i) => `${i + 1}#`),
-        axisLabel: {
-          interval: 1,
-          rotate: 45,
-        },
+    },
+    dataZoom: [
+      {
+        type: 'inside',
+        start: 0,
+        end: 20,
+        xAxisIndex: [0],
       },
-      yAxis: {
-        type: 'value',
-        name: '矿压值(kPa)',
-        min: -50,
-        max: 600,
+      {
+        type: 'slider',
+        start: 0,
+        end: 20,
+        xAxisIndex: [0],
+        bottom: 10,
+        height: 20,
       },
-      series: [
-        {
-          data: data.map((value) => ({
-            value,
-            itemStyle: {
-              color: colorRanges.find((r) => value >= r.min && value < r.max)?.color,
-            },
-          })),
-          type: 'bar',
-          barWidth: '60%',
-          label: {
-            show: true,
-            position: 'top',
-            formatter: '{c}',
+    ],
+    xAxis: {
+      type: 'category',
+      data: data.map((_, i) => `${i + 1}#`),
+      axisLabel: {
+        interval: 1,
+        rotate: 45,
+      },
+    },
+    yAxis: {
+      type: 'value',
+      name: '矿压值(kPa)',
+      min: -50,
+      max: 600,
+    },
+    series: [
+      {
+        data: data.map((value) => ({
+          value,
+          itemStyle: {
+            color: colorRanges.find((r) => value >= r.min && value < r.max)?.color,
           },
+        })),
+        type: 'bar',
+        barWidth: '60%',
+        label: {
+          show: true,
+          position: 'top',
+          formatter: '{c}',
         },
-      ],
-      grid: {
-        left: '3%',
-        right: '4%',
-        bottom: '15%',
-        containLabel: true,
       },
-    };
+    ],
+    grid: {
+      left: '3%',
+      right: '4%',
+      bottom: '15%',
+      containLabel: true,
+    },
+  };
+  chart.setOption(option);
+  window.addEventListener('resize', () => chart.resize());
+}
 
-    chart.setOption(option);
-    window.addEventListener('resize', () => chart.resize());
-  });
+onMounted(async () => {
+  await getDataSource();
+  initChart();
+});
 </script>
 
 <style scoped>
-  .pressure-monitor {
-    width: 100%;
-    height: 100%;
-    padding: 10px 10px 15px 10px;
-    box-sizing: border-box;
-    position: relative;
-  }
-
-  .header {
-    display: flex;
-    justify-content: space-between;
-    align-items: center;
-    margin-bottom: 20px;
-    padding-bottom: 10px;
-    border-bottom: 1px solid #093ff1;
-  }
-
-  .header h2 {
-    color: #fff;
-    font-size: 24px;
-    margin: 0;
-  }
-
-  .time-display {
-    color: #fff;
-    font-size: 14px;
-  }
-
-  .chart-container {
-    width: 100%;
-    height: 500px;
-    border-radius: 8px;
-    padding: 15px;
-  }
-
-  .chart {
-    width: 100%;
-    height: 100%;
-  }
-
-  .info-panel {
-    display: grid;
-    grid-template-columns: 1fr 1fr;
-    gap: 20px;
-    margin-top: 20px;
-  }
-
-  .legend-section,
-  .range-section {
-    border-radius: 8px;
-    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
-  }
-
-  h3 {
-    color: #fff;
-    margin-top: 0;
-    margin-bottom: 15px;
-    font-size: 16px;
-    padding-bottom: 8px;
-    border-bottom: 1px solid #303efd;
-  }
-
-  .legend-grid,
-  .range-grid {
-    display: grid;
-    grid-template-columns: repeat(2, 1fr);
-    gap: 12px;
-  }
-
-  .legend-item,
-  .range-item {
-    display: flex;
-    align-items: center;
-  }
-
-  .color-indicator {
-    display: inline-block;
-    width: 18px;
-    height: 18px;
-    border-radius: 4px;
-    margin-right: 8px;
-  }
-
-  .legend-text,
-  .range-text {
-    font-size: 14px;
-    color: #fff;
-  }
-
-  .range-text {
-    font-family: monospace;
-  }
+.pressure-monitor {
+  width: 100%;
+  height: 100%;
+  padding: 10px 10px 15px 10px;
+  box-sizing: border-box;
+  position: relative;
+}
+
+.time-display {
+  color: #fff;
+  font-size: 14px;
+}
+
+.chart-container {
+  width: 100%;
+  height: 350px;
+  border-radius: 8px;
+  padding: 15px;
+}
+
+.table-container {
+  width: 100%;
+  height: 300px;
+  border-radius: 8px;
+  padding: 15px;
+}
+.chart {
+  width: 100%;
+  height: 100%;
+}
+
+.info-panel {
+  display: grid;
+  grid-template-columns: 1fr 1fr;
+  gap: 20px;
+  margin-top: 20px;
+}
+
+.legend-section,
+.range-section {
+  border-radius: 8px;
+  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
+}
+
+h3 {
+  color: #fff;
+  margin-top: 0;
+  margin-bottom: 15px;
+  font-size: 16px;
+  padding-bottom: 8px;
+  border-bottom: 1px solid #303efd;
+}
+
+.legend-grid,
+.range-grid {
+  display: grid;
+  grid-template-columns: repeat(2, 1fr);
+  gap: 12px;
+}
+
+.legend-item,
+.range-item {
+  display: flex;
+  align-items: center;
+}
+
+.color-indicator {
+  display: inline-block;
+  width: 18px;
+  height: 18px;
+  border-radius: 4px;
+  margin-right: 8px;
+}
+
+.legend-text,
+.range-text {
+  font-size: 14px;
+  color: #fff;
+}
+
+.range-text {
+  font-family: monospace;
+}
 </style>

src/views/vent/monitorManager/betKy/main.api.ts

@@ -0,0 +1,12 @@
+import { defHttp } from '/@/utils/http/axios';
+import { Modal } from 'ant-design-vue';
+
+enum Api {
+  list = '/monitor/device',
+}
+
+/**
+ * 矿压数据接口
+ * @param params
+ */
+export const list = (params) => defHttp.post({ url: Api.list, params });