|
|
@@ -1,14 +1,21 @@
|
|
|
<script setup>
|
|
|
-import { ref, onMounted, onUnmounted } from 'vue';
|
|
|
+import { ref, onMounted, onUnmounted, computed } from 'vue';
|
|
|
import { NScrollbar, useMessage, NDatePicker, NTabs, NTab, NDataTable, NPagination, NNumberAnimation } from 'naive-ui';
|
|
|
import * as echarts from 'echarts';
|
|
|
-
|
|
|
+import { controlApi } from "@/api/control";
|
|
|
import { columns, getEchartLineOptions } from './config';
|
|
|
import { TheChatView } from '@/components';
|
|
|
+import dayjs from 'dayjs';
|
|
|
|
|
|
let echart = null;
|
|
|
-const timeRangeValue = ref(null);
|
|
|
+const timeRangeValue = ref([]);
|
|
|
const echartRef = ref(null);
|
|
|
+const boardData = ref({});
|
|
|
+const tableData = ref([])
|
|
|
+const pageNum = ref(1);
|
|
|
+const pageSize = ref(10);
|
|
|
+const pageCount = ref(0);
|
|
|
+
|
|
|
const formData = ref({
|
|
|
startTime: '',
|
|
|
endTime: '',
|
|
|
@@ -18,7 +25,6 @@ const formData = ref({
|
|
|
size: 10
|
|
|
})
|
|
|
|
|
|
-const total = 111;
|
|
|
|
|
|
const dateThemeOverrides = {
|
|
|
peers: {
|
|
|
@@ -28,30 +34,98 @@ const dateThemeOverrides = {
|
|
|
}
|
|
|
}
|
|
|
|
|
|
-const data = [
|
|
|
- { no: 3, title: "Wonderwall", length: "4:18" },
|
|
|
- { no: 4, title: "Don't Look Back in Anger", length: "4:48" },
|
|
|
- { no: 12, title: "Champagne Supernova", length: "7:27" }
|
|
|
-]
|
|
|
+const dateRange = computed(() => {
|
|
|
+ let timeBegin = '';
|
|
|
+ let timeEnd = '';
|
|
|
+ if ( timeRangeValue.value.length ) {
|
|
|
+ const [begin, end] = timeRangeValue.value;
|
|
|
+ timeBegin = dayjs(begin).format('YYYY-MM-DD');
|
|
|
+ timeEnd = dayjs(end).format('YYYY-MM-DD');
|
|
|
+ }
|
|
|
+ return {
|
|
|
+ timeBegin,
|
|
|
+ timeEnd
|
|
|
+ }
|
|
|
+})
|
|
|
|
|
|
-const onDatePickerConfirm = (val) => {
|
|
|
-
|
|
|
+const onDatePickerConfirm = (t) => {
|
|
|
+ timeRangeValue.value = t;
|
|
|
+ initEchartData();
|
|
|
+ initTableData();
|
|
|
}
|
|
|
|
|
|
const onDatePickerClear = () => {
|
|
|
- console.log("clean日期了");
|
|
|
+ timeRangeValue.value = [];
|
|
|
+ initEchartData();
|
|
|
+ initTableData();
|
|
|
+}
|
|
|
+
|
|
|
+const initTableData = async () => {
|
|
|
+ const { rows, total } = await controlApi.getTableList({ pageNum: pageNum.value, pageSize: pageSize.value, ...dateRange.value });
|
|
|
+ tableData.value = rows;
|
|
|
+ pageCount.value = total;
|
|
|
+}
|
|
|
+
|
|
|
+const initEchartData = async () => {
|
|
|
+ const { data } = await controlApi.getEchartList({...dateRange.value});
|
|
|
+
|
|
|
+ const xAxisData = [];
|
|
|
+ const seriesData1 = [];
|
|
|
+ const seriesData2 = [];
|
|
|
+ const seriesData3 = [];
|
|
|
+ const seriesData4 = [];
|
|
|
+ const seriesData5 = [];
|
|
|
+ const seriesData6 = [];
|
|
|
+ const seriesData7 = [];
|
|
|
+ const seriesData8 = [];
|
|
|
+
|
|
|
+ data.reverse().map(item => {
|
|
|
+ if ( item.time ) {
|
|
|
+ xAxisData.push(dayjs(item.time.trim()).format('YYYY/MM/DD'));
|
|
|
+ seriesData1.push(item.scJsZongdan?.toFixed(2));
|
|
|
+ seriesData2.push(item.scJsCod?.toFixed(2));
|
|
|
+ seriesData3.push(item.jqr1HyXiaodan?.toFixed(2));
|
|
|
+ seriesData4.push(item.jqr2HyXiaodan?.toFixed(2));
|
|
|
+ seriesData5.push(item.jqr1QyAndan?.toFixed(2));
|
|
|
+ seriesData6.push(item.jqr2QyAndan?.toFixed(2));
|
|
|
+ seriesData7.push(item.jqr1QyXiaodan?.toFixed(2));
|
|
|
+ seriesData8.push(item.jqr2QyXiaodan?.toFixed(2));
|
|
|
+ }
|
|
|
+ })
|
|
|
+
|
|
|
+ const seriesData = [
|
|
|
+ { name: "进水总氮", data: seriesData1 },
|
|
|
+ { name: "进水COD", data: seriesData2 },
|
|
|
+ { name: "1#好氧硝酸盐", data: seriesData3 },
|
|
|
+ { name: "2#好氧硝酸盐", data: seriesData4 },
|
|
|
+ { name: "1#缺氧氨氮", data: seriesData5 },
|
|
|
+ { name: "2#缺氧氨氮", data: seriesData6 },
|
|
|
+ { name: "1#缺氧硝酸盐", data: seriesData7 },
|
|
|
+ { name: "2#缺氧硝酸盐", data: seriesData8 },
|
|
|
+ ]
|
|
|
+
|
|
|
+ const option = getEchartLineOptions({ xAxisData, seriesData: seriesData });
|
|
|
+ // data.length ? seriesData : []
|
|
|
+ echart.setOption(option);
|
|
|
}
|
|
|
|
|
|
-const onToggleTab = (name) => {
|
|
|
- console.log("name", name);
|
|
|
+const handlePageChange = (page) => {
|
|
|
+ pageNum.value = page;
|
|
|
+ initTableData();
|
|
|
}
|
|
|
|
|
|
const windowResize = () => echart.resize();
|
|
|
|
|
|
-onMounted(() => {
|
|
|
+onMounted(async () => {
|
|
|
+
|
|
|
+ controlApi.getCountInfo().then(res => {
|
|
|
+ boardData.value = res;
|
|
|
+ });
|
|
|
+
|
|
|
echart = echarts.init(echartRef.value, 'light');
|
|
|
- const option = getEchartLineOptions();
|
|
|
- echart.setOption(option);
|
|
|
+
|
|
|
+ initEchartData();
|
|
|
+ initTableData();
|
|
|
|
|
|
window.addEventListener("resize", windowResize);
|
|
|
})
|
|
|
@@ -73,14 +147,14 @@ onUnmounted(() => {
|
|
|
<li class="board-item">
|
|
|
<p class="title">当前设备状态</p>
|
|
|
<p class="content">
|
|
|
- <span class="blue-text">化验中</span>
|
|
|
+ <span class="blue-text">{{ boardData.status }}化验中</span>
|
|
|
</p>
|
|
|
</li>
|
|
|
<li class="board-item">
|
|
|
<p>当前设备状态</p>
|
|
|
<p class="content space-x-[6px]">
|
|
|
<span class="num-text">
|
|
|
- <NNumberAnimation :from="0" :to="12039" :duration="1500"></NNumberAnimation>
|
|
|
+ <NNumberAnimation :from="0" :to="boardData.days" :duration="1500"></NNumberAnimation>
|
|
|
</span>
|
|
|
<span class="unit">天</span>
|
|
|
</p>
|
|
|
@@ -88,63 +162,57 @@ onUnmounted(() => {
|
|
|
<li class="board-item">
|
|
|
<p>累计化验轮次</p>
|
|
|
<p class="content space-x-[6px]">
|
|
|
- <span class="num-text">100</span>
|
|
|
+ <span class="num-text">
|
|
|
+ <NNumberAnimation :from="0" :to="boardData.counts" :duration="1500"></NNumberAnimation>
|
|
|
+ </span>
|
|
|
<span class="unit">次</span>
|
|
|
</p>
|
|
|
</li>
|
|
|
<li class="board-item">
|
|
|
<p>累计化验次数</p>
|
|
|
<p class="content space-x-[6px]">
|
|
|
- <span class="num-text">100</span>
|
|
|
+ <span class="num-text">
|
|
|
+ <NNumberAnimation :from="0" :to="boardData.totals" :duration="1500"></NNumberAnimation>
|
|
|
+ </span>
|
|
|
<span class="unit">次</span>
|
|
|
</p>
|
|
|
</li>
|
|
|
</ul>
|
|
|
</div>
|
|
|
<div class="data-card">
|
|
|
- <h4 class="title px-[16px]">数据详情</h4>
|
|
|
+ <div class="header-inner">
|
|
|
+ <h4 class="title">数据详情</h4>
|
|
|
+ <div class="date-inner space-x-[16px]">
|
|
|
+ <span class="text-[12px]">选择时间</span>
|
|
|
+ <n-date-picker
|
|
|
+ type="daterange"
|
|
|
+ clearable size="small"
|
|
|
+ style="width: 380px"
|
|
|
+ value-format="yyyy-MM-dd"
|
|
|
+ start-placeholder="开始时间"
|
|
|
+ end-placeholder="结束时间"
|
|
|
+ input-readonly
|
|
|
+ :themeOverrides="dateThemeOverrides"
|
|
|
+ :on-confirm="onDatePickerConfirm"
|
|
|
+ :on-clear="onDatePickerClear"
|
|
|
+ />
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
<div class="main">
|
|
|
<NScrollbar style="height: 100%;">
|
|
|
<div class="px-[16px]">
|
|
|
<div class="echart-box">
|
|
|
- <div class="header-inner">
|
|
|
- <p class="font-bold">检测数据趋势图「小时」</p>
|
|
|
- <div class="date-inner space-x-[16px]">
|
|
|
- <span class="text-[12px]">选择时间</span>
|
|
|
- <n-date-picker
|
|
|
- type="datetimerange"
|
|
|
- clearable size="small"
|
|
|
- style="width: 380px"
|
|
|
- v-model:formatted-value="timeRangeValue"
|
|
|
- value-format="yyyy-MM-dd HH:mm:ss"
|
|
|
- start-placeholder="开始时间"
|
|
|
- end-placeholder="结束时间"
|
|
|
- input-readonly
|
|
|
- :themeOverrides="dateThemeOverrides"
|
|
|
- :on-confirm="onDatePickerConfirm"
|
|
|
- :on-clear="onDatePickerClear"
|
|
|
- />
|
|
|
- </div>
|
|
|
- </div>
|
|
|
+ <p class="font-bold">检测数据趋势图「小时」</p>
|
|
|
<div id="echart" class="h-full w-full" ref="echartRef"></div>
|
|
|
</div>
|
|
|
|
|
|
<div class="table-box w-full">
|
|
|
- <div class="header-inner">
|
|
|
- <p class="font-bold">表格数据「小时」</p>
|
|
|
- <div class="space-x1-[16px] w-[200px]">
|
|
|
- <n-tabs type="segment" size="small" class="tabs" :on-update:value="onToggleTab">
|
|
|
- <n-tab name="1" tab="1#二沉池"></n-tab>
|
|
|
- <n-tab name="2" tab="2#二沉池"></n-tab>
|
|
|
- </n-tabs>
|
|
|
- </div>
|
|
|
- </div>
|
|
|
+ <p class="font-bold">表格数据「小时」</p>
|
|
|
<div class="w-full pt-[12px]">
|
|
|
- <n-data-table size="small" :columns="columns" :data="data" :bordered="false" layout="table" />
|
|
|
- <!-- :scroll-x="1800" -->
|
|
|
+ <n-data-table size="small" :columns="columns" :data="tableData" :bordered="false" layout="table" />
|
|
|
</div>
|
|
|
<div class="flex justify-center mt-[14px] mb-[10px]">
|
|
|
- <NPagination v-model:page="formData.pageNum" :item-count="total"></NPagination>
|
|
|
+ <NPagination v-model:page="formData.pageNum" :item-count="pageCount" :on-update:page="handlePageChange"></NPagination>
|
|
|
</div>
|
|
|
</div>
|
|
|
</div>
|
|
|
@@ -236,29 +304,28 @@ onUnmounted(() => {
|
|
|
.data-card {
|
|
|
width: calc(100vw - 292px);
|
|
|
height: calc(100% - 168px);
|
|
|
- padding: 22px 0px 16px 0px;
|
|
|
margin-top: 12px;
|
|
|
border-radius: 10px;
|
|
|
background: #FFF;
|
|
|
|
|
|
.title {
|
|
|
- padding-bottom: 12px;
|
|
|
font-size: 15px;
|
|
|
font-weight: bold;
|
|
|
}
|
|
|
|
|
|
.main {
|
|
|
- height: calc(100% - 34px);
|
|
|
+ height: calc(100% - 60px);
|
|
|
}
|
|
|
|
|
|
.echart-box {
|
|
|
#echart {
|
|
|
height: 300px;
|
|
|
- // background: orange
|
|
|
}
|
|
|
}
|
|
|
|
|
|
.header-inner {
|
|
|
+ height: 60px;
|
|
|
+ padding: 16px;
|
|
|
@include flex(x, center, between);
|
|
|
color: #333;
|
|
|
|
