量测:页面显示调整
This commit is contained in:
parent
f64b357a1a
commit
2bfb7458d1
@ -409,9 +409,7 @@ const initpowerChart = () => {
|
||||
axisLabel: {
|
||||
//x轴文字的配置
|
||||
show: true,
|
||||
textStyle: {
|
||||
color: '#4E5969',
|
||||
},
|
||||
interval: 'auto',
|
||||
//rotate: 45
|
||||
},
|
||||
@ -442,10 +440,8 @@ const initpowerChart = () => {
|
||||
axisLabel: {
|
||||
//x轴文字的配置
|
||||
show: true,
|
||||
textStyle: {
|
||||
color: '#4E5969',
|
||||
},
|
||||
},
|
||||
axisTick: { show: false },
|
||||
splitLine: {
|
||||
interval: 50,
|
||||
@ -472,10 +468,8 @@ const initpowerChart = () => {
|
||||
axisLabel: {
|
||||
//x轴文字的配置
|
||||
show: true,
|
||||
textStyle: {
|
||||
color: '#4E5969',
|
||||
},
|
||||
},
|
||||
axisTick: { show: false },
|
||||
splitLine: {
|
||||
interval: 50,
|
||||
@ -623,10 +617,8 @@ const initTrendChart = (type: 'day' | 'month') => {
|
||||
axisLabel: {
|
||||
//x轴文字的配置
|
||||
show: true,
|
||||
textStyle: {
|
||||
color: '#4E5969',
|
||||
},
|
||||
},
|
||||
splitLine: {
|
||||
//分割线配置
|
||||
show: false,
|
||||
@ -654,10 +646,8 @@ const initTrendChart = (type: 'day' | 'month') => {
|
||||
axisLabel: {
|
||||
//x轴文字的配置
|
||||
show: true,
|
||||
textStyle: {
|
||||
color: '#4E5969',
|
||||
},
|
||||
},
|
||||
axisTick: { show: false },
|
||||
splitLine: {
|
||||
interval: 50,
|
||||
|
@ -11,8 +11,10 @@
|
||||
:sortable="item.sortable"
|
||||
>
|
||||
<template #default="scope">
|
||||
<div v-if="item.prop === 'realTimeValue'" class="realTimeValue" @click="openLineChart(scope.row)">
|
||||
<el-button text type="primary">{{ scope.row.realTimeValue }}</el-button>
|
||||
<div v-if="item.prop === 'realTimeValue'" class="realTimeValue">
|
||||
<div class="realTimeValueText">{{ scope.row.realTimeValue }}</div>
|
||||
</div>
|
||||
<div v-if="item.prop === 'operate'" @click="openLineChart(scope.row)" class="operate">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" class="icon" width="20px" height="20px" viewBox="0 0 1024 1024" version="1.1">
|
||||
<path
|
||||
d="M896 896H96a32 32 0 0 1-32-32V224a32 32 0 0 1 64 0v608h768a32 32 0 1 1 0 64zM247.008 640a32 32 0 0 1-20.992-56.192l200.992-174.24a32 32 0 0 1 42.272 0.288l172.128 153.44 229.088-246.304a32 32 0 0 1 46.88 43.616l-250.432 269.216a31.936 31.936 0 0 1-44.704 2.08l-174.56-155.52-179.744 155.84a31.872 31.872 0 0 1-20.928 7.776z"
|
||||
@ -54,17 +56,13 @@
|
||||
</el-form-item>
|
||||
</div>
|
||||
<div>
|
||||
<el-form-item prop="interval" label="时间间隔:" style="margin-right: 2px">
|
||||
<el-input v-model="seachOptions.interval" style="width: 100px" placeholder="请输入时间间隔"></el-input>
|
||||
</el-form-item>
|
||||
<el-form-item prop="unit">
|
||||
<el-select v-model="seachOptions.unit" placeholder="请选择时间单位" style="width: 75px">
|
||||
<el-option label="秒" value="s"></el-option>
|
||||
<el-option label="分钟" value="m"></el-option>
|
||||
<el-option label="小时" value="h"></el-option>
|
||||
<el-option label="天" value="d"></el-option>
|
||||
<el-option label="周" value="w"></el-option>
|
||||
<el-option label="年" value="y"></el-option>
|
||||
<el-form-item prop="interval" label="时间间隔:">
|
||||
<el-select v-model="seachOptions.interval" placeholder="请选择时间间隔" style="width: 100px">
|
||||
<el-option label="原始" value="40s"></el-option>
|
||||
<el-option label="5分钟" value="5m"></el-option>
|
||||
<el-option label="15分钟" value="15m"></el-option>
|
||||
<el-option label="1小时" value="1h"></el-option>
|
||||
<el-option label="1天" value="1d"></el-option>
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
</div>
|
||||
@ -86,28 +84,6 @@ import { getModelAttributeListReq, getRealValueListReq } from '/@/api/backend/de
|
||||
import * as echarts from 'echarts'
|
||||
import { getRealValueRangeReq } from '/@/api/backend/deviceModel/request'
|
||||
|
||||
// const props = defineProps({
|
||||
// iotModelId: {
|
||||
// type: String,
|
||||
// default: '',
|
||||
// },
|
||||
// deviceId: {
|
||||
// type: String,
|
||||
// default: '',
|
||||
// },
|
||||
// show: {
|
||||
// type: Boolean,
|
||||
// default: false,
|
||||
// },
|
||||
// autoUpdate: {
|
||||
// type: Boolean,
|
||||
// default: false,
|
||||
// },
|
||||
// attributeType: {
|
||||
// type: Number,
|
||||
// default: '138',
|
||||
// },
|
||||
// })
|
||||
const props = withDefaults(
|
||||
defineProps<{ iotModelId: string; deviceId: string; show: boolean; autoUpdate: boolean; attributeType: ModelAttributeType }>(),
|
||||
{
|
||||
@ -154,6 +130,13 @@ const tableColumn = [
|
||||
align: 'center',
|
||||
sortable: false,
|
||||
},
|
||||
{
|
||||
label: '历史曲线',
|
||||
prop: 'operate',
|
||||
align: 'center',
|
||||
width: 80,
|
||||
sortable: false,
|
||||
},
|
||||
]
|
||||
const tableData = ref<any[]>([])
|
||||
|
||||
@ -348,7 +331,7 @@ const getChartData = () => {
|
||||
attributes: [searchInfo.attr],
|
||||
},
|
||||
],
|
||||
interval: seachOptions.interval + seachOptions.unit,
|
||||
interval: seachOptions.interval,
|
||||
}).then((res) => {
|
||||
initChart(res.data?.[props.deviceId]?.[searchInfo.attr])
|
||||
})
|
||||
@ -360,8 +343,7 @@ const chartRef = ref()
|
||||
let chartInstance: any = null
|
||||
const seachOptions = reactive({
|
||||
datePickerValue: [0, 0],
|
||||
interval: 5,
|
||||
unit: 'm',
|
||||
interval: '5m',
|
||||
})
|
||||
|
||||
const searchRules = {
|
||||
@ -384,13 +366,6 @@ const searchRules = {
|
||||
trigger: 'input',
|
||||
},
|
||||
],
|
||||
unit: [
|
||||
{
|
||||
required: true,
|
||||
message: '请选择时间单位',
|
||||
trigger: 'change',
|
||||
},
|
||||
],
|
||||
}
|
||||
|
||||
const initChart = (data: { values: number[]; times: number[] }) => {
|
||||
@ -426,9 +401,7 @@ const initChart = (data: { values: number[]; times: number[] }) => {
|
||||
axisLabel: {
|
||||
//x轴文字的配置
|
||||
show: true,
|
||||
textStyle: {
|
||||
color: '#4E5969',
|
||||
},
|
||||
interval: 'auto',
|
||||
//rotate: 45
|
||||
},
|
||||
@ -459,10 +432,8 @@ const initChart = (data: { values: number[]; times: number[] }) => {
|
||||
axisLabel: {
|
||||
//x轴文字的配置
|
||||
show: true,
|
||||
textStyle: {
|
||||
color: '#4E5969',
|
||||
},
|
||||
},
|
||||
axisTick: { show: false },
|
||||
splitLine: {
|
||||
interval: 50,
|
||||
@ -511,13 +482,16 @@ watch(
|
||||
</script>
|
||||
|
||||
<style scoped lang="scss">
|
||||
.realTimeValue {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
.realTimeValueText {
|
||||
color: #0064aa;
|
||||
}
|
||||
|
||||
.operate {
|
||||
&:hover {
|
||||
cursor: pointer;
|
||||
}
|
||||
}
|
||||
|
||||
.searchPart {
|
||||
width: 100%;
|
||||
display: flex;
|
||||
|
Loading…
Reference in New Issue
Block a user