Cold_offline_web/src/views/project/data/edit/index.vue

<template>
  <n-space vertical>
    <n-breadcrumb>
      <n-breadcrumb-item>任务管理</n-breadcrumb-item>
      <n-breadcrumb-item>数据编辑</n-breadcrumb-item>
    </n-breadcrumb>
    <n-grid x-gap="12" :cols="4">
      <n-gi>
        <n-card class="h-full">
          <n-list>
            <template #footer>
              <n-space align="center">
                <n-button size="small" type="primary">全选择</n-button>
                <n-button size="small" type="primary">全取消</n-button>
                <n-button size="small" type="primary">反选</n-button>
                <n-gradient-text type="info"> 传感器总数：861 </n-gradient-text>
              </n-space>
            </template>
            <n-checkbox-group @update:value="onUpdateValues">
              <template v-for="item of generalOptions" :key="item.value">
                <n-list-item>
                  <template #prefix>
                    <n-checkbox :value="item.value" />
                  </template>
                  <template #suffix>
                    <n-button type="error" size="small" text>删除</n-button>
                  </template>
                  <n-thing>
                    <template #avatar>
                      <n-avatar
                        round
                        size="small"
                        src="https://07akioni.oss-cn-beijing.aliyuncs.com/07akioni.jpeg"
                      />
                    </template>
                    <template #header> ID：001 </template>
                    <template #description> 001 </template>
                  </n-thing>
                </n-list-item>
              </template>
            </n-checkbox-group>
          </n-list>
        </n-card>
      </n-gi>
      <n-gi :span="3">
        <n-space vertical>
          <n-space>
            <n-date-picker
              v-model:value="range"
              type="datetimerange"
              clearable
            />
            <n-button type="primary">搜索</n-button>
            <n-button type="primary">导出数据</n-button>
            <n-button type="primary" @click="showImportModal"
              >导入数据</n-button
            >
            <n-button type="primary" @click="showAddModal">添加数据</n-button>
            <n-button type="primary" @click="showSetModal"
              >温湿度上下限设置</n-button
            >
          </n-space>
          <n-card>
            <n-scrollbar style="max-height: 600px">
              <Chart
                ref="chart"
                constructor-type="stockChart"
                :options="chartOptions"
              ></Chart>
            </n-scrollbar>
          </n-card>
        </n-space>
      </n-gi>
    </n-grid>
  </n-space>
  <n-modal
    v-model:show="modal.showModal"
    :show-icon="false"
    preset="dialog"
    :title="modal.title"
  >
    <template v-if="modal.title === '详情'">
      <n-form-item>
        <n-input v-model:value="value" type="text" />
      </n-form-item>
      <n-space justify="end">
        <n-popconfirm @positive-click="handleDelete">
          <template #trigger>
            <n-button type="error">删除该点</n-button>
          </template>
          是否确认删除？
        </n-popconfirm>
        <n-button type="primary">确定</n-button>
      </n-space>
    </template>
    <template v-if="modal.title === '导入'">
      <n-form
        ref="formRef"
        :model="formValue"
        :rules="rules"
        label-placement="left"
        label-width="auto"
      >
        <n-form-item label="开始时间" path="datetimeValue">
          <n-date-picker
            v-model:value="formValue.datetimeValue"
            type="datetime"
            class="w-full"
          />
        </n-form-item>
        <n-form-item label="结束时间" path="datetimeValue">
          <n-date-picker
            v-model:value="formValue.datetimeValue"
            type="datetime"
            class="w-full"
          />
        </n-form-item>
        <n-form-item label="SN" path="value">
          <n-input v-model:value="formValue.value" />
        </n-form-item>
        <n-form-item label="探头编号" path="value">
          <n-input v-model:value="formValue.value" />
        </n-form-item>
        <div class="flex justify-end">
          <n-button type="primary">查询</n-button>
        </div>
      </n-form>
    </template>
    <template v-if="modal.title === '添加'">
      <n-form
        ref="formRef"
        :model="formValue"
        :rules="rules"
        label-placement="left"
        label-width="auto"
      >
        <n-form-item label="测点" path="selectValue">
          <n-select
            v-model:value="formValue.selectValue"
            :options="generalOptions"
          />
        </n-form-item>
        <n-form-item label="温度" path="value">
          <n-input v-model:value="formValue.value">
            <template #suffix> ℃ </template>
          </n-input>
        </n-form-item>
        <n-form-item label="湿度" path="value">
          <n-input v-model:value="formValue.value">
            <template #suffix> % </template>
          </n-input>
        </n-form-item>
        <n-form-item label="时间" path="datetimeValue">
          <n-date-picker
            v-model:value="formValue.datetimeValue"
            type="datetime"
            class="w-full"
          />
        </n-form-item>
        <div class="flex justify-end">
          <n-button type="primary">添加</n-button>
        </div>
      </n-form>
    </template>
    <template v-if="modal.title === '设置'">
      <n-form
        ref="formRef"
        :model="formValue"
        :rules="rules"
        label-placement="left"
        label-width="auto"
      >
        <n-divider title-placement="center"> 温度 </n-divider>
        <n-form-item label="上限" path="value">
          <n-input v-model:value="formValue.value" />
        </n-form-item>
        <n-form-item label="下限" path="value">
          <n-input v-model:value="formValue.value" />
        </n-form-item>
        <n-divider title-placement="center"> 湿度 </n-divider>
        <n-form-item label="上限" path="value">
          <n-input v-model:value="formValue.value" />
        </n-form-item>
        <n-form-item label="下限" path="value">
          <n-input v-model:value="formValue.value" />
        </n-form-item>
        <div class="flex justify-end">
          <n-button type="primary">确定</n-button>
        </div>
      </n-form>
    </template>
  </n-modal>
