twin2025-ui/src/views/calc/calcStop/dsStop.vue

<template>
  <div class="app-container">
    <el-form :model="queryParams" ref="queryRef" :inline="true" v-show="showSearch" label-width="68px">
      <el-form-item label="分析天数" prop="remark">
        <el-select
            v-model="queryParams.remark"
            placeholder="请选择分析天数"
            clearable
            style="width: 150px;"
            @change="handleDaysChange"
        >
          <el-option label="月(30天)" value="30"></el-option>
          <el-option label="季度(90天)" value="90"></el-option>
          <el-option label="半年(180天)" value="180"></el-option>
          <el-option label="年(365天)" value="365"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="机台号" prop="deviceId">
        <el-input
            v-model="queryParams.deviceId"
            placeholder="请输入机台号"
            clearable
            @input="handleDeviceIdChange"
        />
      </el-form-item>
      <el-form-item label="分析结果" prop="result">
        <el-select
            v-model="queryParams.result"
            placeholder="请选择分析结果"
            clearable
            style="width: 150px;"
            @change="handleResultChange"
        >
          <el-option label="平稳" value="平稳"></el-option>
          <el-option label="上升" value="上升"></el-option>
          <el-option label="明显上升" value="明显上升"></el-option>
          <el-option label="下降" value="下降"></el-option>
          <el-option label="明显下降" value="明显下降"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" icon="Search" @click="handleFilter">搜索</el-button>
        <el-button icon="Refresh" @click="resetFilter">重置</el-button>
      </el-form-item>
    </el-form>

    <!-- 总体统计数据展示 -->
    <el-card class="statistic-card" v-if="statistics">
      <div class="statistic-container">
        <div class="statistic-item">
          <div class="statistic-label">设备总数:</div>
          <div class="statistic-value">{{ statistics.totalDevices }}</div>
        </div>
        <div class="statistic-divider"></div>
        <div class="statistic-item" v-for="(count, key) in statistics.trendCounts" :key="key">
          <div class="statistic-label">{{ key }}:</div>
          <div class="statistic-value">{{ count }}</div>
        </div>
      </div>
      <!-- 群体分析结果展示 -->
      <div class="group-analysis" v-if="groupAnalysisResult">
        <el-alert
          :title="groupAnalysisResult.message"
          :type="groupAnalysisResult.type"
          show-icon
          :closable="false"
        />
      </div>
    </el-card>

    <el-table v-loading="loading" :data="filteredData" @selection-change="handleSelectionChange">
      <el-table-column type="selection" width="55" align="center"/>
      <!--      <el-table-column label="ID" align="center" prop="id" />-->
      <el-table-column label="机台号" align="center" prop="deviceId"/>
      <el-table-column label="数据量" align="center" prop="dataNum"/>
      <el-table-column label="斜率" align="center" prop="slope">
        <template #default="scope">
          {{ (scope.row.slope).toFixed(2) }}
        </template>
      </el-table-column>
      <el-table-column label="标准差" align="center" prop="stdDev">
        <template #default="scope">
          {{ (scope.row.stdDev).toFixed(2) }}
        </template>
      </el-table-column>
      <el-table-column label="趋势分析" align="center" prop="result">
        <template #default="scope">
          <el-link type="primary" @click="handleResultClick(scope.row)">{{ scope.row.result }}</el-link>
        </template>
      </el-table-column>
    </el-table>

    <!-- 图表弹窗 -->
    <el-dialog :title="'设备[' + currentRow.deviceId + ']分析结果详情'" v-model="chartOpen" width="800px" append-to-body>
      <div style="text-align: center; margin: 20px 0;">
        <p>设备名称: {{ currentRow.deviceName }}</p>
        <p>分析结果: {{ currentRow.result }}</p>
      </div>
      <div v-if="currentRow.list && currentRow.list.length > 0">
        <!-- 使用ECharts展示折线图 -->
        <div ref="chartRef" style="width: 100%; height: 400px;"></div>
      </div>
      <div v-else>
        <p style="text-align: center;">暂无详细数据</p>
      </div>
      <template #footer>
        <div class="dialog-footer">
          <el-button @click="closeChart">关 闭</el-button>
        </div>
      </template>
    </el-dialog>
  </div>
