潘志宝
2024-11-14 da47a3349dcfd87db23ab8e64fbf35fe1aea5685
src/views/data/point/DaPointChart.vue
@@ -10,21 +10,25 @@
      :model="dataForm"
      @keydown.enter="getDataList()"
    >
      <el-form-item>
      <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"
          value-format="yyyy-MM-dd HH:mm:ss"
          placeholder="选择日期时间"
       />
          :clearable="false"
          placeholder="选择日期时间"/>
      </el-form-item>
      <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"
          value-format="yyyy-MM-dd HH:mm:ss"
          placeholder="选择日期时间"
        />
          :clearable="false"
          placeholder="选择日期时间"/>
      </el-form-item>
      <el-form-item>
        <el-button @click="getDataList()">查询</el-button>
@@ -49,67 +53,32 @@
  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: getYMDHMS(),
    endTime: undefined,
    startTime: getYMDHM0(new Date() - 60 * 60 * 1000),
    endTime: "",
  });
  const queryParams = reactive({
    pointNo: "",
    start: undefined,
    end: undefined,
  })
  function getYMDHMS() {
    let timestamp = new Date().getTime();
    let time = new Date(timestamp - 1000 * 60 * 30);
    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.pointNo = row.pointNo;
    dataForm.value.pointName = row.pointName;
    dataForm.value.startTime = getYMDHMS();
    dataForm.value.endTime = "";
    getDataList();
  }
@@ -119,34 +88,27 @@
    visible.value = true;
    if (dataForm.value.id) {
      try {
        queryParams.pointNo=dataForm.value.pointNo;
        queryParams.start = dataForm.value.startTime;
        queryParams.end = dataForm.value.endTime;
        const data = await DaPoint.getPointDaChart(queryParams)
        const dataList = [];
        const xAxisData = [];
        data[dataForm.value.pointNo].forEach(function (value) {
          // 判断数据是否为布尔型
          if (typeof value["value"] === "boolean") {
            value["value"] = value["value"]? 1 : 0;
          }
          dataList.push([value["time"], value["value"]]);
          xAxisData.push(value["time"]);
        });
        let seriesData = [];
        seriesData.push({
          name: "采集值",
          type: "line",
          data: dataList,
          showSymbol: false,
          smooth: false,
          lineStyle: {
            normal: {
              color: "#5B8FF9",
              width: 1,
        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: {
@@ -182,7 +144,7 @@
          xAxis: {
            type: "category",
            boundaryGap: false,
            data: xAxisData,
            data: data.categories,
          },
          yAxis: {
            type: "value",
@@ -194,7 +156,6 @@
          ],
          series: seriesData,
        };
        myChart.clear();
        myChart.setOption(option);
      } catch (error) {
        console.error(error)
@@ -204,15 +165,15 @@
  /** 导出按钮操作 */
  const exportLoading = ref(false)
  const handleExport = async () => {
    queryParams.pointNos=[dataForm.value.pointNo];
    queryParams.start = dataForm.value.startTime;
    queryParams.end = dataForm.value.endTime;
    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(queryParams)
      const data = await DaPoint.exportDaPointValue(chartParams)
      download.excel(data, dataForm.value.pointName +'.xls')
    } catch {
    } finally {