feat: 一厂改动

.env.development

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

.env.production

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

src/api/control.js

@@ -66,5 +66,17 @@ export const controlApi = {
    */
   getAllEchartData: (params) => http.get(`/front/bigModel/smartAdd/charListAll`, { params }),
   
-    
+
+  // 预测相关 - 新增
+
+  /**
+   * 预测报表 - 分页预测
+   */
+  getPredictPageList: (params) => http.get(`/front/bigModel/smartAdd/predictPageList`, { params }),
+  
+  /**
+   * 预测报表 - echart
+   */
+  getPredictEchart: (params) => http.get(`/front/bigModel/smartAdd/predictList`, { params }),
+
 }

src/components/Layout/TheMenu.vue

@@ -41,6 +41,11 @@ const menuOptions = [
     icon: renderIcon({ name: 'menu-xiht-control' }),
     key: '/medicinal',
   },
+  {
+    label: () => renderLabel('预测报表'),
+    icon: renderIcon({ name: 'menu-answers' }),
+    key: '/calculate',
+  },
   {
     label: () => renderLabel('用户中心'),
     icon: renderIcon({ name: 'menu-user' }),

src/router/index.js

@@ -34,6 +34,14 @@ const constantRouterMap = [
           title: "智适应碳源投加",
         },
       },