</template>

<script setup name="CalcStop">
import {dsStop} from "@/api/calc/calcStop";
import {getCurrentInstance, reactive, ref, toRefs, watch} from 'vue';
import * as echarts from 'echarts';

const {proxy} = getCurrentInstance();

const calcStopList = ref([]);
const filteredData = ref([]);
const open = ref(false);
const chartOpen = ref(false);  // 添加图表弹窗状态
const loading = ref(true);
const showSearch = ref(true);
const ids = ref([]);
const single = ref(true);
const multiple = ref(true);
const total = ref(0);
const title = ref("");
const currentRow = ref({});  // 添加当前行数据
const chartRef = ref(null);
const statistics = ref(null); // 添加统计数据
const groupAnalysisResult = ref(null); // 群体分析结果
let chartInstance = null;

const data = reactive({
  form: {},
  queryParams: {
    pageNum: 1,
    pageSize: 1000,
    deviceId: null,
    dataDate: null,
    hour: null,
    startTime: null,
    endTime: null,
    stopType: 2,
    result: "",  // 设置默认选中值
    remark: "90" // 默认选中90天（季度）
  },
  rules: {}
});

const {queryParams, form, rules} = toRefs(data);

// 分析天数变化处理
function handleDaysChange() {
  getList(); // 分析天数变化时重新从后端获取数据
}

/** 查询停机数据统计列表 */
function getList() {
  loading.value = true;
  // 将分析天数作为参数传递给后端
  dsStop(queryParams.value).then(response => {
    calcStopList.value = response.data;
    filteredData.value = response.data; // 初始化过滤数据
    statistics.value = response.statistics; // 保存统计数据
    // 在数据加载完成后触发一次过滤，确保默认选中项生效
    filterData();
    loading.value = false;
  });
}

// 计算统计数据
function calculateStatistics(data) {
  if (!data || !Array.isArray(data)) {
    return;
  }

  // 计算设备总数
  const totalDevices = data.length;

  // 统计各趋势的数量
  const trendCounts = {
    "明显上升": 0,
    "上升": 0,
    "平稳": 0,
    "下降": 0,
    "明显下降": 0
  };

  data.forEach(item => {
    if (trendCounts.hasOwnProperty(item.result)) {
      trendCounts[item.result]++;
    }
  });

  // 只有在没有从后端获取到统计数据时才使用计算的统计数据
  if (!statistics.value) {
    statistics.value = {
      totalDevices,
      trendCounts
    };
  }
}

// 机台号变化处理
function handleDeviceIdChange() {
  filterData();
}

// 分析结果变化处理
function handleResultChange() {
  filterData();
}

// 过滤数据
function filterData() {
  if (!calcStopList.value || !Array.isArray(calcStopList.value)) {
    filteredData.value = [];
    return;
  }

  // 如果没有过滤条件，返回所有数据
  if (!queryParams.value.deviceId && !queryParams.value.result) {
    filteredData.value = calcStopList.value;
    // 重新设置原始统计数据
    getList();
    return;
  }

  filteredData.value = calcStopList.value.filter(item => {
    // 根据机台号过滤（数字模糊匹配）
    if (queryParams.value.deviceId &&
        item.deviceId &&
        item.deviceId.toString().indexOf(queryParams.value.deviceId) === -1) {
      return false;
    }

    // 根据分析结果过滤
    if (queryParams.value.result &&
        item.result !== queryParams.value.result) {
      return false;
    }

    return true;
  });

  // 根据过滤后的数据重新计算统计数据
  calculateStatistics(filteredData.value);
}

/** 过滤操作 */
function handleFilter() {
  getList(); // 点击搜索按钮时重新从后端获取数据
}

