feat: 柱状图增加最大高度

package-lock.json

@@ -29,6 +29,7 @@
         "three": "^0.166.1",
         "vue": "^3.4.21",
         "vue-router": "^4.3.0",
+        "vue3-scroll-seamless": "^1.0.6",
         "vue3-seamless-scroll": "^2.0.1"
       },
       "devDependencies": {
@@ -8380,6 +8381,26 @@
         "node": ">=10"
       }
     },
+    "node_modules/vue3-scroll-seamless": {
+      "version": "1.0.6",
+      "resolved": "https://registry.npmmirror.com/vue3-scroll-seamless/-/vue3-scroll-seamless-1.0.6.tgz",
+      "integrity": "sha512-2vcnZ2HmEehV8bZGE3mK7b4XgiMqsf/1bIjV+OjDP+JsyShhUQaFdgGY4nBJt12mjL+A4f8ed9oLPNznVS816g==",
+      "dependencies": {
+        "typescript": "^4.8.4"
+      }
+    },
+    "node_modules/vue3-scroll-seamless/node_modules/typescript": {
+      "version": "4.9.5",
+      "resolved": "https://registry.npmmirror.com/typescript/-/typescript-4.9.5.tgz",
+      "integrity": "sha512-1FXk9E2Hm+QzZQ7z+McJiHL4NW1F2EzMu9Nq9i3zAaGqibafqYwCVU6WyWAuyQRRzOlxou8xZSyXLEN8oKj24g==",
+      "bin": {
+        "tsc": "bin/tsc",
+        "tsserver": "bin/tsserver"
+      },
+      "engines": {
+        "node": ">=4.2.0"
+      }
+    },
     "node_modules/vue3-seamless-scroll": {
       "version": "2.0.1",
       "resolved": "https://registry.npmmirror.com/vue3-seamless-scroll/-/vue3-seamless-scroll-2.0.1.tgz",

package.json

@@ -36,6 +36,7 @@
     "three": "^0.166.1",
     "vue": "^3.4.21",
     "vue-router": "^4.3.0",
+    "vue3-scroll-seamless": "^1.0.6",
     "vue3-seamless-scroll": "^2.0.1"
   },
   "devDependencies": {

src/views/carbon/components/BaseCard.vue

@@ -1,5 +1,4 @@
 <script setup>
-import { ref } from 'vue';
 defineProps({
   title: {
     type: String,

src/views/carbon/components/BaseStep.vue

@@ -4,7 +4,7 @@ import BaseCard from './BaseCard.vue';
 const stepsData = [
   { title: '基础信息', subTtile: '碳排放管理基础信息填写', color: '#2454FF' },
   { title: '污水处理', subTtile: '生化反应碳排', color: '#24CCFF' },
-  { title: '水厂', subTtile: '能源、药剂碳排', color: '#7969F9' },
+  { title: '能源药剂', subTtile: '能源、药剂碳排', color: '#7969F9' },
   { title: '污泥处理', subTtile: '生化反应总碳排', color: '#3FC56E' },
   { title: '替碳、碳汇', subTtile: '替碳、碳汇基础信息填写', color: '#F59B14' },
 ]

src/views/carbon/components/TheDrawerForm.vue

@@ -15,7 +15,7 @@ const emit = defineEmits(['on-submit']);
 const isVisibleDrawer = defineModel();
 const props = defineProps({
   allMonth: {
-    type: String,
+    type: Array,
     default: () => []
   }
 })
@@ -30,7 +30,6 @@ const inpConfig = ref(inputConfig);
 const spliceInpData = ref([]);
 
 const elementDatePicker = ref(null);
-const disabledMonth = ref(null);
 
 const formValue = ref({});
 const selectCodeSet = ref({});
@@ -293,7 +292,7 @@ const handleAddTableRow = (key) => {
   addTable(key, option);
 }
 
-// 格式化时间
+// 格式化数据
 const formatData = () => {
   const { provinceId, addYearMonth, wsSjclCh4Tsb, wsSjclCh4Csc } = unref(formValue);
   const provinceName = selectCodeSet.value.areaOptions.find(item => item.dictCode === provinceId)?.dictLabel;
@@ -326,8 +325,8 @@ const formatData = () => {
   return {
     ...formValue.value,
     ...tempObj,
-    wsSjclCh4Tsb: wsSjclCh4Tsb === 0 ? wsSjclCh4Tsb : null,
-    wsSjclCh4Csc: wsSjclCh4Csc === 0 ? wsSjclCh4Csc : null,
+    wsSjclCh4Tsb: switchCo2State.value === 0 ? wsSjclCh4Tsb : null,
+    wsSjclCh4Csc: switchCo2State.value === 0 ? wsSjclCh4Csc : null,
     addYearMonth: dayjs(addYearMonth).format('YYYY-MM'),
     provinceName,
     extraList
@@ -459,7 +458,7 @@ const onSubmit = (e) => {
       const params = formatData();
       await carbonApi.postCarbonSmart(params);
       onReset();
-      emit(['on-submit']);
+      emit('on-submit');
       message.success("提交成功");
     } else {
       message.error("提交失败, 请检查");
@@ -518,10 +517,6 @@ onMounted(async () => {
   getAllCodeSet();
 })
 
-onMounted(async () => {
-  const { data: month } = await carbonApi.getAllMonth();
-  disabledMonth.value = month;
-})
 </script>
 
 <template>

src/views/carbon/components/TheDrawerList.vue

@@ -5,8 +5,8 @@ import { BaseCard, BasePanel } from './index';
 
 const props = defineProps({
   data: {
-    type: Array,
-    default: () => []
+    type: Object,
+    default: () => ({})
   },
 });
 
@@ -83,7 +83,7 @@ const onAfterdEnter = () => {
 
 <template>
   <NDrawer :width="1220" placement="right" v-model:show="isVisibleDrawer" class="drawer-wrapper" :on-after-enter="onAfterdEnter" :close-on-esc="false" :mask-closable="false">
-    <n-drawer-content closable title="历史核算" header-class="drawer-header" body-content-class="drawer-body" footer-class="drawer-footer" :block-scroll="false">
+    <n-drawer-content closable title="申报信息" header-class="drawer-header" body-content-class="drawer-body" footer-class="drawer-footer" :block-scroll="false">
       <div class="main-container">
         <div class="header">
           <ul class="tab-list space-x-[4px]">
@@ -99,7 +99,7 @@ const onAfterdEnter = () => {
         <div class="content">
           <NScrollbar style="height: 100%" ref="scrollRef">
             <div class="main space-y-[12px]">
-              <BaseCard title="基础信息" sub-title="碳排放管理基础信息填写">
+              <BaseCard title="基础信息" sub-title="">
                 <ul class="list-info">
                   <li class="item space-x-[10px]">
                     <span class="label">省/直辖市</span>
@@ -112,7 +112,7 @@ const onAfterdEnter = () => {
                 </ul>
               </BaseCard>
 
-              <BaseCard title="污水处理" sub-title="生化反应碳排">
+              <BaseCard title="污水处理" sub-title="">
                 <BasePanel isNoPadding title="石源碳矿化产生的碳排放量">
                   <ul class="list-info">
                     <li class="item space-x-[10px]">
@@ -145,24 +145,10 @@ const onAfterdEnter = () => {
                     </li>
                     <li class="item space-x-[10px]">
                       <span class="label">外加碳源的化石源CO₂排放量</span>
-                      <span class="value blue">{{ val }} (t CO₂-eq/月)</span>
+                      <span class="value blue">{{ item.val }} (t CO₂-eq/月)</span>
                     </li>
                   </ul>
                   <!-- <div class="line"></div> -->
-                  <ul class="list-info">
-                    <li class="item space-x-[10px]">
-                      <span class="label">碳源名称</span>
-                      <span class="value bold">葡萄糖</span>
-                    </li>
-                    <li class="item space-x-[10px]">
-                      <span class="label">外加碳源用量</span>
-                      <span class="value">200 (Kg/月)</span>
-                    </li>
-                    <li class="item space-x-[10px]">
-                      <span class="label">外加碳源的化石源CO₂排放量</span>
-                      <span class="value blue">100 (t CO₂-eq/月)</span>
-                    </li>
-                  </ul>
                 </BasePanel>
                 <BasePanel isNoPadding title="污水收集提升和处理阶段排放的CH₄的CO₂当量">
                   <ul class="list-info">
@@ -227,7 +213,7 @@ const onAfterdEnter = () => {
                 </BasePanel>
               </BaseCard>
 
-              <BaseCard title="能源、药剂碳排" sub-title="生化反应碳排">
+              <BaseCard title="能源、药剂碳排" sub-title="">
                 <BasePanel isNoPadding title="污水厂电力消耗产生的碳排放量">
                   <ul class="list-info">
                     <li class="item space-x-[10px]">
@@ -314,10 +300,10 @@ const onAfterdEnter = () => {
                       <span class="label">对应焓值</span>
                       <span class="value">{{data.nyyjGrrlDyhz}} (KJ/Kg)</span>
                     </li>
-                    <li class="item space-x-[10px]">
+                    <!-- <li class="item space-x-[10px]">
                       <span class="label">热力</span>
                       <span class="value">{{ data.nyyjGrrlRl }} (GJ/月)</span>
-                    </li>
+                    </li> -->
                     <li class="item space-x-[10px]">
                       <span class="label">燃料消耗产生的碳排放量</span>
                       <span class="value blue">{{ data.nyyjGrrlCo2 }} (t CO₂-eq/月)</span>
@@ -358,7 +344,7 @@ const onAfterdEnter = () => {
                 </BasePanel>
               </BaseCard>
 
-              <BaseCard title="污泥处理" sub-title="生化反应碳排">
+              <BaseCard title="污泥处理" sub-title="">
                 <BasePanel isNoPadding title="污泥厌氧消化沼气收集管路无意泄露的CH₄或沼气火炬燃烧不充分导致的碳排放">
                   <ul class="list-info">
                     <li class="item space-x-[10px]">
@@ -497,7 +483,7 @@ const onAfterdEnter = () => {
                 </BasePanel>
               </BaseCard>
 
-              <BaseCard title="替碳、碳汇" sub-title="111111">
+              <BaseCard title="替碳、碳汇" sub-title="">
                 <BasePanel isNoPadding title="热泵技术-替碳量">
                   <ul class="list-info" v-for="item, index in list.carbonOneList" :key="index">
                     <li class="item space-x-[10px]">

src/views/carbon/components/TheModalTable.vue

@@ -70,7 +70,8 @@ const formatTime = (timestamp) => {
 
 const handleQueryList = async() => {
   const [ timeBegin, timeEnd ] = formatTime(timeArr.value);
-  const [ hsTimeBegin, hsTimeEnd ] = formatTime(timeArr.value);
+  const [ hsTimeBegin, hsTimeEnd ] = formatTime(hsTimeArr.value);
+  console.log( hsTimeArr.value );
 
   const { rows, total: allTotal } = await carbonApi.getTableList({ ...formData.value, timeBegin, timeEnd, hsTimeBegin, hsTimeEnd })
 
@@ -103,7 +104,7 @@ const onAfterLeave = () => {
     v-model:show="modelValue"
     preset="card"
     class="custom-card"
-    title="历史核算"
+    title="核算历史"
     header-class="card-preset_header"
     content-class="card-prset_content"
     :style="{ width: '1240px' }"
@@ -125,7 +126,7 @@ const onAfterLeave = () => {
               <n-date-picker v-model:value="timeArr" type="daterange" clearable :theme-overrides="selectThmem"/>
             </NFormItemGi>
             <NFormItemGi :span="4" label="核算日期：" path="adress" label-placement="top">
-              <n-date-picker v-model:value="hsTimeArr" type="daterange" clearable :theme-overrides="selectThmem"/>
+              <n-date-picker v-model:value="hsTimeArr" type="monthrange" clearable :theme-overrides="selectThmem" value-format="yyyy-mm"/>
             </NFormItemGi>
             <NFormItemGi :span="2" label="" path="adress" label-placement="top">
               <div class="space-x-[10px]">

src/views/carbon/components/screen/DataBorad.vue

@@ -84,7 +84,7 @@ const boardList = ref([
           <span v-else>{{ item.desc }}</span>
         </p>
         <p :class="['info', 'space-x-[5px]', { down: data[item.hbKey] < 0 }]" v-if="index !== 1">
-          <span class="num">{{ data[item.hbKey] ?? '-'}} %</span>
+          <span class="num">{{ data[item.hbKey ]}} %</span>
           <span class="icon" v-if="data[item.hbKey]"></span>
         </p>
       </div>

src/views/carbon/components/screen/DataScroll.vue

@@ -1,5 +1,9 @@
 <script setup>
-import { Vue3SeamlessScroll } from 'vue3-seamless-scroll'
+import { ref, watch } from 'vue';
+import { vue3ScrollSeamless } from 'vue3-scroll-seamless';
+
+import { Vue3SeamlessScroll } from 'vue3-seamless-scroll';
+
 import LayoutCard from './LayoutCard.vue'
 
 const props = defineProps({
@@ -9,6 +13,14 @@ const props = defineProps({
   }
 })
 
+const seamlessScroll = ref(null);
+
+watch(() => props.data, (newVal) => {
+  console.log("发生了变化");
+  console.log(seamlessScroll.value);
+  // seamlessScroll.value?.reset()
+});
+
 </script>
 
 <template>
@@ -19,12 +31,32 @@ const props = defineProps({
         <li>碳排放</li>
       </ul>
       <div class="main">
-        <vue3-seamless-scroll :dataList="data" :singleHeight="40" :singleWaitTime="3000"  class="scroll" hover :limitMoveNum="7">
+        <vue3SeamlessScroll 
+          :list="data"
+          :limitScrollNum="7"
+          :singleHeight="40"
+          :singleWaitTime="3000"
+          hover
+          class="scroll"
+        >
+          <ul class="item" v-for="(item, index) in data" :key="index">
+            <li>{{ item.label }}（t CO₂-eq/月）</li>
+            <li>{{ item.value }}</li>
+          </ul>
+        </vue3SeamlessScroll>
+
+        <!-- <vue3ScrollSeamless
+          :dataList="data"
+          :data="data"
+          :classOptions="{singleHeight: 40, waitTime: 3000, limitMoveNum: 10}"
+          ref="seamlessScroll"
+          class="scroll"
+          >
           <ul class="item" v-for="(item, index) in data" :key="index">
             <li>{{ item.label }}（t CO₂-eq/月）</li>
             <li>{{ item.value }}</li>
           </ul>
-        </vue3-seamless-scroll>
+        </vue3ScrollSeamless> -->
       </div>
     </div>
   </LayoutCard>
@@ -60,7 +92,7 @@ const props = defineProps({
   .main {
     width: 100%;
     height: calc(100% - 40px);
-    height: 240px;
+    // height: 240px;
     overflow: hidden;
 
     .scroll {

src/views/carbon/index.vue

@@ -108,17 +108,13 @@ const initEchart = () => {
     nyyjDlxhZhdlCo = 0,  wscljdyjxhCo = 0, gdsnyrlCo2 = 0, nyyjGrrlCo = 0
   } = historyDetails.value;
 
-  echartMonth = echarts.init(echartMonthRef.value, 'light');
-  echartSewage = echarts.init(echartSewageRef.value, 'light');
-  echartEnergy = echarts.init(echartEnergyRef.value, 'light');
-  echartMdu = echarts.init(echartMudRef.value, 'light');
-
   // 近7月碳排放趋势
   echartMonth.setOption(echartLineOptions(recent7Datas));
 
   // 污水处理生化反应
   echartSewage.setOption(echartGraphOptions([wsTdN2oCo2, wsSjclCh4Co2, wjtykuCo2, wsHsytkhCo2]));
 
+  // echartEnergy.dispose();
   // 能源、药剂
   echartEnergy.setOption(echart3DOptions([nyyjDlxhZhdlCo,  wscljdyjxhCo, gdsnyrlCo2, nyyjGrrlCo]));
 
@@ -160,6 +156,11 @@ const initPageData = async () => {
 
   historyDetails.value = data;
 
+  echartMonth = echarts.init(echartMonthRef.value, 'light');
+  echartSewage = echarts.init(echartSewageRef.value, 'light');
+  echartEnergy = echarts.init(echartEnergyRef.value, 'light');
+  echartMdu = echarts.init(echartMudRef.value, 'light');
+
   initEchart();
 }
 
@@ -169,9 +170,17 @@ const handleSelectChecked = (time) => {
   initPageData();
 }
 
-const onSubmit = () => {
+const onSubmit = async () => {
   isVisibleDrawerForm.value = false;
-  initAllMonth();
+  if ( !allMonth.value.length ) {
+    const [ firstMonth ] = await initAllMonth();
+    inpVal.value = firstMonth;
+
+    initPageData();
+  } else {
+    initAllMonth();
+    initPageData();
+  }
 }
 
 const windowResize = () => {
@@ -191,6 +200,10 @@ onMounted(async () => {
     resize: true
   })
 
+  if ( !firstMonth ) {
+    return message.warning("当前未查询到对应的数据，请新增核算");
+  }
+
   inpVal.value = firstMonth;
 
   initPageData();
@@ -258,8 +271,8 @@ onUnmounted(() => {
     </main>
     <ul class="footer">
       <li><img src="@/assets/images/carbon/bg-btn-1.png" alt="下载报告" class="img" @click="handleType('down')"></li>
-      <li><img src="@/assets/images/carbon/bg-btn-2.png" alt="申报信息" class="img" @click="handleType('info')"></li>
-      <li><img src="@/assets/images/carbon/bg-btn-3.png" alt="核算历史" class="img" @click="handleType('list')"></li>
+      <li><img src="@/assets/images/carbon/bg-btn-2.png" alt="申报信息" class="img" @click="handleType('list')"></li>
+      <li><img src="@/assets/images/carbon/bg-btn-3.png" alt="核算历史" class="img" @click="handleType('info')"></li>
       <li><img src="@/assets/images/carbon/bg-btn-4.png" alt="新增核算" class="img" @click="handleType('add')"></li>
     </ul>
   </div>