+      {
+        path: "calculate",
+        name: "CalculateView",
+        component: () => import("@/views/xlht/CalculateView.vue"),
+        meta: {
+          title: "智适应碳源投加",
+        },
+      },
     ],
   },
   {

src/views/control/MedicinalView.vue

@@ -81,7 +81,7 @@ const waterConfigParams = ref({});
 
 // 基础数据
 const dataSourceParams = ref({
-  type: 0,
+  type: false,
   typeOne: true,
   typeTwo: true
 })
@@ -93,7 +93,7 @@ const baseSourceParams = ref({
 
 // 计算碳氮比
 const tdbNum = computed(() => {
-  const type = dataSourceParams.value.type;
+  const type = dataSourceParams.value.autoType;
 
   const [r1, r2, rOne, rTwo] = getTotalNum();
 
@@ -114,7 +114,7 @@ const tdbNum = computed(() => {
 })
 
 watch(() => tdbNum.value, tdb => {
-  if ( dataSourceParams.value.type === 0  ) {
+  if ( dataSourceParams.value.autoType === 0  ) {
     southColumnData.value[southColumnData.value.length - 1].value = tdb;
     dataSourceParams.value.tdbOne = tdb;
   } else {
@@ -162,7 +162,7 @@ const onEditCancel = () => {
 
 // 切换tabs
 const onUpdateTab = (index) => {
-  dataSourceParams.value.type = index;
+  dataSourceParams.value.autoType = index;
   // setTimeout(() => handleMedicateAmount())
 }
 
@@ -211,6 +211,7 @@ function getTotalNum() {
 const onConfirmUpdate = async () => {
   const params = {
     ...dataSourceParams.value,
+    type: Number(dataSourceParams.value.type),
     typeOne: dataSourceParams.value.typeOne ? 0 : 1,
     typeTwo: dataSourceParams.value.typeTwo ? 0 : 1,
     medicineAmountOne: dataSourceParams.value.typeOne ? null : dataSourceParams.value.medicineAmountOne,
@@ -232,7 +233,7 @@ const onConfirmUpdate = async () => {
 
 const handleAutoSwitch = (val) => {
 
-  const key = dataSourceParams.value.type === 0 ? 'typeOne' : 'typeTwo';
+  const key = dataSourceParams.value.autoType === 0 ? 'typeOne' : 'typeTwo';
   
   dataSourceParams.value[key] = val;
   
@@ -241,7 +242,7 @@ const handleAutoSwitch = (val) => {
 
 // 更新投药结果
 const handleMedicateAmount = () => {
-  const type = dataSourceParams.value.type;
+  const type = dataSourceParams.value.autoType;
 
   const { updateNum1, updateNum2 } = unref(resultNumberSet);
 
@@ -353,44 +354,44 @@ const waringTips = () => {
   
   if ( isEmpty(hycXsyOne) && isEmpty(htfksdOne) && isEmpty(kzmbplbjz) ) {
     if (( hycXsyOne - htfksdOne ) > kzmbplbjz ) {
-      questionCollect.firstItem.push('北池');
+      questionCollect.firstItem.push('西池');
     }
     
     if ( hycXsyOne > hycxsygkz ) {
-      questionCollect.secondItem.push('北池');
+      questionCollect.secondItem.push('西池');
     }
   }
   
   if ( isEmpty(hycXsyTwo) && isEmpty(htfksdTwo) && isEmpty(kzmbplbjz) ) {
     if ( (hycXsyTwo - htfksdTwo) > kzmbplbjz ) {
-      questionCollect.firstItem.push('南池');
+      questionCollect.firstItem.push('东池');
     }
     if ( hycXsyTwo > hycxsygkz ) {
-      questionCollect.secondItem.push('南池');
+      questionCollect.secondItem.push('东池');
     }
   }
 
   if ( isEmpty(hycXsyOne) && isEmpty(qycYxyOne) && isEmpty(qycAdOne) ) {
     if (qycYxyOne + qycAdOne - hycXsyOne > xhycbjz) {
-      result.twoTips.push('北池');
+      result.twoTips.push('西池');
     }
   }
 
   if ( isEmpty(hycXsyTwo) && isEmpty(qycYxyTwo) && isEmpty(qycAdTwo) ) {
     if (qycYxyTwo + qycAdTwo - hycXsyTwo > xhycbjz) {
-      result.twoTips.push('南池');
+      result.twoTips.push('东池');
     }
   }
 
   if ( isEmpty(addDifferenceOne) && isEmpty(jylpybjz) && isEmpty(minAddAmount)) {
     if (addDifferenceOne > minAddAmount && addDifferenceOne > jylpybjz) {
-      result.threeTips.push('北池');
+      result.threeTips.push('西池');
     }
   }
  
   if ( isEmpty(addDifferenceTwo) && isEmpty(jylpybjz) && isEmpty(minAddAmount)) {
     if (addDifferenceTwo > minAddAmount && addDifferenceTwo > jylpybjz) {
-      result.threeTips.push('南池');
+      result.threeTips.push('东池');
     }
   }
   
@@ -424,10 +425,11 @@ const waringTips = () => {
       }
     }
   }).filter(Boolean);
-
-  console.log("warningList", warningList);
 }
 
+const handleAutoSwitchType = (val) => {
+  dataSourceParams.value.type = val;
+}
 
 onMounted(async () => {
   let countDown = 5;
@@ -472,7 +474,9 @@ onMounted(async () => {
       tytjTransientLLOne, tytjTransientLLTwo,
 
       addDifferenceOne,
-      addDifferenceTwo
+      addDifferenceTwo,
+      // 运行方式
+      type
     } = data;
     
     // 0 不可以  组态投放 1 可以   系统投放
@@ -493,10 +497,12 @@ onMounted(async () => {
       currentResultNum1: medicineAmountOne,
       currentResultNum2: medicineAmountTwo
     }
-
+ 
     // 数据源
     dataSourceParams.value = {
-      type: 0,
+      type: !!type,
+      
+      autoType: 0,
 
       typeOne: !!!typeOne,
       typeTwo: !!!typeTwo,
@@ -566,9 +572,15 @@ onUnmounted(() => {
             <n-scrollbar class="scrollbar" style="height: 100%;">
               <div class="form-content">
                 <BaseCard title="选择池组手自动方式">
+                  <template #titleRight>
+                    <n-switch :round="false" v-model:value="dataSourceParams.type" :on-update:value="handleAutoSwitchType">
+                      <template #checked>是</template>
+                      <template #unchecked>否</template>
+                    </n-switch>
+                  </template>
                   <n-tabs justify-content="space-between" type="line" :bar-width="0" tab-style="width: 200px;"
-                    tab-class="custom-tab_item" animated :on-update:value="onUpdateTab" :value="dataSourceParams.type">
-                    <n-tab-pane :name="0" tab="北池">
+                    tab-class="custom-tab_item" animated :on-update:value="onUpdateTab" :value="dataSourceParams.autoType">
+                    <n-tab-pane :name="0" tab="西池">
                       <div class="panel-header_main">
                         <p>设置投放方式</p>
                         <NSwitch size="small" v-model:value="dataSourceParams.typeOne" class="text-[12px]" :rail-style="railStyle" :on-update:value="handleAutoSwitch">
@@ -616,7 +628,7 @@ onUnmounted(() => {
                             :btn-group="[
                               { label: '手动', value1: '', value2: '' },
                               { label: '化验', value1: waterConfigParams.hyXsyHYOne },
-                              { label: '预测', value1: '', disabled: true }
+                              { label: '预测', value1: waterConfigParams.hyXsyYCOne }
                             ]"></BaseChooseItem>
                           <BaseChooseItem
                             tab-key="south" 
@@ -628,7 +640,7 @@ onUnmounted(() => {
                             :btn-group="[
                               { label: '手动', value1: '', value2: '' },
                               { label: '化验', value1: waterConfigParams.qyXsyHYOne },
-                              { label: '预测', value1: '', disabled: true }
+                              { label: '预测', value1: waterConfigParams.qyXsyYCOne }
                             ]"></BaseChooseItem>
                           <BaseChooseItem
                             tab-key="south"
@@ -640,7 +652,7 @@ onUnmounted(() => {
                             :btn-group="[
                               { label: '手动', value1: '', value2: '' },
                               { label: '化验', value1: waterConfigParams.qyAdHYOne },
-                              { label: '预测', value1: '', disabled: true }
+                              { label: '预测', value1: waterConfigParams.qyAdYCOne }
                             ]"></BaseChooseItem>
                           <BaseChooseItem
                             tab-key="south"
@@ -718,7 +730,7 @@ onUnmounted(() => {
                     
                     <!-- 北池 start -->
 
-                    <n-tab-pane :name="1" tab="南池">
+                    <n-tab-pane :name="1" tab="东池">
                       <div class="panel-header_main">
                         <p>设置投放方式</p>
                         <NSwitch size="small" v-model:value="dataSourceParams.typeTwo" class="text-[12px]" :rail-style="railStyle" :on-update:value="handleAutoSwitch">
@@ -766,7 +778,7 @@ onUnmounted(() => {
                             :btn-group="[
                               { label: '手动', value1: '', value2: '' },
                               { label: '化验', value1: waterConfigParams.hyXsyHYTwo },
-                              { label: '预测', value1: '', disabled: true }
+                              { label: '预测', value1: waterConfigParams.hyXsyYCOne }
                             ]"></BaseChooseItem>
                           <BaseChooseItem
                             tab-key="south" 
@@ -778,7 +790,7 @@ onUnmounted(() => {
                             :btn-group="[
                               { label: '手动', value1: '', value2: '' },
                               { label: '化验', value1: waterConfigParams.qyXsyHYTwo},
-                              { label: '预测', value1: '', disabled: true }
+                              { label: '预测', value1: waterConfigParams.qyXsyYCOne }
                             ]"></BaseChooseItem>
                           <BaseChooseItem
                             tab-key="south"
@@ -790,7 +802,7 @@ onUnmounted(() => {
                             :btn-group="[
                               { label: '手动', value1: '', value2: '' },
                               { label: '化验', value1: waterConfigParams.qyAdHYTwo},
-                              { label: '预测', value1: '', disabled: true }
+                              { label: '预测', value1: waterConfigParams.qyAdYCOne }
                             ]"></BaseChooseItem>
                           <BaseChooseItem
                             tab-key="south"
@@ -872,6 +884,8 @@ onUnmounted(() => {
             </BaseTitle>
             <div class="right-section-content">
               <TheResultPanel
+                :type="dataSourceParams.type"
+                :activeType="dataSourceParams.autoType"
                 :nums="resultNumberSet"
                 :minAndMaxNum="minAndMaxValue"
                 v-model:system="zuTaiStatus"

src/views/control/components/TheEchartPanel.vue

@@ -32,19 +32,19 @@ const selectOptions = ref([]);
 
 let selectEnum = new Map([
   ['0', '进水流量'],
-  ['1',  '北池-好氧池硝酸盐'],
-  ['2',  '南池-好氧池硝酸盐'],
-  ['12', '北池-后反馈设定'],
-  ['13', '南池-后反馈设定'],
-  ['3',  '北池-缺氧池氨氮'],
-  ['4',  '南池-缺氧池氨氮'],
+  ['1',  '西池-好氧池硝酸盐'],
+  ['2',  '东池-好氧池硝酸盐'],
+  ['12', '西池-后反馈设定'],
+  ['13', '东池-后反馈设定'],
+  ['3',  '西池-缺氧池氨氮'],
+  ['4',  '东池-缺氧池氨氮'],
   ['5',  '进水COD-连续检测'],
   ['6',  '进水COD-在线仪表'],
   ['7',  '进水总氮'],
-  ['8',  '碳源投加量-北池-计算投药量'],
-  ['9',  '碳源投加量-南池-计算投药量'],
-  ['10', '碳源投加量-北池-反馈流量'],
-  ['11', '碳源投加量-南池-反馈流量']
+  ['8',  '碳源投加量-西池-计算投药量'],
+  ['9',  '碳源投加量-东池-计算投药量'],
+  ['10', '碳源投加量-西池-反馈流量'],
+  ['11', '碳源投加量-东池-反馈流量']
 ])
 
 let echartOptions = [
@@ -194,7 +194,7 @@ const getWaterEchartOptions = ({ data, xAxis = [] }) => {
   if ( selectValue.value.includes('12') ) {
     const data = xAxis.map(time => [time, props.htfksdOne]);
     series.push({
-      name: '北池-后反馈设定',
+      name: '西池-后反馈设定',
       showSymbol: false,
       smooth: true,
       type: 'line',
@@ -212,7 +212,7 @@ const getWaterEchartOptions = ({ data, xAxis = [] }) => {
   if (selectValue.value.includes('13')) {
     const data = xAxis.map(time => [time, props.htfksdTwo]);
     series.push({
-      name: '南池-后反馈设定',
+      name: '东池-后反馈设定',
       showSymbol: false,
       smooth: true,
       type: 'line',

src/views/control/components/TheResultPanel.vue

@@ -10,6 +10,7 @@ const isVisibleBtn = defineModel();
 const systemStatus = ref({});
 const modelSystemStatus = defineModel('system');
 const emit = defineEmits(['on-click', 'on-update']);
+const isShowUpdateBtnState = ref(false);
 
 const props = defineProps({
   nums: {
@@ -19,50 +20,95 @@ const props = defineProps({
   minAndMaxNum: {
     type: Object,
     default: () => ({})
+  },
+  type: {
+    type: Boolean,
+    default: false
+  },
+  activeType: {
+    type: Number,
+    default: 0
   }
 });
 
+const flowData = computed(() => {
+  const data = {
+    doseNum: 0,
+    flowNum: 0
+  }
+  
+  if ( !props.type ) {
+    data.doseNum = props.activeType === 0 ? props.nums.doseNum1 : props.nums.doseNum2;
+    data.flowNum = props.activeType === 0 ? props.nums.flowNum1 : props.nums.flowNum2;
+  } else {
+    data.doseNum = props.nums.doseNum1 >= props.nums.doseNum2 ? props.nums.doseNum2 : props.nums.doseNum1;
+    data.flowNum = props.nums.doseNum1 >= props.nums.doseNum2 ? props.nums.flowNum2 : props.nums.flowNum1;
+  }
+
+  return data;
+})
+
 const getTipsText = (name, updateNum, doseNum) => {
   const { minAddAmount, maxAddAmount } = props.minAndMaxNum;
   const { currentResultNum1, currentResultNum2 } = props.nums;
-  
-  const num = name === '北池' ? currentResultNum1 : currentResultNum2;
+  let num = 0;
+
+  if ( !props.type ) {
+    num = props.activeType == 0 ? currentResultNum1 : currentResultNum2;
+  } else {
+    num =  currentResultNum1 > currentResultNum2 ? currentResultNum2 : currentResultNum1;
+  }
 
   if ( updateNum === doseNum ) {
+    isShowUpdateBtnState.value = false;
     return `${name}设定后，系统加药量未发生变化`;
   }
   if ( updateNum >= maxAddAmount ) {
+    isShowUpdateBtnState.value = true;
     return `${name}设定系统加药量计算值为${num}L/h，已达到最大值${maxAddAmount}L/h，按照最大值投放`;
   }
   if ( updateNum <= minAddAmount ) {
+    isShowUpdateBtnState.value = true;
     return `${name}设定系统加药量计算值为${num}L/h，已达到最小值${minAddAmount}L/h，按照最小值投放`;
   }
   
-  return `${name}有新投放方案，加药量计算为:${updateNum}L/h`
+  isShowUpdateBtnState.value = true;
+  return `${name}有新投放方案，加药量计算为:${updateNum}L/h`;
+
 }
 
 const noticeTextVal = computed(() => {
-  const { updateNum1, doseNum1, updateNum2, doseNum2 } = props.nums;
-  return {
-    southVal: getTipsText('北池', updateNum1, doseNum1),
-    northVal: getTipsText('南池', updateNum2, doseNum2)
+  const { updateNum1, doseNum1, updateNum2, doseNum2, currentResultNum2, currentResultNum1 } = props.nums;
+  
+  if ( !props.type  ) {
+    return props.activeType == 0 ? getTipsText('西池', updateNum1, doseNum1) : getTipsText('东池', updateNum2, doseNum2);
+  } else {
+    const update = currentResultNum1 > currentResultNum2  ? updateNum2 : updateNum1;
+    const dose = currentResultNum1 > currentResultNum2  ? doseNum2 : doseNum1;
+    return getTipsText('', update, dose)
   }
 })
 
-const emitEvent = (type) => {
+const getPositionText = computed(() => {
+  let str = '';
+  if ( !props.type ) {
+    str = props.activeType == 0 ? '西池 - ' : '东池 - '
+  }
+  return str;
+})
 
-  const name = type == 'one' ? '北池' : '南池';
-  
+const emitEvent = (type) => {
 
+  const name = type == 'one' ? '西池' : '东池';
 
   if ( type == 'one' ) {
     if ( modelSystemStatus.activeOne != 1 ) {
-      return message.warning(name + '-在组态投放下无法开启投放', {duration: 5 * 1000});
+      return message.warning('在组态投放下无法启动', {duration: 5 * 1000});
     }
     systemStatus.value.activeOne = systemStatus.value.activeOne === 1 ? 0 : 1;
   } else {
     if ( modelSystemStatus.activeTwo != 1 ) {
-      return message.warning(name + '-在组态投放下无法开启投放', {duration: 5 * 1000});
+      return message.warning('在组态投放下无法启动', {duration: 5 * 1000});
     }
     systemStatus.value.activeTwo = systemStatus.value.activeTwo === 1 ? 0 : 1;
   }
@@ -91,58 +137,72 @@ onMounted(() => {
       <ul class="update-message">
         <li class="flex items-center space-x-[4px]">
           <SvgIcon name="control-icon-warning" size="14"></SvgIcon>
-          <span>{{ noticeTextVal.southVal }}</span>
-          <!-- <span>北池加药量计算：{{ nums.updateNum1 || 0 }}L/h</span> -->
+          <span>{{ noticeTextVal }}</span>
+          <!-- <span>西池加药量计算：{{ nums.updateNum1 || 0 }}L/h</span> -->
         </li>
-        <li class="flex items-center space-x-[4px]">
+        <!-- <li class="flex items-center space-x-[4px]">
           <SvgIcon name="control-icon-warning" size="14"></SvgIcon>
           <span>{{ noticeTextVal.northVal }}</span>
-          <!-- <span>南池加药量计算：{{ nums.updateNum2 || 0}}L/h，是否更新？</span> -->
-        </li>
+          <span>东池加药量计算：{{ nums.updateNum2 || 0}}L/h，是否更新？</span>
+        </li> -->
       </ul>
-      <div class="space-x-[10px]">
+      <div class="space-x-[10px]" v-show="isShowUpdateBtnState">
         <span class="text-[#ed742f] cursor-pointer" @click="emitUpdate">更新投放</span>
         <span class="text-[#88909b] cursor-pointer" @click="isVisibleBtn = false">取消</span>
       </div>
     </div>
     <div class="result-card">
+      <span class="label">{{ getPositionText + (modelSystemStatus.activeTwo === 1 ? '系统投放' : '组态投放')}}</span>
+      <div class="btn-card">
+        <div :class="['round-btn']" @click="emitEvent('two')">
+          <div class="circle1" v-show="systemStatus.activeTwo === 1"></div>
+          <div class="circle2" v-show="systemStatus.activeTwo === 1"></div>
+          <div class="circle3" v-show="systemStatus.activeTwo === 1"></div>
+          <div class="inner space-y-[4px]">
+            <SvgIcon name="control-icon-result-btn" size="14" />
+            <span>{{ systemStatus.activeTwo === 1 ? "停止" : "启动" }}</span>
+          </div>
+        </div>
+      </div>
+
       <div class="result-inner space-x-[8px]">
         <div class="result-card_item">
           <ul class="board-inner">
             <li class="board-item">
-              <span class="label">北池 - {{ modelSystemStatus.activeOne === 1 ? '系统投放' : '组态投放'}}</span>
-              <h4>碳源投加瞬时流量(L/h)</h4>
-              <span class="num">
-                <NNumberAnimation :from="0" :to="nums.flowNum1" :duration="1000"
-                  :precision="3"></NNumberAnimation>
-              </span>
+              <h4>
+                <span class="text-[14px] text-[#1d2129]">碳源投加瞬时流量</span>
+                <span class="block w-[12px] h-[3px] mt-[4px] bg-[#1D2129]"></span>
+              </h4>
+              <p class="space-x-[10px]">
+                <span class="num">
+                  <NNumberAnimation :from="0" :to="flowData.flowNum" :duration="1000" :precision="3"></NNumberAnimation>
+                </span>
+                <span class="text-[12px] text-[#86909C]">L/h</span>
+              </p>
             </li>
-            <li class="line"></li>
+          </ul>
+        </div>
+
+        <div class="result-card_item">
+          <ul class="board-inner">
             <li class="board-item">
-              <h4>系统加药量(L/h)</h4>
-              <span class="num">
-                <NNumberAnimation :from="0" :to="nums.doseNum1" :duration="1000"
-                  :precision="3"></NNumberAnimation>
-              </span>
+              <h4>
+                <span class="text-[14px] text-[#1d2129]">系统加药量</span>
+                <span class="block w-[12px] h-[3px] mt-[4px] bg-[#1D2129]"></span>
+              </h4>
+              <p class="space-x-[10px]">
+                <span class="num">
+                  <NNumberAnimation :from="0" :to="flowData.doseNum" :duration="1000" :precision="3"></NNumberAnimation>
+                </span>
+                <span class="text-[12px] text-[#86909C]">L/h</span>
+              </p>
             </li>
           </ul>
-
-          <div class="btn-card">
-            <div :class="['round-btn']" @click="emitEvent('one')">
-              <div class="circle1" v-show="systemStatus.activeOne === 1"></div>
-              <div class="circle2" v-show="systemStatus.activeOne === 1"></div>
-              <div class="circle3" v-show="systemStatus.activeOne === 1"></div>
-              <div class="inner space-y-[4px]">
-                <SvgIcon name="control-icon-result-btn" size="14" />
-                <span>{{ systemStatus.activeOne === 1 ? "停止" : "启动" }}</span>
-              </div>
-            </div>
-          </div>
         </div>
-        <div class="result-card_item">
+        <!-- <div class="result-card_item">
           <ul class="board-inner">
             <li class="board-item">
-              <span class="label">南池 - {{ modelSystemStatus.activeTwo === 1 ? '系统投放' : '组态投放'}}</span>
+              <span class="label">东池 - {{ modelSystemStatus.activeTwo === 1 ? '系统投放' : '组态投放'}}</span>
               <h4>碳源投加瞬时流量(L/h)</h4>
               <span class="num">
                 <NNumberAnimation :from="0" :to="nums.flowNum2" :duration="1000"
@@ -170,7 +230,7 @@ onMounted(() => {
               </div>
             </div>
           </div>
-        </div>
+        </div> -->
       </div>
     </div>
   </div>
@@ -197,8 +257,26 @@ onMounted(() => {
     flex-shrink: 0;
     color: #7E604F;
   }
+  
+  
+  .label {
+    position: absolute;
+    top: 0px;
+    right: 0px;
+    // width: 84px;
+    height: 24px;
+    padding: 0 15px;
+    border-top-right-radius: 10px;
+    border-bottom-left-radius: 10px;
+    line-height: 24px;
+    text-align: center;
+    font-size: 12px;
+    color: #fff;
+    background: rgba(121, 105, 245, 1);
+  }
 
   .result-card {
+    position: relative;
     @include flex(x, center, between);
     padding: 16px 16px 16px 16px;
     // margin-top: -9px;
@@ -209,15 +287,19 @@ onMounted(() => {
     background-position: 450px 10%, 100% 100%;
 
     .result-inner {
+      position: relative;
       width: 100%;
       width: 100%;
       border-radius: 8px;
       @include flex(x, center, start);
 
       .result-card_item {
-        width: 50%;
-        height: 124px;
-        padding: 12px 0px 12px 24px;
+        display: flex;
+        align-items: center;
+        justify-content: flex-start;
+        width: 250px;
+        height: 104px;
+        padding: 20px 0 20px 20px;
         border-radius: inherit;
         background: #fff;
         background: linear-gradient(90deg, #FFF 50%, rgba(255, 255, 255, 0.50) 100%);
@@ -234,22 +316,8 @@ onMounted(() => {
           .board-item {
             position: relative;
             @include flex(y, start, between);
-            height: 50%;
-
-            .label {
-              position: absolute;
-              top: -12px;
-              right: 0;
-              // width: 84px;
-              height: 24px;
-              padding: 0 5px;
-              border-bottom-left-radius: 10px;
-              line-height: 24px;
-              text-align: center;
-              font-size: 12px;
-              color: #fff;
-              background: rgba(121, 105, 245, 1);
-            }
+            height: 100%;
+
 
             h4 {
               font-size: 12px;
@@ -269,7 +337,7 @@ onMounted(() => {
         .num {
           color: #1A2029;
           font-family: D-DIN-PRO-700-Bold;
-          font-size: 20px;
+          font-size: 24px;
           font-weight: bold;
         }
       }
@@ -278,15 +346,15 @@ onMounted(() => {
   
   .btn-card {
     position: absolute;
-    bottom: 10px;
+    bottom: 14px;
     right: 20px;
   }
 
   .round-btn {
     position: relative;
     @include flex(x, center, center);
-    width: 64px;
-    height: 64px;
+    width: 80px;
+    height: 80px;
     border: 2px solid #E6EFFE;
     border-radius: 50%;
     background: #898EFE;
@@ -295,13 +363,14 @@ onMounted(() => {
     color: #fff;
     cursor: pointer;
     transition: all 0.5s;
+    z-index: 111;
 
     .inner {
       position: relative;
       @include flex(x, center, center);
       flex-flow: column;
-      width: 50px;
-      height: 50px;
+      width: 60px;
+      height: 60px;
       border-radius: 100%;
       background: #2454FF;
       transition: all 0.3s;

src/views/login/LoginView.vue

@@ -69,7 +69,7 @@ const handleSubmit = async () => {
     <div class="tips-wrapper">
       <ul class="tips-inner">
         <li class="title">LibraAI 智能体运营平台<br />锡林浩特水务集团</li>
-        <li class="sub-title">同建绿色温馨家园，共享清澈碧水蓝天</li>
+        <li class="sub-title">使命重在担当，实干铸就未来</li>
       </ul>
     </div>
 
@@ -104,7 +104,7 @@ const handleSubmit = async () => {
   position: relative;
   @include flex(x, center, between);
   height: 100vh;
-  background: url("@/assets/images/login/bg-login-xlht.png") center center no-repeat;
+  background: url("@/assets/images/login/bg-login-xlht2.png") center center no-repeat;
   background-size: cover;
   overflow: hidden;
   min-width: 1100px;

src/views/user/index.vue

@@ -9,7 +9,7 @@ import { BaseNumberInput } from '@/components';
 const message = useMessage();
 
 const data = reactive({
-  tab_action: 1,
+  tab_action: 0,
   tabs: ['账号管理', '报警机制设定', '关于我们'],
   user: {}
 })

src/views/xlht/AnalyseView.vue

@@ -8,7 +8,9 @@ import { TheChatView } from '@/components';
 import dayjs from 'dayjs';
 
 let echart = null;
-const timeRangeValue = ref([]);
+const currentDay = dayjs().format('YYYY-MM-DD');
+const yesterday = dayjs().subtract(7, 'day').format('YYYY-MM-DD');
+const timeRangeValue = ref([yesterday, currentDay]);
 const echartRef = ref(null);
 const boardData = ref({});
 const tableData = ref([])
@@ -96,15 +98,22 @@ const initEchartData = async () => {
   const seriesData = [
     { name: "进水总氮", data: seriesData1 },
     { name: "进水COD", data: seriesData2 },
-    { name: "北池好氧硝酸盐", data: seriesData3 },
-    { name: "南池好氧硝酸盐", data: seriesData4 },
-    { name: "北池缺氧氨氮", data: seriesData5 },
-    { name: "南池缺氧氨氮", data: seriesData6 },
-    { name: "北池缺氧硝酸盐", data: seriesData7 },
-    { name: "南池缺氧硝酸盐", data: seriesData8 },
+    { name: "西池好氧硝酸盐", data: seriesData3 },
+    { name: "东池好氧硝酸盐", data: seriesData4 },
+    { name: "西池缺氧氨氮", data: seriesData5 },
+    { name: "东池缺氧氨氮", data: seriesData6 },
+    { name: "西池缺氧硝酸盐", data: seriesData7 },
+    { name: "东池缺氧硝酸盐", data: seriesData8 },
   ]
 
-  const option = getEchartLineOptions({ xAxisData, seriesData: seriesData });
+  const option = getEchartLineOptions({ 
+    xAxisData,
+    seriesData: seriesData,
+    legend: [
+      ["进水总氮", "西池好氧硝酸盐", "西池缺氧氨氮", "西池缺氧硝酸盐"],
+      ["进水COD", "东池好氧硝酸盐", "东池缺氧氨氮", "东池缺氧硝酸盐"]
+    ]
+  });
   echart.setOption(option);
 }
 
@@ -195,6 +204,7 @@ onUnmounted(() => {
                 :themeOverrides="dateThemeOverrides"
                 :on-confirm="onDatePickerConfirm"
                 :on-clear="onDatePickerClear"
+                v-model:formatted-value="timeRangeValue"
               />
             </div>
           </div>

src/views/xlht/CalculateView.vue

@@ -0,0 +1,359 @@
+<script setup>
+import { ref, onMounted, onUnmounted, computed } from 'vue';
+import { NScrollbar,  NDatePicker,NDataTable, NPagination, NRadio, NRadioGroup } from 'naive-ui';
+import * as echarts from 'echarts';
+import { controlApi } from "@/api/control";
+import { firstPlantColumns, getEchartOptions } from './config';
+import { TheChatView } from '@/components';
+import dayjs from 'dayjs';
+
+let echart = null;
+const currentDay = dayjs().format('YYYY-MM-DD');
+const yesterday = dayjs().subtract(7, 'day').format('YYYY-MM-DD');
+const timeRangeValue = ref([yesterday, currentDay]);
+const echartRef = ref(null);
+const tableData = ref([]);
+const pageNum = ref(1);
+const pageSize = ref(10);
+const pageCount = ref(0);
+const radioValue = ref('0');
+const echartData = ref([]);
+const xAxisData = ref([]);
+
+const formData = ref({
+  startTime: '',
+  endTime: '',
+  type: '',
+  status: '',
+  page: 1,
+  size: 10
+})
+
+const radioData = [
+  { label: "西池好氧硝酸盐", value: '0', data: [] },
+  { label: "西池缺氧硝酸盐", value: '2', data: [] },
+  { label: "西池缺氧氨氮", value: '4', data: [] },
+  { label: "东池好氧硝酸盐", value: '1', data: [] },
+  { label: "东池缺氧硝酸盐", value: '3', data: [] },
+  { label: "东池缺氧氨氮", value: '5',data: [] }
+]
+
+const dateThemeOverrides = {
+  peers: {
+    Input: {
+      placeholderColor: '#86909C'
+    }
+  }
+}
+
+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 = (t) => {
+  timeRangeValue.value = t;
+  initEchartData();
+  initTableData();
+}
+
+const onDatePickerClear = () => {
+  timeRangeValue.value = [];
+  initEchartData();
+  initTableData();
+}
+
+const initTableData = async () => {
+  const { rows, total } = await controlApi.getPredictPageList({ pageNum: pageNum.value, pageSize: pageSize.value, ...dateRange.value });
+  tableData.value = rows;
+  pageCount.value = total;
+}
+
+const createEchart = () => {
+  const list = echartData.value[radioValue.value]
+  
+  const seriesData = [
+    { name: '真实值',  data: list.map(item => item.realVal) },
+    { name: '预测值',  data: list.map(item => item.predictVal) },
+  ]
+
+  const option = getEchartOptions({
+    xAxisData: list.map(item => item.time),
+    seriesData,
+    isDataZoom: true,
+    legend: [
+      ["进水总氮", "西池好氧硝酸盐", "西池缺氧氨氮", "西池缺氧硝酸盐"],
+      ["进水COD", "东池好氧硝酸盐", "东池缺氧氨氮", "东池缺氧硝酸盐"]
+    ]
+  });
+  echart.setOption(option);
+}
+
+const initEchartData = async () => {
+  const { data } = await controlApi.getPredictEchart({ ...dateRange.value });
+  
+  const axisData = [];
+
+  const tempObj = {
+    "0": [],
+    "1": [],
+    "2": [],
+    "3": [],
+    "4": [],
+    "5": []
+  }
+  
+  data.reverse().map(item => {
+    if ( item.time ) {
+      // axisData.push(dayjs(item.time.trim()).format('MM/DD'));
+      
+      tempObj[item.type].push({
+        ...item,
+        time: dayjs(item.time.trim()).format('MM/DD HH:mm'),
+        predictVal: item.predictVal?.toFixed(2),
+        realVal: item.realVal?.toFixed(2),
+      });
+
+    }
+  })
+  
+  echartData.value = tempObj;
+  xAxisData.value = axisData;
+
+  createEchart();
+}
+
+const handleRadioValue = (val) => {
+  radioValue.value = val;
+  createEchart();
+}
+
+const handlePageChange = (page) => {
+  pageNum.value = page;
+  initTableData();
+}
+
+const windowResize = () => echart.resize();
+
+onMounted(async () => {
+  
+  echart = echarts.init(echartRef.value, 'light');
+
+  initEchartData();
+  initTableData();
+
+  window.addEventListener("resize", windowResize);
+})
+
+onUnmounted(() => {
+  window.removeEventListener("resize", windowResize);
+  echart && echart.dispose();
+})
+
+</script>
+
+<template>
+  <section class="flex items-start h-full">
+    <TheChatView leftTitle="" :isChatSlot="false" :isFooter="false">
+      <template #control>
+        <div class="data-card">
+          <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"
+                v-model:formatted-value="timeRangeValue"
+              />
+            </div>
+          </div>
+          <div class="main">
+            <NScrollbar style="height: 100%;">
+              <div class="px-[16px]">
+                <div class="echart-box">
+                  <p class="font-bold">检测数据趋势图「小时」</p>
+
+                  <NRadioGroup class="w-[400px] py-[10px]" v-model:value="radioValue" :on-update:value="handleRadioValue">
+                    <n-radio v-for="item in radioData" :key="item.value" :value="item.value">
+                      {{ item.label }}
+                    </n-radio>
+                  </NRadioGroup>
+                  <!-- <ul>
+                    <li>
+                      <n-radio
+                        value="Definitely Maybe"
+                        name="basic-demo"
+                      >
+                        Definitely Maybe
+                      </n-radio>
+                    </li>
+                  </ul> -->
+                  <div id="echart" class="h-full w-full" ref="echartRef"></div>
+                </div>
+
+                <div class="table-box w-full pt-[30px]">
+                  <p class="font-bold">表格数据「小时」</p>
+                  <div class="w-full pt-[12px]">
+                    <n-data-table size="small" :columns="firstPlantColumns" :data="tableData" :bordered="false" layout="table" />
+                  </div>
+                  <div class="flex justify-center mt-[14px] mb-[10px]">
+                    <NPagination v-model:page="formData.pageNum" :item-count="pageCount" :on-update:page="handlePageChange"></NPagination>
+                  </div>
+                </div>
+              </div>
+            </NScrollbar>
+          </div>
+        </div>
+      </template>
+    </TheChatView>
+  </section>
+</template>
+
+<style lang="scss" scoped>
+.number-card {
+  display: flex;
+  flex-flow: column;
+  justify-content: space-between;
+  height: 168px;
+  padding: 22px 16px 16px 16px;
+  border-radius: 10px;
+  border-radius: 10px;
+  background: url('@/assets/images/xlht/bg-header.png') left top no-repeat;
+  background-size: cover;
+
+  .board-list {
+    @include flex (x, center, center);
+    height: 94px;
+
+    .board-item {
+      display: flex;
+      flex-flow: column;
+      justify-content: space-between;
+      width: 25%;
+      height: 100%;
+      padding: 20px 0 22px 20px;
+      border-radius: 4px;
+
+      .title {
+        font-size: 12px;
+        font-weight: bold;
+        color: #1A2029;
+      }
+
+      .content {
+        font-size: 12px;
+
+        .num-text {
+          font-size: 24px;
+          font-weight: bold;
+          font-family: D-DIN-PRO-700-Bold;
+        }
+
+        .unit {
+          font-size: 12px;
+          color: #86909C;
+        }
+
+        .blue-text {
+          font-size: 22px;
+          background: linear-gradient(92deg, #5ABBF2 12.24%, #2454FF 63.2%);
+          background-clip: text;
+          -webkit-background-clip: text;
+          -webkit-text-fill-color: transparent;
+        }
+      }
+    }
+
+    .board-item:nth-child(1) {
+      background: url('@/assets/images/xlht/bg-card-01.png') 50% / cover no-repeat;
+      background-size: 100% 100%;
+    }
+
+    .board-item:nth-child(2) {
+      background: url('@/assets/images/xlht/bg-card-02.png') no-repeat;
+      background-size: 100% 100%;
+    }
+
+    .board-item:nth-child(3) {
+      background: url('@/assets/images/xlht/bg-card-03.png') no-repeat;
+      background-size: 100% 100%;
+    }
+
+    .board-item:nth-child(4) {
+      background: url('@/assets/images/xlht/bg-card-04.png') no-repeat;
+      background-size: 100% 100%;
+    }
+  }
+}
+
+.data-card {
+  width: calc(100vw - 292px);
+  height: calc(100% - 10px);
+  margin-top: 12px;
+  border-radius: 10px;
+  background: #FFF;
+
+  .title {
+    font-size: 15px;
+    font-weight: bold;
+  }
+
+  .main {
+    height: calc(100% - 60px);
+  }
+
+  .echart-box {
+    #echart {
+      height: 300px;
+    }
+  }
+
+  .header-inner {
+    height: 60px;
+    padding: 16px;
+    @include flex(x, center, between);
+    color: #333;
+
+    .date-inner {
+      @include flex(x, center, center);
+    }
+  }
+
+  :deep(.n-input--stateful) {
+    background: #F2F3F5;
+  }
+}
+</style>
+
+<style lang="scss">
+.tabs {
+  .n-tabs-tab--active {
+    .n-tabs-tab__label {
+      color: #2454FF;
+    }
+  }
+
+  .n-tabs-tab__label {
+    font-size: 12px;
+    color: #333333;
+  }
+}
+</style>

src/views/xlht/config.js

@@ -1,4 +1,4 @@
-const formatTofixed = val => val != 0 && !val ? '' : val.toFixed(2);
+const formatTofixed = (val) => (val != 0 && !val ? "" : val.toFixed(2));
 
 export const columns = [
   {
@@ -11,53 +11,107 @@ export const columns = [
     title: "进水总流量",
     key: "scJsZll",
     width: 100,
-    render: ({ scJsZll }) => formatTofixed(scJsZll)
+    render: ({ scJsZll }) => formatTofixed(scJsZll),
   },
   {
     title: "进水COD",
     key: "scJsCod",
     width: 100,
-    render: ({ scJsCod }) => formatTofixed(scJsCod)
+    render: ({ scJsCod }) => formatTofixed(scJsCod),
   },
   {
-    title: "北池好氧硝酸盐",
+    title: "西池好氧硝酸盐",
     key: "jqr1HyXiaodan",
     width: 120,
-    render: ({ jqr1HyXiaodan }) => formatTofixed(jqr1HyXiaodan)
+    render: ({ jqr1HyXiaodan }) => formatTofixed(jqr1HyXiaodan),
   },
   {
-    title: "南池好氧硝酸盐",
+    title: "东池好氧硝酸盐",
     key: "jqr2HyXiaodan",
     width: 120,
-    render: ({ jqr2HyXiaodan }) => formatTofixed(jqr2HyXiaodan)
+    render: ({ jqr2HyXiaodan }) => formatTofixed(jqr2HyXiaodan),
   },
   {
-    title: "北池缺氧氨氮",
+    title: "西池缺氧氨氮",
     key: "jqr1QyAndan",
     width: 120,
-    render: ({ jqr1QyAndan }) => formatTofixed(jqr1QyAndan)
+    render: ({ jqr1QyAndan }) => formatTofixed(jqr1QyAndan),
   },
   {
-    title: "南池缺氧氨氮",
+    title: "东池缺氧氨氮",
     key: "jqr2QyAndan",
     width: 120,
-    render: ({ jqr2QyAndan }) => formatTofixed(jqr2QyAndan)
+    render: ({ jqr2QyAndan }) => formatTofixed(jqr2QyAndan),
   },
   {
-    title: "北池缺氧硝酸盐",
+    title: "西池缺氧硝酸盐",
     key: "jqr1QyXiaodan",
     width: 120,
-    render: ({ jqr1QyXiaodan }) => formatTofixed(jqr1QyXiaodan)
+    render: ({ jqr1QyXiaodan }) => formatTofixed(jqr1QyXiaodan),
   },
   {
-    title: "南池缺氧硝酸盐",
+    title: "东池缺氧硝酸盐",
     key: "jqr2QyXiaodan",
     width: 120,
-    render: ({ jqr2QyXiaodan }) => formatTofixed(jqr2QyXiaodan)
+    render: ({ jqr2QyXiaodan }) => formatTofixed(jqr2QyXiaodan),
   },
 ];
 
-export const getEchartLineOptions = ({ xAxisData, seriesData }) => {
+export const firstPlantColumns = [
+  {
+    title: "时间",
+    key: "time",
+    width: 100,
+    fixed: "left",
+  },
+  {
+    title: "预测类型",
+    key: "type",
+    width: 140,
+    render: ({ type }) => {
+      const map = {
+        0: "西池好氧硝酸盐",
+        1: "东池好氧硝酸盐",
+        2: "西池缺氧硝酸盐",
+        3: "东池缺氧硝酸盐",
+        4: "西池缺氧氨氮",
+        5: "东池缺氧氨氮",
+      };
+      return map[type];
+    },
+  },
+  {
+    title: "预测值",
+    key: "predictVal",
+    width: 100,
+    render: ({ predictVal }) => formatTofixed(predictVal),
+  },
+  {
+    title: "真实值",
+    key: "realVal",
+    width: 120,
+    render: ({ realVal }) => formatTofixed(realVal),
+  },
+  {
+    title: "差值",
+    key: "subtract",
+    width: 120,
+    render: ({ subtract }) => formatTofixed(subtract),
+  },
+  {
+    title: "误差率",
+    key: "errorRate",
+    width: 120,
+    render: ({ errorRate }) => errorRate,
+  },
+];
+
+export const getEchartLineOptions = ({
+  xAxisData,
+  seriesData,
+  isDataZoom,
+  legend,
+}) => {
   const colorList = [
     "#FF6737",
     "#00AB84",
@@ -91,13 +145,33 @@ export const getEchartLineOptions = ({ xAxisData, seriesData }) => {
     };
   });
 
+  const dataZoom = isDataZoom
+    ? {
+        dataZoom: [
+          {
+            bottom: 10,
+            height: 20,
+            show: true,
+            start: 0,
+            end: 100,
+            left: 100,
+            right: 100,
+            xAxisIndex: [0],
+          },
+        ],
+      }
+    : {};
+
   const option = {
     grid: {
       top: 80,
-      bottom: 50,
+      bottom: 60,
       left: 40,
       right: 30,
     },
+
+    ...dataZoom,
+
     tooltip: {
       trigger: "axis",
       // confine: true,
@@ -105,18 +179,18 @@ export const getEchartLineOptions = ({ xAxisData, seriesData }) => {
     },
     title: {
       show: !xAxisData.length,
-      text: '暂无数据',
-      x: 'center',
-      y: 'center',
+      text: "暂无数据",
+      x: "center",
+      y: "center",
       textStyle: {
         fontSize: 14,
-        fontWeight: 'normal',
-      }
+        fontWeight: "normal",
+      },
     },
     legend: [
       {
         show: !!xAxisData.length,
-        data: ["进水总氮", "北池好氧硝酸盐", "北池缺氧氨氮", "北池缺氧硝酸盐"],
+        data: legend[0],
         top: 10,
         left: 10,
         icon: "rect",
@@ -128,7 +202,7 @@ export const getEchartLineOptions = ({ xAxisData, seriesData }) => {
       },
       {
         show: !!xAxisData.length,
-        data: ["进水COD", "南池好氧硝酸盐", "南池缺氧氨氮", "南池缺氧硝酸盐"],
+        data: legend[1],
         top: 35,
         left: 10,
         icon: "rect",
@@ -187,7 +261,174 @@ export const getEchartLineOptions = ({ xAxisData, seriesData }) => {
         },
       },
     ],
-    series
+    series,
+  };
+  return option;
+};
+
+export const getEchartOptions = ({
+  xAxisData,
+  seriesData,
+  isDataZoom,
+  legend,
+}) => {
+  const colorList = [
+    "#0055f9",
+    "#00AB84",
+    "#85E822",
+    "#21CCFF",
+    "#FFE122",
+    "#313CA9",
+    "#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 dataZoom = isDataZoom
+    ? {
+        dataZoom: [
+          {
+            bottom: 10,
+            height: 20,
+            show: true,
+            start: 0,
+            end: 100,
+            left: 100,
+            right: 100,
+            xAxisIndex: [0],
+          },
+        ],
+      }
+    : {};
+
+  const option = {
+    grid: {
+      top: 40,
+      bottom: 60,
+      left: 40,
+      right: 40,
+    },
+
+    ...dataZoom,
+
+    legend: {
+      x: "right",
+      y: "top",
+      show: true,
+      // left: '94%',
+      // top: '16px',
+      itemWidth: 6,
+      // itemGap: 20,
+      textStyle: {
+        color: "#556677",
+      },
+    },
+
+    tooltip: {
+      trigger: "axis",
+      appendToBody: true,
+    },
+    title: {
+      show: !xAxisData.length,
+      text: "暂无数据",
+      x: "center",
+      y: "center",
+      textStyle: {
+        fontSize: 14,
+        fontWeight: "normal",
+      },
+    },
+    // legend: [
+    //   {
+    //     show: !!xAxisData.length,
+    //     data: legend[0],
+    //     top: 10,
+    //     left: 10,
+    //     icon: "rect",
+    //     itemWidth: 10,
+    //     itemHeight: 10,
+    //     textStyle: {
+    //       color: "rgba(0,0,0,0.65)",
+    //     },
+    //   },
+    //   {
+    //     show: !!xAxisData.length,
+    //     data: legend[1],
+    //     top: 35,
+    //     left: 10,
+    //     icon: "rect",
+    //     itemWidth: 10,
+    //     itemHeight: 10,
+    //     icon: "rect",
+    //     itemWidth: 10,
+    //     itemHeight: 10,
+    //     textStyle: {
+    //       color: "rgba(0,0,0,0.65)",
+    //     },
+    //   },
+    // ],
+    xAxis: [
+      {
+        type: "category",
+        data: xAxisData || [],
+        boundaryGap: false,
+        axisTick: {
+          show: false,
+        },
+        axisLine: {
+          lineStyle: {
+            color: "#DAE0E1",
+          },
+        },
+        axisLabel: {
+          align: "center",
+          color: "#828282",
+          margin: 10,
+        },
+      },
+    ],
+    yAxis: [
+      {
+        scale: false,
+        minInterval: 1,
+        backgroundColor: "#FFFFFF",
+        splitLine: {
+          lineStyle: {
+            color: ["#DAE0E1"],
+            shadowColor: "#DAE0E1",
+            shadowBlur: 1,
+            opacity: 1,
+            width: 1,
+            type: "dashed",
+          },
+        },
+        axisLine: {
+          show: false,
+        },
+        axisLabel: {
+          align: "center",
+          color: "#828282",
+          margin: 20,
+        },
+      },
+    ],
+    series,
   };
   return option;
 };