运行状态

 src/views/model/pre/item/MmPredictItemChart.vue

对比新文件
@@ -0,0 +1,192 @@
<template>
  <el-dialog
    title="采集值"
    :close-on-click-modal="false"
    width="50%"
    v-model="visible"
  >
    <el-form
      :inline="true"
      :model="dataForm"
      @keydown.enter="getDataList()"
    >
      <el-form-item label="开始时间">
        <el-date-picker
          size="mini"
          v-model="dataForm.startTime"
          format="YYYY-MM-DD HH:mm:00"
          value-format="YYYY-MM-DD HH:mm:00"
          type="datetime"
          :clearable="false"
          placeholder="选择日期时间"/>
      </el-form-item>
      <el-form-item label="结束时间">
        <el-date-picker
          size="mini"
          v-model="dataForm.endTime"
          format="YYYY-MM-DD HH:mm:00"
          value-format="YYYY-MM-DD HH:mm:00"
          type="datetime"
          :clearable="false"
          placeholder="选择日期时间"/>
      </el-form-item>
      <el-form-item>
        <el-button @click="getDataList()">查询</el-button>
      </el-form-item>
      <el-form-item>
        <el-button
          type="success"
          plain
          @click="handleExport"
          :loading="exportLoading"
          v-hasPermi="['data:point:export']"
        >
          <Icon icon="ep:download" />导出
        </el-button>
      </el-form-item>
    </el-form>
    <div ref="chartDom" class="result-chart"></div>
  </el-dialog>
</template>

<script lang="ts" setup>
import {ref} from 'vue';
import * as echarts from 'echarts';
import * as DaPoint from '@/api/data/da/point/daPointChart'
import {getYMDHM0} from "@/utils/dateUtil"
import download from "@/utils/download";
const message = useMessage() // 消息弹窗
const visible = ref(false);
const chartDom = ref(null);
let myChart = null;
const chartParams = reactive({
  codes:[],
  startDate : undefined,
  endDate: undefined,
})
const dataForm = ref({
  id: "",
  pointNo: "",
  pointName: "",
  pointTypeName: "",
  startTime: getYMDHM0(new Date() - 60 * 60 * 1000),
  endTime: "",
});

/** 打开弹窗 */
const open = async (row: object) => {
  visible.value = true
  dataForm.value.id = row.id;
  dataForm.value.pointNo = row.pointNo;
  dataForm.value.pointName = row.pointName;
  getDataList();
}

defineExpose({open}) // 提供 open 方法，用于打开弹窗

async function getDataList() {
  visible.value = true;
  if (dataForm.value.id) {
    try {
      chartParams.codes=[dataForm.value.pointNo];
      chartParams.startDate = dataForm.value.startTime;
      chartParams.endDate = dataForm.value.endTime;
      const data = await DaPoint.getPointDaChart(chartParams)
      let seriesData = []
      data.series.forEach(item => {
        seriesData.push({
          name: item.name,
          type: "line",
          data: item.data,
          showSymbol: true,
          smooth: false,
          lineStyle: {
            normal: {
              color: "#5B8FF9",
              width: 1,
            },
          },
        });
      })

      myChart = echarts.init(chartDom.value);
      const option = {
        title: {
          text: dataForm.value.pointName,
          top: 0,
          left: "1%",
          textStyle: {
            fontSize: 14,
          },
        },
        tooltip: {
          trigger: "axis",
          axisPointer: {
            type: "line",
            lineStyle: {
              color: "#cccccc",
              width: "1",
              type: "dashed",
            },
          },
        },
        legend: {
          show: false,
          top: 10,
        },
        grid: {
          top: 30,
          left: "3%",
          right: "5%",
          bottom: 10,
          containLabel: true,
        },
        xAxis: {
          type: "category",
          boundaryGap: false,
          data: data.categories,
        },
        yAxis: {
          type: "value",
        },
        dataZoom: [
          {
            type: "inside",
          },
        ],
        series: seriesData,
      };
      myChart.setOption(option);
    } catch (error) {
      console.error(error)
    }
  }
}
/** 导出按钮操作 */
const exportLoading = ref(false)
const handleExport = async () => {
  chartParams.codes=[dataForm.value.pointNo];
  chartParams.startDate = dataForm.value.startTime;
  chartParams.endDate = dataForm.value.endTime;
  try {
    // 导出的二次确认
    await message.exportConfirm()
    // 发起导出
    exportLoading.value = true
    const data = await DaPoint.exportDaPointValue(chartParams)
    download.excel(data, dataForm.value.pointName +'.xls')
  } catch {
  } finally {
    exportLoading.value = false
  }
}
</script>
<style>
.el-select {
  width: 100%;
}

