Web/admin-govern
5
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

修改 测试bug

Browse Source
This commit is contained in:
GGJ
2024-09-24 10:19:54 +08:00
parent d1605fb37b
commit 0f95f3ebd3
6 changed files with 165 additions and 192 deletions
Download Patch File Download Diff File Expand all files Collapse all files

78
src/components/form/datePicker/index.vue
View File

@@ -1,28 +1,41 @@
<template> <template>
<el-select v-model="interval" style="min-width: 90px; width: 90px; margin-right: 10px" @change="timeChange"> <div style="width: 600px">
<el-option v-for="item in timeOptions" :key="item.value" :label="item.label" :value="item.value" /> <el-select v-model="interval" style="min-width: 90px; width: 90px; margin-right: 10px" @change="timeChange">
</el-select> <el-option v-for="item in timeOptions" :key="item.value" :label="item.label" :value="item.value" />
<el-date-picker </el-select>
v-model="timeValue"
type="daterange" <el-date-picker
:disabled="disabledPicker" v-model="timeValue"
style="width: 230px; margin-right: 10px" type="daterange"
unlink-panels :disabled="disabledPicker"
:clearable="false" style="width: 220px; margin-right: 10px"
range-separator="至" unlink-panels
start-placeholder="开始日期" :clearable="false"
end-placeholder="结束日期" range-separator="至"
value-format="YYYY-MM-DD" start-placeholder="开始日期"
:shortcuts="shortcuts" end-placeholder="结束日期"
/> value-format="YYYY-MM-DD"
<el-button :disabled="backDisabled" type="primary" :icon="DArrowLeft" @click="preClick"></el-button> :shortcuts="shortcuts"
<el-button type="primary" :icon="VideoPause" @click="nowTime">当前</el-button> />
<el-button :disabled="preDisabled" type="primary" :icon="DArrowRight" @click="next"></el-button> <el-button :disabled="backDisabled" type="primary" :icon="DArrowLeft" @click="preClick"></el-button>
<el-button type="primary" :icon="VideoPause" @click="nowTime">当前</el-button>
<el-button :disabled="preDisabled" type="primary" :icon="DArrowRight" @click="next"></el-button>
</div>
</template> </template>
<script lang="ts" setup> <script lang="ts" setup>
import { DArrowLeft, VideoPause, DArrowRight } from '@element-plus/icons-vue' import { DArrowLeft, VideoPause, DArrowRight } from '@element-plus/icons-vue'
import { ref, onMounted, nextTick } from 'vue' import { ref, onMounted, nextTick, watch } from 'vue'
interface Props {
nextFlag?: boolean
theCurrentTime: boolean
}
const props = withDefaults(defineProps<Props>(), {
nextFlag: false,
theCurrentTime: false
})
const interval = ref(3) const interval = ref(3)
const timeFlag = ref(1) const timeFlag = ref(1)
@@ -110,6 +123,7 @@ const timeChange = (e: number) => {
// 当前 // 当前
const nowTime = () => { const nowTime = () => {
console.log(interval.value, '000000000')
timeChange(interval.value) timeChange(interval.value)
} }
// 上一个 // 上一个
@@ -140,7 +154,6 @@ const preClick = () => {
//按周 //按周
} else if (interval.value == 4) { } else if (interval.value == 4) {
//根据开始时间推 //根据开始时间推
let start = new Date(year, month - 1, date) let start = new Date(year, month - 1, date)
start.setDate(start.getDate() - 7) start.setDate(start.getDate() - 7)
startTime = formatTime(start) startTime = formatTime(start)
@@ -177,7 +190,6 @@ const preClick = () => {
//下一个 //下一个
const next = () => { const next = () => {
//向后 //向后
let startTime = timeValue.value[0] let startTime = timeValue.value[0]
let endTime = timeValue.value[1] let endTime = timeValue.value[1]
let year = parseInt(startTime.substring(0, 4)) let year = parseInt(startTime.substring(0, 4))
@@ -193,8 +205,9 @@ const next = () => {
if (interval.value == 3) { if (interval.value == 3) {
if (month == 12) { if (month == 12) {
year = year + 1 year = year + 1
// 年份进位后，大于当前的年份，是不科学的 // 年份进位后，大于当前的年份，是不科学的
if (presentY < year) { if (presentY < year && !props.nextFlag) {
startTime = presentY + '-12-01' startTime = presentY + '-12-01'
if (presentD < 10) { if (presentD < 10) {
endTime = presentY + '-12' + '-0' + presentD endTime = presentY + '-12' + '-0' + presentD
@@ -223,7 +236,7 @@ const next = () => {
// 年份等于当前年份 // 年份等于当前年份
if (presentY == year) { if (presentY == year) {
// 月份超过当前月份，是不科学的 // 月份超过当前月份，是不科学的
if (month >= presentM) { if (month >= presentM && !props.nextFlag) {
if (presentM < 10) { if (presentM < 10) {
startTime = year + '-0' + presentM + '-01' startTime = year + '-0' + presentM + '-01'
if (presentD < 10) { if (presentD < 10) {
@@ -268,7 +281,7 @@ const next = () => {
if (month == 10) { if (month == 10) {
year = year + 1 year = year + 1
// 年份进位后大于当前年份是不科学的 // 年份进位后大于当前年份是不科学的
if (year > presentY) { if (year > presentY && !props.nextFlag) {
startTime = presentY + '-10-01' startTime = presentY + '-10-01'
if (presentD < 10) { if (presentD < 10) {
endTime = year + '-' + presentM + '-0' + presentD endTime = year + '-' + presentM + '-0' + presentD
@@ -294,8 +307,10 @@ const next = () => {
} }
} else { } else {
month = month + 3 month = month + 3
console.log('🚀 ~ next ~ presentM:', presentM, month)
// 季度进位后，超过当前月份是不科学的 // 季度进位后，超过当前月份是不科学的
if (year == presentY) { if (year == presentY && !props.nextFlag) {
if (month >= presentM) { if (month >= presentM) {
// 当季度进位后大于当前月，以当前月的时间显示季度 // 当季度进位后大于当前月，以当前月的时间显示季度
if (presentM > 0 && presentM < 4) { if (presentM > 0 && presentM < 4) {
@@ -307,6 +322,7 @@ const next = () => {
endTime = year + '-0' + presentM + '-' + presentD endTime = year + '-0' + presentM + '-' + presentD
} }
} else if (presentM > 3 && presentM < 7) { } else if (presentM > 3 && presentM < 7) {
console.log(123123)
// 第二季度 // 第二季度
startTime = year + '-04-01' startTime = year + '-04-01'
if (presentD < 10) { if (presentD < 10) {
@@ -342,7 +358,7 @@ const next = () => {
endTime = NowgetEndTime() endTime = NowgetEndTime()
} else { } else {
var day = getDays(year, month) var day = getDays(year, month)
endTime = year + '-' + month + '-' + day endTime = year + '-0' + month + '-' + day
} }
} }
} else { } else {
@@ -359,6 +375,7 @@ const next = () => {
} }
} }
} }
console.log(startTime, endTime)
} else if (interval.value == 5) { } else if (interval.value == 5) {
} else if (interval.value == 4) { } else if (interval.value == 4) {
//根据开始时间推 //根据开始时间推
@@ -371,7 +388,7 @@ const next = () => {
} else { } else {
year = year + 1 year = year + 1
// 年份进位后大于当前年份，是不科学的 // 年份进位后大于当前年份，是不科学的
if (year >= presentY) { if (year >= presentY && !props.nextFlag) {
startTime = presentY + '-01-01' startTime = presentY + '-01-01'
if (presentM < 10) { if (presentM < 10) {
if (presentD < 10) { if (presentD < 10) {
@@ -395,7 +412,8 @@ const setTime = (flag = 0, e = 0) => {
let dd = window.XEUtils.toDateString(new Date().getTime() - e * 3600 * 1000 * 24, 'dd') let dd = window.XEUtils.toDateString(new Date().getTime() - e * 3600 * 1000 * 24, 'dd')
let data = '' let data = ''
if (dd < 4 || dd == 0) {
if ((dd < 4 || dd == 0) && interval.value != 4 && !props.theCurrentTime) {
data = window.XEUtils.toDateString(new Date().getTime() - (e + dd) * 3600 * 1000 * 24, 'yyyy-MM-dd') data = window.XEUtils.toDateString(new Date().getTime() - (e + dd) * 3600 * 1000 * 24, 'yyyy-MM-dd')
} else { } else {
data = window.XEUtils.toDateString(new Date().getTime() - e * 3600 * 1000 * 24, 'yyyy-MM-dd') data = window.XEUtils.toDateString(new Date().getTime() - e * 3600 * 1000 * 24, 'yyyy-MM-dd')
@@ -496,7 +514,7 @@ function formatDate(date: Date): string {
const day = String(date.getDate()).padStart(2, '0') const day = String(date.getDate()).padStart(2, '0')
return `${year}-${month}-${day}` return `${year}-${month}-${day}`
} }
defineExpose({ timeValue, interval, timeFlag, setTimeOptions, setInterval, getYearOnYear, getMonthOnMonth,timeChange }) defineExpose({ timeValue, interval, timeFlag, setTimeOptions, setInterval, getYearOnYear, getMonthOnMonth, timeChange })
</script> </script>
<style scoped> <style scoped>

30
src/components/table/header/index.vue
View File

@@ -2,22 +2,23 @@
<div ref="tableHeader" class="cn-table-header"> <div ref="tableHeader" class="cn-table-header">
<div class="table-header ba-scroll-style"> <div class="table-header ba-scroll-style">
<el-form <el-form
style="flex: 1; height: 32px; margin-right: 20px" style="flex: 1; height: 34px; margin-right: 20px; display: flex; flex-wrap: wrap"
ref="headerForm" ref="headerForm"
@submit.prevent="" @submit.prevent=""
@keyup.enter="onComSearch" @keyup.enter="onComSearch"
label-position="left" label-position="left"
:inline="true" :inline="true"
> >
<el-form-item label="日期" v-if="datePicker" style="grid-column: span 2; max-width: 570px">
<DatePicker ref="datePickerRef" :nextFlag="nextFlag" :theCurrentTime="theCurrentTime"></DatePicker>
</el-form-item>
<el-form-item label="区域" v-if="area"> <el-form-item label="区域" v-if="area">
<Area ref="areaRef" v-model="tableStore.table.params.deptIndex" /> <Area ref="areaRef" v-model="tableStore.table.params.deptIndex" />
</el-form-item> </el-form-item>
<el-form-item label="日期" v-if="datePicker" style="grid-column: span 2; max-width: unset">
<DatePicker ref="datePickerRef"></DatePicker>
</el-form-item>
<slot name="select"></slot> <slot name="select"></slot>
</el-form> </el-form>
<template v-if="$slots.select || datePicker"> <template v-if="$slots.select || datePicker || showSearch">
<el-button type="primary" @click="showSelectChange" v-if="showUnfoldButton"> <el-button type="primary" @click="showSelectChange" v-if="showUnfoldButton">
<Icon size="14" name="el-icon-ArrowUp" style="color: #fff" v-if="showSelect" /> <Icon size="14" name="el-icon-ArrowUp" style="color: #fff" v-if="showSelect" />
<Icon size="14" name="el-icon-ArrowDown" style="color: #fff" v-else /> <Icon size="14" name="el-icon-ArrowDown" style="color: #fff" v-else />
@@ -46,6 +47,7 @@ import Area from '@/components/form/area/index.vue'
import { mainHeight } from '@/utils/layout' import { mainHeight } from '@/utils/layout'
import { useDictData } from '@/stores/dictData' import { useDictData } from '@/stores/dictData'
import { Search, RefreshLeft } from '@element-plus/icons-vue' import { Search, RefreshLeft } from '@element-plus/icons-vue'
import { defineProps } from 'vue'
const tableStore = inject('tableStore') as TableStore const tableStore = inject('tableStore') as TableStore
const tableHeader = ref() const tableHeader = ref()
@@ -59,12 +61,16 @@ interface Props {
datePicker?: boolean datePicker?: boolean
area?: boolean area?: boolean
showSearch?: boolean showSearch?: boolean
nextFlag?: boolean //控制时间是否可以往后推
theCurrentTime?: boolean //控制时间前3天展示上个月时间
} }
const props = withDefaults(defineProps<Props>(), { const props = withDefaults(defineProps<Props>(), {
datePicker: false, datePicker: false,
area: false, area: false,
showSearch: true showSearch: true,
nextFlag: false,
theCurrentTime: false
}) })
// 动态计算table高度 // 动态计算table高度
const resizeObserver = new ResizeObserver(entries => { const resizeObserver = new ResizeObserver(entries => {
@@ -151,19 +157,19 @@ const onComSearch = async () => {
await tableStore.onTableAction('search', {}) await tableStore.onTableAction('search', {})
} }
const onResetForm = () => {
//时间重置成默认值
datePickerRef.value?.timeChange(3)
tableStore.onTableAction('reset', {})
}
const setDatePicker = (list: any) => { const setDatePicker = (list: any) => {
datePickerRef.value.setTimeOptions(list) datePickerRef.value.setTimeOptions(list)
} }
const onResetForm = () => {
//时间重置成默认值
datePickerRef.value?.setInterval(3)
tableStore.onTableAction('reset', {})
}
const setInterval = (val: any) => { const setInterval = (val: any) => {
datePickerRef.value.setInterval(val) datePickerRef.value.setInterval(val)
} }
defineExpose({ onComSearch, areaRef, setDatePicker, setInterval, datePickerRef }) defineExpose({ onComSearch, areaRef, setDatePicker, setInterval, datePickerRef, showSelectChange})
</script> </script>
<style scoped lang="scss"> <style scoped lang="scss">

21
src/utils/tableStore.ts
View File

@@ -5,17 +5,18 @@ import { Method } from 'axios'
import { mainHeight } from '@/utils/layout' import { mainHeight } from '@/utils/layout'
interface TableStoreParams { interface TableStoreParams {
url: string url: string // 请求地址
pk?: string pk?: string
column: TableColumn[] column: TableColumn[]
params?: anyObj params?: anyObj
method?: Method method?: Method // 请求方式
isWebPaging?: boolean // 是否前端分页 isWebPaging?: boolean // 是否前端分页
showPage?: boolean showPage?: boolean //是否需要分页
publicHeight?: number paramsPOST?: boolean // post请求 params传参
resetCallback?: () => void publicHeight?: number //计算高度
loadCallback?: () => void resetCallback?: () => void // 重置
beforeSearchFun?: () => void loadCallback?: () => void // 接口调用后的回调
beforeSearchFun?: () => void // 接口调用前的回调
} }
export default class TableStore { export default class TableStore {
@@ -24,6 +25,7 @@ export default class TableStore {
public method: Method public method: Method
public initData: any = null public initData: any = null
public isWebPaging = false public isWebPaging = false
public paramsPOST = true
public showPage = true public showPage = true
public table: CnTable = reactive({ public table: CnTable = reactive({
ref: null, ref: null,
@@ -47,6 +49,7 @@ export default class TableStore {
constructor(public options: TableStoreParams) { constructor(public options: TableStoreParams) {
this.url = options.url this.url = options.url
this.pk = options.pk || 'id' this.pk = options.pk || 'id'
this.paramsPOST = options.paramsPOST || false
this.isWebPaging = options.isWebPaging || false this.isWebPaging = options.isWebPaging || false
this.method = options.method || 'GET' this.method = options.method || 'GET'
this.table.column = options.column this.table.column = options.column
@@ -73,12 +76,12 @@ export default class TableStore {
url: this.url, url: this.url,
method: this.method method: this.method
}, },
requestPayload(this.method, this.table.params) requestPayload(this.method, this.table.params, this.paramsPOST)
) )
).then((res: any) => { ).then((res: any) => {
if (res.data) { if (res.data) {
this.table.data = res.data.records || res.data this.table.data = res.data.records || res.data
this.table.total = res.data.total || res.data.length || 0 this.table.total = res.data?.total || res.data.length || 0
} else { } else {
this.table.data = [] this.table.data = []
this.table.total = 0 this.table.total = 0

28
src/views/govern/device/control/detail.vue
View File

@@ -20,12 +20,8 @@
</el-form-item> </el-form-item>
<el-form-item label="数据类型" label-width="80px"> <el-form-item label="数据类型" label-width="80px">
<el-select v-model="form.statMethod" placeholder="请选择值类型"> <el-select v-model="form.statMethod" placeholder="请选择值类型">
<el-option <el-option v-for="item in typeOptions" :key="item.id" :label="item.name"
v-for="item in typeOptions" :value="item.id"></el-option>
:key="item.id"
:label="item.name"
:value="item.id"
></el-option>
</el-select> </el-select>
</el-form-item> </el-form-item>
<el-form-item> <el-form-item>
@@ -115,12 +111,7 @@ const init = () => {
dataLevel: form.dataLevel, dataLevel: form.dataLevel,
statMethod: form.statMethod statMethod: form.statMethod
}).then(res => { }).then(res => {
console.log(
123,
res.data.map((item: any[]) => {
return item[0].anotherName
})
)
if (res.data.length && res.data[0].length) { if (res.data.length && res.data[0].length) {
let arr: any[] = [] let arr: any[] = []
@@ -187,20 +178,20 @@ const init = () => {
}) })
}, },
yAxis: { yAxis: {
name: `单位:(${arr[0].unit})`, name: `单位:(${arr[0].unit == null ? ' / ' : arr[0].unit})`,
type: 'value', type: 'value',
axisLine: { axisLine: {
show: true show: true
}, },
minInterval: 0.1, minInterval: 0.1,
min: parseFloat( min: (
arr arr
.map(item => item.statisticalData) .map((item: any) => item.statisticalData)
.sort((a, b) => { .sort((a, b) => {
return a - b return a - b
})[0] / 1.5 })[0] / 1.2
).toFixed(0), ).toFixed(1),
max: parseFloat( max: (
arr arr
.map(item => item.statisticalData) .map(item => item.statisticalData)
.sort((a, b) => { .sort((a, b) => {
@@ -239,6 +230,7 @@ defineExpose({ open })
display: flex; display: flex;
flex-direction: column; flex-direction: column;
} }
.el-form--inline .el-form-item { .el-form--inline .el-form-item {
margin-bottom: 10px !important; margin-bottom: 10px !important;
} }

193
src/views/govern/device/control/index.vue
View File

@@ -1,10 +1,6 @@
<template> <template>
<div <div class="default-main device-control" :style="{ height: pageHeight.height }" v-loading="loading"
class="default-main device-control" style="position: relative">
:style="{ height: pageHeight.height }"
v-loading="loading"
style="position: relative"
>
<PointTree @node-click="nodeClick" @init="nodeClick" @pointTypeChange="pointTypeChange"></PointTree> <PointTree @node-click="nodeClick" @init="nodeClick" @pointTypeChange="pointTypeChange"></PointTree>
<div class="device-control-right" v-if="deviceData"> <div class="device-control-right" v-if="deviceData">
<el-descriptions title="设备基本信息" class="mb10" :column="3" border> <el-descriptions title="设备基本信息" class="mb10" :column="3" border>
@@ -43,13 +39,8 @@
</el-descriptions-item> </el-descriptions-item>
</el-descriptions> </el-descriptions>
<el-tabs v-model="dataSet" type="border-card" class="device-control-box-card" @tab-click="handleClick"> <el-tabs v-model="dataSet" type="border-card" class="device-control-box-card" @tab-click="handleClick">
<el-tab-pane <el-tab-pane lazy :label="item.name" :name="item.id" v-for="(item, index) in deviceData.dataSetList"
lazy :key="index">
:label="item.name"
:name="item.id"
v-for="(item, index) in deviceData.dataSetList"
:key="index"
>
<template #label> <template #label>
<span class="custom-tabs-label"> <span class="custom-tabs-label">
<el-icon> <el-icon>
@@ -58,47 +49,35 @@
<DataAnalysis v-if="item.name.includes('趋势数据')" /> <DataAnalysis v-if="item.name.includes('趋势数据')" />
<Timer v-if="item.name.includes('实时数据')" /> <Timer v-if="item.name.includes('实时数据')" />
<Monitor v-if="item.name.includes('暂态事件')" /> <Monitor v-if="item.name.includes('暂态事件')" />
<Odometer <Odometer v-if="
v-if=" item.name != 'APF模块数据' &&
item.name != 'APF模块数据' && item.name != '历史APF模块数据' &&
item.name != '历史APF模块数据' && !item.name.includes('历史监测') &&
!item.name.includes('历史监测') && !item.name.includes('趋势数据') &&
!item.name.includes('趋势数据') && !item.name.includes('实时数据') &&
!item.name.includes('实时数据') && !item.name.includes('暂态事件')
!item.name.includes('暂态事件') " />
" <Histogram v-if="
/> item.name != 'APF模块数据' &&
<Histogram item.name != '历史APF模块数据' &&
v-if=" item.name.includes('历史监测') &&
item.name != 'APF模块数据' && !item.name.includes('趋势数据') &&
item.name != '历史APF模块数据' && !item.name.includes('实时数据') &&
item.name.includes('历史监测') && !item.name.includes('暂态事件')
!item.name.includes('趋势数据') && " />
!item.name.includes('实时数据') &&
!item.name.includes('暂态事件')
"
/>
</el-icon> </el-icon>
<span>{{ item.name }}</span> <span>{{ item.name }}</span>
</span> </span>
</template> </template>
</el-tab-pane> </el-tab-pane>
<el-form <el-form :inline="true" style="white-space: nowrap; margin-top: 10px" v-if="
:inline="true" dataSet.indexOf('_trenddata') == -1 &&
style="white-space: nowrap; margin-top: 10px" dataSet.indexOf('_realtimedata') == -1 &&
v-if=" dataSet.indexOf('_event') == -1
dataSet.indexOf('_trenddata') == -1 && ">
dataSet.indexOf('_realtimedata') == -1 &&
dataSet.indexOf('_event') == -1
"
>
<el-form-item label="指标"> <el-form-item label="指标">
<el-input <el-input style="width: 240px" v-model="formInline.searchValue" autocomplete="off" clearable
v-model="formInline.searchValue" placeholder="请输入关键词"></el-input>
autocomplete="off"
clearable
placeholder="请输入关键词"
></el-input>
</el-form-item> </el-form-item>
<el-form-item label="日期" v-show="dataSet.indexOf('_history') != -1"> <el-form-item label="日期" v-show="dataSet.indexOf('_history') != -1">
<DatePicker ref="datePickerRef"></DatePicker> <DatePicker ref="datePickerRef"></DatePicker>
@@ -113,38 +92,26 @@
<el-button type="primary" icon="el-icon-Search" @click="handleClick">查询</el-button> <el-button type="primary" icon="el-icon-Search" @click="handleClick">查询</el-button>
</el-form-item> </el-form-item>
</el-form> </el-form>
<div <div style="height: calc(100vh - 300px)" v-if="
style="height: calc(100vh - 300px)" dataSet.indexOf('_trenddata') == -1 &&
v-if=" dataSet.indexOf('_realtimedata') == -1 &&
dataSet.indexOf('_trenddata') == -1 && dataSet.indexOf('_event') == -1 &&
dataSet.indexOf('_realtimedata') == -1 && tableData.length == 0
dataSet.indexOf('_event') == -1 && " v-loading="tableLoading"></div>
tableData.length == 0 <div style="overflow: auto" :style="{ height: tableHeight }" v-if="
" dataSet.indexOf('_trenddata') == -1 &&
v-loading="tableLoading" dataSet.indexOf('_realtimedata') == -1 &&
></div> dataSet.indexOf('_event') == -1 &&
<div tableData.length != 0
style="overflow: auto" ">
:style="{ height: tableHeight }"
v-if="
dataSet.indexOf('_trenddata') == -1 &&
dataSet.indexOf('_realtimedata') == -1 &&
dataSet.indexOf('_event') == -1 &&
tableData.length != 0
"
>
<!-- 循环渲染的card 最新数据/历史数据显示 --> <!-- 循环渲染的card 最新数据/历史数据显示 -->
<div class="content"> <div class="content">
<el-card class="box-card" v-for="(item, index) in tableData" :key="index"> <el-card class="box-card" v-for="(item, index) in tableData" :key="index">
<template #header> <template #header>
<div class="clearfix"> <div class="clearfix">
<span style="flex: 1">{{ item.name }}</span> <span style="flex: 1">{{ item.name }}</span>
<Icon <Icon name="el-icon-TrendCharts" class="ml10" @click="getDeviceDataTrend(item)"
name="el-icon-TrendCharts" style="font-size: 26px; cursor: pointer; color: #fff"></Icon>
class="ml10"
@click="getDeviceDataTrend(item)"
style="font-size: 26px; cursor: pointer; color: #fff"
></Icon>
</div> </div>
</template> </template>
<!-- 模块数据 --> <!-- 模块数据 -->
@@ -159,49 +126,37 @@
</div> </div>
<div v-else-if="item.children.length"> <div v-else-if="item.children.length">
<div style="display: flex; align-items: center"> <div style="display: flex; align-items: center">
<el-tag <el-tag effect="dark" type="danger" style="width: 40px; text-align: center"
effect="dark" class="mr10">
type="danger"
style="width: 40px; text-align: center"
class="mr10"
>
MAX MAX
</el-tag> </el-tag>
{{ {{
item.children[0].maxValue === 3.1415956 || item.children[0].maxValue === 3.1415956 ||
typeof item.children[0].maxValue != 'number' typeof item.children[0].maxValue != 'number'
? '暂无数据' ? '暂无数据'
: item.children[0].maxValue : item.children[0].maxValue
}} }}
</div> </div>
<div style="display: flex; align-items: center" class="mt10"> <div style="display: flex; align-items: center" class="mt10">
<el-tag <el-tag effect="dark" type="success" style="width: 40px; text-align: center"
effect="dark" class="mr10">
type="success"
style="width: 40px; text-align: center"
class="mr10"
>
AVG AVG
</el-tag> </el-tag>
{{ {{
item.children[0].avgValue === 3.1415956 || item.children[0].avgValue === 3.1415956 ||
typeof item.children[0].avgValue != 'number' typeof item.children[0].avgValue != 'number'
? '暂无数据' ? '暂无数据'
: item.children[0].avgValue : item.children[0].avgValue
}} }}
</div> </div>
<div style="display: flex; align-items: center" class="mt10"> <div style="display: flex; align-items: center" class="mt10">
<el-tag <el-tag effect="dark" type="warning" style="width: 40px; text-align: center"
effect="dark" class="mr10">
type="warning"
style="width: 40px; text-align: center"
class="mr10"
>
MIN MIN
</el-tag> </el-tag>
{{ {{
item.children[0].minValue === 3.1415956 || item.children[0].minValue === 3.1415956 ||
typeof item.children[0].minValue != 'number' typeof item.children[0].minValue != 'number'
? '暂无数据' ? '暂无数据'
: item.children[0].minValue : item.children[0].minValue
}} }}
@@ -211,24 +166,15 @@
<el-empty description="暂无数据" v-if="tableData.length === 0"></el-empty> <el-empty description="暂无数据" v-if="tableData.length === 0"></el-empty>
</div> </div>
</div> </div>
<el-pagination <el-pagination v-if="
v-if=" tableData.length &&
tableData.length && dataSet.indexOf('_trenddata') == -1 &&
dataSet.indexOf('_trenddata') == -1 && dataSet.indexOf('_realtimedata') == -1 &&
dataSet.indexOf('_realtimedata') == -1 && dataSet.indexOf('_event') == -1
dataSet.indexOf('_event') == -1 " background class="mr2 mt10" style="float: right" @size-change="handleSizeChange"
" @current-change="pageChange" :current-page="formInline.pageNum" :page-sizes="[20, 30, 40, 50, 100]"
background :page-size="formInline.pageSize" layout="total, sizes, prev, pager, next, jumper"
class="mr2 mt10" :total="formInline.total"></el-pagination>
style="float: right"
@size-change="handleSizeChange"
@current-change="pageChange"
:current-page="formInline.pageNum"
:page-sizes="[20, 30, 40, 50, 100]"
:page-size="formInline.pageSize"
layout="total, sizes, prev, pager, next, jumper"
:total="formInline.total"
></el-pagination>
<!-- 趋势数据 --> <!-- 趋势数据 -->
<div style="height: calc(100vh - 200px)" v-show="dataSet.indexOf('_trenddata') != -1"> <div style="height: calc(100vh - 200px)" v-show="dataSet.indexOf('_trenddata') != -1">
@@ -257,10 +203,8 @@
<!-- 实时数据-实时趋势组件 --> <!-- 实时数据-实时趋势组件 -->
<realTrend v-show="!realTimeFlag && sonTab == 1" ref="realTrendRef"></realTrend> <realTrend v-show="!realTimeFlag && sonTab == 1" ref="realTrendRef"></realTrend>
<!-- 实时数据-谐波频谱组件 --> <!-- 实时数据-谐波频谱组件 -->
<harmonicSpectrum <harmonicSpectrum v-show="!realTimeFlag && sonTab == 2" ref="harmonicSpectrumRef">
v-show="!realTimeFlag && sonTab == 2" </harmonicSpectrum>
ref="harmonicSpectrumRef"
></harmonicSpectrum>
</div> </div>
<!-- 暂态事件 --> <!-- 暂态事件 -->
<div style="height: calc(100vh - 200px)" v-show="dataSet.indexOf('_event') != -1"> <div style="height: calc(100vh - 200px)" v-show="dataSet.indexOf('_event') != -1">
@@ -402,6 +346,7 @@ const deviceId: any = ref('')
const lineId: any = ref('') const lineId: any = ref('')
const dataLevel: any = ref('') const dataLevel: any = ref('')
const nodeClick = async (e: anyObj) => { const nodeClick = async (e: anyObj) => {
deviceId.value = e?.pid deviceId.value = e?.pid
lineId.value = e?.id lineId.value = e?.id
if (!e) { if (!e) {
@@ -473,12 +418,14 @@ const eventRef: any = ref()
const timer: any = ref() const timer: any = ref()
//tab点击事件 //tab点击事件
const handleClick = async (tab?: any) => { const handleClick = async (tab?: any) => {
//点击tab时更新dataSet最新值 //点击tab时更新dataSet最新值
if (tab && tab.props && tab.props.name && dataSet.value != tab.props.name) { if (tab && tab.props && tab.props.name && dataSet.value != tab.props.name) {
dataSet.value = tab.props.name dataSet.value = tab.props.name
} }
tableLoading.value = true tableLoading.value = true
loading.value = true
//初始化点击tab隐藏实时录波、实时趋势、谐波频谱按钮 //初始化点击tab隐藏实时录波、实时趋势、谐波频谱按钮
realTimeFlag.value = false realTimeFlag.value = false
//初始化点击tab隐藏子页面 //初始化点击tab隐藏子页面
@@ -501,6 +448,7 @@ const handleClick = async (tab?: any) => {
tableData.value = res.data.records tableData.value = res.data.records
formInline.total = res.data.total formInline.total = res.data.total
tableLoading.value = false tableLoading.value = false
loading.value = false
}) })
} }
//查询趋势数据 //查询趋势数据
@@ -557,13 +505,14 @@ const handleClick = async (tab?: any) => {
tableData.value = res.data.records tableData.value = res.data.records
formInline.total = res.data.total formInline.total = res.data.total
tableLoading.value = false tableLoading.value = false
loading.value = false
}) })
} }
// }, 100) // }, 100)
} }
//模版下载 //模版下载
const handleDownLoadTemplate = () => {} const handleDownLoadTemplate = () => { }
//解析列表 //解析列表
const analysisListRef = ref() const analysisListRef = ref()
//打开解析列表 //打开解析列表
@@ -624,7 +573,7 @@ const openGroup = () => {
}) })
}) })
} }
onMounted(() => {}) onMounted(() => { })
</script> </script>
<style lang="scss"> <style lang="scss">
@@ -635,12 +584,14 @@ onMounted(() => {})
overflow: hidden; overflow: hidden;
flex: 1; flex: 1;
padding: 10px 10px 10px 0; padding: 10px 10px 10px 0;
.el-descriptions__header { .el-descriptions__header {
height: 36px; height: 36px;
margin-bottom: 7px; margin-bottom: 7px;
display: flex; display: flex;
align-items: center; align-items: center;
} }
.content { .content {
box-sizing: border-box; box-sizing: border-box;
overflow: auto; overflow: auto;
@@ -660,6 +611,7 @@ onMounted(() => {})
.el-card__header { .el-card__header {
padding: 0; padding: 0;
.clearfix { .clearfix {
box-sizing: border-box; box-sizing: border-box;
display: flex; display: flex;
@@ -676,6 +628,7 @@ onMounted(() => {})
padding: 10px; padding: 10px;
margin-bottom: 0; margin-bottom: 0;
background-image: linear-gradient(var(--el-color-primary), var(--el-color-primary-light-3)); background-image: linear-gradient(var(--el-color-primary), var(--el-color-primary-light-3));
.box-card-content { .box-card-content {
height: 100%; height: 100%;
display: flex; display: flex;
@@ -695,10 +648,12 @@ onMounted(() => {})
align-items: center; align-items: center;
justify-content: flex-end; justify-content: flex-end;
} }
.custom-tabs-label { .custom-tabs-label {
display: flex; display: flex;
align-items: center; align-items: center;
justify-content: space-between; justify-content: space-between;
.el-icon { .el-icon {
margin-right: 5px; margin-right: 5px;
} }

3
src/views/govern/device/manage/index.vue
View File

@@ -9,7 +9,6 @@
type="primary" type="primary"
icon="el-icon-Share" icon="el-icon-Share"
@click="openGroup" @click="openGroup"
size="small"
:loading="getGroupLoading" :loading="getGroupLoading"
> >
设备模版分组 设备模版分组
@@ -93,7 +92,7 @@ const dataSet = ref('')
const devTypeOptions = ref([]) const devTypeOptions = ref([])
const devModelOptions = ref([]) const devModelOptions = ref([])
const tableData = ref([]) const tableData = ref([])
const tableHeight = mainHeight(235).height const tableHeight = mainHeight(260).height
const mangePopup = ref() const mangePopup = ref()
const activeName = ref(0) const activeName = ref(0)
// 树节点点击 // 树节点点击