Compare commits
2 Commits
92d48433b8
...
6c94acbe61
Author | SHA1 | Date | |
---|---|---|---|
6c94acbe61 | |||
7121f317b6 |
@ -5,6 +5,7 @@ export function listApi(config : object) {
|
|||||||
return http({
|
return http({
|
||||||
url: '/cxc_rlzy.zb/cxcRlzyZb/list',
|
url: '/cxc_rlzy.zb/cxcRlzyZb/list',
|
||||||
method: 'GET',
|
method: 'GET',
|
||||||
|
timeout: 5000,
|
||||||
data: config
|
data: config
|
||||||
})
|
})
|
||||||
}
|
}
|
||||||
|
@ -57,3 +57,11 @@ export function queryJldDataByJldID(params : object) { // 获取计量点五分
|
|||||||
data: params
|
data: params
|
||||||
})
|
})
|
||||||
}
|
}
|
||||||
|
|
||||||
|
export function queryJldRbDataByJldID(params : object) { // 获取计量点日报数据
|
||||||
|
return http({
|
||||||
|
url: '/tbqr/cxcScdtRbTbqr/listJldZongHe',
|
||||||
|
method: 'GET',
|
||||||
|
data: params
|
||||||
|
})
|
||||||
|
}
|
@ -1,6 +1,6 @@
|
|||||||
<template>
|
<template>
|
||||||
<PageLayout :navbarShow="false">
|
<PageLayout :navbarShow="false">
|
||||||
<wd-card style="margin: 10px;" id="top1">
|
<wd-card style="margin: 10px;padding: 10px;" id="top1">
|
||||||
<wd-row>
|
<wd-row>
|
||||||
<wd-col :span="24"><uni-title title="所属单位" align="left" type="h5"></uni-title></wd-col>
|
<wd-col :span="24"><uni-title title="所属单位" align="left" type="h5"></uni-title></wd-col>
|
||||||
</wd-row>
|
</wd-row>
|
||||||
@ -16,11 +16,12 @@
|
|||||||
</wd-row>
|
</wd-row>
|
||||||
<wd-row>
|
<wd-row>
|
||||||
<wd-col :span="12">
|
<wd-col :span="12">
|
||||||
<uni-easyinput v-model="realname" placeholder="姓名模糊查询" @change="getList" @clear="getList" />
|
<wd-input v-model="realname" clearable placeholder="姓名模糊查询" @change="getList"
|
||||||
|
@clear="getList"></wd-input>
|
||||||
</wd-col>
|
</wd-col>
|
||||||
<wd-col :span="12">
|
<wd-col :span="12">
|
||||||
<uni-easyinput v-model="contractNumber" placeholder="劳动合同号模糊查询" @change="getList"
|
<wd-input v-model="contractNumber" clearable placeholder="劳动合同号模糊查询" @change="getList"
|
||||||
@clear="getList" />
|
@clear="getList"></wd-input>
|
||||||
</wd-col>
|
</wd-col>
|
||||||
</wd-row>
|
</wd-row>
|
||||||
</wd-card>
|
</wd-card>
|
||||||
|
@ -9,499 +9,195 @@
|
|||||||
</route>
|
</route>
|
||||||
|
|
||||||
<template>
|
<template>
|
||||||
<PageLayout navTitle="历史数据图表" backRouteName="index" routeMethod="pushTab">
|
<PageLayout :navbarShow="false" class="page-layout">
|
||||||
<view class="chart-container">
|
<view style="color: blue;font-size:18px;text-align: center;margin: 10px;width: 100%;">
|
||||||
<view class="chart-header">
|
<wd-text :text="jldData.jldname+ '日报数据'" style="color: blue;font-size:18px;"></wd-text>
|
||||||
<view class="chart-title-container">
|
{{startTime}}
|
||||||
<text class="chart-title">{{ chartTitle }}</text>
|
|
||||||
</view>
|
|
||||||
|
|
||||||
<view class="filter-section">
|
|
||||||
<view class="date-picker">
|
|
||||||
<uni-datetime-picker type="datetimerange" v-model="lssjTimeRang" @change="getTime"
|
|
||||||
:placeholder="['开始时间', '结束时间']" />
|
|
||||||
</view>
|
|
||||||
|
|
||||||
<view class="checkbox-container">
|
|
||||||
<label class="checkbox">
|
|
||||||
<checkbox :checked="tableVisibled" @change="onChangeTable" />
|
|
||||||
<text>{{ checkBoxText }}</text>
|
|
||||||
</label>
|
|
||||||
</view>
|
|
||||||
</view>
|
|
||||||
</view>
|
|
||||||
|
|
||||||
<!-- 图表容器 -->
|
|
||||||
<view id="myCharts" class="chart"></view>
|
|
||||||
|
|
||||||
<!-- 数据表格 -->
|
|
||||||
<view v-if="tableVisibled" class="table-container">
|
|
||||||
<uni-table border stripe emptyText="暂无数据" :loading="loading">
|
|
||||||
<uni-tr>
|
|
||||||
<uni-th width="60" align="center">序号</uni-th>
|
|
||||||
<uni-th align="center">日期时间</uni-th>
|
|
||||||
<uni-th align="center">温度(℃)</uni-th>
|
|
||||||
<uni-th align="center">压力(MPa)</uni-th>
|
|
||||||
<uni-th align="center">压差(kPa)</uni-th>
|
|
||||||
<uni-th align="center">瞬时量(Nm³/d)</uni-th>
|
|
||||||
<uni-th align="center">今日量(m³)</uni-th>
|
|
||||||
<uni-th align="center">今日时间(分)</uni-th>
|
|
||||||
<uni-th align="center">仪表状态</uni-th>
|
|
||||||
</uni-tr>
|
|
||||||
<uni-tr v-for="(item, index) in dataSource" :key="index">
|
|
||||||
<uni-td align="center">{{ index + 1 }}</uni-td>
|
|
||||||
<uni-td align="center">{{ formatTableTime(item.createTime) }}</uni-td>
|
|
||||||
<uni-td align="center">{{ item.wd }}</uni-td>
|
|
||||||
<uni-td align="center">{{ item.yl }}</uni-td>
|
|
||||||
<uni-td align="center">{{ item.yc }}</uni-td>
|
|
||||||
<uni-td align="center">{{ item.ssll }}</uni-td>
|
|
||||||
<uni-td align="center">{{ item.jrl }}</uni-td>
|
|
||||||
<uni-td align="center">{{ item.jrsj }}</uni-td>
|
|
||||||
<uni-td align="center">{{ item.zt }}</uni-td>
|
|
||||||
</uni-tr>
|
|
||||||
</uni-table>
|
|
||||||
|
|
||||||
<view class="pagination">
|
|
||||||
<uni-pagination :current="ipagination.current" :pageSize="ipagination.pageSize"
|
|
||||||
:total="ipagination.total" @change="handlePageChange" showTotal />
|
|
||||||
</view>
|
|
||||||
</view>
|
|
||||||
</view>
|
</view>
|
||||||
|
<view>
|
||||||
|
<uni-datetime-picker type="daterange" v-model="lssjTimeRange" @change="getTime" start-placeholder="开始时间"
|
||||||
|
end-placeholder="结束时间">
|
||||||
|
|
||||||
|
</uni-datetime-picker>
|
||||||
|
</view>
|
||||||
|
<view style="text-align: center;padding: 5px;">
|
||||||
|
|
||||||
|
<wd-button custom-class="custom-value" size="small" plain clickable @click="handleForward">上一月</wd-button>
|
||||||
|
<wd-button custom-class="custom-value" size="small" plain clickable @click="handleThis">本月</wd-button>
|
||||||
|
<wd-button custom-class="custom-value" size="small" plain clickable @click="handleNext">后一月</wd-button>
|
||||||
|
<wd-button custom-class="custom-value" size="small" plain clickable @click="handleQuery">查询数据</wd-button>
|
||||||
|
<wd-button custom-class="custom-value" size="small" plain clickable @click="handleDrawLine">生成曲线</wd-button>
|
||||||
|
|
||||||
|
|
||||||
|
</view>
|
||||||
|
<view>
|
||||||
|
<scroll-view direction="vertical" style="height: 200px;">
|
||||||
|
<wd-table :data="chartData" height="200px">
|
||||||
|
<wd-table-col prop="scrq" label="日期" align="center"></wd-table-col>
|
||||||
|
<wd-table-col prop="jldname" label="计量点名称" align="center"></wd-table-col>
|
||||||
|
<wd-table-col prop="ljql" label="流量(m³)" align="center">
|
||||||
|
</wd-table-col>
|
||||||
|
</wd-table>
|
||||||
|
</scroll-view>
|
||||||
|
</view>
|
||||||
|
<view v-if="drawLineFlag">
|
||||||
|
<cxc-szcx-multiLineChart :data-list="chartData" x-field="scrq"
|
||||||
|
:y-fields="lineFields"></cxc-szcx-multiLineChart>
|
||||||
|
</view>
|
||||||
|
|
||||||
</PageLayout>
|
</PageLayout>
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
<script setup>
|
<script setup>
|
||||||
import {
|
import {
|
||||||
ref,
|
queryJldRbDataByJldID
|
||||||
onMounted,
|
} from '@/api/production'
|
||||||
onUnmounted,
|
|
||||||
watch,
|
|
||||||
nextTick
|
|
||||||
} from 'vue'
|
|
||||||
import {
|
|
||||||
onLoad
|
|
||||||
} from '@dcloudio/uni-app'
|
|
||||||
import {
|
import {
|
||||||
formatDate
|
formatDate
|
||||||
} from '@/utils/dateTime.ts'
|
} from '@/utils/dateTime.ts';
|
||||||
|
import {
|
||||||
|
ref,
|
||||||
|
onMounted,
|
||||||
|
computed,
|
||||||
|
nextTick,
|
||||||
|
watchEffect,
|
||||||
|
onUnmounted,
|
||||||
|
} from 'vue';
|
||||||
|
|
||||||
|
|
||||||
|
const lineFields = ref([
|
||||||
|
|
||||||
|
{
|
||||||
|
name: '日流量',
|
||||||
|
field: 'ljql',
|
||||||
|
min: '0',
|
||||||
|
max: '500000',
|
||||||
|
unit: '10^4m³'
|
||||||
|
}
|
||||||
|
])
|
||||||
|
|
||||||
// 定义props
|
|
||||||
const props = defineProps({
|
const props = defineProps({
|
||||||
lineData: {
|
jldData: {
|
||||||
type: Object,
|
type: Object,
|
||||||
default: () => ({})
|
default: () => {}
|
||||||
}
|
}
|
||||||
})
|
})
|
||||||
|
const chartData = ref([])
|
||||||
|
const drawLineFlag = ref(false)
|
||||||
|
|
||||||
// 数据声明
|
function handleQuery() {
|
||||||
const urljlByJldID = ref('https://szcx.zyyt.sinopec.com/Gyk/jldls/cxcSssjLssjJldls/getLssjByJldId')
|
const dwmc = props.jldData.qu;
|
||||||
|
const zcmc = props.jldData.zhan;
|
||||||
|
const jldmc = props.jldData.jldname;
|
||||||
|
console.log(dwmc, zcmc, jldmc)
|
||||||
|
queryJldRbDataByJldID({
|
||||||
|
fenzu: 'a.scrq',
|
||||||
|
dwmc: dwmc,
|
||||||
|
zcmc: zcmc,
|
||||||
|
jldname: jldmc,
|
||||||
|
startTime: startTime.value,
|
||||||
|
endTime: endTime.value
|
||||||
|
}).then(res => {
|
||||||
|
console.log(res)
|
||||||
|
chartData.value = res.result
|
||||||
|
|
||||||
|
})
|
||||||
|
|
||||||
|
|
||||||
const colorData = [{
|
}
|
||||||
color: '#000000'
|
|
||||||
},
|
|
||||||
{
|
|
||||||
color: '#00007f'
|
|
||||||
},
|
|
||||||
{
|
|
||||||
color: '#ff0000'
|
|
||||||
},
|
|
||||||
{
|
|
||||||
color: '#005500'
|
|
||||||
},
|
|
||||||
{
|
|
||||||
color: '#55007f'
|
|
||||||
},
|
|
||||||
{
|
|
||||||
color: '#ffff00'
|
|
||||||
}
|
|
||||||
]
|
|
||||||
|
|
||||||
const option = ref({})
|
function handleDrawLine() {
|
||||||
const legendData = ref([])
|
drawLineFlag.value = true
|
||||||
const xData = ref([])
|
}
|
||||||
const yaxis = ref({
|
// 前一天 - 以当前选择的起始日期为基准计算
|
||||||
type: 'value',
|
function handleForward() {
|
||||||
name: '',
|
const now = new Date(startTime.value);
|
||||||
min: 0,
|
now.setMonth(now.getMonth() - 1);
|
||||||
max: 500,
|
|
||||||
position: 'left',
|
const year = now.getFullYear();
|
||||||
axisLabel: {
|
const month = now.getMonth();
|
||||||
formatter: '{value}'
|
|
||||||
},
|
const firstDay = new Date(year, month, 1);
|
||||||
axisLine: {
|
const lastDay = new Date(year, month + 1, 0);
|
||||||
lineStyle: {
|
|
||||||
color: '#61A0A8'
|
startTime.value = formatDate(firstDay, "YYYY-MM-DD");
|
||||||
}
|
endTime.value = formatDate(lastDay, "YYYY-MM-DD");
|
||||||
}
|
|
||||||
|
lssjTimeRange.value = [formatDate(firstDay, "YYYY-MM-DD"), formatDate(lastDay, "YYYY-MM-DD")];
|
||||||
|
getTime(); // 触发时间变更事件
|
||||||
|
}
|
||||||
|
|
||||||
|
// 本月
|
||||||
|
function handleThis() {
|
||||||
|
|
||||||
|
lssjTimeRange.value = getDefaultTimeRange()
|
||||||
|
getTime(); // 触发时间变更事件
|
||||||
|
}
|
||||||
|
|
||||||
|
// 后一天
|
||||||
|
function handleNext() {
|
||||||
|
const now = new Date(startTime.value);
|
||||||
|
now.setMonth(now.getMonth() + 1);
|
||||||
|
|
||||||
|
const year = now.getFullYear();
|
||||||
|
const month = now.getMonth();
|
||||||
|
|
||||||
|
const firstDay = new Date(year, month, 1);
|
||||||
|
const lastDay = new Date(year, month + 1, 0);
|
||||||
|
startTime.value = formatDate(firstDay, "YYYY-MM-DD");
|
||||||
|
endTime.value = formatDate(lastDay, "YYYY-MM-DD");
|
||||||
|
|
||||||
|
lssjTimeRange.value = [formatDate(firstDay, "YYYY-MM-DD"), formatDate(lastDay, "YYYY-MM-DD")];
|
||||||
|
getTime(); // 触发时间变更事件
|
||||||
|
}
|
||||||
|
|
||||||
|
// 获取指定日期偏移的时间范围(每天8:00至次日7:59)
|
||||||
|
const getDefaultTimeRange = () => {
|
||||||
|
const now = new Date();
|
||||||
|
const year = now.getFullYear();
|
||||||
|
const month = now.getMonth();
|
||||||
|
|
||||||
|
// 当月第一天
|
||||||
|
const start = new Date(year, month, 1);
|
||||||
|
// 当月最后一天
|
||||||
|
const end = new Date(year, month + 1, 0);
|
||||||
|
|
||||||
|
// 格式化时间字符串
|
||||||
|
const formattedStart = formatDate(start, 'YYYY-MM-DD');
|
||||||
|
const formattedEnd = formatDate(end, 'YYYY-MM-DD');
|
||||||
|
|
||||||
|
// 更新响应式变量
|
||||||
|
startTime.value = formattedStart;
|
||||||
|
endTime.value = formattedEnd;
|
||||||
|
|
||||||
|
return [formattedStart, formattedEnd];
|
||||||
|
};
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
onMounted(() => {
|
||||||
|
// 设置默认时间范围 需要延时等控件渲染好
|
||||||
|
setTimeout(() => {
|
||||||
|
lssjTimeRange.value = getDefaultTimeRange(0)
|
||||||
|
}, 500)
|
||||||
|
|
||||||
|
console.log(lssjTimeRange.value);
|
||||||
})
|
})
|
||||||
|
|
||||||
const yAxis = ref([])
|
|
||||||
const series = ref([])
|
|
||||||
const serie = ref({
|
|
||||||
field: '',
|
|
||||||
name: '',
|
|
||||||
showSymbol: false,
|
|
||||||
type: 'line',
|
|
||||||
data: [],
|
|
||||||
yAxisIndex: 1,
|
|
||||||
lineStyle: {
|
|
||||||
color: '#61A0A8',
|
|
||||||
width: 1
|
|
||||||
},
|
|
||||||
connectNulls: false
|
|
||||||
})
|
|
||||||
|
|
||||||
const tableVisibled = ref(false)
|
|
||||||
const checkBoxText = ref('显示历史报表')
|
|
||||||
const dataSource = ref([])
|
|
||||||
const loading = ref(false)
|
|
||||||
const ipagination = ref({
|
|
||||||
current: 1,
|
|
||||||
pageSize: 10,
|
|
||||||
total: 0
|
|
||||||
})
|
|
||||||
|
|
||||||
const jldID = ref('')
|
|
||||||
const jldName = ref('')
|
|
||||||
const chartTitle = ref('')
|
|
||||||
const lineName = ref([])
|
|
||||||
const startTime = ref('')
|
const startTime = ref('')
|
||||||
const endTime = ref('')
|
const endTime = ref('')
|
||||||
const lssjTimeRang = ref([])
|
const lssjTimeRange = ref([])
|
||||||
const myCharts = ref(null)
|
|
||||||
|
|
||||||
// 获取当前日期时间范围
|
|
||||||
const getDefaultTimeRange = () => {
|
|
||||||
const now = new Date()
|
|
||||||
const start = new Date(now)
|
|
||||||
start.setHours(8, 0, 0, 0)
|
|
||||||
|
|
||||||
const end = new Date(now)
|
|
||||||
end.setDate(end.getDate() + 1)
|
|
||||||
end.setHours(7, 59, 59, 0)
|
|
||||||
|
|
||||||
return [start.getTime(), end.getTime()]
|
|
||||||
}
|
|
||||||
|
|
||||||
// 初始化图表
|
|
||||||
const initChart = () => {
|
|
||||||
series.value = []
|
|
||||||
yAxis.value = []
|
|
||||||
xData.value = []
|
|
||||||
let positionIndex = 0
|
|
||||||
|
|
||||||
for (let i = 0; i < lineName.value.length; i++) {
|
|
||||||
const yaxisTemp = JSON.parse(JSON.stringify(yaxis.value))
|
|
||||||
legendData.value.push(`${lineName.value[i].name}(${lineName.value[i].unit})`)
|
|
||||||
|
|
||||||
if (lineName.value[i].field === 'ssll') {
|
|
||||||
yaxisTemp.position = 'left'
|
|
||||||
} else {
|
|
||||||
yaxisTemp.position = 'right'
|
|
||||||
yaxisTemp.offset = lineName.value[i].field === 'jrl' ? 60 * positionIndex : 55 * positionIndex
|
|
||||||
positionIndex += 1
|
|
||||||
}
|
|
||||||
|
|
||||||
yaxisTemp.name = `${lineName.value[i].name}(${lineName.value[i].unit})`
|
|
||||||
yaxisTemp.min = lineName.value[i].min
|
|
||||||
yaxisTemp.max = lineName.value[i].max
|
|
||||||
yaxisTemp.axisLine.lineStyle.color = colorData[i].color
|
|
||||||
yAxis.value.push(yaxisTemp)
|
|
||||||
|
|
||||||
const serieTemp = JSON.parse(JSON.stringify(serie.value))
|
|
||||||
serieTemp.name = `${lineName.value[i].name}(${lineName.value[i].unit})`
|
|
||||||
serieTemp.field = lineName.value[i].field
|
|
||||||
serieTemp.lineStyle.color = colorData[i].color
|
|
||||||
serieTemp.yAxisIndex = i
|
|
||||||
series.value.push(serieTemp)
|
|
||||||
}
|
|
||||||
|
|
||||||
option.value = {
|
|
||||||
color: ['#000000', '#00007f', '#ff0000', '#005500', '#55007f', '#ffff00'],
|
|
||||||
tooltip: {
|
|
||||||
trigger: 'axis',
|
|
||||||
axisPointer: {
|
|
||||||
type: 'shadow'
|
|
||||||
}
|
|
||||||
},
|
|
||||||
dataZoom: [{
|
|
||||||
connectNulls: false,
|
|
||||||
id: 'dataZoomX',
|
|
||||||
type: "inside",
|
|
||||||
roam: false,
|
|
||||||
show: true,
|
|
||||||
xAxisIndex: [0],
|
|
||||||
filterMode: 'empty',
|
|
||||||
throttle: 50,
|
|
||||||
zoomOnMouseWheel: true,
|
|
||||||
moveOnMouseMove: true
|
|
||||||
}, {
|
|
||||||
id: 'dataZoomY',
|
|
||||||
type: 'inside',
|
|
||||||
filterMode: 'empty',
|
|
||||||
zoomLock: false,
|
|
||||||
throttle: 50,
|
|
||||||
zoomOnMouseWheel: true,
|
|
||||||
moveOnMouseMove: true
|
|
||||||
}],
|
|
||||||
toolbox: {
|
|
||||||
feature: {
|
|
||||||
dataView: {
|
|
||||||
show: false,
|
|
||||||
readOnly: false
|
|
||||||
},
|
|
||||||
restore: {
|
|
||||||
show: false
|
|
||||||
},
|
|
||||||
saveAsImage: {
|
|
||||||
show: false
|
|
||||||
}
|
|
||||||
}
|
|
||||||
},
|
|
||||||
legend: {
|
|
||||||
data: legendData.value
|
|
||||||
},
|
|
||||||
grid: {
|
|
||||||
top: '10%',
|
|
||||||
left: '3%',
|
|
||||||
right: '10%',
|
|
||||||
bottom: '3%',
|
|
||||||
containLabel: true
|
|
||||||
},
|
|
||||||
xAxis: {
|
|
||||||
type: 'category',
|
|
||||||
axisTick: {
|
|
||||||
alignWithLabel: true
|
|
||||||
},
|
|
||||||
data: xData.value
|
|
||||||
},
|
|
||||||
yAxis: yAxis.value,
|
|
||||||
series: series.value
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
// 时间选择变化
|
// 时间选择变化
|
||||||
const getTime = (e) => {
|
const getTime = (e) => {
|
||||||
if (e && e.length === 2) {
|
if (e && e.length === 2) {
|
||||||
startTime.value = formatDate(e[0], 'yyyy-MM-dd hh:mm:ss')
|
startTime.value = formatDate(e[0], 'YYYY-MM-DD')
|
||||||
endTime.value = formatDate(e[1], 'yyyy-MM-dd hh:mm:ss')
|
endTime.value = formatDate(e[1], 'YYYY-MM-DD')
|
||||||
updateChart()
|
// updateChart()
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
// 切换表格显示
|
|
||||||
const onChangeTable = (e) => {
|
|
||||||
tableVisibled.value = !tableVisibled.value
|
|
||||||
checkBoxText.value = tableVisibled.value ? '显示历史趋势' : '显示历史报表'
|
|
||||||
}
|
|
||||||
|
|
||||||
// 分页变化
|
|
||||||
const handlePageChange = (e) => {
|
|
||||||
ipagination.value.current = e.current
|
|
||||||
ipagination.value.pageSize = e.pageSize
|
|
||||||
}
|
|
||||||
|
|
||||||
// 格式化表格时间显示
|
|
||||||
const formatTableTime = (time) => {
|
|
||||||
if (!time) return ''
|
|
||||||
return formatDate(time, 'yyyy-MM-dd hh:mm:ss')
|
|
||||||
}
|
|
||||||
|
|
||||||
// 获取数组最大值
|
|
||||||
const maxArrValue = (data) => {
|
|
||||||
if (!data || data.length === 0) return 0
|
|
||||||
|
|
||||||
const list = []
|
|
||||||
for (let i in data) {
|
|
||||||
if (data[i] !== null) {
|
|
||||||
list.push(parseInt(data[i]))
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
if (list.length === 0) return 0
|
|
||||||
|
|
||||||
list.sort((num1, num2) => num1 - num2)
|
|
||||||
return list[list.length - 1]
|
|
||||||
}
|
|
||||||
|
|
||||||
// 更新图表数据
|
|
||||||
const updateChart = () => {
|
|
||||||
dataSource.value = []
|
|
||||||
xData.value = []
|
|
||||||
|
|
||||||
for (let j = 0; j < series.value.length; j++) {
|
|
||||||
series.value[j].data = []
|
|
||||||
}
|
|
||||||
|
|
||||||
loading.value = true
|
|
||||||
|
|
||||||
getAction(url.list, {
|
|
||||||
jldId: jldID.value,
|
|
||||||
startTime: startTime.value,
|
|
||||||
endTime: endTime.value
|
|
||||||
}).then(res => {
|
|
||||||
loading.value = false
|
|
||||||
|
|
||||||
if (res.success) {
|
|
||||||
const ssData = JSON.parse(res.result)
|
|
||||||
dataSource.value = ssData
|
|
||||||
ipagination.value.total = ssData.length
|
|
||||||
|
|
||||||
for (let i = 0; i < ssData.length; i++) {
|
|
||||||
const ctime = formatDate(ssData[i].createTime, 'yyyy-MM-dd hh:mm:ss')
|
|
||||||
xData.value.push(ctime)
|
|
||||||
|
|
||||||
for (let j = 0; j < series.value.length; j++) {
|
|
||||||
let tempValue = ssData[i][lineName.value[j].field]
|
|
||||||
tempValue = tempValue === 0 ? null : tempValue
|
|
||||||
series.value[j].data.push(tempValue)
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
for (let mm = 0; mm < series.value.length; mm++) {
|
|
||||||
const maxVal = maxArrValue(series.value[mm].data)
|
|
||||||
yAxis.value[mm].max = Math.round(maxVal * 1.2)
|
|
||||||
}
|
|
||||||
|
|
||||||
option.value.xAxis.data = xData.value
|
|
||||||
|
|
||||||
if (myCharts.value) {
|
|
||||||
myCharts.value.setOption(option.value)
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}).catch(() => {
|
|
||||||
loading.value = false
|
|
||||||
})
|
|
||||||
}
|
|
||||||
|
|
||||||
// 初始化ECharts
|
|
||||||
const initECharts = () => {
|
|
||||||
nextTick(() => {
|
|
||||||
// 在Uniapp中,需要使用uni.createCanvasContext或使用ucharts等替代方案
|
|
||||||
// 这里简化处理,实际使用时需要根据Uniapp的图表方案调整
|
|
||||||
const canvas = document.getElementById('myCharts')
|
|
||||||
if (canvas) {
|
|
||||||
// 初始化ECharts实例
|
|
||||||
myCharts.value = echarts.init(canvas)
|
|
||||||
myCharts.value.setOption(option.value)
|
|
||||||
}
|
|
||||||
})
|
|
||||||
}
|
|
||||||
|
|
||||||
// 监听lineData变化
|
|
||||||
watch(() => props.lineData, (val) => {
|
|
||||||
jldID.value = val.jldID
|
|
||||||
jldName.value = val.jldName
|
|
||||||
chartTitle.value = `${val.jldName}历史趋势`
|
|
||||||
lineName.value = JSON.parse(JSON.stringify(val.lineName))
|
|
||||||
startTime.value = val.startTime
|
|
||||||
endTime.value = val.endTime
|
|
||||||
|
|
||||||
try {
|
|
||||||
if (val.startTime && val.endTime) {
|
|
||||||
const sDt = new Date(val.startTime)
|
|
||||||
const eDt = new Date(val.endTime)
|
|
||||||
lssjTimeRang.value = [sDt.getTime(), eDt.getTime()]
|
|
||||||
} else {
|
|
||||||
lssjTimeRang.value = getDefaultTimeRange()
|
|
||||||
}
|
|
||||||
} catch (e) {
|
|
||||||
console.error('时间格式错误', e)
|
|
||||||
lssjTimeRang.value = getDefaultTimeRange()
|
|
||||||
}
|
|
||||||
|
|
||||||
initChart()
|
|
||||||
updateChart()
|
|
||||||
}, {
|
|
||||||
deep: true,
|
|
||||||
immediate: true
|
|
||||||
})
|
|
||||||
|
|
||||||
// 页面加载
|
|
||||||
onLoad(() => {
|
|
||||||
// 设置默认时间范围
|
|
||||||
lssjTimeRang.value = getDefaultTimeRange()
|
|
||||||
|
|
||||||
// 在Uniapp中需要动态导入echarts或使用其他图表库
|
|
||||||
setTimeout(() => {
|
|
||||||
initECharts()
|
|
||||||
}, 500)
|
|
||||||
})
|
|
||||||
|
|
||||||
// 页面卸载
|
|
||||||
onUnmounted(() => {
|
|
||||||
if (myCharts.value) {
|
|
||||||
myCharts.value.dispose()
|
|
||||||
}
|
|
||||||
})
|
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<style scoped>
|
<style scoped>
|
||||||
.chart-container {
|
|
||||||
width: 100%;
|
|
||||||
height: 100%;
|
|
||||||
padding: 20rpx;
|
|
||||||
box-sizing: border-box;
|
|
||||||
display: flex;
|
|
||||||
flex-direction: column;
|
|
||||||
}
|
|
||||||
|
|
||||||
.chart-header {
|
|
||||||
margin-bottom: 20rpx;
|
|
||||||
}
|
|
||||||
|
|
||||||
.chart-title-container {
|
|
||||||
width: 100%;
|
|
||||||
text-align: center;
|
|
||||||
margin-bottom: 20rpx;
|
|
||||||
}
|
|
||||||
|
|
||||||
.chart-title {
|
|
||||||
font-size: 36rpx;
|
|
||||||
font-weight: bold;
|
|
||||||
color: #333;
|
|
||||||
}
|
|
||||||
|
|
||||||
.filter-section {
|
|
||||||
display: flex;
|
|
||||||
flex-direction: column;
|
|
||||||
gap: 20rpx;
|
|
||||||
margin-bottom: 20rpx;
|
|
||||||
}
|
|
||||||
|
|
||||||
.date-picker {
|
|
||||||
width: 100%;
|
|
||||||
}
|
|
||||||
|
|
||||||
.checkbox-container {
|
|
||||||
display: flex;
|
|
||||||
align-items: center;
|
|
||||||
}
|
|
||||||
|
|
||||||
.checkbox {
|
|
||||||
display: flex;
|
|
||||||
align-items: center;
|
|
||||||
font-size: 28rpx;
|
|
||||||
}
|
|
||||||
|
|
||||||
.chart {
|
|
||||||
width: 100%;
|
|
||||||
height: 600rpx;
|
|
||||||
background-color: #fff;
|
|
||||||
border-radius: 10rpx;
|
|
||||||
box-shadow: 0 2rpx 10rpx rgba(0, 0, 0, 0.1);
|
|
||||||
margin-bottom: 20rpx;
|
|
||||||
}
|
|
||||||
|
|
||||||
.table-container {
|
|
||||||
width: 100%;
|
|
||||||
overflow-x: auto;
|
|
||||||
}
|
|
||||||
|
|
||||||
.pagination {
|
|
||||||
margin-top: 20rpx;
|
|
||||||
display: flex;
|
|
||||||
justify-content: center;
|
|
||||||
}
|
|
||||||
</style>
|
</style>
|
@ -42,8 +42,8 @@
|
|||||||
</scroll-view>
|
</scroll-view>
|
||||||
</view>
|
</view>
|
||||||
<view v-if="drawLineFlag">
|
<view v-if="drawLineFlag">
|
||||||
<cxc-szcx-multiLineChart :data-list="chartData" x-field="createTime" :y-fields="lineFields"
|
<cxc-szcx-multiLineChart :data-list="chartData" x-field="createTime"
|
||||||
title="文增伴生气外输数据趋势" height="300"></cxc-szcx-multiLineChart>
|
:y-fields="lineFields"></cxc-szcx-multiLineChart>
|
||||||
</view>
|
</view>
|
||||||
|
|
||||||
</PageLayout>
|
</PageLayout>
|
||||||
|
@ -86,13 +86,13 @@
|
|||||||
<cxc-szcx-stationJl-select v-model="stationID" returnCodeOrID="id" @change="onChange">
|
<cxc-szcx-stationJl-select v-model="stationID" returnCodeOrID="id" @change="onChange">
|
||||||
</cxc-szcx-stationJl-select>
|
</cxc-szcx-stationJl-select>
|
||||||
</wd-popup>
|
</wd-popup>
|
||||||
<wd-popup v-model="lssjFlag" position="bottom" custom-style="width:100%;height: 300px;" @close="handleClose">
|
|
||||||
<lssj-chart></lssj-chart>
|
|
||||||
</wd-popup>
|
|
||||||
<wd-popup v-model="sssjFlag" position="bottom" custom-style="width:100%;height: 70vh;" @close="handleClose">
|
<wd-popup v-model="sssjFlag" position="bottom" custom-style="width:100%;height: 70vh;" @close="handleClose">
|
||||||
<sssj-chart :jldData="jldData"></sssj-chart>
|
<sssj-chart :jldData="jldData"></sssj-chart>
|
||||||
</wd-popup>
|
</wd-popup>
|
||||||
|
<wd-popup v-model="lssjFlag" position="bottom" custom-style="width:100%;height: 70vh;" @close="handleClose">
|
||||||
|
<lssj-chart :jldData="jldData"></lssj-chart>
|
||||||
|
</wd-popup>
|
||||||
</PageLayout>
|
</PageLayout>
|
||||||
</template>
|
</template>
|
||||||
<script setup>
|
<script setup>
|
||||||
@ -144,7 +144,8 @@
|
|||||||
}
|
}
|
||||||
|
|
||||||
function openlssjChart(e) {
|
function openlssjChart(e) {
|
||||||
sssjFlag.value = true;
|
lssjFlag.value = true;
|
||||||
|
jldData.value = e
|
||||||
console.log(selectZc.value)
|
console.log(selectZc.value)
|
||||||
}
|
}
|
||||||
|
|
||||||
@ -203,7 +204,7 @@
|
|||||||
};
|
};
|
||||||
onMounted(() => {
|
onMounted(() => {
|
||||||
websocketheart()
|
websocketheart()
|
||||||
stationID.value = "1267633458481725442"
|
// stationID.value = "1267633458481725442"
|
||||||
})
|
})
|
||||||
|
|
||||||
onUnmounted(() => {
|
onUnmounted(() => {
|
||||||
|
@ -1,5 +1,5 @@
|
|||||||
<template>
|
<template>
|
||||||
<view >
|
<view>
|
||||||
<l-echart ref="chart" @finished="drawChart" />
|
<l-echart ref="chart" @finished="drawChart" />
|
||||||
</view>
|
</view>
|
||||||
</template>
|
</template>
|
||||||
@ -151,7 +151,7 @@
|
|||||||
alwaysShowContent: true,
|
alwaysShowContent: true,
|
||||||
axisPointer: {
|
axisPointer: {
|
||||||
type: 'line',
|
type: 'line',
|
||||||
show:false
|
show: false
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
toolbox: {
|
toolbox: {
|
||||||
@ -177,10 +177,10 @@
|
|||||||
itemGap: 5,
|
itemGap: 5,
|
||||||
padding: [35, 5, 25, 5],
|
padding: [35, 5, 25, 5],
|
||||||
type: 'scroll',
|
type: 'scroll',
|
||||||
show:true
|
show: true
|
||||||
},
|
},
|
||||||
grid: {
|
grid: {
|
||||||
width:'auto',
|
width: 'auto',
|
||||||
top: '20%',
|
top: '20%',
|
||||||
left: '5px',
|
left: '5px',
|
||||||
right: '5px', // 动态调整右侧间距(避免Y轴标签被截断)
|
right: '5px', // 动态调整右侧间距(避免Y轴标签被截断)
|
||||||
@ -192,7 +192,7 @@
|
|||||||
axisTick: {
|
axisTick: {
|
||||||
alignWithLabel: true
|
alignWithLabel: true
|
||||||
},
|
},
|
||||||
show:true,
|
show: true,
|
||||||
data: xData
|
data: xData
|
||||||
},
|
},
|
||||||
yAxis: yData,
|
yAxis: yData,
|
||||||
@ -231,9 +231,9 @@
|
|||||||
// 动态调整Y轴最大值(修复this.serie和this.maxArrValue错误)
|
// 动态调整Y轴最大值(修复this.serie和this.maxArrValue错误)
|
||||||
serie.forEach((serieItem, mm) => {
|
serie.forEach((serieItem, mm) => {
|
||||||
const maxValue = maxArrValue(serieItem.data);
|
const maxValue = maxArrValue(serieItem.data);
|
||||||
console.log(1,maxValue)
|
console.log(1, maxValue)
|
||||||
yData[mm].max = Math.round(maxValue * 12)/10 || 100; // 兜底:最大值为0时设为100
|
yData[mm].max = Math.round(maxValue * 12) / 10 || 100; // 兜底:最大值为0时设为100
|
||||||
console.log(2,yData[mm].max)
|
console.log(2, yData[mm].max)
|
||||||
});
|
});
|
||||||
|
|
||||||
// 修复:更新响应式数据(必须通过.value)
|
// 修复:更新响应式数据(必须通过.value)
|
||||||
|
Loading…
Reference in New Issue
Block a user