|
@@ -6,12 +6,12 @@
|
|
</n-breadcrumb>
|
|
</n-breadcrumb>
|
|
<n-grid x-gap="12" :cols="4">
|
|
<n-grid x-gap="12" :cols="4">
|
|
<n-gi>
|
|
<n-gi>
|
|
- <n-card class="h-full">
|
|
|
|
|
|
+ <n-card>
|
|
<n-list>
|
|
<n-list>
|
|
<template #header>
|
|
<template #header>
|
|
<n-checkbox label="全选" @update:checked="handleCheckAll" />
|
|
<n-checkbox label="全选" @update:checked="handleCheckAll" />
|
|
</template>
|
|
</template>
|
|
- <n-scrollbar style="max-height: 600px">
|
|
|
|
|
|
+ <n-scrollbar style="max-height: 600px" @scroll="onScroll">
|
|
<n-checkbox-group
|
|
<n-checkbox-group
|
|
@update:value="onUpdateValues"
|
|
@update:value="onUpdateValues"
|
|
v-model:value="checkValues"
|
|
v-model:value="checkValues"
|
|
@@ -43,32 +43,41 @@
|
|
<n-gi :span="3">
|
|
<n-gi :span="3">
|
|
<n-space vertical>
|
|
<n-space vertical>
|
|
<n-space>
|
|
<n-space>
|
|
- <n-date-picker
|
|
|
|
- v-model:value="range"
|
|
|
|
- type="datetimerange"
|
|
|
|
- clearable
|
|
|
|
- />
|
|
|
|
|
|
+ <n-space align="center">
|
|
|
|
+ <span>开始时间</span>
|
|
|
|
+ <n-date-picker
|
|
|
|
+ v-model:formatted-value="queryData.Time_start"
|
|
|
|
+ value-format="yyyy.MM.dd HH:mm:ss"
|
|
|
|
+ type="datetime"
|
|
|
|
+ clearable
|
|
|
|
+ />
|
|
|
|
+ </n-space>
|
|
|
|
+ <n-space align="center">
|
|
|
|
+ <span>结束时间</span>
|
|
|
|
+ <n-date-picker
|
|
|
|
+ v-model:formatted-value="queryData.Time_end"
|
|
|
|
+ value-format="yyyy.MM.dd HH:mm:ss"
|
|
|
|
+ type="datetime"
|
|
|
|
+ clearable
|
|
|
|
+ />
|
|
|
|
+ </n-space>
|
|
<n-button type="primary">搜索</n-button>
|
|
<n-button type="primary">搜索</n-button>
|
|
<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
|
|
|
|
- >
|
|
|
|
|
|
+ <ImportVue :task="task" />
|
|
|
|
+ <AddVue :task="task" />
|
|
|
|
+ <SetVue />
|
|
</n-space>
|
|
</n-space>
|
|
<n-card>
|
|
<n-card>
|
|
- <n-scrollbar style="max-height: 600px">
|
|
|
|
|
|
+ <n-scrollbar style="max-height: 650px">
|
|
<Chart
|
|
<Chart
|
|
ref="chart1"
|
|
ref="chart1"
|
|
constructor-type="stockChart"
|
|
constructor-type="stockChart"
|
|
- :options="chartOptions"
|
|
|
|
|
|
+ :options="chartOptions1"
|
|
></Chart>
|
|
></Chart>
|
|
<Chart
|
|
<Chart
|
|
ref="chart2"
|
|
ref="chart2"
|
|
constructor-type="stockChart"
|
|
constructor-type="stockChart"
|
|
- :options="chartOptions"
|
|
|
|
|
|
+ :options="chartOptions2"
|
|
></Chart>
|
|
></Chart>
|
|
</n-scrollbar>
|
|
</n-scrollbar>
|
|
</n-card>
|
|
</n-card>
|
|
@@ -76,144 +85,43 @@
|
|
</n-gi>
|
|
</n-gi>
|
|
</n-grid>
|
|
</n-grid>
|
|
</n-space>
|
|
</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="formValue.value" />
|
|
|
|
- </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 v-model:show="showModal" :show-icon="false" preset="dialog">
|
|
|
|
+ <n-form-item>
|
|
|
|
+ <n-input v-model:value="formValue.value" />
|
|
|
|
+ </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>
|
|
</n-modal>
|
|
</n-modal>
|
|
</template>
|
|
</template>
|
|
|
|
|
|
<script setup>
|
|
<script setup>
|
|
import { Chart } from "highcharts-vue";
|
|
import { Chart } from "highcharts-vue";
|
|
import { getTaskDataClassList, getTaskDataList } from "@/api";
|
|
import { getTaskDataClassList, getTaskDataList } from "@/api";
|
|
-import { useTaskStore } from "@/store/task";
|
|
|
|
|
|
+import AddVue from "./AddVue.vue";
|
|
|
|
+import ImportVue from "./ImportVue.vue";
|
|
|
|
+import SetVue from "./SetVue.vue";
|
|
|
|
|
|
-const taskStore = useTaskStore();
|
|
|
|
|
|
+const task = window.sessionStorage.getItem("task")
|
|
|
|
+ ? JSON.parse(window.sessionStorage.getItem("task"))
|
|
|
|
+ : {};
|
|
|
|
|
|
const chart1 = ref(null);
|
|
const chart1 = ref(null);
|
|
const chart2 = ref(null);
|
|
const chart2 = ref(null);
|
|
|
|
|
|
-const range = ref(null);
|
|
|
|
-
|
|
|
|
// 查询数据
|
|
// 查询数据
|
|
const queryData = reactive({
|
|
const queryData = reactive({
|
|
- T_task_id: taskStore.task.T_task_id,
|
|
|
|
|
|
+ T_task_id: task.T_task_id,
|
|
T_sn: "",
|
|
T_sn: "",
|
|
T_id: "",
|
|
T_id: "",
|
|
- Time_start: "",
|
|
|
|
- Time_and: "",
|
|
|
|
|
|
+ Time_start: null,
|
|
|
|
+ Time_end: null,
|
|
page: 1,
|
|
page: 1,
|
|
page_z: 10,
|
|
page_z: 10,
|
|
});
|
|
});
|
|
@@ -228,14 +136,8 @@ const formValue = reactive({
|
|
// 表单规则
|
|
// 表单规则
|
|
const rules = {
|
|
const rules = {
|
|
datetimeValue: {
|
|
datetimeValue: {
|
|
- type: "number",
|
|
|
|
- required: true,
|
|
|
|
- trigger: ["blur", "change"],
|
|
|
|
- message: "不能为空",
|
|
|
|
- },
|
|
|
|
- value: {
|
|
|
|
required: true,
|
|
required: true,
|
|
- trigger: ["blur"],
|
|
|
|
|
|
+ trigger: "blur",
|
|
message: "不能为空",
|
|
message: "不能为空",
|
|
},
|
|
},
|
|
};
|
|
};
|
|
@@ -249,6 +151,16 @@ const dataList = ref([]);
|
|
// 选项组受控模式下的值
|
|
// 选项组受控模式下的值
|
|
const checkValues = ref([]);
|
|
const checkValues = ref([]);
|
|
|
|
|
|
|
|
+//
|
|
|
|
+const onScroll = (e) => {
|
|
|
|
+ const clientHeight = e.target.clientHeight;
|
|
|
|
+ const scrollTop = e.target.scrollTop;
|
|
|
|
+ const scrollHeight = e.target.scrollHeight;
|
|
|
|
+ console.log(clientHeight);
|
|
|
|
+ console.log(scrollTop);
|
|
|
|
+ console.log(scrollHeight);
|
|
|
|
+};
|
|
|
|
+
|
|
// 全选
|
|
// 全选
|
|
const handleCheckAll = (checked) => {
|
|
const handleCheckAll = (checked) => {
|
|
if (checked) {
|
|
if (checked) {
|
|
@@ -264,8 +176,14 @@ const onUpdateValues = async (values, meta) => {
|
|
queryData.T_id = classInfo.T_id;
|
|
queryData.T_id = classInfo.T_id;
|
|
queryData.T_sn = classInfo.T_sn;
|
|
queryData.T_sn = classInfo.T_sn;
|
|
await getDataList();
|
|
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]);
|
|
|
|
|
|
+ const data1 = dataList.value.map((item) => [
|
|
|
|
+ new Date(item.T_time).getTime(),
|
|
|
|
+ item.T_t,
|
|
|
|
+ ]);
|
|
|
|
+ const data2 = dataList.value.map((item) => [
|
|
|
|
+ new Date(item.T_time).getTime(),
|
|
|
|
+ item.T_rh,
|
|
|
|
+ ]);
|
|
if (meta.actionType === "check") {
|
|
if (meta.actionType === "check") {
|
|
chart1.value.chart.addSeries({
|
|
chart1.value.chart.addSeries({
|
|
id: meta.value,
|
|
id: meta.value,
|
|
@@ -275,8 +193,7 @@ const onUpdateValues = async (values, meta) => {
|
|
cursor: "pointer",
|
|
cursor: "pointer",
|
|
events: {
|
|
events: {
|
|
click() {
|
|
click() {
|
|
- modal.showModal = true;
|
|
|
|
- modal.title = "详情";
|
|
|
|
|
|
+ showModal.value = true;
|
|
},
|
|
},
|
|
},
|
|
},
|
|
});
|
|
});
|
|
@@ -288,8 +205,7 @@ const onUpdateValues = async (values, meta) => {
|
|
cursor: "pointer",
|
|
cursor: "pointer",
|
|
events: {
|
|
events: {
|
|
click(e) {
|
|
click(e) {
|
|
- modal.showModal = true;
|
|
|
|
- modal.title = "详情";
|
|
|
|
|
|
+ showModal.value = true;
|
|
console.log(e);
|
|
console.log(e);
|
|
},
|
|
},
|
|
},
|
|
},
|
|
@@ -305,13 +221,24 @@ const handleDelete = () => {
|
|
console.log("delete");
|
|
console.log("delete");
|
|
};
|
|
};
|
|
|
|
|
|
-const series = ref([]);
|
|
|
|
-
|
|
|
|
// 图表配置
|
|
// 图表配置
|
|
-const chartOptions = {
|
|
|
|
|
|
+const chartOptions1 = {
|
|
|
|
+ xAxis: {
|
|
|
|
+ labels: {
|
|
|
|
+ format: "{value:%Y-%m-%d}",
|
|
|
|
+ },
|
|
|
|
+ },
|
|
|
|
+
|
|
|
|
+ yAxis: {
|
|
|
|
+ labels: {
|
|
|
|
+ format: `{text}℃`,
|
|
|
|
+ },
|
|
|
|
+ },
|
|
|
|
+
|
|
legend: {
|
|
legend: {
|
|
enabled: true,
|
|
enabled: true,
|
|
},
|
|
},
|
|
|
|
+
|
|
accessibility: {
|
|
accessibility: {
|
|
enabled: false,
|
|
enabled: false,
|
|
},
|
|
},
|
|
@@ -331,9 +258,6 @@ const chartOptions = {
|
|
|
|
|
|
subtitle: {
|
|
subtitle: {
|
|
align: "left",
|
|
align: "left",
|
|
- style: {
|
|
|
|
- fontWeight: "bold",
|
|
|
|
- },
|
|
|
|
text: "车载冷藏箱",
|
|
text: "车载冷藏箱",
|
|
},
|
|
},
|
|
|
|
|
|
@@ -341,44 +265,72 @@ const chartOptions = {
|
|
valueDecimals: 2,
|
|
valueDecimals: 2,
|
|
},
|
|
},
|
|
|
|
|
|
- series,
|
|
|
|
|
|
+ series: [],
|
|
};
|
|
};
|
|
|
|
+const chartOptions2 = {
|
|
|
|
+ xAxis: {
|
|
|
|
+ labels: {
|
|
|
|
+ format: "{value:%Y-%m-%d}",
|
|
|
|
+ },
|
|
|
|
+ },
|
|
|
|
|
|
-// 对话框数据源
|
|
|
|
-const modal = reactive({
|
|
|
|
- showModal: false,
|
|
|
|
- title: "",
|
|
|
|
-});
|
|
|
|
|
|
+ yAxis: {
|
|
|
|
+ labels: {
|
|
|
|
+ format: `{text}%`,
|
|
|
|
+ },
|
|
|
|
+ },
|
|
|
|
|
|
-// 显示添加
|
|
|
|
-const showSetModal = () => {
|
|
|
|
- modal.showModal = true;
|
|
|
|
- modal.title = "设置";
|
|
|
|
-};
|
|
|
|
|
|
+ legend: {
|
|
|
|
+ enabled: true,
|
|
|
|
+ },
|
|
|
|
|
|
-// 显示添加
|
|
|
|
-const showAddModal = () => {
|
|
|
|
- modal.showModal = true;
|
|
|
|
- modal.title = "添加";
|
|
|
|
-};
|
|
|
|
|
|
+ accessibility: {
|
|
|
|
+ enabled: false,
|
|
|
|
+ },
|
|
|
|
+
|
|
|
|
+ chart: {
|
|
|
|
+ zoomType: "xy",
|
|
|
|
+ },
|
|
|
|
+
|
|
|
|
+ boost: {
|
|
|
|
+ useGPUTranslations: true,
|
|
|
|
+ seriesThreshold: 5,
|
|
|
|
+ },
|
|
|
|
+
|
|
|
|
+ title: {
|
|
|
|
+ text: "车载冷藏箱",
|
|
|
|
+ },
|
|
|
|
+
|
|
|
|
+ subtitle: {
|
|
|
|
+ align: "left",
|
|
|
|
+ text: "车载冷藏箱",
|
|
|
|
+ },
|
|
|
|
|
|
-// 显示导入
|
|
|
|
-const showImportModal = () => {
|
|
|
|
- modal.showModal = true;
|
|
|
|
- modal.title = "导入";
|
|
|
|
|
|
+ tooltip: {
|
|
|
|
+ valueDecimals: 2,
|
|
|
|
+ },
|
|
|
|
+
|
|
|
|
+ series: [],
|
|
};
|
|
};
|
|
|
|
|
|
|
|
+// 是否展示 Modal
|
|
|
|
+const showModal = ref(false);
|
|
|
|
+
|
|
// 获取设备列表
|
|
// 获取设备列表
|
|
const getClassList = async () => {
|
|
const getClassList = async () => {
|
|
const { data: res } = await getTaskDataClassList({
|
|
const { data: res } = await getTaskDataClassList({
|
|
- T_task_id: taskStore.task.T_task_id,
|
|
|
|
|
|
+ T_task_id: task.T_task_id,
|
|
});
|
|
});
|
|
classList.value = res.Data ? res.Data : [];
|
|
classList.value = res.Data ? res.Data : [];
|
|
};
|
|
};
|
|
|
|
|
|
// 获取任务数据列表
|
|
// 获取任务数据列表
|
|
const getDataList = async () => {
|
|
const getDataList = async () => {
|
|
- const { data: res } = await getTaskDataList(queryData);
|
|
|
|
|
|
+ const { data: res } = await getTaskDataList({
|
|
|
|
+ ...queryData,
|
|
|
|
+ Time_start: queryData.Time_start ? queryData.Time_start : "",
|
|
|
|
+ Time_end: queryData.Time_end ? queryData.Time_end : "",
|
|
|
|
+ });
|
|
dataList.value = res.Data.List ? res.Data.List : [];
|
|
dataList.value = res.Data.List ? res.Data.List : [];
|
|
};
|
|
};
|
|
|
|
|