🐞 fix(日报汇总): 不现实问题

src/views/pms/iotrhdailyreport/summary.vue

@@ -240,11 +240,21 @@ const getChart = useDebounceFn(async () => {
   }
 }, 1000)
 
+const resizer = () => {
+  chart?.resize()
+}
+
+onUnmounted(() => {
+  window.removeEventListener('resize', resizer)
+})
+
 const render = () => {
   if (!chartRef.value) return
 
   chart = echarts.init(chartRef.value, undefined, { renderer: 'canvas' })
 
+  window.addEventListener('resize', resizer)
+
   const values: number[] = []
 
   for (const [_name, key] of legend.value) {
@@ -524,70 +534,64 @@ const tolist = (id: number) => {
           <h3 class="text-xl font-medium">{{ `${deptName}-${tab}` }}</h3>
           <el-button size="default" type="primary" @click="exportAll">导出</el-button>
         </div>
-        <el-auto-resizer>
-          <template #default="{ height, width }">
+        <!-- <el-auto-resizer>
+          <template #default="{ height, width }"> -->
+        <Motion
+          as="div"
+          :style="{ position: 'relative', overflow: 'hidden' }"
+          :animate="{ height: `${500}px`, width: `100%` }"
+          :transition="{ type: 'spring', stiffness: 200, damping: 25, duration: 0.3 }"
+        >
+          <AnimatePresence :initial="false" mode="sync">
             <Motion
+              :key="currentTab"
               as="div"
-              :style="{ position: 'relative', overflow: 'hidden' }"
-              :animate="{ height: `${height}px`, width: `${width}px` }"
-              :transition="{ type: 'spring', stiffness: 200, damping: 25, duration: 0.3 }"
+              :initial="{ x: direction === 'left' ? '-100%' : '100%', opacity: 0 }"
+              :animate="{ x: '0%', opacity: 1 }"
+              :exit="{ x: direction === 'left' ? '50%' : '-50%', opacity: 0 }"
+              :transition="{ type: 'tween', stiffness: 300, damping: 30, duration: 0.3 }"
+              :style="{ position: 'absolute', left: 0, right: 0, top: 0 }"
             >
-              <AnimatePresence :initial="false" mode="sync">
-                <Motion
-                  :key="currentTab"
-                  as="div"
-                  :initial="{ x: direction === 'left' ? '-100%' : '100%', opacity: 0 }"
-                  :animate="{ x: '0%', opacity: 1 }"
-                  :exit="{ x: direction === 'left' ? '50%' : '-50%', opacity: 0 }"
-                  :transition="{ type: 'tween', stiffness: 300, damping: 30, duration: 0.3 }"
-                  :style="{ position: 'absolute', left: 0, right: 0, top: 0 }"
+              <div :style="{ width: `100%`, height: `${500}px` }">
+                <el-table
+                  v-if="currentTab === '表格'"
+                  v-loading="listLoading"
+                  :data="list"
+                  :stripe="true"
+                  :max-height="500"
+                  show-overflow-tooltip
                 >
-                  <div :style="{ width: `${width}px`, height: `${height}px` }">
-                    <el-table
-                      v-if="currentTab === '表格'"
-                      v-loading="listLoading"
-                      :data="list"
-                      :stripe="true"
-                      :width="width"
-                      :max-height="height"
-                      show-overflow-tooltip
-                    >
-                      <template v-for="item in columns(type)" :key="item.prop">
-                        <el-table-column
-                          v-if="item.prop !== 'name'"
-                          :label="item.label"
-                          :prop="item.prop"
-                          align="center"
-                          :formatter="formatter"
-                        />
-                        <el-table-column
-                          v-else
-                          :label="item.label"
-                          :prop="item.prop"
-                          align="center"
-                        >
-                          <template #default="{ row }">
-                            <el-button text type="primary" @click.prevent="tolist(row.id)">{{
-                              row.name
-                            }}</el-button>
-                          </template>
-                        </el-table-column>
+                  <template v-for="item in columns(type)" :key="item.prop">
+                    <el-table-column
+                      v-if="item.prop !== 'name'"
+                      :label="item.label"
+                      :prop="item.prop"
+                      align="center"
+                      :formatter="formatter"
+                    />
+                    <el-table-column v-else :label="item.label" :prop="item.prop" align="center">
+                      <template #default="{ row }">
+                        <el-button text type="primary" @click.prevent="tolist(row.id)">{{
+                          row.name
+                        }}</el-button>
                       </template>
-                    </el-table>
-                    <div
-                      ref="chartRef"
-                      v-loading="chartLoading"
-                      :key="dayjs().valueOf()"
-                      v-else
-                      :style="{ width: `${width}px`, height: `${height}px` }"
-                    >
-                    </div>
-                  </div>
-                </Motion>
-              </AnimatePresence>
+                    </el-table-column>
+                  </template>
+                </el-table>
+                <div
+                  ref="chartRef"
+                  v-loading="chartLoading"
+                  :key="dayjs().valueOf()"
+                  v-else
+                  :style="{ width: `100%`, height: `${500}px` }"
+                >
+                </div>
+              </div>
             </Motion>
-          </template>
-        </el-auto-resizer>
+          </AnimatePresence>
+        </Motion>
+        <!-- </template>
+        </el-auto-resizer> -->
       </div>
     </div>
   </div>

src/views/pms/iotrydailyreport/summary.vue

@@ -224,11 +224,21 @@ const getChart = useDebounceFn(async () => {
   }
 }, 1000)
 
+const resizer = () => {
+  chart?.resize()
+}
+
+onUnmounted(() => {
+  window.removeEventListener('resize', resizer)
+})
+
 const render = () => {
   if (!chartRef.value) return
 
   chart = echarts.init(chartRef.value, undefined, { renderer: 'canvas' })
 
+  window.addEventListener('resize', resizer)
+
   const values: number[] = []
 
   for (const [_name, key] of legend.value) {
@@ -506,70 +516,64 @@ const tolist = (id: number) => {
           <h3 class="text-xl font-medium">{{ `${deptName}-${tab}` }}</h3>
           <el-button size="default" type="primary" @click="exportAll">导出</el-button>
         </div>
-        <el-auto-resizer>
-          <template #default="{ height, width }">
+        <!-- <el-auto-resizer>
+          <template #default="{ height, width }"> -->
+        <Motion
+          as="div"
+          :style="{ position: 'relative', overflow: 'hidden' }"
+          :animate="{ height: `${500}px`, width: `100%` }"
+          :transition="{ type: 'spring', stiffness: 200, damping: 25, duration: 0.3 }"
+        >
+          <AnimatePresence :initial="false" mode="sync">
             <Motion
+              :key="currentTab"
               as="div"
-              :style="{ position: 'relative', overflow: 'hidden' }"
-              :animate="{ height: `${height}px`, width: `${width}px` }"
-              :transition="{ type: 'spring', stiffness: 200, damping: 25, duration: 0.3 }"
+              :initial="{ x: direction === 'left' ? '-100%' : '100%', opacity: 0 }"
+              :animate="{ x: '0%', opacity: 1 }"
+              :exit="{ x: direction === 'left' ? '50%' : '-50%', opacity: 0 }"
+              :transition="{ type: 'tween', stiffness: 300, damping: 30, duration: 0.3 }"
+              :style="{ position: 'absolute', left: 0, right: 0, top: 0 }"
             >
-              <AnimatePresence :initial="false" mode="sync">
-                <Motion
-                  :key="currentTab"
-                  as="div"
-                  :initial="{ x: direction === 'left' ? '-100%' : '100%', opacity: 0 }"
-                  :animate="{ x: '0%', opacity: 1 }"
-                  :exit="{ x: direction === 'left' ? '50%' : '-50%', opacity: 0 }"
-                  :transition="{ type: 'tween', stiffness: 300, damping: 30, duration: 0.3 }"
-                  :style="{ position: 'absolute', left: 0, right: 0, top: 0 }"
+              <div :style="{ width: `100%`, height: `${500}px` }">
+                <el-table
+                  v-if="currentTab === '表格'"
+                  v-loading="listLoading"
+                  :data="list"
+                  :stripe="true"
+                  :max-height="500"
+                  show-overflow-tooltip
                 >
-                  <div :style="{ width: `${width}px`, height: `${height}px` }">
-                    <el-table
-                      v-if="currentTab === '表格'"
-                      v-loading="listLoading"
-                      :data="list"
-                      :stripe="true"
-                      :width="width"
-                      :max-height="height"
-                      show-overflow-tooltip
-                    >
-                      <template v-for="item in columns(type)" :key="item.prop">
-                        <el-table-column
-                          v-if="item.prop !== 'name'"
-                          :label="item.label"
-                          :prop="item.prop"
-                          align="center"
-                          :formatter="formatter"
-                        />
-                        <el-table-column
-                          v-else
-                          :label="item.label"
-                          :prop="item.prop"
-                          align="center"
-                        >
-                          <template #default="{ row }">
-                            <el-button text type="primary" @click.prevent="tolist(row.id)">{{
-                              row.name
-                            }}</el-button>
-                          </template>
-                        </el-table-column>
+                  <template v-for="item in columns(type)" :key="item.prop">
+                    <el-table-column
+                      v-if="item.prop !== 'name'"
+                      :label="item.label"
+                      :prop="item.prop"
+                      align="center"
+                      :formatter="formatter"
+                    />
+                    <el-table-column v-else :label="item.label" :prop="item.prop" align="center">
+                      <template #default="{ row }">
+                        <el-button text type="primary" @click.prevent="tolist(row.id)">{{
+                          row.name
+                        }}</el-button>
                       </template>
-                    </el-table>
-                    <div
-                      ref="chartRef"
-                      v-loading="chartLoading"
-                      :key="dayjs().valueOf()"
-                      v-else
-                      :style="{ width: `${width}px`, height: `${height}px` }"
-                    >
-                    </div>
-                  </div>
-                </Motion>
-              </AnimatePresence>
+                    </el-table-column>
+                  </template>
+                </el-table>
+                <div
+                  ref="chartRef"
+                  v-loading="chartLoading"
+                  :key="dayjs().valueOf()"
+                  v-else
+                  :style="{ width: `100%`, height: `${500}px` }"
+                >
+                </div>
+              </div>
             </Motion>
-          </template>
-        </el-auto-resizer>
+          </AnimatePresence>
+        </Motion>
+        <!-- </template>
+        </el-auto-resizer> -->
       </div>
     </div>
   </div>

src/views/pms/iotrydailyreport/xsummary.vue

@@ -232,11 +232,21 @@ const getChart = useDebounceFn(async () => {
   }
 }, 1000)
 
+const resizer = () => {
+  chart?.resize()
+}
+
+onUnmounted(() => {
+  window.removeEventListener('resize', resizer)
+})
+
 const render = () => {
   if (!chartRef.value) return
 
   chart = echarts.init(chartRef.value, undefined, { renderer: 'canvas' })
 
+  window.addEventListener('resize', resizer)
+
   const values: number[] = []
 
   for (const [_name, key] of legend.value) {
@@ -514,70 +524,64 @@ const tolist = (id: number) => {
           <h3 class="text-xl font-medium">{{ `${deptName}-${tab}` }}</h3>
           <el-button size="default" type="primary" @click="exportAll">导出</el-button>
         </div>
-        <el-auto-resizer>
-          <template #default="{ height, width }">
+        <!-- <el-auto-resizer>
+          <template #default="{ height, width }"> -->
+        <Motion
+          as="div"
+          :style="{ position: 'relative', overflow: 'hidden' }"
+          :animate="{ height: `${500}px`, width: `100%` }"
+          :transition="{ type: 'spring', stiffness: 200, damping: 25, duration: 0.3 }"
+        >
+          <AnimatePresence :initial="false" mode="sync">
             <Motion
+              :key="currentTab"
               as="div"
-              :style="{ position: 'relative', overflow: 'hidden' }"
-              :animate="{ height: `${height}px`, width: `${width}px` }"
-              :transition="{ type: 'spring', stiffness: 200, damping: 25, duration: 0.3 }"
+              :initial="{ x: direction === 'left' ? '-100%' : '100%', opacity: 0 }"
+              :animate="{ x: '0%', opacity: 1 }"
+              :exit="{ x: direction === 'left' ? '50%' : '-50%', opacity: 0 }"
+              :transition="{ type: 'tween', stiffness: 300, damping: 30, duration: 0.3 }"
+              :style="{ position: 'absolute', left: 0, right: 0, top: 0 }"
             >
-              <AnimatePresence :initial="false" mode="sync">
-                <Motion
-                  :key="currentTab"
-                  as="div"
-                  :initial="{ x: direction === 'left' ? '-100%' : '100%', opacity: 0 }"
-                  :animate="{ x: '0%', opacity: 1 }"
-                  :exit="{ x: direction === 'left' ? '50%' : '-50%', opacity: 0 }"
-                  :transition="{ type: 'tween', stiffness: 300, damping: 30, duration: 0.3 }"
-                  :style="{ position: 'absolute', left: 0, right: 0, top: 0 }"
+              <div :style="{ width: `100%`, height: `${500}px` }">
+                <el-table
+                  v-if="currentTab === '表格'"
+                  v-loading="listLoading"
+                  :data="list"
+                  :stripe="true"
+                  :max-height="500"
+                  show-overflow-tooltip
                 >
-                  <div :style="{ width: `${width}px`, height: `${height}px` }">
-                    <el-table
-                      v-if="currentTab === '表格'"
-                      v-loading="listLoading"
-                      :data="list"
-                      :stripe="true"
-                      :width="width"
-                      :max-height="height"
-                      show-overflow-tooltip
-                    >
-                      <template v-for="item in columns(type)" :key="item.prop">
-                        <el-table-column
-                          v-if="item.prop !== 'name'"
-                          :label="item.label"
-                          :prop="item.prop"
-                          align="center"
-                          :formatter="formatter"
-                        />
-                        <el-table-column
-                          v-else
-                          :label="item.label"
-                          :prop="item.prop"
-                          align="center"
-                        >
-                          <template #default="{ row }">
-                            <el-button text type="primary" @click.prevent="tolist(row.id)">{{
-                              row.name
-                            }}</el-button>
-                          </template>
-                        </el-table-column>
+                  <template v-for="item in columns(type)" :key="item.prop">
+                    <el-table-column
+                      v-if="item.prop !== 'name'"
+                      :label="item.label"
+                      :prop="item.prop"
+                      align="center"
+                      :formatter="formatter"
+                    />
+                    <el-table-column v-else :label="item.label" :prop="item.prop" align="center">
+                      <template #default="{ row }">
+                        <el-button text type="primary" @click.prevent="tolist(row.id)">{{
+                          row.name
+                        }}</el-button>
                       </template>
-                    </el-table>
-                    <div
-                      ref="chartRef"
-                      v-loading="chartLoading"
-                      :key="dayjs().valueOf()"
-                      v-else
-                      :style="{ width: `${width}px`, height: `${height}px` }"
-                    >
-                    </div>
-                  </div>
-                </Motion>
-              </AnimatePresence>
+                    </el-table-column>
+                  </template>
+                </el-table>
+                <div
+                  ref="chartRef"
+                  v-loading="chartLoading"
+                  :key="dayjs().valueOf()"
+                  v-else
+                  :style="{ width: `100%`, height: `${500}px` }"
+                >
+                </div>
+              </div>
             </Motion>
-          </template>
-        </el-auto-resizer>
+          </AnimatePresence>
+        </Motion>
+        <!-- </template>
+        </el-auto-resizer> -->
       </div>
     </div>
   </div>