feat: 碳源投加 - 联调部分

.env.development

@@ -1,4 +1,4 @@
 # 请求地址
-VITE_BASE_URL=http://localhost:8888
+VITE_BASE_URL=http://10.0.0.28:8888
 # 请求前缀
 VITE_BASE_PREFIX=''

src/api/control.js

@@ -35,4 +35,20 @@ export const controlApi = {
    * 碳源投加 系统是否可以投放 - 更新
    */
   putSystemStatus: data => http.put(`/front/bigModel/smartAdd/updateSwitchStatus`, data),
+
+  /**
+   * 数据分析 数据概况
+   */
+  getCountInfo: () => http.get(`/front/bigModel/smartAdd/homeCountInfo`),
+
+  /**
+   * 数据分析 echart
+   */
+  getEchartList: ({timeBegin = '', timeEnd = ''}) => http.get(`/front/bigModel/smartAdd/homeList?timeBegin=${timeBegin}&timeEnd=${timeEnd}`),
+
+  /**
+   * 数据分析 table
+   */
+  getTableList: ({ pageNum, pageSize, timeBegin = '', timeEnd = '' }) => http.get(`/front/bigModel/smartAdd/homePageList?pageNum=${pageNum}&pageSize=${pageSize}&timeBegin=${timeBegin}&timeEnd=${timeEnd}`),
+  
 }

src/utils/request.ts

@@ -10,7 +10,7 @@ import type { NotificationApi } from "naive-ui";
 
 const { notification } = createDiscreteApi(["notification"]);
 
-const useStore = useUserStore();
+// const useStore = useUserStore();
 
 export const url = import.meta.env.VITE_BASE_URL;
 export const prefix = import.meta.env.VITE_BASE_PREFIX;
