feat: 每日工单修改

src/views/analyse/WorkOrder.vue

@@ -1,14 +1,21 @@
 <script setup>
 import { ref, unref, computed, onUnmounted } from 'vue';
-import { useMessage, NDatePicker } from 'naive-ui';
+import { useMessage, NDatePicker, NTabs, NTab, NRadioGroup, NRadio, NCheckboxGroup, NCheckbox } from 'naive-ui';
 import { BaseButton, RecodeCardItem, TheSubMenu, TheChatView, ChatWelcome, SvgIcon } from '@/components';
 import { ChatAsk, ChatAnswer } from '@/components/Chat';
 import { chatApi } from '@/api/chat';
+import dayjs from 'dayjs';
+import isSameOrBefore from 'dayjs/plugin/isSameOrBefore';
+import isSameOrAfter from 'dayjs/plugin/isSameOrAfter';
+
 
 import {useInfinite, useScroll, useChat, useRecommend} from '@/composables';
 
 const ANSWER_ID_KEY = '@@id@@';
 
+dayjs.extend(isSameOrBefore)
+dayjs.extend(isSameOrAfter)
+
 let controller = new AbortController();
 
 const { recordList, isFetching, onScrolltolower, onReset, addHistoryRecord } = useInfinite('/front/bigModel/qa/pageList', { module: 1 });
@@ -17,7 +24,11 @@ const { chatDataSource, addChat, updateChat, clearChat, updateById } = useChat()
 
 const message = useMessage();
 const reportDate = ref();
+const startDate = ref();
+const endDate = ref();
 const switchActive = ref(false);
+const tabActive = ref("daily");
+const model = ref({})
 
 const isLoading = ref(false);
 const inputRef = ref(null);
