|
@@ -9,11 +9,18 @@
|
|
<n-tab-pane name="1" tab="设备">
|
|
<n-tab-pane name="1" tab="设备">
|
|
<n-list>
|
|
<n-list>
|
|
<template #header>
|
|
<template #header>
|
|
- <div style="display: flex;justify-content: space-between;align-items: center;">
|
|
|
|
- <n-checkbox v-model:checked="checked" @update:checked="handleSelectAll">
|
|
|
|
- 全选
|
|
|
|
- </n-checkbox>
|
|
|
|
- <n-button type="primary" @click="renderFun()">渲染</n-button>
|
|
|
|
|
|
+ <div style="">
|
|
|
|
+ <div style="display: flex;justify-content: space-between;align-items: center;margin-bottom: 10px;">
|
|
|
|
+ <n-date-picker format="yyyy-MM-dd HH:mm" v-model:value="pickTimes.picktmSta"
|
|
|
|
+ :time-picker-props="{ format: 'HH:mm' }" @update:formatted-value="setTimeFuns" @focus="focusFun(1)" type="datetimerange" clearable />
|
|
|
|
+ <n-button type="primary" @click="renderFun(1)" style="margin-left: 10px;">渲染</n-button>
|
|
|
|
+ </div>
|
|
|
|
+ <div>
|
|
|
|
+ <n-checkbox v-model:checked="checked" @update:checked="handleSelectAll" style="flex-shrink: 0;">
|
|
|
|
+ 全选
|
|
|
|
+ </n-checkbox>
|
|
|
|
+ </div>
|
|
|
|
+
|
|
</div>
|
|
</div>
|
|
</template>
|
|
</template>
|
|
<n-scrollbar :style="{ maxHeight: `${height - 310}px` }" trigger="none">
|
|
<n-scrollbar :style="{ maxHeight: `${height - 310}px` }" trigger="none">
|
|
@@ -46,7 +53,8 @@
|
|
</n-list>
|
|
</n-list>
|
|
</n-tab-pane>
|
|
</n-tab-pane>
|
|
<n-tab-pane name="2" tab="表单">
|
|
<n-tab-pane name="2" tab="表单">
|
|
- <FormList :task="task" :class-list="classList" :time="time" :temporal-interval="temporalInterval" />
|
|
|
|
|
|
+ <FormList :task="task" ref="formRef" :class-list="classList" :time="time"
|
|
|
|
+ :temporal-interval="temporalInterval" />
|
|
</n-tab-pane>
|
|
</n-tab-pane>
|
|
</n-tabs>
|
|
</n-tabs>
|
|
</n-card>
|
|
</n-card>
|
|
@@ -54,74 +62,71 @@
|
|
<div class="h-full flex flex-col gap-y-3">
|
|
<div class="h-full flex flex-col gap-y-3">
|
|
<n-space justify="space-between">
|
|
<n-space justify="space-between">
|
|
<n-input-group>
|
|
<n-input-group>
|
|
- <n-date-picker format="yyyy-MM-dd HH:mm" v-model:value="ranges" :time-picker-props="{ format: 'HH:mm' }" @update:formatted-value="(value) => {
|
|
|
|
- queryData.Time_start = value[0];
|
|
|
|
- queryData.Time_end = value[1];
|
|
|
|
- }
|
|
|
|
- " type="datetimerange" />
|
|
|
|
- <!-- <n-button type="primary" @click="renderFun">搜索</n-button> -->
|
|
|
|
|
|
+ <n-date-picker format="yyyy-MM-dd HH:mm" v-model:value="pickTimes.pickleveTime" :time-picker-props="{ format: 'HH:mm' }" @focus="focusFun(2)"
|
|
|
|
+ @update:formatted-value="setTimeFuns" type="datetimerange" />
|
|
|
|
+ <n-button type="primary" @click=" renderFun(2) ">渲染</n-button>
|
|
</n-input-group>
|
|
</n-input-group>
|
|
- <n-space>
|
|
|
|
- <ExportVue :queryObj="queryData" :checkData="checkValues"/>
|
|
|
|
- <ImportVue :task="task" />
|
|
|
|
- <ImportPlatform :task="task" />
|
|
|
|
- <AddVue :class-list="classList" :task="task" />
|
|
|
|
- <SetVue/>
|
|
|
|
- <editCopy :queryObj="queryData" :checkData="checkValues" :classList="classList"/>
|
|
|
|
- <AverageCopy :queryObj="queryData" :checkData="checkValues" :classList="classList"></AverageCopy>
|
|
|
|
- <editLeak :queryObj="queryData" :checkData="checkValues"/>
|
|
|
|
- <editTendency :queryObj="queryData" :checkData="checkValues"/>
|
|
|
|
-
|
|
|
|
- <editMath :queryObj="queryData" :checkData="checkValues"/>
|
|
|
|
- <editFixation :queryObj="queryData" :checkData="checkValues"/>
|
|
|
|
- <editSmooth :queryObj="queryData" :checkData="checkValues"/>
|
|
|
|
|
|
+ <n-space>
|
|
|
|
+ <ExportVue :queryObj=" queryData " :checkData=" checkValues " />
|
|
|
|
+ <ImportVue :task=" task " />
|
|
|
|
+ <ImportPlatform :task=" task " />
|
|
|
|
+ <AddVue :class-list=" classList " :task=" task " />
|
|
|
|
+ <SetVue />
|
|
|
|
+ <editCopy :queryObj=" queryData " :checkData=" checkValues " :classList=" classList " />
|
|
|
|
+ <AverageCopy :queryObj=" queryData " :checkData=" checkValues " :classList=" classList "></AverageCopy>
|
|
|
|
+ <editLeak :queryObj=" queryData " :checkData=" checkValues " />
|
|
|
|
+ <editTendency :queryObj=" queryData " :checkData=" checkValues " />
|
|
|
|
+
|
|
|
|
+ <editMath :queryObj=" queryData " :checkData=" checkValues " />
|
|
|
|
+ <editFixation :queryObj=" queryData " :checkData=" checkValues " />
|
|
|
|
+ <editSmooth :queryObj=" queryData " :checkData=" checkValues " />
|
|
<!-- <n-button type="primary" @click="goDataEd">数据编辑</n-button> -->
|
|
<!-- <n-button type="primary" @click="goDataEd">数据编辑</n-button> -->
|
|
</n-space>
|
|
</n-space>
|
|
</n-space>
|
|
</n-space>
|
|
- <n-tabs type="segment" animated v-model:value="tabChart" @update:value="handleTabChange">
|
|
|
|
|
|
+ <n-tabs type="segment" animated v-model:value=" tabChart " @update:value=" handleTabChange ">
|
|
<n-tab-pane name="温度" tab="温度">
|
|
<n-tab-pane name="温度" tab="温度">
|
|
- <highchartsT :dataList="dataList" @setTimeFun="setTimeFun"></highchartsT>
|
|
|
|
-
|
|
|
|
|
|
+ <highchartsT :dataList=" dataList " @setTimeFun=" setTimeFun "></highchartsT>
|
|
|
|
+
|
|
</n-tab-pane>
|
|
</n-tab-pane>
|
|
<n-tab-pane name="湿度" tab="湿度">
|
|
<n-tab-pane name="湿度" tab="湿度">
|
|
- <highchartsH :dataList="dataList" @setTimeFun="setTimeFun"></highchartsH>
|
|
|
|
|
|
+ <highchartsH :dataList=" dataList " @setTimeFun=" setTimeFun "></highchartsH>
|
|
</n-tab-pane>
|
|
</n-tab-pane>
|
|
</n-tabs>
|
|
</n-tabs>
|
|
</div>
|
|
</div>
|
|
</n-card>
|
|
</n-card>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
- <n-modal v-model:show="modal.showModal" :title="modal.title" :show-icon="false" preset="dialog">
|
|
|
|
- <template v-if="modal.title === '温度'">
|
|
|
|
|
|
+ <n-modal v-model:show=" modal.showModal " :title=" modal.title " :show-icon=" false " preset="dialog">
|
|
|
|
+ <template v-if=" modal.title === '温度' ">
|
|
<n-form-item show-require-mark>
|
|
<n-form-item show-require-mark>
|
|
- <n-input v-model:value="formValue.T_t" />
|
|
|
|
|
|
+ <n-input v-model:value=" formValue.T_t " />
|
|
</n-form-item>
|
|
</n-form-item>
|
|
</template>
|
|
</template>
|
|
<template v-else>
|
|
<template v-else>
|
|
<n-form-item show-require-mark>
|
|
<n-form-item show-require-mark>
|
|
- <n-input v-model:value="formValue.T_rh" />
|
|
|
|
|
|
+ <n-input v-model:value=" formValue.T_rh " />
|
|
</n-form-item>
|
|
</n-form-item>
|
|
</template>
|
|
</template>
|
|
<n-space justify="end">
|
|
<n-space justify="end">
|
|
- <n-popconfirm @positive-click="deleteTask">
|
|
|
|
|
|
+ <n-popconfirm @positive-click=" deleteTask ">
|
|
<template #trigger>
|
|
<template #trigger>
|
|
<n-button type="error">删除该点</n-button>
|
|
<n-button type="error">删除该点</n-button>
|
|
</template>
|
|
</template>
|
|
是否确认删除?
|
|
是否确认删除?
|
|
</n-popconfirm>
|
|
</n-popconfirm>
|
|
- <n-button type="primary" @click="editTask">确定</n-button>
|
|
|
|
|
|
+ <n-button type="primary" @click=" editTask ">确定</n-button>
|
|
|
|
|
|
</n-space>
|
|
</n-space>
|
|
</n-modal>
|
|
</n-modal>
|
|
<!-- 编辑 -->
|
|
<!-- 编辑 -->
|
|
- <n-modal v-model:show="showModal" preset="dialog" positive-text="确认" negative-text="取消" :show-icon="false"
|
|
|
|
- @positive-click="handleEdit">
|
|
|
|
- <n-form :model="formDatas" label-width="auto" show-require-mark>
|
|
|
|
|
|
+ <n-modal v-model:show=" showModal " preset="dialog" positive-text="确认" negative-text="取消" :show-icon=" false "
|
|
|
|
+ @positive-click=" handleEdit ">
|
|
|
|
+ <n-form :model=" formDatas " label-width="auto" show-require-mark>
|
|
<n-form-item label="ID" path="T_id">
|
|
<n-form-item label="ID" path="T_id">
|
|
- <n-input v-model:value="formDatas.T_id" />
|
|
|
|
|
|
+ <n-input v-model:value=" formDatas.T_id " />
|
|
</n-form-item>
|
|
</n-form-item>
|
|
<n-form-item label="SN" path="T_sn">
|
|
<n-form-item label="SN" path="T_sn">
|
|
- <n-input v-model:value="formDatas.T_sn" disabled="false" />
|
|
|
|
|
|
+ <n-input v-model:value=" formDatas.T_sn " disabled="false" />
|
|
</n-form-item>
|
|
</n-form-item>
|
|
</n-form>
|
|
</n-form>
|
|
</n-modal>
|
|
</n-modal>
|
|
@@ -165,22 +170,39 @@ import DeleteClass from './DeleteTaskClass.vue';
|
|
import { dateFormat } from 'highcharts';
|
|
import { dateFormat } from 'highcharts';
|
|
import { TimeDate } from '@/plugin/timeFun';
|
|
import { TimeDate } from '@/plugin/timeFun';
|
|
import { useMessage } from "naive-ui";
|
|
import { useMessage } from "naive-ui";
|
|
-import { ref,watch} from 'vue';
|
|
|
|
|
|
+import { reactive, ref, watch } from 'vue';
|
|
|
|
+import { useStore } from "vuex"
|
|
|
|
+const store = useStore()
|
|
|
|
+
|
|
|
|
|
|
const formatted = useDateFormat(useNow(), 'YYYY-MM-DD HH:mm:ss');
|
|
const formatted = useDateFormat(useNow(), 'YYYY-MM-DD HH:mm:ss');
|
|
|
|
|
|
const notification = useNotification();
|
|
const notification = useNotification();
|
|
|
|
|
|
const { height } = useWindowSize();
|
|
const { height } = useWindowSize();
|
|
-
|
|
|
|
|
|
+const formRef = ref(null)
|
|
const message = useMessage();
|
|
const message = useMessage();
|
|
|
|
|
|
const task = window.sessionStorage.getItem('task')
|
|
const task = window.sessionStorage.getItem('task')
|
|
? JSON.parse(window.sessionStorage.getItem('task'))
|
|
? JSON.parse(window.sessionStorage.getItem('task'))
|
|
: {};
|
|
: {};
|
|
|
|
+//获得焦点的赋值
|
|
|
|
+const blueData = ref(null)
|
|
|
|
+//做时间选择清除
|
|
|
|
+const setTimeFuns = (e) => {
|
|
|
|
+ if (e == null) {
|
|
|
|
+ queryData.Time_start = '';
|
|
|
|
+ queryData.Time_end = '';
|
|
|
|
+ } else {
|
|
|
|
+ queryData.Time_start = value[0];
|
|
|
|
+ queryData.Time_end = value[1];
|
|
|
|
+ }
|
|
|
|
+}
|
|
|
|
|
|
-
|
|
|
|
-
|
|
|
|
|
|
+const focusFun = (e)=>{
|
|
|
|
+ console.log('获取焦点',e)
|
|
|
|
+ blueData.value = e
|
|
|
|
+}
|
|
// Modal 数据源
|
|
// Modal 数据源
|
|
const modal = reactive({
|
|
const modal = reactive({
|
|
showModal: false,
|
|
showModal: false,
|
|
@@ -200,13 +222,13 @@ const dataList = ref([]);
|
|
|
|
|
|
|
|
|
|
|
|
|
|
- const formDatas = reactive({
|
|
|
|
|
|
+const formDatas = reactive({
|
|
T_sn: '',
|
|
T_sn: '',
|
|
T_id: '',
|
|
T_id: '',
|
|
});
|
|
});
|
|
const showModal = ref(false);
|
|
const showModal = ref(false);
|
|
const dblclickFun = (e) => {
|
|
const dblclickFun = (e) => {
|
|
- console.log('双击',e)
|
|
|
|
|
|
+ console.log('双击', e)
|
|
formDatas.T_sn = e.T_sn
|
|
formDatas.T_sn = e.T_sn
|
|
formDatas.T_id = e.T_id
|
|
formDatas.T_id = e.T_id
|
|
showModal.value = true;
|
|
showModal.value = true;
|
|
@@ -238,11 +260,6 @@ const queryData = reactive({
|
|
T_task_id: task.T_task_id,
|
|
T_task_id: task.T_task_id,
|
|
T_sn: '',
|
|
T_sn: '',
|
|
T_id: '',
|
|
T_id: '',
|
|
- // Time_start: '2023-04-18 07:14:00',
|
|
|
|
- // Time_end: '2023-04-18 07:25:00',
|
|
|
|
- // Time_start: '2023-04-06 23:50:00',
|
|
|
|
- // Time_end: '2023-04-07 00:00:00',
|
|
|
|
-
|
|
|
|
Time_start: '',
|
|
Time_start: '',
|
|
Time_end: '',
|
|
Time_end: '',
|
|
page: 1,
|
|
page: 1,
|
|
@@ -257,27 +274,43 @@ const getClassList = async () => {
|
|
};
|
|
};
|
|
getClassList();
|
|
getClassList();
|
|
|
|
|
|
-const ranges = ref(null)
|
|
|
|
-// watch(() => ranges.value, (newValue) => {
|
|
|
|
-// console.log('时间',newValue)
|
|
|
|
-// }, { deep: true, immediate: true })
|
|
|
|
|
|
+//两个pick的value
|
|
|
|
+
|
|
|
|
+const pickTimes = reactive({
|
|
|
|
+ picktmSta:null,
|
|
|
|
+ pickleveTime:null,
|
|
|
|
+})
|
|
//图表框选时间修改
|
|
//图表框选时间修改
|
|
-const setTimeFun = (e)=>{
|
|
|
|
- console.log('修改的三个hi见',e)
|
|
|
|
- ranges.value = [parseInt(e[0].min),parseInt(e[0].max)]
|
|
|
|
- queryData.Time_start = TimeDate(parseInt(e[0].min))
|
|
|
|
- queryData.Time_end = TimeDate(parseInt(e[0].max))
|
|
|
|
|
|
+const setTimeFun = (e) => {
|
|
|
|
+ if(blueData.value==1){//等于1左边使用时间
|
|
|
|
+ pickTimes.picktmSta = [parseInt(e[0].min), parseInt(e[0].max)]
|
|
|
|
+ }else if(blueData.value==2){
|
|
|
|
+ pickTimes.pickleveTime = [parseInt(e[0].min), parseInt(e[0].max)]
|
|
|
|
+ }else{
|
|
|
|
+ queryData.Time_start = ''
|
|
|
|
+ queryData.Time_end = ''
|
|
|
|
+ }
|
|
}
|
|
}
|
|
|
|
|
|
|
|
|
|
const resData = ref()
|
|
const resData = ref()
|
|
//渲染按钮
|
|
//渲染按钮
|
|
-const renderFun = async () => {
|
|
|
|
- if(checkValues.value==null){
|
|
|
|
|
|
+const renderFun = async (j) => {
|
|
|
|
+ if (checkValues.value == null) {
|
|
message.error("哎呀,请选择设备在查询哟");
|
|
message.error("哎呀,请选择设备在查询哟");
|
|
return
|
|
return
|
|
}
|
|
}
|
|
- // dataList.value = []
|
|
|
|
|
|
+ console.log('ee',pickTimes.picktmSta,pickTimes.pickleveTime)
|
|
|
|
+ if(j==1 && pickTimes.picktmSta!=null){
|
|
|
|
+ queryData.Time_start = TimeDate(parseInt(pickTimes.picktmSta[0]))
|
|
|
|
+ queryData.Time_end = TimeDate(parseInt(pickTimes.picktmSta[1]))
|
|
|
|
+ }else if(j==2 && pickTimes.pickleveTime!=null){
|
|
|
|
+ queryData.Time_start = TimeDate(parseInt(pickTimes.pickleveTime[0]))
|
|
|
|
+ queryData.Time_end = TimeDate(parseInt(pickTimes.pickleveTime[1]))
|
|
|
|
+ }else{
|
|
|
|
+ queryData.Time_start = ''
|
|
|
|
+ queryData.Time_end = ''
|
|
|
|
+ }
|
|
let arr = []
|
|
let arr = []
|
|
for (let i = 0; i < checkValues.value.length; i++) {
|
|
for (let i = 0; i < checkValues.value.length; i++) {
|
|
queryData.T_id = checkValues.value[i].T_id;
|
|
queryData.T_id = checkValues.value[i].T_id;
|
|
@@ -307,7 +340,7 @@ const deleteTask = async () => {
|
|
|
|
|
|
// 编辑
|
|
// 编辑
|
|
const editTask = async () => {
|
|
const editTask = async () => {
|
|
- console.log('88',tabValue.value, dataInfo.value,formValue.T_t,formValue.T_rh)
|
|
|
|
|
|
+ console.log('88', tabValue.value, dataInfo.value, formValue.T_t, formValue.T_rh)
|
|
// return
|
|
// return
|
|
const { data: res } = await editTaskData({
|
|
const { data: res } = await editTaskData({
|
|
T_task_id: queryData.T_task_id,
|
|
T_task_id: queryData.T_task_id,
|
|
@@ -327,20 +360,22 @@ const convertDataFun = (array) => {
|
|
let objData = {
|
|
let objData = {
|
|
name: '',
|
|
name: '',
|
|
data: [],
|
|
data: [],
|
|
-
|
|
|
|
|
|
+
|
|
events: {
|
|
events: {
|
|
click(e) {
|
|
click(e) {
|
|
- console.log('点击',e.point.x)
|
|
|
|
time.value = e.point.x
|
|
time.value = e.point.x
|
|
- if(tabChart.value == '温度'){
|
|
|
|
|
|
+ if (tabChart.value == '温度') {
|
|
formValue.T_t = e.point.y
|
|
formValue.T_t = e.point.y
|
|
- }else{
|
|
|
|
|
|
+ } else {
|
|
formValue.T_rh = e.point.y
|
|
formValue.T_rh = e.point.y
|
|
}
|
|
}
|
|
// formValue.T_t = e.point.y
|
|
// formValue.T_t = e.point.y
|
|
- modal.showModal = true
|
|
|
|
|
|
+ if (store.state.focuDatas == null) {
|
|
|
|
+ modal.showModal = true
|
|
|
|
+ }
|
|
|
|
+
|
|
queryData.T_id = e.point.series.name;
|
|
queryData.T_id = e.point.series.name;
|
|
- modal.title = tabChart.value == '温度'?'温度':'湿度';
|
|
|
|
|
|
+ modal.title = tabChart.value == '温度' ? '温度' : '湿度';
|
|
let serName = e.point.series.name
|
|
let serName = e.point.series.name
|
|
const b = dataList.value.find(item => item.name == serName)
|
|
const b = dataList.value.find(item => item.name == serName)
|
|
dataInfo.value = b.data[e.point.index];
|
|
dataInfo.value = b.data[e.point.index];
|
|
@@ -351,7 +386,7 @@ const convertDataFun = (array) => {
|
|
let arr = array.reverse()
|
|
let arr = array.reverse()
|
|
objData.name = arr[0].T_sn
|
|
objData.name = arr[0].T_sn
|
|
arr.forEach(item => {
|
|
arr.forEach(item => {
|
|
- objData.data.push([new Date(item.T_time).getTime(), tabChart.value=='温度'?item.T_t:item.T_rh, tabChart.value=='温度'?item.T_rh:item.T_t, item.T_sn, item.T_id, item.ID])
|
|
|
|
|
|
+ objData.data.push([new Date(item.T_time).getTime(), tabChart.value == '温度' ? item.T_t : item.T_rh, tabChart.value == '温度' ? item.T_rh : item.T_t, item.T_sn, item.T_id, item.ID])
|
|
});
|
|
});
|
|
} else {
|
|
} else {
|
|
objData.data = []
|
|
objData.data = []
|
|
@@ -414,7 +449,7 @@ const handleTabChange = (e) => {
|
|
tabValue.value = e
|
|
tabValue.value = e
|
|
// console.log('切换',resData.value,tabValue.value,e)
|
|
// console.log('切换',resData.value,tabValue.value,e)
|
|
renderFun()
|
|
renderFun()
|
|
-
|
|
|
|
|
|
+
|
|
};
|
|
};
|
|
|
|
|
|
|
|
|