/** 重置过滤操作 */
function resetFilter() {
  proxy.resetForm("queryRef");
  queryParams.value.deviceId = null;
  queryParams.value.remark = null; // 重置分析天数
  getList(); // 重置时重新从后端获取数据
}

/** 处理分析结果点击事件 */
function handleResultClick(row) {
  currentRow.value = row;
  chartOpen.value = true;

  // 在弹窗打开后初始化图表
  setTimeout(() => {
    initChart();
  }, 100);
}

// 初始化图表
function initChart() {
  if (chartRef.value) {
    // 销毁之前的实例
    if (chartInstance) {
      chartInstance.dispose();
    }

    // 初始化新的实例
    chartInstance = echarts.init(chartRef.value);

    // 准备数据
    const dates = currentRow.value.list.map(item => item.date);
    const times = currentRow.value.list.map(item => item.times);

    // 配置图表选项
    const option = {
      title: {
        text: '停机次数趋势图',
        left: 'center'
      },
      tooltip: {
        trigger: 'axis'
      },
      xAxis: {
        type: 'category',
        data: dates,
        name: '日期'
      },
      yAxis: {
        type: 'value',
        name: '次数(次)'
      },
      series: [{
        data: times,
        type: 'line',
        smooth: true,
        markPoint: {
          data: [
            { type: 'max', name: '最大值' },
            { type: 'min', name: '最小值' }
          ]
        },
        markLine: {
          data: [
            { type: 'average', name: '平均值' }
          ]
        }
      }]
    };

    // 设置配置项
    chartInstance.setOption(option);
  }
}

/** 关闭图表弹窗 */
function closeChart() {
  chartOpen.value = false;
  // 销毁图表实例
  if (chartInstance) {
    chartInstance.dispose();
    chartInstance = null;
  }
}

// 群体分析算法
function analyzeGroupPattern() {
  if (!statistics.value || !statistics.value.trendCounts) {
    groupAnalysisResult.value = null;
    return;
  }

  const { trendCounts } = statistics.value;

  // 计算上升趋势的设备数量（包括"上升"和"明显上升"）
  const risingCount = (trendCounts["上升"] || 0) + (trendCounts["明显上升"] || 0);

  // 计算总设备数
  const totalCount = Object.values(trendCounts).reduce((sum, count) => sum + count, 0);

  // 如果没有设备数据，则不显示分析结果
  if (totalCount === 0) {
    groupAnalysisResult.value = null;
    return;
  }

  // 计算上升趋势设备占比
  const risingPercentage = (risingCount / totalCount) * 100;

  // 判断标准：如果超过60%的设备呈现上升趋势，则判断为群体上升现象
  if (risingPercentage > 60) {
    groupAnalysisResult.value = {
      type: "warning",
      message: `群体分析：${risingPercentage.toFixed(1)}%的设备断纱频次呈上升趋势，判断纱线或环境（温湿度）可能存在质量问题，请重点关注！`
    };
  } else {
    groupAnalysisResult.value = {
      type: "success",
      message: `群体分析：当前设备断纱频次趋势正常，无明显群体性质量问题。`
    };
  }
}

// 监听统计数据变化，触发群体分析
watch(statistics, () => {
  analyzeGroupPattern();
}, { deep: true });

getList();
</script>

<style scoped>
.statistic-card {
  margin-bottom: 20px;
  background-color: #f5f7fa;
  border: 1px solid #ebeef5;
  border-radius: 4px;
}

.statistic-container {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
}

.statistic-item {
  display: flex;
  align-items: center;
  margin-right: 20px;
  margin-bottom: 10px;
}

.statistic-label {
  font-weight: bold;
  margin-right: 5px;
  color: #606266;
}

.statistic-value {
  font-size: 16px;
  font-weight: bold;
  color: #409eff;
}

.statistic-divider {
  width: 1px;
  height: 20px;
  background-color: #dcdfe6;
  margin-right: 20px;
  margin-bottom: 10px;
}

.group-analysis {
  margin-top: 15px;
  padding-top: 15px;
  border-top: 1px solid #ebeef5;
}
</style>