admin-ui/src/views/iot/projects/screen/LineChart.vue

<template>
  <div class="project-card">
    <div class="select-device title">
      <div class="flex">
        <img src="/@/assets/project/project-icon4.svg" v-if="index" class="icon" />
        <img src="/@/assets/project/project-icon3.svg" v-else class="icon" />
        {{ $t('message.projects.screen.lineChart.title') }}
      </div>
      <div class="flex">
        <el-date-picker
          class="date-picker-wrap"
          v-model="params.timeRange"
          :clearable="false"
          type="datetimerange"
          :range-separator="$t('message.projects.screen.lineChart.date.rangeSeparator')"
          :start-placeholder="$t('message.projects.screen.lineChart.date.startPlaceholder')"
          :end-placeholder="$t('message.projects.screen.lineChart.date.endPlaceholder')"
          format="MM-DD HH:mm"
          value-format="YYYY-MM-DD HH:mm:00"
          date-format="YYYY/MM/DD"
          time-format="hh:mm"
          @change="getChartData"
          style="width: 230px; margin-right: 10px"
        />
        <el-select style="width: 150px" v-model="params.properties" multiple collapse-tags @change="getChartData" :placeholder="$t('message.projects.screen.lineChart.selects.properties')">
          <el-option v-for="row in options" :key="row.key" :label="row.name" :value="row.key"></el-option>
        </el-select>
      </div>
    </div>
    <section class="line">
      <Chart height="22.5vh" ref="chartRef"></Chart>
    </section>
  </div>
</template>
<script setup lang="ts">
import { onMounted, reactive, ref, watch } from "vue";
import { getLineMultiOption } from "/@/components/chart/options";
import Chart from "/@/components/chart/index.vue";
import api from "/@/api/projects";
import { dayjs } from "element-plus";
import { useStore } from "/@/store/index";
const store = useStore();

const props = defineProps({
  index: {
    type: [String, Number],
    dafault: 0,
  },
  deviceKey: {
    type: String,
    dafault: "",
  },
});

let deviceCode = "";
const chartRef = ref();
const theme = ref("light");
const options = ref<any[]>([]);
const params = reactive({
  timeRange: [dayjs().subtract(1, "hour").format("YYYY-MM-DD HH:mm:00"), dayjs().format("YYYY-MM-DD HH:mm:00")],
  properties: [] as string[],
});

watch(
  () => store.state.themeConfig.themeConfig.isIsDark,
  (isIsDark) => {
    theme.value = isIsDark ? "dark" : "light";
    if (params.properties.length) getChartData();
  },
  {
    immediate: true,
  }
);

watch(() => props.deviceKey!, getData);

onMounted(() => {
  chartRef.value?.hideLoading();
});

function getData(code: string) {
  params.properties = [];
  options.value = [];

  deviceCode = code;

  if (!code) return chartRef.value.draw();

  chartRef.value?.loading();

  api.screen.propertyList(code).then((res: any) => {
    const list = res?.Data || [];
    options.value = list;

    if (!list.length) return chartRef.value.draw();

    const i = Number(props.index);
    if (list[i]) {
      params.properties = [list[i].key];
    } else {
      params.properties = [list[0].key];
    }
    getChartData();
  });
}

function getChartData() {
  chartRef.value.loading();
  if (!params.properties.length) return chartRef.value.draw();
  api.screen
    .chartData({
      deviceKey: deviceCode,
      dateRange: params.timeRange,
      properties: params.properties,
    })
    .then((res: any) => {
      if (!res) return chartRef.value.draw();

      const values = Object.values(res) as any[];

      const legend = Object.keys(res).map((key) => options.value.find((item) => item.key === key)?.name);

      chartRef.value?.draw(
        getLineMultiOption({
          datas: values.map((arr: any) => (arr || []).map((item: any) => item.dataValue)),
          legend,
          xAxis: (values[0] || []).map((item: any) => item.dataTime),
          theme: theme.value,
        })
      );
    });
}
</script>

<style lang="scss" scoped>
.select-device {
  color: var(--primary-color);
  display: flex;
  align-items: center;
  white-space: nowrap;
  justify-content: space-between;
}
</style>