修改时间报错 并调整样式

src/components/form/datePicker/index.vue

@@ -1,5 +1,5 @@
 <template>
-    <el-select v-model="interval" style="width: 90px; margin-right: 10px" @change="timeChange">
+    <el-select v-model="interval" style="min-width: 90px;width: 90px; margin-right: 10px" @change="timeChange">
         <el-option v-for="item in timeOptions" :key="item.value" :label="item.label" :value="item.value" />
     </el-select>
     <el-date-picker

src/views/pms/Event-boot/Region/components/Tableabove.vue

@@ -1,7 +1,7 @@
 <template>
     <div>
         <span style="font-size: 14px; font-weight: bold">
-            统计区域: 中国 &ensp; 统计时间: 2023-12-01-2023-12-27 &ensp; 统计次数: {{ frequency + '次' }}
+            统计区域: 中国 &ensp; 统计时间: {{ Time[0] + '至' + Time[1] }} &ensp; 统计次数: {{ frequency + '次' }}
         </span>
         <el-tabs tab-position="left" class="demo-tabs" style="margin-top: 10px">
             <el-tab-pane label="区域">
@@ -50,6 +50,7 @@ import { mainHeight } from '@/utils/layout'
 const areaData: any = ref([])
 const levelData: any = ref([])
 const shareData: any = ref([])
+const Time: any = ref([])
 
 const tableHeaderAera = ref<any[]>([
     { prop: 'areaName', label: '区域名称', width: '120px' },
@@ -65,7 +66,8 @@ const tableHeaderLevel = ref<any[]>([
 
 const frequency = ref<number>(875)
 
-const info = (list: any) => {
+const info = (list: any, searchBeginTime: any, searchEndTime: any) => {
+    Time.value = [searchBeginTime, searchEndTime]
     frequency.value = list.areaStatistics.frequencySum
     areaData.value = [
         {
@@ -86,6 +88,7 @@ const info = (list: any) => {
         ...list.voltageStatistics.voltageLevelCalculation
     ]
     let all = 0
+
     list.monthlyStatistics.monthCalculation.forEach((item: any) => {
         all += item.linked + item.notAssociated
     })

src/views/pms/Event-boot/Region/overview.vue

@@ -1,11 +1,9 @@
 <template>
     <div class="default-main">
-        <TableHeader date-picker area>
-           
-        </TableHeader>
+        <TableHeader date-picker area></TableHeader>
         <el-tabs v-model="activeName" type="border-card" v-loading="tableStore.table.loading">
             <el-tab-pane label="图形" name="1">
-                <Echart :list="list" ref="echarts" />
+                <Echart ref="echarts" />
             </el-tab-pane>
             <el-tab-pane label="表格" name="2"><Tableabove ref="table" /></el-tab-pane>
         </el-tabs>
@@ -14,7 +12,6 @@
 
 <script setup lang="ts">
 import TableHeader from '@/components/table/header/index.vue'
-import Area from '@/components/form/area/index.vue'
 import { useDictData } from '@/stores/dictData'
 import Echart from './components/echart.vue'
 import Tableabove from './components/Tableabove.vue'
@@ -25,7 +22,6 @@ defineOptions({
     name: 'Region/overview'
 })
 const activeName = ref('1')
-const list = ref([])
 const echarts = ref()
 const Picker = ref()
 const table = ref()
@@ -36,16 +32,15 @@ const tableStore = new TableStore({
     method: 'POST',
     column: [],
     loadCallback: () => {
-        list.value = tableStore.table.data
+        table.value.info(tableStore.table.data,tableStore.table.params.searchBeginTime,tableStore.table.params.searchEndTime)
         echarts.value.Processing(tableStore.table.data.areaStatistics)
         echarts.value.Grade(tableStore.table.data.voltageStatistics)
-        echarts.value.Relation(tableStore.table.data.monthlyStatistics)
-        table.value.info(tableStore.table.data)
+        echarts.value.Relation(JSON.parse(JSON.stringify(tableStore.table.data.monthlyStatistics)))
+
     }
 })
 provide('tableStore', tableStore)
 
-
 tableStore.table.params.statisticalType = dictData.getBasicData('Statistical_Type', ['Load_Type'])[3]
 tableStore.table.params.monitorFlag = 2
 tableStore.table.params.powerFlag = 2