</template>

<script setup>
import { Chart } from "highcharts-vue";

const chart = ref(null);

const onUpdateValues = (values, meta) => {
  console.log(meta);
  if (meta.actionType === "check") {
    let data = getData(n);
    chart.value.chart.addSeries({
      id: meta.value,
      name: meta.value,
      data,
      lineWidth: 0.5,
      cursor: "pointer",
      events: {
        click() {
          modal.showModal = true;
          modal.title = "详情";
        },
      },
    });
  } else {
    chart.value.chart.get(meta.value).remove();
  }
};

const handleDelete = () => {
  console.log("delete");
};

const range = ref(null);

const generalOptions = ["a", "b", "c", "d", "e", "f", "g"].map((v) => ({
  label: v,
  value: v,
}));

// 表单数据
const formValue = reactive({
  value: null,
  datetimeValue: null,
  selectValue: null,
});

// 表单规则
const rules = {
  datetimeValue: {
    type: "number",
    required: true,
    trigger: ["blur", "change"],
    message: "不能为空",
  },
  value: {
    required: true,
    trigger: ["blur"],
    message: "不能为空",
  },
};

function getData(n) {
  let arr = [];
  let i = "";
  let a = "";
  let b = "";
  let c = "";
  let spike = "";
  for (let i = 0; i < n; i = i + 1) {
    if (i % 100 === 0) {
      a = 2 * Math.random();
    }
    if (i % 1000 === 0) {
      b = 2 * Math.random();
    }
    if (i % 10000 === 0) {
      c = 2 * Math.random();
    }
    if (i % 50000 === 0) {
      spike = 10;
    } else {
      spike = 0;
    }
    arr.push([i, 2 * Math.sin(i / 100) + a + b + c + spike + Math.random()]);
  }
  return arr;
}
let n = 1000000;

// 图表配置
const chartOptions = {
  legend: {
    enabled: true,
  },
  accessibility: {
    enabled: false,
  },

  chart: {
    zoomType: "xy",
  },

  boost: {
    useGPUTranslations: true,
    seriesThreshold: 5,
  },

  title: {
    text: `Highcharts drawing ${n} points`,
  },

  subtitle: {
    text: "Using the Boost module",
  },

  tooltip: {
    valueDecimals: 2,
  },

  series: [],
};

// 对话框数据源
const modal = reactive({
  showModal: false,
  title: "",
});

// 显示添加
const showSetModal = () => {
  modal.showModal = true;
  modal.title = "设置";
};

// 显示添加
const showAddModal = () => {
  modal.showModal = true;
  modal.title = "添加";
};

// 显示导入
const showImportModal = () => {
  modal.showModal = true;
  modal.title = "导入";
};
</script>

<style lang="scss" scoped></style>