|
|
@ -18,7 +18,15 @@ |
|
|
</n-tooltip> |
|
|
</n-tooltip> |
|
|
</div> |
|
|
</div> |
|
|
</template> |
|
|
</template> |
|
|
<el-form class="searchForm" ref="searchRef" :rules="rules" :inline="true" :model="searchForm" label-width="100px"> |
|
|
<el-form |
|
|
|
|
|
class="searchForm animate__animated animate__fadeInUp" |
|
|
|
|
|
ref="searchRef" |
|
|
|
|
|
:rules="rules" |
|
|
|
|
|
:inline="true" |
|
|
|
|
|
:model="searchForm" |
|
|
|
|
|
label-width="100px" |
|
|
|
|
|
v-show="searchShow" |
|
|
|
|
|
> |
|
|
<!-- <el-form-item class="item" label="时间:" prop="time"> |
|
|
<!-- <el-form-item class="item" label="时间:" prop="time"> |
|
|
<el-date-picker |
|
|
<el-date-picker |
|
|
v-model="searchForm.time" |
|
|
v-model="searchForm.time" |
|
|
@ -31,7 +39,7 @@ |
|
|
@change="timeChange" |
|
|
@change="timeChange" |
|
|
/> |
|
|
/> |
|
|
</el-form-item> --> |
|
|
</el-form-item> --> |
|
|
<el-form-item label="起始时间:"> |
|
|
<el-form-item class="item" label="起始时间:"> |
|
|
<el-date-picker |
|
|
<el-date-picker |
|
|
v-model="searchForm.date" |
|
|
v-model="searchForm.date" |
|
|
type="date" |
|
|
type="date" |
|
|
@ -126,14 +134,53 @@ |
|
|
/> |
|
|
/> |
|
|
</el-select> |
|
|
</el-select> |
|
|
</el-form-item> |
|
|
</el-form-item> |
|
|
|
|
|
<el-form-item class="formBtn"> |
|
|
|
|
|
<el-button type="primary" @click="stepClickDebounce">确认</el-button> |
|
|
|
|
|
</el-form-item> |
|
|
<!-- <el-form-item class="item" label="是否显示0值"> |
|
|
<!-- <el-form-item class="item" label="是否显示0值"> |
|
|
<el-checkbox class="searchCheckbox" v-model="searchForm.showZero" @change="showZeroChange" /> |
|
|
<el-checkbox class="searchCheckbox" v-model="searchForm.showZero" @change="showZeroChange" /> |
|
|
<el-button type="primary" @click="submitForm(searchRef)">搜索</el-button> |
|
|
<el-button type="primary" @click="submitForm(searchRef)">搜索</el-button> |
|
|
<el-button @click="resetForm(searchRef)">重置</el-button> |
|
|
<el-button @click="resetForm(searchRef)">重置</el-button> |
|
|
</el-form-item> --> |
|
|
</el-form-item> --> |
|
|
</el-form> |
|
|
</el-form> |
|
|
|
|
|
<div class="searchTips isHide" @click="searchClick('hide')" v-if="searchShow"> |
|
|
|
|
|
<svg |
|
|
|
|
|
t="1705471366268" |
|
|
|
|
|
class="icon" |
|
|
|
|
|
viewBox="0 0 1024 1024" |
|
|
|
|
|
version="1.1" |
|
|
|
|
|
xmlns="http://www.w3.org/2000/svg" |
|
|
|
|
|
p-id="2797" |
|
|
|
|
|
width="12" |
|
|
|
|
|
height="12" |
|
|
|
|
|
> |
|
|
|
|
|
<path |
|
|
|
|
|
d="M204.98 558.99l-93.99-93.98L512 64l401 401.01-93.99 93.98L512 251.97 204.98 558.99z m0 401.01l-93.99-93.99 401.01-401 401 401L819.02 960 512 652.98 204.98 960z" |
|
|
|
|
|
fill="#717171" |
|
|
|
|
|
p-id="2798" |
|
|
|
|
|
></path> |
|
|
|
|
|
</svg> |
|
|
|
|
|
</div> |
|
|
|
|
|
<div class="searchTips isShow" @click="searchClick('show')" v-if="!searchShow"> |
|
|
|
|
|
<svg |
|
|
|
|
|
t="1705471928104" |
|
|
|
|
|
class="icon" |
|
|
|
|
|
viewBox="0 0 1024 1024" |
|
|
|
|
|
version="1.1" |
|
|
|
|
|
xmlns="http://www.w3.org/2000/svg" |
|
|
|
|
|
p-id="3076" |
|
|
|
|
|
width="12" |
|
|
|
|
|
height="12" |
|
|
|
|
|
> |
|
|
|
|
|
<path |
|
|
|
|
|
d="M819.02 465.01l93.99 93.98L512 960 110.99 558.99l93.99-93.98L512 772.03l307.02-307.02z m0-401.01l93.99 93.99-401 401-401.01-401L204.98 64 512 371.02 819.02 64z" |
|
|
|
|
|
fill="#717171" |
|
|
|
|
|
p-id="3077" |
|
|
|
|
|
></path> |
|
|
|
|
|
</svg> |
|
|
|
|
|
</div> |
|
|
</el-card> |
|
|
</el-card> |
|
|
<el-card class="echart" shadow="always"> |
|
|
<el-card class="echart" :class="{'echartHide':!searchShow }" shadow="always"> |
|
|
<div class="sidebar"> |
|
|
<div class="sidebar"> |
|
|
<h3>换热站</h3> |
|
|
<h3>换热站</h3> |
|
|
<el-menu :default-active="filterForm.deviceUuid" class="deviceMenu" @select="deviceSelect" @open="deviceOpen"> |
|
|
<el-menu :default-active="filterForm.deviceUuid" class="deviceMenu" @select="deviceSelect" @open="deviceOpen"> |
|
|
@ -169,7 +216,7 @@ |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</el-card> |
|
|
</el-card> |
|
|
<div class="copyright">Copyright © 2023 {{ $t('login.abbreviation') }} {{ $t('login.copyright') }}</div> |
|
|
<div class="copyright">Copyright © {{ $t('copyright.year') }} {{ $t('copyright.abbr') }} {{ $t('copyright.document') }}</div> |
|
|
</div> |
|
|
</div> |
|
|
</template> |
|
|
</template> |
|
|
<script lang="ts" setup> |
|
|
<script lang="ts" setup> |
|
|
@ -178,7 +225,6 @@ import { Ref } from 'vue'; |
|
|
import { useRoute, useRouter } from 'vue-router'; |
|
|
import { useRoute, useRouter } from 'vue-router'; |
|
|
import { useDateFormat, useNow } from '@vueuse/core'; |
|
|
import { useDateFormat, useNow } from '@vueuse/core'; |
|
|
import { randomColor, endTime, debounce } from '@/utils/index'; |
|
|
import { randomColor, endTime, debounce } from '@/utils/index'; |
|
|
const stackedRef: Ref<HTMLElement | any> = ref(null); |
|
|
|
|
|
import type { FormInstance, FormRules } from 'element-plus'; |
|
|
import type { FormInstance, FormRules } from 'element-plus'; |
|
|
import { ReturnDownBack } from '@vicons/ionicons5'; |
|
|
import { ReturnDownBack } from '@vicons/ionicons5'; |
|
|
|
|
|
|
|
|
@ -200,9 +246,12 @@ const currentEndTime = ref(); |
|
|
// const nowTime = ref(); |
|
|
// const nowTime = ref(); |
|
|
const timer = ref(); |
|
|
const timer = ref(); |
|
|
const isCurrentRoute = ref(true); |
|
|
const isCurrentRoute = ref(true); |
|
|
|
|
|
const searchShow = ref(true); |
|
|
// const currentSecond = useDateFormat(useNow(), 'YYYY-MM-DD HH:mm:ss'); |
|
|
// const currentSecond = useDateFormat(useNow(), 'YYYY-MM-DD HH:mm:ss'); |
|
|
|
|
|
|
|
|
const searchRef = ref<FormInstance>(); |
|
|
const searchRef = ref<FormInstance>(); |
|
|
|
|
|
const stackedRef: Ref<HTMLElement | any> = ref(null); |
|
|
|
|
|
const mapEcharts = ref(); |
|
|
// const defaultTime: [Date, Date] = [new Date(2000, 1, 1, 0, 0, 0), new Date(2000, 2, 1, 12, 0, 0)]; |
|
|
// const defaultTime: [Date, Date] = [new Date(2000, 1, 1, 0, 0, 0), new Date(2000, 2, 1, 12, 0, 0)]; |
|
|
// const multipleLimit = ref(0); |
|
|
// const multipleLimit = ref(0); |
|
|
// const parameterLimit = ref(0); |
|
|
// const parameterLimit = ref(0); |
|
|
@ -236,7 +285,7 @@ const searchForm: any = reactive({ |
|
|
class: '', |
|
|
class: '', |
|
|
parameter: [], |
|
|
parameter: [], |
|
|
partition: '', |
|
|
partition: '', |
|
|
showZero: false |
|
|
showZero: true |
|
|
}); |
|
|
}); |
|
|
const filterForm = reactive({ |
|
|
const filterForm = reactive({ |
|
|
startTime: '', |
|
|
startTime: '', |
|
|
@ -245,7 +294,7 @@ const filterForm = reactive({ |
|
|
deviceUuid: '', |
|
|
deviceUuid: '', |
|
|
paramCode: '', |
|
|
paramCode: '', |
|
|
partion: '', |
|
|
partion: '', |
|
|
showZero: false, |
|
|
showZero: true, |
|
|
queryType: 1 //1:正常查询，2:实时查询 |
|
|
queryType: 1 //1:正常查询，2:实时查询 |
|
|
}); |
|
|
}); |
|
|
const rules = reactive<FormRules>({ |
|
|
const rules = reactive<FormRules>({ |
|
|
@ -654,6 +703,11 @@ onUnmounted(() => { |
|
|
if (timer.value !== null || timer.value !== undefined) { |
|
|
if (timer.value !== null || timer.value !== undefined) { |
|
|
clearTimeout(timer.value); |
|
|
clearTimeout(timer.value); |
|
|
} |
|
|
} |
|
|
|
|
|
if (mapEcharts.value) { |
|
|
|
|
|
//echarts销毁函数 |
|
|
|
|
|
echarts.dispose(mapEcharts.value); |
|
|
|
|
|
mapEcharts.value = null; |
|
|
|
|
|
} |
|
|
}); |
|
|
}); |
|
|
|
|
|
|
|
|
const deviceSelect = (key: string, keyPath: string[], item: object) => { |
|
|
const deviceSelect = (key: string, keyPath: string[], item: object) => { |
|
|
@ -689,7 +743,7 @@ document.addEventListener('keyup', e => { |
|
|
}); |
|
|
}); |
|
|
const keyClickDebounce = debounce(() => { |
|
|
const keyClickDebounce = debounce(() => { |
|
|
keyClick(keyupType.value); |
|
|
keyClick(keyupType.value); |
|
|
}, 500); |
|
|
}, 800); |
|
|
function keyClick(res: string) { |
|
|
function keyClick(res: string) { |
|
|
//键盘事件 |
|
|
//键盘事件 |
|
|
if (filterForm.startTime === '') { |
|
|
if (filterForm.startTime === '') { |
|
|
@ -820,10 +874,10 @@ function getweatherHoursList() { |
|
|
} |
|
|
} |
|
|
|
|
|
|
|
|
const debounceClick = debounce(() => { |
|
|
const debounceClick = debounce(() => { |
|
|
getDeviceInfoss(); |
|
|
getDevicePolling(); |
|
|
}, 360000); |
|
|
}, 360000); |
|
|
|
|
|
|
|
|
function getDeviceInfoss() { |
|
|
function getDevicePolling() { |
|
|
//轮询获取折线图数据 |
|
|
//轮询获取折线图数据 |
|
|
console.log(useDateFormat(new Date(), 'YYYY-MM-DD HH:mm:ss').value); |
|
|
console.log(useDateFormat(new Date(), 'YYYY-MM-DD HH:mm:ss').value); |
|
|
const params = filterForm; |
|
|
const params = filterForm; |
|
|
@ -837,7 +891,7 @@ function getDeviceInfoss() { |
|
|
if (isCurrentRoute.value) { |
|
|
if (isCurrentRoute.value) { |
|
|
timer.value = setTimeout(async () => { |
|
|
timer.value = setTimeout(async () => { |
|
|
await (timer.value && clearTimeout(timer.value)); |
|
|
await (timer.value && clearTimeout(timer.value)); |
|
|
await getDeviceInfoss(); |
|
|
await getDevicePolling(); |
|
|
}, 360000); |
|
|
}, 360000); |
|
|
} |
|
|
} |
|
|
if (res.data.additionalInfo != null) { |
|
|
if (res.data.additionalInfo != null) { |
|
|
@ -854,7 +908,7 @@ function getDeviceInfoss() { |
|
|
}); |
|
|
}); |
|
|
}); |
|
|
}); |
|
|
console.log(options.series); |
|
|
console.log(options.series); |
|
|
const chart = echarts.init(document.getElementById('stackedLine')); |
|
|
const chart = echarts.init(stackedRef.value); |
|
|
chart.setOption(options); |
|
|
chart.setOption(options); |
|
|
// mainInfoList.value = res.data.mainInfos; |
|
|
// mainInfoList.value = res.data.mainInfos; |
|
|
// init(res.data); |
|
|
// init(res.data); |
|
|
@ -873,7 +927,8 @@ function init(data: any) { |
|
|
options.title.text = '暂无数据'; |
|
|
options.title.text = '暂无数据'; |
|
|
options.title.x = 'center'; |
|
|
options.title.x = 'center'; |
|
|
options.title.y = 'center'; |
|
|
options.title.y = 'center'; |
|
|
const chart = echarts.init(document.getElementById('stackedLine')); |
|
|
const chart = echarts.init(stackedRef.value); |
|
|
|
|
|
mapEcharts.value = chart; |
|
|
chart.clear(); |
|
|
chart.clear(); |
|
|
chart.resize(); |
|
|
chart.resize(); |
|
|
console.log('options--', options); |
|
|
console.log('options--', options); |
|
|
@ -927,8 +982,12 @@ function init(data: any) { |
|
|
data: item.data |
|
|
data: item.data |
|
|
}); |
|
|
}); |
|
|
}); |
|
|
}); |
|
|
const chart = echarts.init(document.getElementById('stackedLine')); |
|
|
const chart = echarts.init(stackedRef.value); |
|
|
chart.clear(); |
|
|
chart.clear(); |
|
|
|
|
|
window.addEventListener('resize', function () { |
|
|
|
|
|
chart.resize(); |
|
|
|
|
|
}); |
|
|
|
|
|
mapEcharts.value=chart |
|
|
chart.resize(); |
|
|
chart.resize(); |
|
|
console.log('options--', options); |
|
|
console.log('options--', options); |
|
|
chart.setOption(options); |
|
|
chart.setOption(options); |
|
|
@ -982,6 +1041,7 @@ function timeChange(res: any) { |
|
|
function stepChange(num: any) { |
|
|
function stepChange(num: any) { |
|
|
//时间长度 |
|
|
//时间长度 |
|
|
filterForm.step = num; |
|
|
filterForm.step = num; |
|
|
|
|
|
stepClickDebounce(); |
|
|
} |
|
|
} |
|
|
function stepTypeChange(value: string) { |
|
|
function stepTypeChange(value: string) { |
|
|
//时间长度 |
|
|
//时间长度 |
|
|
@ -1020,6 +1080,11 @@ function partitionChange(res: string) { |
|
|
filterForm.partion = res; |
|
|
filterForm.partion = res; |
|
|
verifyInfo(); |
|
|
verifyInfo(); |
|
|
} |
|
|
} |
|
|
|
|
|
|
|
|
|
|
|
const stepClickDebounce = debounce(() => { |
|
|
|
|
|
verifyInfo(); |
|
|
|
|
|
}, 800); |
|
|
|
|
|
|
|
|
function verifyInfo() { |
|
|
function verifyInfo() { |
|
|
if (filterForm.deviceUuid === '') { |
|
|
if (filterForm.deviceUuid === '') { |
|
|
ElMessage({ |
|
|
ElMessage({ |
|
|
@ -1031,6 +1096,11 @@ function verifyInfo() { |
|
|
message: '请选择起始时间', |
|
|
message: '请选择起始时间', |
|
|
type: 'warning' |
|
|
type: 'warning' |
|
|
}); |
|
|
}); |
|
|
|
|
|
} else if (filterForm.step === null) { |
|
|
|
|
|
ElMessage({ |
|
|
|
|
|
message: '请选择时间长度', |
|
|
|
|
|
type: 'warning' |
|
|
|
|
|
}); |
|
|
} else if (filterForm.paramCode === '') { |
|
|
} else if (filterForm.paramCode === '') { |
|
|
ElMessage({ |
|
|
ElMessage({ |
|
|
message: '请选择曲线参数', |
|
|
message: '请选择曲线参数', |
|
|
@ -1040,6 +1110,11 @@ function verifyInfo() { |
|
|
getDeviceInfo(); |
|
|
getDeviceInfo(); |
|
|
} |
|
|
} |
|
|
} |
|
|
} |
|
|
|
|
|
function searchClick(type: string) { |
|
|
|
|
|
//显示/隐藏筛选栏 |
|
|
|
|
|
searchShow.value = type === 'hide' ? false : true; |
|
|
|
|
|
verifyInfo(); |
|
|
|
|
|
} |
|
|
// const submitForm = (formEl: FormInstance | undefined) => { |
|
|
// const submitForm = (formEl: FormInstance | undefined) => { |
|
|
// //筛选确认 |
|
|
// //筛选确认 |
|
|
// if (!formEl) return; |
|
|
// if (!formEl) return; |
|
|
|
fuguobin
10 months ago