微调
This commit is contained in:
guanj
@@ -1,202 +1,211 @@
|
||||
<template>
|
||||
<div style="display: flex; flex-direction: column; height: 100%">
|
||||
<TableHeader ref="TableHeaderRef" :showSearch="false">
|
||||
<template v-slot:select>
|
||||
<el-form-item label="日期">
|
||||
<DatePicker ref="datePickerRef"></DatePicker>
|
||||
</el-form-item>
|
||||
<el-form-item label="对比">
|
||||
<el-select v-model="searchType" clearable placeholder="可选择同比、环比">
|
||||
<el-option
|
||||
v-for="item in searchTypeOptions"
|
||||
:key="item.value"
|
||||
:label="item.label"
|
||||
:value="item.value"
|
||||
/>
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
</template>
|
||||
<template v-slot:operation>
|
||||
<el-button type="primary" @click="init" icon="el-icon-Search">查询</el-button>
|
||||
</template>
|
||||
</TableHeader>
|
||||
|
||||
<div style="flex: 1; display: flex; overflow: hidden" class="mt10" v-loading="loading">
|
||||
<div style="flex: 1">
|
||||
<my-echart :options="options1" />
|
||||
</div>
|
||||
<div style="flex: 1">
|
||||
<my-echart :options="options2" />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
<script setup lang="ts">
|
||||
import { nextTick, onMounted, reactive, ref } from 'vue'
|
||||
import DatePicker from '@/components/form/datePicker/index.vue'
|
||||
import MyEchart from '@/components/echarts/MyEchart.vue'
|
||||
import { useMonitoringPoint } from '@/stores/monitoringPoint'
|
||||
import { getProbabilityDistribution } from '@/api/event-boot/monitor'
|
||||
import { getRunInfoData, getComFlagInfoData } from '@/api/device-boot/communicate'
|
||||
import TableHeader from '@/components/table/header/index.vue'
|
||||
import TableStore from '@/utils/tableStore'
|
||||
const tableStore = new TableStore({
|
||||
url: '',
|
||||
method: 'POST',
|
||||
column: []
|
||||
})
|
||||
const datePickerRef = ref()
|
||||
const monitoringPoint = useMonitoringPoint()
|
||||
const loading = ref(true)
|
||||
const formData = reactive({
|
||||
id: monitoringPoint.state.lineId,
|
||||
searchBeginTime: '',
|
||||
searchEndTime: '',
|
||||
periodBeginTime: '',
|
||||
periodEndTime: ''
|
||||
})
|
||||
const searchType = ref('')
|
||||
const searchTypeOptions = [
|
||||
{
|
||||
label: '同比',
|
||||
value: '1'
|
||||
},
|
||||
{
|
||||
label: '环比',
|
||||
value: '2'
|
||||
}
|
||||
]
|
||||
const options1 = ref({})
|
||||
const options2 = ref({})
|
||||
onMounted(() => {
|
||||
init()
|
||||
})
|
||||
const init = () => {
|
||||
loading.value = true
|
||||
formData.id = monitoringPoint.state.lineId
|
||||
formData.searchBeginTime = datePickerRef.value.timeValue[0]
|
||||
formData.searchEndTime = datePickerRef.value.timeValue[1]
|
||||
if (searchType.value == '1') {
|
||||
;[formData.periodBeginTime, formData.periodEndTime] = datePickerRef.value.getYearOnYear(
|
||||
formData.searchBeginTime,
|
||||
formData.searchEndTime
|
||||
)
|
||||
} else if (searchType.value == '2') {
|
||||
;[formData.periodBeginTime, formData.periodEndTime] = datePickerRef.value.getMonthOnMonth(
|
||||
formData.searchBeginTime,
|
||||
formData.searchEndTime
|
||||
)
|
||||
} else {
|
||||
formData.periodBeginTime = ''
|
||||
formData.periodEndTime = ''
|
||||
}
|
||||
Promise.all([getComFlagInfoData(formData), getRunInfoData(formData)])
|
||||
.then((res: any) => {
|
||||
handlerOptions1(res[0].data)
|
||||
handlerOptions2(res[1].data)
|
||||
loading.value = false
|
||||
})
|
||||
.catch(() => {
|
||||
loading.value = false
|
||||
})
|
||||
}
|
||||
const handlerOptions1 = (data: any) => {
|
||||
options1.value = {
|
||||
title: {
|
||||
text: '运行状态'
|
||||
},
|
||||
legend: {
|
||||
show: false
|
||||
},
|
||||
tooltip: {
|
||||
formatter: function (params: any) {
|
||||
var res = params[0].data[0] + '<br/>终端运行状态为：'
|
||||
var texts = ''
|
||||
if (params[0].data[1] === 2 || params[0].data[1] === '2') {
|
||||
texts = '退出'
|
||||
} else if (params[0].data[1] === 0 || params[0].data[1] === '0') {
|
||||
texts = '中断'
|
||||
} else if (params[0].data[1] === 1 || params[0].data[1] === '1') {
|
||||
texts = '正常'
|
||||
}
|
||||
res = res + texts
|
||||
return res
|
||||
}
|
||||
},
|
||||
xAxis: {
|
||||
// type: 'category',
|
||||
// data: data.updateTime
|
||||
type: 'time',
|
||||
name: '时间',
|
||||
//
|
||||
axisLabel: {
|
||||
formatter: {
|
||||
day: '{MM}-{dd}',
|
||||
month: '{MM}',
|
||||
year: '{yyyy}'
|
||||
}
|
||||
}
|
||||
},
|
||||
yAxis: {
|
||||
name: '状态',
|
||||
type: 'value',
|
||||
axisLabel: {
|
||||
// 这里重新定义就可以
|
||||
formatter: function (value: number) {
|
||||
var texts = []
|
||||
if (value === 2) {
|
||||
texts.push('退出')
|
||||
} else if (value === 0) {
|
||||
texts.push('中断')
|
||||
} else if (value === 1) {
|
||||
texts.push('正常')
|
||||
}
|
||||
return texts
|
||||
}
|
||||
}
|
||||
},
|
||||
series: [
|
||||
{
|
||||
name: '中断运行状态',
|
||||
data: data.type.map((item: any, index: number) => [data.updateTime[index], item]),
|
||||
type: 'line',
|
||||
step: 'end'
|
||||
}
|
||||
]
|
||||
}
|
||||
}
|
||||
const handlerOptions2 = (data: any) => {
|
||||
options2.value = {
|
||||
title: {
|
||||
text: '在线率和完整性'
|
||||
},
|
||||
xAxis: {
|
||||
type: 'category',
|
||||
data: formData.periodBeginTime
|
||||
? [
|
||||
`${formData.searchBeginTime} 至 ${formData.searchEndTime}`,
|
||||
`${formData.periodBeginTime} 至 ${formData.periodEndTime}`
|
||||
]
|
||||
: [`${formData.searchBeginTime} 至 ${formData.searchEndTime}`]
|
||||
},
|
||||
yAxis: {
|
||||
name: '%',
|
||||
type: 'value'
|
||||
},
|
||||
series: [
|
||||
{
|
||||
name: '在线率',
|
||||
data: data.onlineRateData,
|
||||
type: 'bar'
|
||||
},
|
||||
{
|
||||
name: '完整性',
|
||||
data: data.integrityData,
|
||||
type: 'bar'
|
||||
}
|
||||
]
|
||||
}
|
||||
}
|
||||
provide('tableStore', tableStore)
|
||||
</script>
|
||||
<style></style>
|
||||
<template>
|
||||
<div style="display: flex; flex-direction: column; height: 100%">
|
||||
<TableHeader ref="TableHeaderRef" :showSearch="false">
|
||||
<template v-slot:select>
|
||||
<el-form-item label="日期">
|
||||
<DatePicker ref="datePickerRef"></DatePicker>
|
||||
</el-form-item>
|
||||
<el-form-item label="对比">
|
||||
<el-select v-model="searchType" clearable placeholder="可选择同比、环比">
|
||||
<el-option v-for="item in searchTypeOptions" :key="item.value" :label="item.label"
|
||||
:value="item.value" />
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
</template>
|
||||
<template v-slot:operation>
|
||||
<el-button type="primary" @click="init" icon="el-icon-Search">查询</el-button>
|
||||
</template>
|
||||
</TableHeader>
|
||||
|
||||
<div style="flex: 1; display: flex; overflow: hidden" class="mt10" v-loading="loading">
|
||||
<div style="flex: 1">
|
||||
<my-echart :options="options1" />
|
||||
</div>
|
||||
<div style="flex: 1">
|
||||
<my-echart :options="options2" />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
<script setup lang="ts">
|
||||
import { nextTick, onMounted, reactive, ref } from 'vue'
|
||||
import DatePicker from '@/components/form/datePicker/index.vue'
|
||||
import MyEchart from '@/components/echarts/MyEchart.vue'
|
||||
import { useMonitoringPoint } from '@/stores/monitoringPoint'
|
||||
import { getProbabilityDistribution } from '@/api/event-boot/monitor'
|
||||
import { getRunInfoData, getComFlagInfoData } from '@/api/device-boot/communicate'
|
||||
import { ElMessage, ElMessageBox } from 'element-plus'
|
||||
import TableHeader from '@/components/table/header/index.vue'
|
||||
import TableStore from '@/utils/tableStore'
|
||||
const tableStore = new TableStore({
|
||||
url: '',
|
||||
method: 'POST',
|
||||
column: []
|
||||
})
|
||||
const datePickerRef = ref()
|
||||
const monitoringPoint = useMonitoringPoint()
|
||||
const loading = ref(true)
|
||||
const formData = reactive({
|
||||
id: monitoringPoint.state.lineId,
|
||||
searchBeginTime: '',
|
||||
searchEndTime: '',
|
||||
periodBeginTime: '',
|
||||
periodEndTime: ''
|
||||
})
|
||||
const searchType = ref('')
|
||||
const searchTypeOptions = [
|
||||
{
|
||||
label: '同比',
|
||||
value: '1'
|
||||
},
|
||||
{
|
||||
label: '环比',
|
||||
value: '2'
|
||||
}
|
||||
]
|
||||
const options1 = ref({})
|
||||
const options2 = ref({})
|
||||
onMounted(() => {
|
||||
init()
|
||||
})
|
||||
const init = () => {
|
||||
loading.value = true
|
||||
formData.id = monitoringPoint.state.lineId
|
||||
formData.searchBeginTime = datePickerRef.value.timeValue[0]
|
||||
formData.searchEndTime = datePickerRef.value.timeValue[1]
|
||||
if (searchType.value == '1') {
|
||||
;[formData.periodBeginTime, formData.periodEndTime] = datePickerRef.value.getYearOnYear(
|
||||
formData.searchBeginTime,
|
||||
formData.searchEndTime
|
||||
)
|
||||
} else if (searchType.value == '2') {
|
||||
;[formData.periodBeginTime, formData.periodEndTime] = datePickerRef.value.getMonthOnMonth(
|
||||
formData.searchBeginTime,
|
||||
formData.searchEndTime
|
||||
)
|
||||
} else {
|
||||
formData.periodBeginTime = ''
|
||||
formData.periodEndTime = ''
|
||||
}
|
||||
Promise.all([getComFlagInfoData(formData), getRunInfoData(formData)])
|
||||
.then((res: any) => {
|
||||
handlerOptions1(res[0].data)
|
||||
handlerOptions2(res[1].data)
|
||||
loading.value = false
|
||||
})
|
||||
.catch(() => {
|
||||
loading.value = false
|
||||
})
|
||||
}
|
||||
const handlerOptions1 = (data: any) => {
|
||||
options1.value = {
|
||||
title: {
|
||||
text: '运行状态'
|
||||
},
|
||||
legend: {
|
||||
show: false
|
||||
},
|
||||
tooltip: {
|
||||
formatter: function (params: any) {
|
||||
var res = params[0].data[0] + '<br/>终端运行状态为：'
|
||||
var texts = ''
|
||||
if (params[0].data[1] === 2 || params[0].data[1] === '2') {
|
||||
texts = '退出'
|
||||
} else if (params[0].data[1] === 0 || params[0].data[1] === '0') {
|
||||
texts = '中断'
|
||||
} else if (params[0].data[1] === 1 || params[0].data[1] === '1') {
|
||||
texts = '正常'
|
||||
}
|
||||
res = res + texts
|
||||
return res
|
||||
}
|
||||
},
|
||||
xAxis: {
|
||||
// type: 'category',
|
||||
// data: data.updateTime
|
||||
type: 'time',
|
||||
name: '时间',
|
||||
//
|
||||
axisLabel: {
|
||||
formatter: {
|
||||
day: '{MM}-{dd}',
|
||||
month: '{MM}',
|
||||
year: '{yyyy}'
|
||||
}
|
||||
}
|
||||
},
|
||||
yAxis: {
|
||||
name: '状态',
|
||||
type: 'value',
|
||||
axisLabel: {
|
||||
// 这里重新定义就可以
|
||||
formatter: function (value: number) {
|
||||
var texts = []
|
||||
if (value === 2) {
|
||||
texts.push('退出')
|
||||
} else if (value === 0) {
|
||||
texts.push('中断')
|
||||
} else if (value === 1) {
|
||||
texts.push('正常')
|
||||
}
|
||||
return texts
|
||||
}
|
||||
}
|
||||
},
|
||||
series: [
|
||||
{
|
||||
name: '中断运行状态',
|
||||
data: data.type.map((item: any, index: number) => [data.updateTime[index], item]),
|
||||
type: 'line',
|
||||
step: 'end'
|
||||
}
|
||||
]
|
||||
}
|
||||
}
|
||||
const handlerOptions2 = (data: any) => {
|
||||
let title = ''
|
||||
if (data.integrityData.some((item: any) => item > 100)) {
|
||||
title = '数据存在异常，已进行转换处理'
|
||||
data.integrityData = data.integrityData.map(item => {
|
||||
return item > 100 ? 100 : item;
|
||||
});
|
||||
}
|
||||
|
||||
options2.value = {
|
||||
title: {
|
||||
text: '在线率和完整性',
|
||||
subtext: title,
|
||||
subtextStyle: {
|
||||
color: 'red' // 设置副标题颜色为红色
|
||||
}
|
||||
},
|
||||
xAxis: {
|
||||
type: 'category',
|
||||
data: formData.periodBeginTime
|
||||
? [
|
||||
`${formData.searchBeginTime} 至 ${formData.searchEndTime}`,
|
||||
`${formData.periodBeginTime} 至 ${formData.periodEndTime}`
|
||||
]
|
||||
: [`${formData.searchBeginTime} 至 ${formData.searchEndTime}`]
|
||||
},
|
||||
yAxis: {
|
||||
name: '%',
|
||||
type: 'value'
|
||||
},
|
||||
series: [
|
||||
{
|
||||
name: '在线率',
|
||||
data: data.onlineRateData,
|
||||
type: 'bar'
|
||||
},
|
||||
{
|
||||
name: '完整性',
|
||||
data: data.integrityData,
|
||||
type: 'bar'
|
||||
}
|
||||
]
|
||||
}
|
||||
}
|
||||
provide('tableStore', tableStore)
|
||||
</script>
|
||||
<style></style>
|
||||
|
||||
Reference in New Issue
Block a user