@@ -145,6 +156,18 @@ const handleSubmit = async (question, realQuestion = '') => {
 // 处理推荐问题
 const handleCreateOrder = () => {
   
+  if ( tabActive.value === 'customDaily' ) {
+    const startDateTime = dayjs(startDate.value);
+    const endDateTime = dayjs(endDate.value);
+    const thirtyDaysBeforeEndTime = endDateTime.subtract(30, 'day');
+    const isStartAfterThirtyDaysBeforeEnd = startDateTime.isSameOrAfter(thirtyDaysBeforeEndTime);
+    if (!isStartAfterThirtyDaysBeforeEnd) {
+      alert("错误的")
+    } else {
+      alert("可以的")
+    }
+  }
+  return
   if ( !reportDate.value ) {
     return message.warning('请选择日期');
   }
@@ -160,6 +183,27 @@ const handeChatDelete = async (id) => {
   message.success('删除成功');
 }
 
+const handleTabChange = (val) => {
+  tabActive.value = val;
+}
+
+const dateStartDisabled = (timestamp) => {
+  if (endDate.value) {
+    const currentDate = dayjs(timestamp);
+    const endDateValue = dayjs(endDate.value);
+    return !currentDate.isSameOrBefore(endDateValue);
+  }
+  
+}
+
+const dateEndDisabled = (timestamp) => {
+  if (startDate.value) {
+    const currentDate = dayjs(timestamp);
+    const endDateValue = dayjs(startDate.value);
+    return !currentDate.isSameOrAfter(endDateValue);
+  }
+
+}
 onUnmounted(() => {
   controller.abort();
 })
@@ -214,12 +258,17 @@ onUnmounted(() => {
       </div>
 
       <div class="order-container px-[60px] py-[30px] mt-[36px] rounded-[10px] bg-[#fff]" v-if="!chatDataSource.length">
-        <div class="flex items-end justify-start space-x-[16px] pb-[20px] border-b-[1px] border-solid border-[#F1F1F1]">
-          <span class="text-[20px] leading-[28px] font-bold">智慧工单报告</span>
-          <span class="text-[12px] text-[#8F959C]">选择日期后为您生成日报工单</span>
+        <div class="flex items-center justify-start space-x-[24px] pb-[20px] border-b-[1px] border-solid border-[#F1F1F1]">
+          <n-tabs type="segment" animated style="width: 188px;" size="large" :on-update:value="handleTabChange">
+            <n-tab name="daily">日报工单</n-tab>
+            <n-tab name="customDaily">自定义工单</n-tab>
+          </n-tabs>
+          <span class="text-[12px] text-[#8F959C]">
+            {{ tabActive === 'daily' ? '选择日期后为您生成日报工单' : '选择内容后为您生成工单' }}
+          </span>
         </div>
 
-        <main class="order pt-[20px] text-[#1A2029]">
+        <main class="order pt-[20px] text-[#1A2029]" v-show="tabActive === 'daily'">
           <div class="flex items-center justify-start text-[16px] space-x-[16px]">
             <span class="font-bold">选择时间</span>
             <div class="w-[164px] border-[1px] border-[#EFEFF0] rounded-[8px] overflow-hidden">
@@ -231,7 +280,7 @@ onUnmounted(() => {
             </div>
           </div>
 
-          <dl class="pt-[26px] text-[#1A2029] space-y-[16px]">
+          <dl class="pt-[20px] text-[#1A2029] space-y-[16px]">
             <dt class="text-[16px] font-bold leading-[22px]">报告内容</dt>
             <dd>1、水质数据、生化数据情况</dd>
             <dd>2、各项指标数据分析</dd>
@@ -239,6 +288,81 @@ onUnmounted(() => {
           </dl>
         </main>
 
+        <main class="order pt-[20px] text-[#1A2029]" v-show="tabActive === 'customDaily'">
+          <div class="flex items-center justify-start mb-[20px] text-[16px] space-x-[16px]">
+            <span class="font-bold">选择时间</span>
+            <div class="w-[164px] border-[1px] border-[#EFEFF0] rounded-[8px] overflow-hidden">
+              <NDatePicker placeholder="开始日期" :readonly="true" v-model:formatted-value="startDate" value-format="yyyy-MM-dd" :is-date-disabled="dateStartDisabled">
+                <template #date-icon>
+                  <SvgIcon name="tool-arrow-bottom"></SvgIcon>
+                </template>
+              </NDatePicker>
+            </div>
+            <span class="text-[16px] text-[#8F959C]">至</span>
+            <div class="w-[164px] border-[1px] border-[#EFEFF0] rounded-[8px] overflow-hidden">
+              <NDatePicker placeholder="结束日期" :readonly="true" v-model:formatted-value="endDate" value-format="yyyy-MM-dd" :is-date-disabled="dateEndDisabled">
+                <template #date-icon>
+                  <SvgIcon name="tool-arrow-bottom"></SvgIcon>
+                </template>
+              </NDatePicker>
+            </div>
+          </div>
+
+          <div class="flex items-center justify-start mb-[20px] text-[16px] space-x-[16px]">
+            <span class="font-bold">统计方式</span>
+            <n-radio-group v-model:value="model.radioGroupValue" name="radiogroup2">
+              <n-radio value="Radio 1">在线仪表</n-radio>
+              <n-radio value="Radio 2">日报</n-radio>
+            </n-radio-group>
+          </div>
+
+          <div class="flex items-center justify-start mb-[20px] text-[16px] space-x-[16px]">
+            <span class="font-bold">进水指标</span>
+            <n-checkbox-group v-model:value="model.radioGroupValue" name="radiogroup2">
+              <n-checkbox value="Radio 1">进水水量</n-checkbox>
+              <n-checkbox value="Radio 2">COD</n-checkbox>
+              <n-checkbox value="Radio 2">总氮</n-checkbox>
+              <n-checkbox value="Radio 2">总磷</n-checkbox>
+              <n-checkbox value="Radio 2">氨氮</n-checkbox>
+              <n-checkbox value="Radio 2">SS</n-checkbox>
+            </n-checkbox-group>
+          </div>
+          
+          <div class="flex items-center justify-start mb-[20px] text-[16px] space-x-[16px]">
+            <span class="font-bold">出水指标</span>
+            <n-checkbox-group v-model:value="model.radioGroupValue" name="radiogroup2">
+              <n-checkbox value="Radio 1">出水水量</n-checkbox>
+              <n-checkbox value="Radio 2">COD</n-checkbox>
+              <n-checkbox value="Radio 2">总氮</n-checkbox>
+              <n-checkbox value="Radio 2">总磷</n-checkbox>
+              <n-checkbox value="Radio 2">氨氮</n-checkbox>
+              <n-checkbox value="Radio 2">SS</n-checkbox>
+            </n-checkbox-group>
+          </div>
+
+          <div class="flex items-start justify-start mb-[20px] text-[16px] space-x-[16px]">
+            <span class="font-bold">化验指标</span>
+            <div class="w-[500px]">
+              <n-checkbox-group v-model:value="model.radioGroupValue" name="radiogroup2">
+              <n-checkbox value="Radio 1">1#好氧池硝酸盐</n-checkbox>
+              <n-checkbox value="Radio 2">2#好氧池硝酸盐</n-checkbox>
+              <n-checkbox value="Radio 2">1#缺氧氨氮</n-checkbox>
+              <n-checkbox value="Radio 2">2#缺氧氨氮</n-checkbox>
+              <n-checkbox value="Radio 2">1#缺氧池硝酸盐</n-checkbox>
+              <n-checkbox value="Radio 2">2#缺氧池硝酸盐</n-checkbox>
+              <n-checkbox value="Radio 2">二沉池正磷酸盐</n-checkbox>
+            </n-checkbox-group>
+            </div>
+          </div>
+
+          <dl class="text-[#1A2029] space-y-[16px]">
+            <dt class="text-[16px] font-bold leading-[22px]">报告内容</dt>
+            <dd>1、数据情况</dd>
+            <dd>2、各项指标数据分析及措施与建议</dd>
+          </dl>
+        </main>
+
+
         <footer class="pt-[24px]">
           <button class="btn-primary" @click="handleCreateOrder">立即生成</button>
         </footer>
@@ -296,4 +420,17 @@ onUnmounted(() => {
     font-size: 14px;
   }
 }
+
+.order-container {
+  .n-tabs-tab__label {
+    font-size: 14px !important;
+    font-weight: bold;
+    color: #5E5E5E;
+  }
+  .n-tabs-tab--active {
+    .n-tabs-tab__label {
+      color: #1A2029;
+    }
+  }
+}
 </style>