feat(运行数据): 添加生产运行数据展示页面

实现运行数据展示页面，包含旅检、行检、货检和车辆过检数据统计
添加多个ECharts图表展示各类数据趋势和分布
支持响应式布局适配不同屏幕尺寸

src/views/runData/runScreen/index.vue

@@ -0,0 +1,601 @@
+<template>
+  <div class="run-screen-container">
+    <!-- 页面标题 -->
+    <div class="page-title">
+      <h1>盛世鹰眸质控系统[生产运行]（安检站）</h1>
+    </div>
+
+    <!-- 模块一：运行数据 -->
+    <div class="module-section">
+      <div class="module-title">模块一：运行数据</div>
+      
+      <!-- 第一行 -->
+      <el-row :gutter="20" class="row-margin">
+        <!-- 左边50%：两个div -->
+        <el-col :span="12">
+          <el-row :gutter="20">
+            <el-col :span="12">
+              <div class="data-card">
+                <div class="card-title">旅检过检总人数</div>
+                <div class="card-value">{{ runData.travelInspectionTotal }}人</div>
+              </div>
+            </el-col>
+            <el-col :span="12">
+              <div class="data-card">
+                <div class="card-title">行检过检总行李数</div>
+                <div class="card-value">{{ runData.luggageInspectionTotal }}件</div>
+              </div>
+            </el-col>
+          </el-row>
+        </el-col>
+        <!-- 右边50%：T1旅检过检人数折线图 -->
+        <el-col :span="12">
+          <div class="chart-card">
+            <div class="chart-title">T1旅检过检人数</div>
+            <div ref="t1TravelChart" class="chart-container"></div>
+          </div>
+        </el-col>
+      </el-row>
+
+      <!-- 第二行 -->
+      <el-row :gutter="20" class="row-margin">
+        <el-col :span="12">
+          <div class="chart-card">
+            <div class="chart-title">T2旅检过检人数</div>
+            <div ref="t2TravelChart" class="chart-container"></div>
+          </div>
+        </el-col>
+        <el-col :span="12">
+          <div class="chart-card">
+            <div class="chart-title">行检过检数</div>
+            <div ref="luggageChart" class="chart-container"></div>
+          </div>
+        </el-col>
+      </el-row>
+
+      <!-- 第三行 -->
+      <el-row :gutter="20" class="row-margin">
+        <el-col :span="8">
+          <div class="data-card">
+            <div class="card-title">国内货站总过检数</div>
+            <div class="card-value">{{ runData.domesticCargoTotal }}件</div>
+          </div>
+        </el-col>
+        <el-col :span="8">
+          <div class="data-card">
+            <div class="card-title">国际货站总过检数</div>
+            <div class="card-value">{{ runData.internationalCargoTotal }}件</div>
+          </div>
+        </el-col>
+        <el-col :span="8">
+          <div class="data-card">
+            <div class="card-title">道口车辆过检数</div>
+            <div class="card-value">{{ runData.vehicleInspectionTotal }}辆</div>
+          </div>
+        </el-col>
+      </el-row>
+
+      <!-- 第四行 -->
+      <el-row :gutter="20" class="row-margin">
+        <el-col :span="12">
+          <div class="chart-card">
+            <div class="chart-title">货物过检数</div>
+            <div ref="cargoChart" class="chart-container"></div>
+          </div>
+        </el-col>
+        <el-col :span="12">
+          <div class="chart-card">
+            <div class="chart-title">车辆过检数</div>
+            <div ref="vehicleChart" class="chart-container"></div>
+          </div>
+        </el-col>
+      </el-row>
+    </div>
+
+    <!-- 模块二：查获/收缴数据 -->
+    <div class="module-section">
+      <div class="module-title">模块二：查获/收缴数据</div>
+      
+      <!-- 第一行 -->
+      <el-row :gutter="20" class="row-margin">
+        <el-col :span="12">
+          <div class="chart-card">
+            <div class="chart-title">查获数据</div>
+            <div ref="seizePieChart" class="chart-container"></div>
+          </div>
+        </el-col>
+        <el-col :span="12">
+          <div class="chart-card">
+            <div class="chart-title">大队查获数对比图</div>
+            <div ref="teamSeizeBarChart" class="chart-container"></div>
+          </div>
+        </el-col>
+      </el-row>
+
+      <!-- 第二行 -->
+      <el-row :gutter="20" class="row-margin">
+        <el-col :span="12">
+          <div class="chart-card">
+            <div class="chart-title">T1区域各大队查获数对比图</div>
+            <div ref="t1TeamBarChart" class="chart-container"></div>
+          </div>
+        </el-col>
+        <el-col :span="12">
+          <div class="chart-card">
+            <div class="chart-title">T2区域各大队查获数对比图</div>
+            <div ref="t2TeamBarChart" class="chart-container"></div>
+          </div>
+        </el-col>
+      </el-row>
+
+      <!-- 第三行 -->
+      <el-row :gutter="20" class="row-margin">
+        <el-col :span="12">
+          <div class="chart-card">
+            <div class="chart-title">不合格充电宝劝阻数组</div>
+            <div ref="powerBankPieChart" class="chart-container"></div>
+          </div>
+        </el-col>
+        <el-col :span="12">
+          <div class="chart-card">
+            <div class="chart-title">待检区收缴禁限带物品数据表</div>
+            <div ref="waitingAreaPieChart" class="chart-container"></div>
+          </div>
+        </el-col>
+      </el-row>
+    </div>
+  </div>
+</template>
+
+<script setup name="RunScreen">
+import { ref, onMounted, onUnmounted, nextTick } from 'vue'
+import * as echarts from 'echarts'
+
+// 图表引用
+const t1TravelChart = ref(null)
+const t2TravelChart = ref(null)
+const luggageChart = ref(null)
+const cargoChart = ref(null)
+const vehicleChart = ref(null)
+const seizePieChart = ref(null)
+const teamSeizeBarChart = ref(null)
+const t1TeamBarChart = ref(null)
+const t2TeamBarChart = ref(null)
+const powerBankPieChart = ref(null)
+const waitingAreaPieChart = ref(null)
+
+// 图表实例
+let t1TravelChartInstance = null
+let t2TravelChartInstance = null
+let luggageChartInstance = null
+let cargoChartInstance = null
+let vehicleChartInstance = null
+let seizePieChartInstance = null
+let teamSeizeBarChartInstance = null
+let t1TeamBarChartInstance = null
+let t2TeamBarChartInstance = null
+let powerBankPieChartInstance = null
+let waitingAreaPieChartInstance = null
+
+// 运行数据
+const runData = ref({
+  travelInspectionTotal: 12580,
+  luggageInspectionTotal: 8920,
+  domesticCargoTotal: 1560,
+  internationalCargoTotal: 980,
+  vehicleInspectionTotal: 450
+})
+
+// 初始化所有图表
+function initCharts() {
+  // T1旅检过检人数折线图
+  if (t1TravelChart.value) {
+    t1TravelChartInstance = echarts.init(t1TravelChart.value)
+    t1TravelChartInstance.setOption({
+      tooltip: { trigger: 'axis' },
+      xAxis: {
+        type: 'category',
+        data: ['08:00', '10:00', '12:00', '14:00', '16:00', '18:00', '20:00']
+      },
+      yAxis: { type: 'value' },
+      series: [{
+        data: [820, 932, 901, 934, 1290, 1330, 1320],
+        type: 'line',
+        smooth: true,
+        lineStyle: { color: '#5470c6' },
+        areaStyle: { color: 'rgba(84, 112, 198, 0.2)' }
+      }]
+    })
+  }
+
+  // T2旅检过检人数折线图
+  if (t2TravelChart.value) {
+    t2TravelChartInstance = echarts.init(t2TravelChart.value)
+    t2TravelChartInstance.setOption({
+      tooltip: { trigger: 'axis' },
+      xAxis: {
+        type: 'category',
+        data: ['08:00', '10:00', '12:00', '14:00', '16:00', '18:00', '20:00']
+      },
+      yAxis: { type: 'value' },
+      series: [{
+        data: [620, 732, 701, 734, 890, 930, 920],
+        type: 'line',
+        smooth: true,
+        lineStyle: { color: '#91cc75' },
+        areaStyle: { color: 'rgba(145, 204, 117, 0.2)' }
+      }]
+    })
+  }
+
+  // 行检过检数折线图
+  if (luggageChart.value) {
+    luggageChartInstance = echarts.init(luggageChart.value)
+    luggageChartInstance.setOption({
+      tooltip: { trigger: 'axis' },
+      xAxis: {
+        type: 'category',
+        data: ['08:00', '10:00', '12:00', '14:00', '16:00', '18:00', '20:00']
+      },
+      yAxis: { type: 'value' },
+      series: [{
+        data: [620, 832, 701, 834, 1090, 1130, 1120],
+        type: 'line',
+        smooth: true,
+        lineStyle: { color: '#fac858' },
+        areaStyle: { color: 'rgba(250, 200, 88, 0.2)' }
+      }]
+    })
+  }
+
+  // 货物过检数折线图
+  if (cargoChart.value) {
+    cargoChartInstance = echarts.init(cargoChart.value)
+    cargoChartInstance.setOption({
+      tooltip: { trigger: 'axis' },
+      xAxis: {
+        type: 'category',
+        data: ['08:00', '10:00', '12:00', '14:00', '16:00', '18:00', '20:00']
+      },
+      yAxis: { type: 'value' },
+      series: [{
+        data: [120, 232, 201, 234, 290, 330, 320],
+        type: 'line',
+        smooth: true,
+        lineStyle: { color: '#ee6666' },
+        areaStyle: { color: 'rgba(238, 102, 102, 0.2)' }
+      }]
+    })
+  }
+
+  // 车辆过检数折线图
+  if (vehicleChart.value) {
+    vehicleChartInstance = echarts.init(vehicleChart.value)
+    vehicleChartInstance.setOption({
+      tooltip: { trigger: 'axis' },
+      xAxis: {
+        type: 'category',
+        data: ['08:00', '10:00', '12:00', '14:00', '16:00', '18:00', '20:00']
+      },
+      yAxis: { type: 'value' },
+      series: [{
+        data: [30, 52, 41, 54, 70, 83, 80],
+        type: 'line',
+        smooth: true,
+        lineStyle: { color: '#73c0de' },
+        areaStyle: { color: 'rgba(115, 192, 222, 0.2)' }
+      }]
+    })
+  }
+
+  // 查获数据环形图
+  if (seizePieChart.value) {
+    seizePieChartInstance = echarts.init(seizePieChart.value)
+    seizePieChartInstance.setOption({
+      tooltip: { trigger: 'item' },
+      legend: { orient: 'vertical', right: 10, top: 'center' },
+      series: [{
+        name: '查获数据',
+        type: 'pie',
+        radius: ['40%', '70%'],
+        center: ['40%', '50%'],
+        data: [
+          { value: 1048, name: '火种' },
+          { value: 735, name: '刀具' },
+          { value: 580, name: '警械器具' },
+          { value: 484, name: '烟花爆竹' },
+          { value: 300, name: '其他' }
+        ],
+        emphasis: {
+          itemStyle: {
+            shadowBlur: 10,
+            shadowOffsetX: 0,
+            shadowColor: 'rgba(0, 0, 0, 0.5)'
+          }
+        }
+      }]
+    })
+  }
+
+  // 大队查获数对比柱状图
+  if (teamSeizeBarChart.value) {
+    teamSeizeBarChartInstance = echarts.init(teamSeizeBarChart.value)
+    teamSeizeBarChartInstance.setOption({
+      tooltip: { trigger: 'axis', axisPointer: { type: 'shadow' } },
+      xAxis: {
+        type: 'category',
+        data: ['一大队', '二大队', '三大队', '四大队', '五大队', '六大队']
+      },
+      yAxis: { type: 'value' },
+      series: [{
+        data: [120, 200, 150, 80, 70, 110],
+        type: 'bar',
+        itemStyle: { color: '#5470c6' }
+      }]
+    })
+  }
+
+  // T1区域各大队查获数对比柱状图
+  if (t1TeamBarChart.value) {
+    t1TeamBarChartInstance = echarts.init(t1TeamBarChart.value)
+    t1TeamBarChartInstance.setOption({
+      tooltip: { trigger: 'axis', axisPointer: { type: 'shadow' } },
+      xAxis: {
+        type: 'category',
+        data: ['一大队', '二大队', '三大队', '四大队']
+      },
+      yAxis: { type: 'value' },
+      series: [{
+        data: [80, 120, 90, 60],
+        type: 'bar',
+        itemStyle: { color: '#91cc75' }
+      }]
+    })
+  }
+
+  // T2区域各大队查获数对比柱状图
+  if (t2TeamBarChart.value) {
+    t2TeamBarChartInstance = echarts.init(t2TeamBarChart.value)
+    t2TeamBarChartInstance.setOption({
+      tooltip: { trigger: 'axis', axisPointer: { type: 'shadow' } },
+      xAxis: {
+        type: 'category',
+        data: ['五大队', '六大队', '七大队', '八大队']
+      },
+      yAxis: { type: 'value' },
+      series: [{
+        data: [70, 90, 80, 50],
+        type: 'bar',
+        itemStyle: { color: '#fac858' }
+      }]
+    })
+  }
+
+  // 不合格充电宝劝阻数组环形图
+  if (powerBankPieChart.value) {
+    powerBankPieChartInstance = echarts.init(powerBankPieChart.value)
+    powerBankPieChartInstance.setOption({
+      tooltip: { trigger: 'item' },
+      legend: { orient: 'vertical', right: 10, top: 'center' },
+      series: [{
+        name: '不合格充电宝',
+        type: 'pie',
+        radius: ['40%', '70%'],
+        center: ['40%', '50%'],
+        data: [
+          { value: 320, name: '无3C标识' },
+          { value: 240, name: '标识不清' },
+          { value: 180, name: '超规数量' },
+          { value: 150, name: '其他' }
+        ],
+        emphasis: {
+          itemStyle: {
+            shadowBlur: 10,
+            shadowOffsetX: 0,
+            shadowColor: 'rgba(0, 0, 0, 0.5)'
+          }
+        }
+      }]
+    })
+  }
+
+  // 待检区收缴禁限带物品数据表环形图
+  if (waitingAreaPieChart.value) {
+    waitingAreaPieChartInstance = echarts.init(waitingAreaPieChart.value)
+    waitingAreaPieChartInstance.setOption({
+      tooltip: { trigger: 'item' },
+      legend: { orient: 'vertical', right: 10, top: 'center' },
+      series: [{
+        name: '禁限带物品',
+        type: 'pie',
+        radius: ['40%', '70%'],
+        center: ['40%', '50%'],
+        data: [
+          { value: 420, name: '火种' },
+          { value: 280, name: '液态物品' },
+          { value: 190, name: '其他物品' },
+          { value: 120, name: '其他' }
+        ],
+        emphasis: {
+          itemStyle: {
+            shadowBlur: 10,
+            shadowOffsetX: 0,
+            shadowColor: 'rgba(0, 0, 0, 0.5)'
+          }
+        }
+      }]
+    })
+  }
+}
+
+// 窗口大小变化时重新调整图表大小
+function handleResize() {
+  const charts = [
+    t1TravelChartInstance, t2TravelChartInstance, luggageChartInstance,
+    cargoChartInstance, vehicleChartInstance, seizePieChartInstance,
+    teamSeizeBarChartInstance, t1TeamBarChartInstance, t2TeamBarChartInstance,
+    powerBankPieChartInstance, waitingAreaPieChartInstance
+  ]
+  
+  charts.forEach(chart => {
+    if (chart) {
+      chart.resize()
+    }
+  })
+}
+
+// 组件挂载时初始化图表
+onMounted(() => {
+  nextTick(() => {
+    initCharts()
+    window.addEventListener('resize', handleResize)
+  })
+})
+
+// 组件卸载时销毁图表
+onUnmounted(() => {
+  const charts = [
+    t1TravelChartInstance, t2TravelChartInstance, luggageChartInstance,
+    cargoChartInstance, vehicleChartInstance, seizePieChartInstance,
+    teamSeizeBarChartInstance, t1TeamBarChartInstance, t2TeamBarChartInstance,
+    powerBankPieChartInstance, waitingAreaPieChartInstance
+  ]
+  
+  charts.forEach(chart => {
+    if (chart) {
+      chart.dispose()
+    }
+  })
+  
+  window.removeEventListener('resize', handleResize)
+})
+</script>
+
+<style scoped>
+.run-screen-container {
+  padding: 20px;
+  background: #f0f2f5;
+  min-height: 100vh;
+}
+
+.page-title {
+  text-align: center;
+  margin-bottom: 30px;
+}
+
+.page-title h1 {
+  font-size: 28px;
+  color: #333;
+  font-weight: bold;
+  margin: 0;
+}
+
+.module-section {
+  margin-bottom: 30px;
+  background: #fff;
+  border-radius: 8px;
+  padding: 20px;
+  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
+}
+
+.module-title {
+  font-size: 20px;
+  font-weight: bold;
+  color: #333;
+  margin-bottom: 20px;
+  padding-bottom: 10px;
+  border-bottom: 2px solid #409eff;
+}
+
+.row-margin {
+  margin-bottom: 20px;
+}
+
+.data-card {
+  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+  border-radius: 8px;
+  padding: 20px;
+  color: white;
+  text-align: center;
+  height: 120px;
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
+}
+
+.card-title {
+  font-size: 16px;
+  margin-bottom: 10px;
+  opacity: 0.9;
+}
+
+.card-value {
+  font-size: 28px;
+  font-weight: bold;
+}
+
+.chart-card {
+  background: #fff;
+  border-radius: 8px;
+  padding: 15px;
+  border: 1px solid #e6e8eb;
+  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
+  height: 300px;
+}
+
+.chart-title {
+  font-size: 16px;
+  font-weight: bold;
+  color: #333;
+  margin-bottom: 15px;
+  text-align: center;
+}
+
+.chart-container {
+  width: 100%;
+  height: calc(100% - 30px);
+}
+
+/* 响应式设计 */
+@media (max-width: 1200px) {
+  .data-card {
+    height: 100px;
+  }
+  
+  .card-value {
+    font-size: 24px;
+  }
+  
+  .chart-card {
+    height: 250px;
+  }
+}
+
+@media (max-width: 768px) {
+  .run-screen-container {
+    padding: 10px;
+  }
+  
+  .module-section {
+    padding: 15px;
+  }
+  
+  .data-card {
+    height: 80px;
+    padding: 15px;
+  }
+  
+  .card-title {
+    font-size: 14px;
+  }
+  
+  .card-value {
+    font-size: 20px;
+  }
+  
+  .chart-card {
+    height: 200px;
+  }
+}
+</style>