计划数据

 src/api/data/plan/item/index.ts

@@ -17,6 +17,12 @@
  itemCategory: string
}

export interface PlanChartReqVO {
  itemNos?: [],
  start?: Date,
  end?: Date,
}

// 查询列表
export const getItemPage = (params: PageParam) => {
  return request.get({ url: '/data/plan-item/page', params })
@@ -47,9 +53,12 @@
  return request.get({ url: '/data/plan-item/getList', params})
}

export const validateAsNumber = (rule, value, callback) => {
  const regex = /^(\-|\+)?\d+(\.\d+)?$/;
  if (!regex.test(value)) {
    callback(new Error('请输入数字！'));
  }
// 查询Plan图表
export const getPlanChart = (data: PlanChartReqVO) => {
  return request.post({ url: '/data/api/query-plans/chart', data })
}

// 导出Plan值
export const exportPlanValue = (data: PlanChartReqVO) => {
  return request.post({ url: '/data/api/export-plan/history-value', data })
}

 src/views/data/plan/item/ItemChart.vue

对比新文件
@@ -0,0 +1,225 @@
<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>
        <el-date-picker
          v-model="dataForm.startTime"
          type="datetime"
          format="YYYY-MM-DD HH:mm:ss"
          value-format="YYYY-MM-DD HH:mm:ss"
          placeholder="选择日期时间"
        />
      </el-form-item>
      <el-form-item>
        <el-date-picker
          v-model="dataForm.endTime"
          type="datetime"
          format="YYYY-MM-DD HH:mm:ss"
          value-format="YYYY-MM-DD HH:mm:ss"
          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="chartDomPlan" class="result-chart"></div>
  </el-dialog>
</template>

<script lang="ts" setup>
import {ref} from 'vue';
import * as echarts from 'echarts';
import * as ItemApi from '@/api/data/plan/item'
import download from "@/utils/download";
const message = useMessage() // 消息弹窗
const visible = ref(false);
const chartDomPlan = ref(null);
let myChart = null;
const dataForm = ref({
  id: "",
  itemNo: "",
  itemName: "",
  startTime: getYMDHMS(),
  endTime: undefined,
});
const queryParams = reactive({
  itemNos: [],
  start: undefined,
  end: undefined,
})
function getYMDHMS() {
  let timestamp = new Date().getTime();
  let time = new Date(timestamp - 1000 * 60 * 60 * 3);
  let year = time.getFullYear();
  let month = (time.getMonth() + 1).toString();
  let date = time.getDate().toString();
  let hours = time.getHours().toString();
  let minute = time.getMinutes().toString();

  if (month < 10) {
    month = "0" + month;
  }
  if (date < 10) {
    date = "0" + date;
  }
  if (hours < 10) {
    hours = "0" + hours;
  }
  if (minute < 10) {
    minute = "0" + minute;
  }

  return (
    year +
    "-" +
    month +
    "-" +
    date +
    " " +
    hours +
    ":" +
    minute +
    ":" +
    "00"
  );
}
/** 打开弹窗 */
const open = async (row: object) => {
  visible.value = true
  dataForm.value.id = row.id;
  dataForm.value.itemNo = row.itemNo;
  dataForm.value.itemName = row.itemName;
  dataForm.value.startTime = getYMDHMS();
  dataForm.value.endTime = "";
  getDataList();
}

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

async function getDataList() {
  visible.value = true;
  if (dataForm.value.id) {
    try {
      queryParams.itemNos=[dataForm.value.itemNo];
      queryParams.start = dataForm.value.startTime;
      queryParams.end = dataForm.value.endTime;
      const data = await ItemApi.getPlanChart(queryParams)
      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(chartDomPlan.value);
      const option = {
        title: {
          text: dataForm.value.itemName,
          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 () => {
  queryParams.itemNos=[dataForm.value.itemNo];
  queryParams.start = dataForm.value.startTime;
  queryParams.end = dataForm.value.endTime;
  try {
    // 导出的二次确认
    await message.exportConfirm()
    // 发起导出
    exportLoading.value = true
    const data = await ItemApi.exportPlanValue(queryParams)
    download.excel(data, dataForm.value.itemName +'.xls')
  } catch {
  } finally {
    exportLoading.value = false
  }
}
</script>
<style>
.el-select {
  width: 100%;
}

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

 src/views/data/plan/item/index.vue

@@ -4,11 +4,13 @@
    <el-form ref="queryFormRef" :inline="true" :model="queryParams" class="-mb-15px"
             label-width="68px">
      <el-form-item label="计划编码" prop="itemNo">
        <el-input v-model="queryParams.itemNo" class="!w-200px" clearable placeholder="请输入计划编码"
        <el-input v-model="queryParams.itemNo" class="!w-200px" clearable
                  placeholder="请输入计划编码"
                  @keyup.enter="handleQuery"/>
      </el-form-item>
      <el-form-item label="计划名称" prop="itemName">
        <el-input v-model="queryParams.itemName" class="!w-200px" clearable placeholder="请输入计划名称"
        <el-input v-model="queryParams.itemName" class="!w-200px" clearable
                  placeholder="请输入计划名称"
                  @keyup.enter="handleQuery"/>
      </el-form-item>
      <el-form-item>
@@ -36,12 +38,16 @@
  <!-- 列表 -->
  <ContentWrap>
    <el-table v-loading="loading" :data="list">
      <el-table-column prop="itemNo" label="计划编码" header-align="center" align="center" min-width="80"/>
      <el-table-column prop="itemName" label="计划名称" header-align="center" align="center" min-width="120"/>
      <el-table-column prop="itemCategoryName" label="计划分类" header-align="center" align="center" min-width="100"/>
      <el-table-column prop="timeGranularity" label="时间粒度" header-align="center" align="center" min-width="40">
      <el-table-column prop="itemNo" label="计划编码" header-align="center" align="center"
                       min-width="80"/>
      <el-table-column prop="itemName" label="计划名称" header-align="center" align="center"
                       min-width="120"/>
      <el-table-column prop="itemCategoryName" label="计划分类" header-align="center" align="center"
                       min-width="100"/>
      <el-table-column prop="timeGranularity" label="时间粒度" header-align="center" align="center"
                       min-width="40">
        <template #default="scope">
          <dict-tag :type="DICT_TYPE.TIME_GRANULARITY" :value="scope.row.timeGranularity" />
          <dict-tag :type="DICT_TYPE.TIME_GRANULARITY" :value="scope.row.timeGranularity"/>
        </template>
      </el-table-column>
      <el-table-column
@@ -58,6 +64,8 @@
            type="primary"
            @click="openForm('update', scope.row.id)">
            修改
          </el-button>
          <el-button link size="mini" type="primary" @click="chartHandle(scope.row)">数据
          </el-button>
          <el-button
            v-hasPermi="['data:ind-item:delete']"
@@ -79,21 +87,25 @@
  </ContentWrap>

  <!-- 表单弹窗：添加/修改 -->
  <ItemForm ref="formRef" @success="getList" />
  <ItemForm ref="formRef" @success="getList"/>

  <!-- 表单弹窗：计划数据 -->
  <ItemChart ref="chartView"/>
</template>

<script lang="ts" setup>
import { DICT_TYPE, getIntDictOptions, getStrDictOptions } from '@/utils/dict'
import { dateFormatter } from '@/utils/formatTime'
import {DICT_TYPE, getIntDictOptions, getStrDictOptions} from '@/utils/dict'
import {dateFormatter} from '@/utils/formatTime'
import ItemForm from './ItemForm.vue'
import download from '@/utils/download'
import * as ItemApi from '@/api/data/plan/item'
import * as CategoryApi from "@/api/data/plan/category";
import ItemChart from "./ItemChart.vue";

defineOptions({ name: 'PlanItem' })
defineOptions({name: 'PlanItem'})

const message = useMessage() // 消息弹窗
const { t } = useI18n() // 国际化
const {t} = useI18n() // 国际化
const dataCategoryList = ref([] as CategoryApi.IndItemCategoryVO[])
const loading = ref(true) // 列表的加载中
const total = ref(0) // 列表的总页数
@@ -127,6 +139,12 @@
  getList()
}

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

/** 重置按钮操作 */
const resetQuery = () => {
  queryFormRef.value.resetFields()
@@ -149,7 +167,8 @@
    message.success(t('common.delSuccess'))
    // 刷新列表
    await getList()
  } catch {}
  } catch {
  }
}

/** 初始化 **/