.result-chart {
  height: 500px;
}
</style>

 src/views/model/pre/item/index.vue

@@ -51,7 +51,7 @@
  <!-- 列表 -->
  <ContentWrap>
    <el-table v-loading="loading" :data="list">
      <el-table-column label="编号" align="center" prop="itemno"/>
      <el-table-column label="编号" align="center" min-width="150" prop="itemno"/>
      <el-table-column label="预测项名" header-align="center" align="left" min-width="200" prop="itemname"/>
      <el-table-column label="类型名称" align="center" prop="itemtypename">
        <template #default="scope">
@@ -62,7 +62,7 @@
      <el-table-column label="预测长度" align="center" prop="predictlength"/>
      <el-table-column label="粒度" align="center" prop="granularity">
        <template #default="scope">
          <dict-tag :type="DICT_TYPE.TIME_GRANULARITY" :value="scope.row.granularity" />
          <dict-tag :type="DICT_TYPE.PRED_GRANULARITY" :value="scope.row.granularity" />
        </template>
      </el-table-column>
      <el-table-column label="是否融合" align="center" prop="isfuse">
@@ -80,21 +80,25 @@
          <dict-tag :type="DICT_TYPE.COM_IS_INT" :value="scope.row.status" />
        </template>
      </el-table-column>
      <el-table-column label="数据点名称" align="center" prop="tagname"/>
      <el-table-column label="存放表" align="center" prop="tablename"/>
      <el-table-column label="操作" align="center" min-width="110" fixed="right">
      <el-table-column label="运行时间" align="center" prop="lastTime"/>
      <el-table-column label="运行状态" align="center" prop="runStatus"/>
      <el-table-column label="运行耗时" align="center" prop="duration"/>
      <el-table-column label="操作" align="center" min-width="120" fixed="right">
        <template #default="scope">
          <el-button
            link
            type="primary"
            size="mini"
            @click="openForm('update', scope.row.id, scope.row.itemtypename)"
            v-hasPermi="['model:pre-item:update']"
          >
            编辑
          </el-button>
          <el-button link size="mini" type="primary" @click="chartHandle(scope.row)">数据</el-button>
          <el-button
            link
            type="danger"
            size="mini"
            @click="handleDelete(scope.row.id)"
            v-hasPermi="['model:pre-item:delete']"
          >
@@ -115,9 +119,13 @@
  <!-- 表单弹窗：添加/修改 -->
  <MmPredictItemForm ref="formRef" @success="getList"/>

  <!-- 表单弹窗：数据 -->
  <MmPredictItemChart ref="chartView" @success="getList"/>

</template>
<script lang="ts" setup>
import MmPredictItemForm from './MmPredictItemForm.vue'
import MmPredictItemChart from './MmPredictItemChart.vue'
import * as MmPredictItem from '@/api/model/pre/predict'
import {DICT_TYPE} from "@/utils/dict";

@@ -171,6 +179,12 @@
  handleQuery()
}

/** 查看数据操作 */
const chartView  = ref()
const chartHandle = (raw: object) => {
  chartView.value.open(raw)
}

/** 添加/修改操作 */
const formRef = ref()
const openForm = (type: string, id?: number, itemtypename?: string) => {