148 lines
3.0 KiB
Vue
148 lines
3.0 KiB
Vue
<template>
|
|
<view class="px-20rpx">
|
|
<view class="bg-white">
|
|
<view class="h-80rpx px-20rpx flex items-center text-bold text-32rpx"
|
|
>水质监测数据</view
|
|
>
|
|
<view>
|
|
<u-line></u-line>
|
|
</view>
|
|
<view class="py-20rpx">
|
|
<u-tabs
|
|
:list="desList"
|
|
bar-height="4"
|
|
height="50"
|
|
font-size="28"
|
|
gutter="18"
|
|
:current="current"
|
|
@change="changeTab"
|
|
></u-tabs>
|
|
</view>
|
|
<view class="pb-20rpx">
|
|
<qiun-data-charts
|
|
:loadingType="loadingType"
|
|
type="area"
|
|
:opts="opts"
|
|
:chartData="chartData"
|
|
/>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</template>
|
|
<script>
|
|
import QiunDataCharts from '@/components/qiun-data-charts/qiun-data-charts.vue'
|
|
import { http } from '@/api/index.js'
|
|
|
|
const desList = [
|
|
{
|
|
key: 'turbidity',
|
|
unit: 'NTU',
|
|
name: '浊度',
|
|
},
|
|
{
|
|
key: 'chlorine',
|
|
unit: 'mg/L',
|
|
name: '余氯',
|
|
},
|
|
{
|
|
key: 'ph',
|
|
unit: 'PH',
|
|
name: 'PH值',
|
|
},
|
|
{
|
|
key: 'temperature',
|
|
unit: '℃',
|
|
name: '温度',
|
|
},
|
|
{
|
|
key: 'oxygen',
|
|
unit: 'mg/L',
|
|
name: '溶解氧',
|
|
},
|
|
{
|
|
key: 'conductivity',
|
|
unit: 'uS/cm',
|
|
name: '电导率',
|
|
},
|
|
]
|
|
export default {
|
|
props: {
|
|
baseId: {
|
|
type: [String, Number],
|
|
},
|
|
},
|
|
components: { QiunDataCharts },
|
|
data() {
|
|
return {
|
|
desList,
|
|
current: 0,
|
|
loadingType: 1,
|
|
opts: {
|
|
dataLabel: false, //显示数据
|
|
padding: [20, 10, 0, 10],
|
|
extra: {
|
|
column: {
|
|
type: 'group',
|
|
width: 15,
|
|
},
|
|
area: {
|
|
type: 'curve',
|
|
opacity: 0.9,
|
|
addLine: true,
|
|
gradient: true,
|
|
},
|
|
},
|
|
},
|
|
chartData: {
|
|
categories: [],
|
|
series: [],
|
|
},
|
|
}
|
|
},
|
|
computed: {
|
|
currentTab() {
|
|
return this.desList[this.current]
|
|
},
|
|
},
|
|
mounted() {
|
|
this.init()
|
|
},
|
|
methods: {
|
|
changeTab(e) {
|
|
this.current = e
|
|
this.init()
|
|
},
|
|
async init() {
|
|
try {
|
|
const { data } = await http.get('/api/device-base-data-statics', {
|
|
params: {
|
|
base_id: this.baseId,
|
|
device_type: 3,
|
|
device_column: this.currentTab.key,
|
|
},
|
|
})
|
|
const resData = data.data
|
|
const arr = []
|
|
const options = {
|
|
categories: [],
|
|
series: [],
|
|
}
|
|
for (const key in resData) {
|
|
if (Object.prototype.hasOwnProperty.call(resData, key)) {
|
|
options.categories = Object.keys(resData[key]).map((e) =>
|
|
this.$u.date(e, 'hh:MM')
|
|
)
|
|
options.series.push({
|
|
name: key,
|
|
type: 'line',
|
|
data: Object.values(resData[key]).map((e) => e ?? 0),
|
|
})
|
|
}
|
|
}
|
|
this.chartData = options
|
|
} catch (error) {}
|
|
},
|
|
},
|
|
}
|
|
</script>
|