Browse Source

feat: 增加查询最近

main
betaqi 3 weeks ago
parent
commit
22d2bf5249
  1. 1
      global.types/components.d.ts
  2. 2
      src/api/module/transfer/index.ts
  3. 11
      src/views/stationData/component/newDataChart.vue
  4. 61
      src/views/stationData/topology/components/detailDrawer.vue
  5. 57
      src/views/stationData/transfer/components/deviceDrawer.vue

1
global.types/components.d.ts vendored

@ -29,6 +29,7 @@ declare module 'vue' {
ElEmpty: typeof import('element-plus/es')['ElEmpty'] ElEmpty: typeof import('element-plus/es')['ElEmpty']
ElHeader: typeof import('element-plus/es')['ElHeader'] ElHeader: typeof import('element-plus/es')['ElHeader']
ElInput: typeof import('element-plus/es')['ElInput'] ElInput: typeof import('element-plus/es')['ElInput']
ElInputNumber: typeof import('element-plus/es')['ElInputNumber']
ElMenu: typeof import('element-plus/es')['ElMenu'] ElMenu: typeof import('element-plus/es')['ElMenu']
ElMenuItem: typeof import('element-plus/es')['ElMenuItem'] ElMenuItem: typeof import('element-plus/es')['ElMenuItem']
ElOption: typeof import('element-plus/es')['ElOption'] ElOption: typeof import('element-plus/es')['ElOption']

2
src/api/module/transfer/index.ts

@ -17,7 +17,7 @@ export const getDeviceDetails = (params: IGetDeviceDataParams) =>
url: `/api/query`, url: `/api/query`,
method: 'POST', method: 'POST',
data: params, data: params,
timeout: 0, timeout: 1000 * 50,
}) })
export interface ISite { export interface ISite {

11
src/views/stationData/component/newDataChart.vue

@ -7,7 +7,7 @@
:autoresize="autoresize" :autoresize="autoresize"
:loading-options="loadingOpt" :loading-options="loadingOpt"
:loading="loading" :loading="loading"
@legendselectchanged="changeLegend"/> />
</div> </div>
</template> </template>
@ -91,6 +91,7 @@ const chartOption = computed<EChartsOption>(() => {
connectNulls: true, connectNulls: true,
data: entry, data: entry,
sampling: 'lttb', sampling: 'lttb',
animation: false,
} }
if (props.smooth) { if (props.smooth) {
lineData.smooth = true lineData.smooth = true
@ -149,10 +150,10 @@ const chartOption = computed<EChartsOption>(() => {
itemHeight: 10, itemHeight: 10,
pageIconSize: 12, pageIconSize: 12,
data: props.legends.map(item => item.label), data: props.legends.map(item => item.label),
selected: unCheckArr.value.reduce((acc, cur) => { // selected: unCheckArr.value.reduce((acc, cur) => {
acc[cur] = false // acc[cur] = false
return acc // return acc
}, {} as Record<string, boolean>), // }, {} as Record<string, boolean>),
}, },
xAxis: { xAxis: {
type: 'time', type: 'time',

61
src/views/stationData/topology/components/detailDrawer.vue

@ -46,8 +46,12 @@
:percentage="progress" :percentage="progress"
status="success" status="success"
/> />
<div class="text-xl"> <div class="text-center text-gray-700 text-lg leading-relaxed">
<div>当前加载数据量较大请稍等</div> 正在加载数据请稍等<br>
当前已查询
<span class="font-semibold text-green-600">{{ reqPointCount }}</span> /
<span class="font-semibold text-blue-600">{{ pointCount }}</span> 个点位剩余
<span class="font-semibold text-red-500">{{ remainingPointCount }}</span> 个点位
</div> </div>
</div> </div>
</div> </div>
@ -65,6 +69,10 @@
/> />
</div> </div>
<el-button type="primary" @click="loadChardData">查询数据</el-button> <el-button type="primary" @click="loadChardData">查询数据</el-button>
查询最近
<el-input-number :key="refreshKey" v-model="num" :min="1" :max="diffHours"
@input="handleInput"/>
小时
</div> </div>
<NewDataChart <NewDataChart
v-if="isShowChart" v-if="isShowChart"
@ -93,8 +101,37 @@ import dayjs from 'dayjs'
import { nextTick } from "vue"; import { nextTick } from "vue";
import EdfsWrap from "@/components/Edfs-wrap.vue"; import EdfsWrap from "@/components/Edfs-wrap.vue";
import PointCheckbox from "@/views/stationData/component/pointCheckbox.vue"; import PointCheckbox from "@/views/stationData/component/pointCheckbox.vue";
import { debounce } from 'lodash-es'
const env = import.meta.env const env = import.meta.env
const num = ref<number>()
const diffHours = ref<number>()
const refreshKey = ref(0)
const handleInput = debounce(async (val: number) => {
if (diffHours.value && val > diffHours.value) {
num.value = diffHours.value
refreshKey.value++
await nextTick()
} else if (val < 1) {
num.value = 1
refreshKey.value++
await nextTick()
} else {
num.value = val
}
const endTime =
curDevice.value!.end_time ?
dayjs(curDevice.value!.end_time).valueOf() : dayjs().valueOf()
const startTime = dayjs(endTime).subtract(num.value, 'hour').valueOf()
time.value = [dayjs(startTime).format('YYYY-MM-DD HH:mm:ss'), dayjs(endTime).format('YYYY-MM-DD HH:mm:ss')]
}, 300)
const isShowDrawer = defineModel<boolean>() const isShowDrawer = defineModel<boolean>()
const title = computed(() => const title = computed(() =>
( (
@ -133,6 +170,14 @@ async function open(device: IDevice & {
message.error('获取点位数据失败') message.error('获取点位数据失败')
fullscreenLoading.value?.close() fullscreenLoading.value?.close()
}) })
const deviceOff = curDevice.value as IOfflineDevice
if (!deviceOff.start_time || !deviceOff.end_time) {
diffHours.value = 168 //
return
}
const start = dayjs(deviceOff.start_time)
const end = dayjs(deviceOff.end_time)
diffHours.value = end.diff(start, "hour") + 1;
} }
const selectValue = ref() const selectValue = ref()
@ -212,6 +257,13 @@ const chartLimit = ref(1000)
const chartOffset = ref(0) const chartOffset = ref(0)
const progress = ref(0) const progress = ref(0)
const pointCount = computed(() => chartAllTotal.value * checkPointList.value.length)
const reqPointCount = ref(0)
//
const remainingPointCount = computed(() => pointCount.value - reqPointCount.value)
async function loadChardData() { async function loadChardData() {
if (!time.value || time.value.length !== 2) { if (!time.value || time.value.length !== 2) {
message.error('请选择时间范围') message.error('请选择时间范围')
@ -287,11 +339,11 @@ async function loadChardData() {
message.error('获取设备数据失败') message.error('获取设备数据失败')
return return
} }
reqPointCount.value += res?.data?.results?.length || 0
const pointData = Array.isArray(res.data.results) ? res.data.results : [] const pointData = Array.isArray(res.data.results) ? res.data.results : []
setChartData(pointData) setChartData(pointData)
progress.value = Math.min(100, Math.floor(((i + 1) / pageCount) * 100)) progress.value = Math.min(100, Math.floor(((i + 1) / pageCount) * 100)) - 1
} }
resetChartStatus() resetChartStatus()
} }
@ -344,6 +396,7 @@ function clearData() {
legends.value = [] legends.value = []
chartData.clear() chartData.clear()
axisData.clear() axisData.clear()
reqPointCount.value = 0
} }
function resetChartStatus() { function resetChartStatus() {

57
src/views/stationData/transfer/components/deviceDrawer.vue

@ -30,8 +30,12 @@
:percentage="progress" :percentage="progress"
status="success" status="success"
/> />
<div class="text-xl"> <div class="text-center text-gray-700 text-lg leading-relaxed">
<div>当前加载数据量较大请稍等</div> 正在加载数据请稍等<br>
当前已查询
<span class="font-semibold text-green-600">{{ reqPointCount }}</span> /
<span class="font-semibold text-blue-600">{{ pointCount }}</span> 个点位剩余
<span class="font-semibold text-red-500">{{ remainingPointCount }}</span> 个点位
</div> </div>
</div> </div>
</div> </div>
@ -49,8 +53,11 @@
/> />
</div> </div>
<el-button type="primary" @click="loadChardData">查询数据</el-button> <el-button type="primary" @click="loadChardData">查询数据</el-button>
查询最近
<el-input-number :key="refreshKey" v-model="num" :min="1" :max="diffHours"
@input="handleInput"/>
小时
</div> </div>
<NewDataChart v-if="isShowChart" :chart-datas="chartData" :legends="legends" <NewDataChart v-if="isShowChart" :chart-datas="chartData" :legends="legends"
:axis-data="Array.from(axisData)" ref="chartRef"/> :axis-data="Array.from(axisData)" ref="chartRef"/>
</div> </div>
@ -78,11 +85,36 @@ import dayjs from 'dayjs'
import { nextTick } from "vue"; import { nextTick } from "vue";
import EdfsWrap from "@/components/Edfs-wrap.vue"; import EdfsWrap from "@/components/Edfs-wrap.vue";
import { bms_cellRewriteName } from "@/views/stationData/utils"; import { bms_cellRewriteName } from "@/views/stationData/utils";
import { debounce } from 'lodash-es'
const time = ref<[string, string]>() const time = ref<[string, string]>()
const env = import.meta.env const env = import.meta.env
const num = ref<number>()
const diffHours = ref<number>()
const refreshKey = ref(0)
const handleInput = debounce(async (val: number) => {
if (diffHours.value && val > diffHours.value) {
num.value = diffHours.value
refreshKey.value++
await nextTick()
} else if (val < 1) {
num.value = 1
refreshKey.value++
await nextTick()
} else {
num.value = val
}
const endTime =
curDevice.value!.end_time ?
dayjs(curDevice.value!.end_time).valueOf() : dayjs().valueOf()
const startTime = dayjs(endTime).subtract(num.value, 'hour').valueOf()
time.value = [dayjs(startTime).format('YYYY-MM-DD HH:mm:ss'), dayjs(endTime).format('YYYY-MM-DD HH:mm:ss')]
}, 300)
const isShowDrawer = defineModel<boolean>() const isShowDrawer = defineModel<boolean>()
const title = computed(() => const title = computed(() =>
@ -117,6 +149,14 @@ async function open(device: IOfflineDevice | IOnlineDevice) {
message.error('获取点位组数据失败') message.error('获取点位组数据失败')
fullscreenLoading.value?.close() fullscreenLoading.value?.close()
}) })
const deviceOff = curDevice.value as IOfflineDevice
if (!deviceOff.start_time || !deviceOff.end_time) {
diffHours.value = 168 //
return
}
const start = dayjs(deviceOff.start_time)
const end = dayjs(deviceOff.end_time)
diffHours.value = end.diff(start, "hour") + 1;
} }
@ -187,6 +227,12 @@ const chartLimit = ref(1000)
const chartOffset = ref(0) const chartOffset = ref(0)
const progress = ref(0) const progress = ref(0)
const pointCount = computed(() => chartAllTotal.value * checkPointList.value.length)
const reqPointCount = ref(0)
//
const remainingPointCount = computed(() => pointCount.value - reqPointCount.value)
async function loadChardData() { async function loadChardData() {
if (!time.value || time.value.length !== 2) { if (!time.value || time.value.length !== 2) {
message.error('请选择时间范围') message.error('请选择时间范围')
@ -260,11 +306,11 @@ async function loadChardData() {
message.error('获取设备数据失败') message.error('获取设备数据失败')
return return
} }
reqPointCount.value += res?.data?.results?.length || 0
const pointData = Array.isArray(res.data.results) ? res.data.results : [] const pointData = Array.isArray(res.data.results) ? res.data.results : []
setChartData(pointData) setChartData(pointData)
progress.value = Math.min(100, Math.floor(((i + 1) / pageCount) * 100)) progress.value = Math.min(100, Math.floor(((i + 1) / pageCount) * 100)) - 1
} }
resetChartStatus() resetChartStatus()
} }
@ -315,6 +361,7 @@ function clearData() {
legends.value = [] legends.value = []
chartData.clear() chartData.clear()
axisData.clear() axisData.clear()
reqPointCount.value = 0
} }
function resetChartStatus() { function resetChartStatus() {

Loading…
Cancel
Save