src/views/data/point/DaPointChart.vue

@@ -14,8 +14,8 @@
        <el-date-picker
          size="mini"
          v-model="dataForm.startTime"
          format="YYYY-MM-DD HH:mm:ss"
          value-format="YYYY-MM-DD HH:mm:ss"
          format="YYYY-MM-DD HH:mm:00"
          value-format="YYYY-MM-DD HH:mm:00"
          type="datetime"
          :clearable="false"
          placeholder="选择日期时间"/>
@@ -24,8 +24,8 @@
        <el-date-picker
          size="mini"
          v-model="dataForm.endTime"
          format="YYYY-MM-DD HH:mm:ss"
          value-format="YYYY-MM-DD HH:mm:ss"
          format="YYYY-MM-DD HH:mm:00"
          value-format="YYYY-MM-DD HH:mm:00"
          type="datetime"
          :clearable="false"
          placeholder="选择日期时间"/>
@@ -41,57 +41,63 @@
          :loading="exportLoading"
          v-hasPermi="['data:point:export']"
        >
          <Icon icon="ep:download" />导出
          <Icon icon="ep:download"/>
          导出
        </el-button>
      </el-form-item>
    </el-form>
    <div ref="chartDom" class="result-chart"></div>
    <div ref="chartDom" class="result-chart" v-loading="loading"></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 {getYMDHMS} 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(new Date() - 60 * 60 * 1000),
    endTime: "",
  });
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 open = async (row: object) => {
    visible.value = true
    dataForm.value.id = row.id;
    dataForm.value.pointNo = row.pointNo;
    dataForm.value.pointName = row.pointName;
    getDataList();
  }
const message = useMessage() // 消息弹窗
const visible = ref(false);
const chartDom = ref(null);
let myChart = null;
const chartParams = reactive({
  codes: [],
  pointNo: undefined,
  startDate: undefined,
  endDate: undefined,
})
const dataForm = ref({
  id: "",
  pointNo: "",
  pointName: "",
  pointTypeName: "",
  startTime: getYMDHM0(new Date() - 60 * 60 * 1000),
  endTime: "",
});

  defineExpose({open}) // 提供 open 方法，用于打开弹窗
/** 打开弹窗 */
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 方法，用于打开弹窗

  const loading = ref(false)
  async function getDataList() {
    visible.value = true;
    loading.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)
        loading.value = false
        let seriesData = []
        data.series.forEach(item => {
          seriesData.push({
@@ -109,84 +115,86 @@
          });
        })

        myChart = echarts.init(chartDom.value);
        const option = {
          title: {
            text: dataForm.value.pointName,
            top: 0,
            left: "1%",
            textStyle: {
              fontSize: 14,
      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",
            },
          },
          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",
          },
          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)
      }
        ],
        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
    }
}

/** 导出按钮操作 */
const exportLoading = ref(false)
const handleExport = async () => {
  try {
    // 导出的二次确认
    await message.exportConfirm()
    // 发起导出
    exportLoading.value = true
    const data = await DaPoint.exportDaPointValue({
      pointNo: dataForm.value.pointNo,
      start: dataForm.value.startTime,
      end: dataForm.value.endTime
    })
    download.excel(data, dataForm.value.pointName + '.xls')
  } catch {
  } finally {
    exportLoading.value = false
  }
}
</script>
<style>
  .el-select {
    width: 100%;
  }
.el-select {
  width: 100%;
}

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