[Feat 0000] 矿压数据页面开发

src/views/vent/betKy/index.vue

@@ -0,0 +1,220 @@
+
+<template>
+  <div class="pressure-monitor">
+    <div class="header">
+      <h2>矿压监测系统</h2>
+      <div class="time-display">{{ currentTime }}</div>
+    </div>
+
+    <div class="chart-container">
+      <div ref="chartEl" class="chart"></div>
+    </div>
+
+    <div class="info-panel">
+      <div class="legend-section">
+        <h3>状态说明</h3>
+        <div class="legend-grid">
+          <div v-for="(item, index) in legendData" :key="index" class="legend-item">
+            <span class="color-indicator" :style="{ backgroundColor: item.color }"></span>
+            <span class="legend-text">{{ item.label }}</span>
+          </div>
+        </div>
+      </div>
+
+      <div class="range-section">
+        <h3>数据范围(kPa)</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>
+            <span class="legend-text">{{ item.label }}</span>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</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/>
+                值: ${value}kPa<br/>
+                状态: ${range?.label || '未知'}`;
+      },
+    },
+    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,
+    },
+  };
+
+  chart.setOption(option);
+  window.addEventListener('resize', () => chart.resize());
+});
+</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;
+}
+</style>