@@ -49,15 +49,15 @@ export class Request {
     this.instance = axios.create({ ...this.baseConfig, ...config });
 
     this.instance.interceptors.request.use((config: InternalAxiosRequestConfig<Result>) => {
-      const { token } = useStore.userInfo;
+      // const { token } = useStore.userInfo;
       
       /**
        * 环境区分 - 仅限于测试环境使用
        * */
 
-      config.headers.port = localStorage.getItem("ENV");
+      // config.headers.port = localStorage.getItem("ENV");
 
-      token && (config.headers.Authorization = 'Bearer ' + token);
+      // token && (config.headers.Authorization = 'Bearer ' + token);
 
       return config;
     }, (err: any) => {
@@ -131,5 +131,5 @@ export const streamHttp  = new Request({
 
 export default new Request({
   baseURL,
-  timeout: 20 * 1000
+  timeout: 3 * 60 * 1000
 });

src/views/control/components/BaseChooseItem.vue

@@ -42,15 +42,7 @@ const props = defineProps({
 
 watchEffect(() => {
   if ( modelType.value === 0 ) {
-    if ( props.tabKey == 'auto' ) {
-      inpVal.value = modelValue1.value;
-    }
-    if ( props.tabKey == 'onePool' ) {
-      inpVal.value = modelValue1.value;
-    }
-    if ( props.tabKey == 'twoPool' ) {
-      inpVal.value = modelValue1.value;
-    }
+    inpVal.value = modelValue1.value;
   }
 })
 

src/views/control/components/TheEchartPanel.vue

@@ -6,11 +6,9 @@ import { startOfDay } from "date-fns/esm"
 import { controlApi } from "@/api/control"
 import dayjs from 'dayjs';
 
-const modelValue = defineModel("height");
-
 let echart = null;
 let tempTabItemOneKey = 0;
-let tempTabItemTwoKey = 'jzxs';
+let tempTabItemTwoKey = 'jzxsOne';
 const datePickerValue = ref(null);
 const dateRangeRef = ref(null);
 const tabs = ref([]);
@@ -38,13 +36,13 @@ const echartOptions = [
 ]
 
 const coefficientOptions = [
-  { label: "基准系数", value: 'jzxs', style: "font-size: 12px" },
-  { label: "修正系数", value: 'xzxs', style: "font-size: 12px" },
-  { label: "水量分配系数", value: 'slfpxs', style: "font-size: 12px" },
-  { label: "碳源当量", value: 'tydl', style: "font-size: 12px" },
-  { label: "转换系数", value: 'zhxs', style: "font-size: 12px" },
-  { label: "稀释倍数", value: 'sxps', style: "font-size: 12px" },
-  { label: "密度", value: 'yymd', style: "font-size: 12px" },
+  { label: "基准系数", value: 'jzxsOne', style: "font-size: 12px" },
+  { label: "修正系数", value: 'xzxsOne', style: "font-size: 12px" },
+  { label: "水量分配系数", value: 'slfpxsOne', style: "font-size: 12px" },
+  { label: "碳源当量", value: 'tydlOne', style: "font-size: 12px" },
+  { label: "转换系数", value: 'zhxsOne', style: "font-size: 12px" },
+  { label: "稀释倍数", value: 'sxpsOne', style: "font-size: 12px" },
+  { label: "密度", value: 'yymdOne', style: "font-size: 12px" },
 ]
 
 const seriesName = computed(() => {
@@ -103,8 +101,8 @@ const getEchartOptions = (data, type) => {
     grid: {
       top: '40px',
       bottom: '50px',
-      left: '6%',
-      right: '6%',
+      left: '5%',
+      right: '5%',
     },
     tooltip: {
       trigger: 'axis',
@@ -126,7 +124,7 @@ const getEchartOptions = (data, type) => {
       },
       axisLabel: {
         formatter: function (value) {
-          return type ? dayjs(value).format('YYYY/MM/DD') : value
+          return dayjs(value).format('YYYY/MM/DD')
         }
       },
       data: data.map(({ time }) => time)
@@ -319,9 +317,6 @@ onUnmounted(() => {
           :on-clear="onDatePickerClear"
           v-model:formatted-value="datePickerValue"
         ></NDatePicker>
-        <!-- v-model:formatted-value="datePickerValue" -->
-        <!--  -->
-        <!-- v-model:value="selectValue" -->
         <NSelect
           class="w-[150px]"
           :options="selectOptions"
@@ -341,7 +336,7 @@ onUnmounted(() => {
 .echart-card_view {
   display: flex;
   flex-flow: column;
-  height: calc(100% - 256px);
+  height: calc(100% - 284px);
   padding: 0px 16px 0 25px;
   border-radius: 10px;
 

src/views/control/components/TheResultPanel.vue

@@ -1,5 +1,4 @@
 <script setup>
-import { computed } from 'vue';
 import { useMessage, NNumberAnimation } from 'naive-ui';
 import BaseTitle from './BaseTitle.vue';
 import { SvgIcon } from '@/components';
@@ -10,30 +9,14 @@ const modelSystemStatus = defineModel('system');
 const emit = defineEmits(['on-click', 'on-update']);
 
 const props = defineProps({
-  // flowNum: {
-  //   type: Number,
-  //   default: 0
-  // },
-  // updateNum: {
-  //   type: Number,
-  //   default: 0
-  // },
-  // doseNum: {
-  //   type: Number,
-  //   default: 0
-  // },
-  // configurationStatus: {
-  //   type: Number,
-  //   default: 1
-  // },
   nums: {
     type: Object,
     default: () => ({})
   }
 });
 
-const emitEvent = () => {
-  emit('on-click');
+const emitEvent = (type) => {
+  emit('on-click', type);
 };
 const emitUpdate = async () => {
   emit('on-update');
@@ -48,7 +31,7 @@ const emitUpdate = async () => {
         <ul class="update-message space-x-[16px]" v-show="isVisibleBtn">
           <li class="flex space-x-[4px]">
             <SvgIcon name="control-icon-warning" size="16"></SvgIcon>
-            <span>有新投放方案，1#系统加药量计算为：{{ nums.updateNum1 }}m³/h， 2#系统加药量计算为：{{ nums.updateNum2 }}m³/h，是否更新？</span>
+            <span>有新投放方案，南池加药量计算为：{{ nums.updateNum1 || 0 }}m³/h， 北池加药量计算为：{{ nums.updateNum2 || 0}}m³/h，是否更新？</span>
           </li>
           <li class="space-x-[10px]">
             <span class="text-[#ed742f] cursor-pointer" @click="emitUpdate">更新投放量</span>
@@ -59,70 +42,67 @@ const emitUpdate = async () => {
       <div class="result-card">
         <div class="result-inner space-x-[8px]">
           <div class="result-card_item">
-            <div class="h-full flex flex-col justify-between">
-              <h4>
-                <span>1#瞬时流量</span>
-                <span class="block w-[12px] h-[3px] mt-[4px] bg-[#1D2129]"></span>
-              </h4>
-              <p class="num-group space-x-[4px]">
+            <ul class="board-inner">
+              <li class="board-item">
+                <span class="label">南池</span>
+                <h4>碳源投加瞬时流量(m³/h)</h4>
                 <span class="num">
-                  <NNumberAnimation :from="0" :to="nums.flowNum1" :duration="1000" :precision="nums.flowNum1 < 1 ? 3 : 3"></NNumberAnimation>
+                  <NNumberAnimation :from="0" :to="nums.flowNum1" :duration="1000"
+                    :precision="3"></NNumberAnimation>
                 </span>
-                <span class="text-[12px] text-[#86909C]">m³/h</span>
-              </p>
-            </div>
-          </div>
-          <div class="result-card_item">
-            <div class="h-full flex flex-col justify-between">
-              <h4>
-                <span>2#瞬时流量</span>
-                <span class="block w-[12px] h-[3px] mt-[4px] bg-[#1D2129]"></span>
-              </h4>
-              <p class="num-group space-x-[4px]">
+              </li>
+              <li class="line"></li>
+              <li class="board-item">
+                <h4>系统加药量(m³/h)</h4>
                 <span class="num">
-                  <NNumberAnimation :from="0" :to="nums.flowNum2" :duration="1000" :precision="nums.flowNum2 < 1 ? 3 : 3"></NNumberAnimation>
+                  <NNumberAnimation :from="0" :to="nums.doseNum1" :duration="1000"
+                    :precision="3"></NNumberAnimation>
                 </span>
-                <span class="text-[12px] text-[#86909C]">m³/h</span>
-              </p>
+              </li>
+            </ul>
+
+            <div class="btn-card">
+              <div :class="['round-btn']" @click="emitEvent('one')">
+                <div class="circle1" v-show="modelSystemStatus.activeOne === 1"></div>
+                <div class="circle2" v-show="modelSystemStatus.activeOne === 1"></div>
+                <div class="circle3" v-show="modelSystemStatus.activeOne === 1"></div>
+                <div class="inner space-y-[4px]">
+                  <SvgIcon name="control-icon-result-btn" size="14" />
+                  <span>{{ modelSystemStatus.activeOne === 1 ? "投放中" : "未开启" }}</span>
+                </div>
+              </div>
             </div>
           </div>
           <div class="result-card_item">
-            <div class="h-full flex flex-col justify-between">
-              <h4>
-                <span>1#系统加药量</span>
-                <span class="block w-[12px] h-[3px] mt-[4px] bg-[#1D2129]"></span>
-              </h4>
-              <p class="num-group space-x-[4px]">
+            <ul class="board-inner">
+              <li class="board-item">
+                <span class="label">北池</span>
+                <h4>碳源投加瞬时流量(m³/h)</h4>
                 <span class="num">
-                  <NNumberAnimation :from="0" :to="nums.doseNum1" :duration="1000" :precision="3"></NNumberAnimation>
+                  <NNumberAnimation :from="0" :to="nums.flowNum2" :duration="1000"
+                    :precision="3"></NNumberAnimation>
                 </span>
-                <span class="text-[12px] text-[#86909C]">m³/h</span>
-              </p>
-            </div>
-          </div>
-          <div class="result-card_item">
-            <div class="h-full flex flex-col justify-between">
-              <h4>
-                <span>2#系统加药量</span>
-                <span class="block w-[12px] h-[3px] mt-[4px] bg-[#1D2129]"></span>
-              </h4>
-              <p class="num-group space-x-[4px]">
+              </li>
+              <li class="line"></li>
+              <li class="board-item">
+                <h4>系统加药量(m³/h)</h4>
                 <span class="num">
-                  <NNumberAnimation :from="0" :to="nums.doseNum2" :duration="1000" :precision="3"></NNumberAnimation>
+                  <NNumberAnimation :from="0" :to="nums.doseNum2" :duration="1000"
+                    :precision="3"></NNumberAnimation>
                 </span>
-                <span class="text-[12px] text-[#86909C]">m³/h</span>
-              </p>
-            </div>
-          </div>
-        </div>
-        <div class="btn-card">
-          <div :class="['round-btn', { disable: modelSystemStatus === 0 }]" @click="emitEvent">
-            <div class="circle1" v-show="modelSystemStatus === 1"></div>
-            <div class="circle2" v-show="modelSystemStatus === 1"></div>
-            <div class="circle3" v-show="modelSystemStatus === 1"></div>
-            <div class="inner space-y-[4px]">
-              <SvgIcon name="control-icon-result-btn" size="24" />
-              <span>{{ modelSystemStatus === 1 ? "投放中" : "未启用" }}</span>
+              </li>
+            </ul>
+            
+            <div class="btn-card">
+              <div :class="['round-btn']" @click="emitEvent('two')">
+                <div class="circle1" v-show="modelSystemStatus.activeTwo === 1"></div>
+                <div class="circle2" v-show="modelSystemStatus.activeTwo === 1"></div>
+                <div class="circle3" v-show="modelSystemStatus.activeTwo === 1"></div>
+                <div class="inner space-y-[4px]">
+                  <SvgIcon name="control-icon-result-btn" size="14" />
+                  <span>{{ modelSystemStatus.activeTwo === 1 ? "投放中" : "未开启" }}</span>
+                </div>
+              </div>
             </div>
           </div>
         </div>
@@ -134,7 +114,7 @@ const emitUpdate = async () => {
 <style lang="scss" scoped>
 .result-card_view {
   position: relative;
-  height: 190px;
+  height: 210px;
   padding: 0px 16px 24px 16px;
 
   .update-message-box {
@@ -158,52 +138,92 @@ const emitUpdate = async () => {
 
   .result-card {
     @include flex(x, center, between);
-    padding: 16px 35px 16px 16px;
+    padding: 16px 16px 16px 16px;
     margin-top: -9px;
     border: 1px solid #fff;
     border-radius: 8px;
     background: url('@/assets/images/control/bg-control-top.png') center right no-repeat, linear-gradient(90deg, #E0E8FC 0%, #F2F4FF 100%);
     background-size: auto 100%, auto;
-    background-position: 50% 10%;
+    background-position: 450px 10%, 100% 100%;
 
     .result-inner {
-      width: 80%;
+      width: 100%;
+      width: 100%;
       border-radius: 8px;
       @include flex(x, center, start);
 
       .result-card_item {
-        width: 22%;
-        height: 104px;
-        padding: 20px 0 20px 20px;
+        width: 50%;
+        height: 124px;
+        padding: 12px 0px 12px 24px;
         border-radius: inherit;
-        border: 1px solid #FFF;
         background: #fff;
         background: linear-gradient(90deg, #FFF 50%, rgba(255, 255, 255, 0.50) 100%);
+        // background: url("@/assets/images/control/bg-board-card.png") no-repeat;
+        background-size: 100% 100%;
         backdrop-filter: blur(2px);
         overflow: hidden;
 
+        .board-inner {
+          display: flex;
+          flex-flow: column;
+          height: 100%;
+
+          .board-item {
+            position: relative;
+            @include flex(y, start, between);
+            height: 50%;
+
+            .label {
+              position: absolute;
+              top: -12px;
+              right: 0;
+              width: 84px;
+              height: 24px;
+              border-bottom-left-radius: 10px;
+              line-height: 24px;
+              text-align: center;
+              font-size: 12px;
+              color: #fff;
+              background: rgba(121, 105, 245, 1);
+            }
+
+            h4 {
+              font-size: 12px;
+              line-height: 20px;
+              color: #5E5E5E;
+            }
+          }
+
+          .line {
+            flex-shrink: 0;
+            height: 2px;
+            margin-bottom: 2px;
+            background: linear-gradient(90deg, #EEE 0%, rgba(238, 238, 238, 0.00) 100%);
+          }
+        }
+
         .num {
           color: #1A2029;
           font-family: D-DIN-PRO-700-Bold;
-          font-size: 24px;
+          font-size: 20px;
           font-weight: bold;
-          line-height: 0;
         }
       }
     }
-
-    & .result-card_item:nth-child(2) {
-      border: 1px solid #FFF;
-      background: linear-gradient(90deg, #FFF 50%, rgba(255, 255, 255, 0.50) 100%);
-      backdrop-filter: blur(2px);
-    }
+  }
+  
+  .btn-card {
+    position: absolute;
+    bottom: 10px;
+    right: 20px;
   }
 
   .round-btn {
     position: relative;
     @include flex(x, center, center);
-    width: 88px;
-    height: 88px;
+    width: 60px;
+    height: 60px;
     border: 2px solid #E6EFFE;
     border-radius: 50%;
     background: #898EFE;
@@ -217,12 +237,12 @@ const emitUpdate = async () => {
       position: relative;
       @include flex(x, center, center);
       flex-flow: column;
-      width: 74px;
-      height: 74px;
-      padding: 14px;
+      width: 48px;
+      height: 48px;
       border-radius: 100%;
       background: #2454FF;
       transition: all 0.3s;
+      font-size: 10px;
     }
   }
 
@@ -230,21 +250,12 @@ const emitUpdate = async () => {
     cursor: not-allowed;
   }
 
-  // .active {
-  //   transition: all 0.5s;
-  //   background: #898EFE;
-
-  //   .inner {
-  //     background: #2454FF;
-  //   }
-  // }
-
   .circle1,
   .circle2,
   .circle3 {
     position: absolute;
-    width: 40px;
-    height: 40px;
+    width: 30px;
+    height: 30px;
     background: rgba(137, 142, 254, 1);
     border: 1px solid rgba(137, 142, 254, 0.85);
     border-radius: 999px;
@@ -273,7 +284,7 @@ const emitUpdate = async () => {
 
   @keyframes circleChange {
     0% {
-      transform: scale(2);
+      transform: scale(1.2);
       opacity: 0.95;
     }
 
@@ -293,7 +304,7 @@ const emitUpdate = async () => {
     // }
 
     100% {
-      transform: scale(3);
+      transform: scale(2.5);
       opacity: 0.05;
     }
   }

src/views/xlht/AnalyseView.vue

@@ -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;
 

src/views/xlht/config.js

@@ -1,73 +1,74 @@
 export const columns = [
   {
     title: "检测时间",
-    key: "no",
-    width: 100,
+    key: "time",
+    width: 180,
     fixed: "left",
   },
   {
-    title: "1#进水COD",
-    key: "title",
+    title: "进水总流量",
+    key: "scJsZll",
     width: 100,
   },
   {
-    title: "2#进水COD",
-    key: "length",
+    title: "进水COD",
+    key: "scJsCod",
     width: 100,
   },
   {
     title: "1#好氧硝酸盐",
-    key: "length",
+    key: "jqr1HyXiaodan",
     width: 120,
   },
   {
     title: "2#好氧硝酸盐",
-    key: "length",
+    key: "jqr2HyXiaodan",
     width: 120,
   },
   {
     title: "1#缺氧氨氮",
-    key: "length",
+    key: "jqr1QyAndan",
     width: 120,
   },
   {
     title: "2#缺氧氨氮",
-    key: "length",
+    key: "jqr2QyAndan",
     width: 120,
   },
   {
     title: "1#缺氧硝酸盐",
-    key: "length",
+    key: "jqr1QyXiaodan",
     width: 120,
   },
   {
-    title: "1#缺氧硝酸盐",
-    key: "length",
+    title: "2#缺氧硝酸盐",
+    key: "jqr2QyXiaodan",
     width: 120,
   },
-  {
-    title: "1#二沉池出水正磷酸盐",
-    key: "length",
-    width: 160,
-  },
-  {
-    title: "2#二沉池出水正磷酸盐",
-    key: "length",
-    width: 160,
-  },
-  {
-    title: "1#好氧末端正磷酸盐",
-    key: "length",
-    width: 160,
-  },
-  {
-    title: "2#好氧末端正磷酸盐",
-    key: "length",
-    width: 160,
-  },
+  // {
+  //   title: "1#二沉池出水正磷酸盐",
+  //   key: "length",
+  //   width: 160,
+  // },
+  // {
+  //   title: "2#二沉池出水正磷酸盐",
+  //   key: "length",
+  //   width: 160,
+  // },
+  // {
+  //   title: "1#好氧末端正磷酸盐",
+  //   key: "length",
+  //   width: 160,
+  // },
+  // {
+  //   title: "2#好氧末端正磷酸盐",
+  //   key: "length",
+  //   width: 160,
+  // },
 ];
 
-export const getEchartLineOptions = () => {
+export const getEchartLineOptions = ({ xAxisData, seriesData }) => {
+  console.log( { xAxisData, seriesData } );
   const colorList = [
     "#FF6737",
     "#00AB84",
@@ -76,17 +77,30 @@ export const getEchartLineOptions = () => {
     "#FFE122",
     "#313CA9",
     "#F023FF",
-    "#F023FF",
     "#FFD22E",
     "#2181FF",
     "#F22",
     "#37DDE0",
   ];
 
+  const series = seriesData.map((item, index) => {
+    return {
+      name: item.name,
+      type: "line",
+      smooth: true,
+      showSymbol: false,
+      itemStyle: {
+        opacity: 0.8,
+        color: colorList[index],
+      },
+      data: item.data,
+    };
+  });
+
   const option = {
     grid: {
       top: 80,
-      bottom: 40,
+      bottom: 50,
       left: 40,
       right: 30,
     },
@@ -95,16 +109,20 @@ export const getEchartLineOptions = () => {
       // confine: true,
       appendToBody: true,
     },
+    title: {
+      show: !xAxisData.length,
+      text: '暂无数据',
+      x: 'center',
+      y: 'center',
+      textStyle: {
+        fontSize: 14,
+        fontWeight: 'normal',
+      }
+    },
     legend: [
       {
-        data: [
-          "1#进水COD",
-          "1#好氧硝酸盐",
-          "1#缺氧氨氮",
-          "1#缺氧硝酸盐",
-          "1#二沉池出水正磷酸盐",
-          "1#好氧末端正磷酸盐",
-        ],
+        show: !!xAxisData.length,
+        data: ["进水总氮", "1#好氧硝酸盐", "1#缺氧氨氮", "1#缺氧硝酸盐"],
         top: 10,
         left: 10,
         icon: "rect",
@@ -115,14 +133,8 @@ export const getEchartLineOptions = () => {
         },
       },
       {
-        data: [
-          "2#进水COD",
-          "2#好氧硝酸盐",
-          "2#缺氧氨氮",
-          "2#缺氧硝酸盐",
-          "2#二沉池出水正磷酸盐",
-          "2#好氧末端正磷酸盐",
-        ],
+        show: !!xAxisData.length,
+        data: ["进水COD", "2#好氧硝酸盐", "2#缺氧氨氮", "2#缺氧硝酸盐"],
         top: 35,
         left: 10,
         icon: "rect",
@@ -139,7 +151,7 @@ export const getEchartLineOptions = () => {
     xAxis: [
       {
         type: "category",
-        data: ["1月", "2月", "3月", "4月", "5月", "6月", "7月"],
+        data: xAxisData || [],
         boundaryGap: false,
         axisTick: {
           show: false,
@@ -158,7 +170,6 @@ export const getEchartLineOptions = () => {
     ],
     yAxis: [
       {
-        type: "",
         scale: false,
         minInterval: 1,
         backgroundColor: "#FFFFFF",
@@ -182,41 +193,37 @@ export const getEchartLineOptions = () => {
         },
       },
     ],
-    series: [
-      {
-        name: "1#进水COD",
-        type: "line",
-        smooth: true,
-        showSymbol: false,
-        itemStyle: {
-          opacity: 0.8,
-          color: "red", // 将来遍历的时候，这里设置color
-        },
-        tooltip: {
-          valueFormatter: function (value) {
-            return value + "家";
-          },
-        },
-        data: [30, 50, 80, 40, 64, 28, 100],
-      },
-      {
-        name: "2#好氧硝酸盐",
-        type: "line",
-        smooth: true,
-        showSymbol: false,
-        yAxisIndex: 0,
-        itemStyle: {
-          opacity: 0.8,
-          color: "#E6AF08",
-        },
-        tooltip: {
-          valueFormatter: function (value) {
-            return value;
-          },
-        },
-        data: [120, 230, 430, 200, 80, 150, 340],
-      },
-    ],
+    series,
+    // [
+    //   {
+    //     name: "1#进水COD",
+    //     type: "line",
+    //     smooth: true,
+    //     showSymbol: false,
+    //     itemStyle: {
+    //       opacity: 0.8,
+    //       color: "red", // 将来遍历的时候，这里设置color
+    //     },
+    //     data: [30, 50, 80, 40, 64, 28, 100],
+    //   },
+    //   {
+    //     name: "2#好氧硝酸盐",
+    //     type: "line",
+    //     smooth: true,
+    //     showSymbol: false,
+    //     yAxisIndex: 0,
+    //     itemStyle: {
+    //       opacity: 0.8,
+    //       color: "#E6AF08",
+    //     },
+    // tooltip: {
+    //   valueFormatter: function (value) {
+    //     return value;
+    //   },
+    // },
+    //     data: [120, 230, 430, 200, 80, 150, 340],
+    //   },
+    // ],
   };
   return option;
 };