|
@@ -8,37 +8,35 @@
|
|
|
<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 #header>
|
|
|
+ <n-checkbox label="全选" @update:checked="handleCheckAll" />
|
|
|
</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"
|
|
|
- />
|
|
|
+ <n-scrollbar style="max-height: 600px">
|
|
|
+ <n-checkbox-group
|
|
|
+ @update:value="onUpdateValues"
|
|
|
+ v-model:value="checkValues"
|
|
|
+ >
|
|
|
+ <template v-for="item of classList" :key="item.T_id">
|
|
|
+ <n-list-item class="mr-5">
|
|
|
+ <template #prefix>
|
|
|
+ <n-checkbox :value="item.T_id" />
|
|
|
+ </template>
|
|
|
+ <template #suffix>
|
|
|
+ <n-button type="error" size="small" text>删除</n-button>
|
|
|
</template>
|
|
|
- <template #header> ID:001 </template>
|
|
|
- <template #description> 001 </template>
|
|
|
- </n-thing>
|
|
|
- </n-list-item>
|
|
|
- </template>
|
|
|
- </n-checkbox-group>
|
|
|
+ <n-thing>
|
|
|
+ <template #header> ID:{{ item.T_id }} </template>
|
|
|
+ <template #description> {{ item.T_sn }} </template>
|
|
|
+ </n-thing>
|
|
|
+ </n-list-item>
|
|
|
+ </template>
|
|
|
+ </n-checkbox-group>
|
|
|
+ </n-scrollbar>
|
|
|
+ <template #footer>
|
|
|
+ <n-gradient-text type="info">
|
|
|
+ 传感器总数:{{ classList.length }}
|
|
|
+ </n-gradient-text>
|
|
|
+ </template>
|
|
|
</n-list>
|
|
|
</n-card>
|
|
|
</n-gi>
|
|
@@ -63,7 +61,12 @@
|
|
|
<n-card>
|
|
|
<n-scrollbar style="max-height: 600px">
|
|
|
<Chart
|
|
|
- ref="chart"
|
|
|
+ ref="chart1"
|
|
|
+ constructor-type="stockChart"
|
|
|
+ :options="chartOptions"
|
|
|
+ ></Chart>
|
|
|
+ <Chart
|
|
|
+ ref="chart2"
|
|
|
constructor-type="stockChart"
|
|
|
:options="chartOptions"
|
|
|
></Chart>
|
|
@@ -81,7 +84,7 @@
|
|
|
>
|
|
|
<template v-if="modal.title === '详情'">
|
|
|
<n-form-item>
|
|
|
- <n-input v-model:value="value" type="text" />
|
|
|
+ <n-input v-model:value="formValue.value" />
|
|
|
</n-form-item>
|
|
|
<n-space justify="end">
|
|
|
<n-popconfirm @positive-click="handleDelete">
|
|
@@ -194,41 +197,26 @@
|
|
|
|
|
|
<script setup>
|
|
|
import { Chart } from "highcharts-vue";
|
|
|
+import { getTaskDataClassList, getTaskDataList } from "@/api";
|
|
|
+import { useTaskStore } from "@/store/task";
|
|
|
|
|
|
-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 taskStore = useTaskStore();
|
|
|
|
|
|
-const handleDelete = () => {
|
|
|
- console.log("delete");
|
|
|
-};
|
|
|
+const chart1 = ref(null);
|
|
|
+const chart2 = ref(null);
|
|
|
|
|
|
const range = ref(null);
|
|
|
|
|
|
-const generalOptions = ["a", "b", "c", "d", "e", "f", "g"].map((v) => ({
|
|
|
- label: v,
|
|
|
- value: v,
|
|
|
-}));
|
|
|
+// 查询数据
|
|
|
+const queryData = reactive({
|
|
|
+ T_task_id: taskStore.task.T_task_id,
|
|
|
+ T_sn: "",
|
|
|
+ T_id: "",
|
|
|
+ Time_start: "",
|
|
|
+ Time_and: "",
|
|
|
+ page: 1,
|
|
|
+ page_z: 10,
|
|
|
+});
|
|
|
|
|
|
// 表单数据
|
|
|
const formValue = reactive({
|
|
@@ -252,33 +240,72 @@ const rules = {
|
|
|
},
|
|
|
};
|
|
|
|
|
|
-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()]);
|
|
|
+// 设备列表
|
|
|
+const classList = ref([]);
|
|
|
+
|
|
|
+// 列表
|
|
|
+const dataList = ref([]);
|
|
|
+
|
|
|
+// 选项组受控模式下的值
|
|
|
+const checkValues = ref([]);
|
|
|
+
|
|
|
+// 全选
|
|
|
+const handleCheckAll = (checked) => {
|
|
|
+ if (checked) {
|
|
|
+ checkValues.value = classList.value.map((item) => item.T_id);
|
|
|
+ } else {
|
|
|
+ checkValues.value = [];
|
|
|
+ }
|
|
|
+};
|
|
|
+
|
|
|
+// 选项组的值改变时的回调
|
|
|
+const onUpdateValues = async (values, meta) => {
|
|
|
+ const classInfo = classList.value.find((item) => item.T_id === meta.value);
|
|
|
+ queryData.T_id = classInfo.T_id;
|
|
|
+ queryData.T_sn = classInfo.T_sn;
|
|
|
+ await getDataList();
|
|
|
+ const data1 = dataList.value.map((item) => [item.T_time, item.T_t]);
|
|
|
+ const data2 = dataList.value.map((item) => [item.T_time, item.T_rh]);
|
|
|
+ if (meta.actionType === "check") {
|
|
|
+ chart1.value.chart.addSeries({
|
|
|
+ id: meta.value,
|
|
|
+ name: meta.value,
|
|
|
+ data: data1,
|
|
|
+ lineWidth: 1,
|
|
|
+ cursor: "pointer",
|
|
|
+ events: {
|
|
|
+ click() {
|
|
|
+ modal.showModal = true;
|
|
|
+ modal.title = "详情";
|
|
|
+ },
|
|
|
+ },
|
|
|
+ });
|
|
|
+ chart2.value.chart.addSeries({
|
|
|
+ id: meta.value,
|
|
|
+ name: meta.value,
|
|
|
+ data: data2,
|
|
|
+ lineWidth: 1,
|
|
|
+ cursor: "pointer",
|
|
|
+ events: {
|
|
|
+ click(e) {
|
|
|
+ modal.showModal = true;
|
|
|
+ modal.title = "详情";
|
|
|
+ console.log(e);
|
|
|
+ },
|
|
|
+ },
|
|
|
+ });
|
|
|
+ } else {
|
|
|
+ chart1.value.chart.get(meta.value).remove();
|
|
|
+ chart2.value.chart.get(meta.value).remove();
|
|
|
}
|
|
|
- return arr;
|
|
|
-}
|
|
|
-let n = 1000000;
|
|
|
+};
|
|
|
+
|
|
|
+// 删除
|
|
|
+const handleDelete = () => {
|
|
|
+ console.log("delete");
|
|
|
+};
|
|
|
+
|
|
|
+const series = ref([]);
|
|
|
|
|
|
// 图表配置
|
|
|
const chartOptions = {
|
|
@@ -299,18 +326,22 @@ const chartOptions = {
|
|
|
},
|
|
|
|
|
|
title: {
|
|
|
- text: `Highcharts drawing ${n} points`,
|
|
|
+ text: "车载冷藏箱",
|
|
|
},
|
|
|
|
|
|
subtitle: {
|
|
|
- text: "Using the Boost module",
|
|
|
+ align: "left",
|
|
|
+ style: {
|
|
|
+ fontWeight: "bold",
|
|
|
+ },
|
|
|
+ text: "车载冷藏箱",
|
|
|
},
|
|
|
|
|
|
tooltip: {
|
|
|
valueDecimals: 2,
|
|
|
},
|
|
|
|
|
|
- series: [],
|
|
|
+ series,
|
|
|
};
|
|
|
|
|
|
// 对话框数据源
|
|
@@ -336,6 +367,22 @@ const showImportModal = () => {
|
|
|
modal.showModal = true;
|
|
|
modal.title = "导入";
|
|
|
};
|
|
|
+
|
|
|
+// 获取设备列表
|
|
|
+const getClassList = async () => {
|
|
|
+ const { data: res } = await getTaskDataClassList({
|
|
|
+ T_task_id: taskStore.task.T_task_id,
|
|
|
+ });
|
|
|
+ classList.value = res.Data ? res.Data : [];
|
|
|
+};
|
|
|
+
|
|
|
+// 获取任务数据列表
|
|
|
+const getDataList = async () => {
|
|
|
+ const { data: res } = await getTaskDataList(queryData);
|
|
|
+ dataList.value = res.Data.List ? res.Data.List : [];
|
|
|
+};
|
|
|
+
|
|
|
+getClassList();
|
|
|
</script>
|
|
|
|
|
|
<style lang="scss" scoped></style>
|