From cd98dc3fa3bf5d67e2de6e1ef611d16dc3eb1c8e Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E4=BB=B2=E4=B9=88=E4=BA=86?= <zhongchunyang@rocan.com.cn>
Date: Tue, 2 Jan 2024 14:33:55 +0800
Subject: [PATCH] =?UTF-8?q?=E8=AE=BE=E7=BD=AE=E8=A1=A8=E6=A0=BC=E9=BB=98?=
 =?UTF-8?q?=E8=AE=A4=E5=B1=9E=E6=80=A7?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/table/defaultAttribute.ts      |  11 ++
 src/components/table/index.vue                |  14 +-
 .../sags/operationsManagement/statistics.vue  | 129 +++++++++---------
 3 files changed, 76 insertions(+), 78 deletions(-)
 create mode 100644 src/components/table/defaultAttribute.ts

diff --git a/src/components/table/defaultAttribute.ts b/src/components/table/defaultAttribute.ts
new file mode 100644
index 0000000..0761d93
--- /dev/null
+++ b/src/components/table/defaultAttribute.ts
@@ -0,0 +1,11 @@
+export const defaultAttribute = {
+    align: 'center',
+    class: 'ba-data-table w100',
+    headerCellClassName: 'table-header-cell',
+    border: true,
+    stripe: true,
+    size: 'small',
+    columnConfig: { resizable: true },
+    rowConfig: { isCurrent: true, isHover: true },
+    scrollX: { scrollToLeftOnChange: true },
+}
\ No newline at end of file
diff --git a/src/components/table/index.vue b/src/components/table/index.vue
index ef688ce..8aa4b9c 100644
--- a/src/components/table/index.vue
+++ b/src/components/table/index.vue
@@ -1,18 +1,9 @@
 <template>
     <vxe-table
         ref='tableRef'
-        class='ba-data-table w100'
-        header-cell-class-name='table-header-cell'
         :data='tableStore.table.data'
-        :border='true'
         v-loading='tableStore.table.loading'
-        stripe
-        size='small'
-        @checkbox-change='onSelectionChange'
-        v-bind='$attrs'
-        :column-config='{resizable: true}'
-        :tree-config='{}'
-        :row-config='{isCurrent: true, isHover: true}'
+        v-bind='Object.assign({}, defaultAttribute, $attrs)'
     >
         <!-- Column 组件内部是 el-table-column -->
         <template v-if='isGroup'>
@@ -88,6 +79,7 @@ import FieldRender from '@/components/table/fieldRender/index.vue'
 import Column from '@/components/table/column/index.vue'
 import { useConfig } from '@/stores/config'
 import type TableStoreClass from '@/utils/tableStore'
+import { defaultAttribute } from '@/components/table/defaultAttribute'
 
 const config = useConfig()
 const tableRef = ref<TableInstance>()
@@ -102,7 +94,7 @@ const props = withDefaults(defineProps<Props>(), {
     pagination: true,
     isGroup: false
 })
-
+console.log(props)
 const onTableSizeChange = (val: number) => {
     tableStore.onTableAction('page-size-change', { size: val })
 }
diff --git a/src/views/voltage/sags/operationsManagement/statistics.vue b/src/views/voltage/sags/operationsManagement/statistics.vue
index 6e627cf..2885771 100644
--- a/src/views/voltage/sags/operationsManagement/statistics.vue
+++ b/src/views/voltage/sags/operationsManagement/statistics.vue
@@ -1,102 +1,96 @@
 <template>
-    <div class="default-main">
-        <TableHeader date-picker :showOperation="false" showSelect>
+    <div class='default-main'>
+        <TableHeader date-picker :showOperation='false' showSelect>
             <template v-slot:select>
-                <el-form-item label="区域">
-                    <Area v-model="tableStore.table.params.deptIndex" />
+                <el-form-item label='区域'>
+                    <Area v-model='tableStore.table.params.deptIndex' />
                 </el-form-item>
             </template>
         </TableHeader>
-        <div style="font-weight: bold; background: #fff;text-indent: 1em">
-            <span style="color: #000">
+        <div style='font-weight: bold; background: #fff;text-indent: 1em'>
+            <span style='color: #000'>
                 (左柱):
-                <span style="color: #0099cc">
-                    <span class="smallBlock" style="background: #0099cc"></span>
+                <span style='color: #0099cc'>
+                    <span class='smallBlock' style='background: #0099cc'></span>
                     投运
                 </span>
-                <span style="color: #996600">
-                    <span class="smallBlock" style="background: #996600"></span>
+                <span style='color: #996600'>
+                    <span class='smallBlock' style='background: #996600'></span>
                     热备用
                 </span>
-                <span style="color: #cc0000">
-                    <span class="smallBlock" style="background: #cc0000"></span>
+                <span style='color: #cc0000'>
+                    <span class='smallBlock' style='background: #cc0000'></span>
                     停运
                 </span>
             </span>
             &nbsp;&nbsp;
-            <span style="color: #000">
+            <span style='color: #000'>
                 (右柱):
-                <span style="color: #2e8b57">
-                    <span class="smallBlock" style="background: #2e8b57"></span>
+                <span style='color: #2e8b57'>
+                    <span class='smallBlock' style='background: #2e8b57'></span>
                     {{ '在线率≥90 %' }}
                 </span>
-                <span style="color: #daa520">
-                    <span class="smallBlock" style="background: #daa520"></span>
+                <span style='color: #daa520'>
+                    <span class='smallBlock' style='background: #daa520'></span>
                     {{ '60 %≤在线率 < 90 %' }}
                 </span>
-                <span style="color: #cc0000">
-                    <span class="smallBlock" style="background: #cc0000"></span>
+                <span style='color: #cc0000'>
+                    <span class='smallBlock' style='background: #cc0000'></span>
                     {{ '在线率 < 60 %' }}
                 </span>
             </span>
         </div>
-        <div class="statistics-main" v-loading="tableStore.table.loading">
-            <template v-if="!tableStore.table.loading">
+        <div class='statistics-main' v-loading='tableStore.table.loading'>
+            <template v-if='!tableStore.table.loading'>
                 <div>
-                    <my-echart :options="areaStatistics" />
+                    <my-echart :options='areaStatistics' />
                 </div>
                 <div>
                     <vxe-table
-                        ref="tableRef"
-                        height="auto"
-                        align="center"
-                        class="ba-data-table w100"
-                        header-cell-class-name="table-header-cell"
-                        :data="tableStore.table.data.area.areaInfo"
-                        :border="true"
-                        stripe
-                        size="small"
-                        :column-config="{ resizable: true }"
-                        :row-config="{ isCurrent: true, isHover: true }"
+                        height='auto'
+                        auto-resize
+                        :data='tableStore.table.data.area.areaInfo'
+                        v-bind='defaultAttribute'
                     >
-                        <vxe-column field="areaName" title="区域"></vxe-column>
-                        <vxe-column field="numberOfTerminals" title="终端个数" width="80"></vxe-column>
-                        <vxe-column field="normal" title="投运" width="80"></vxe-column>
-                        <vxe-column field="breaks" title="热备用" width="80"></vxe-column>
-                        <vxe-column field="shutdown" title="停运" width="80"></vxe-column>
-                        <vxe-column field="onlineRate" title="在线率（%）"></vxe-column>
+                        <vxe-column field='areaName' title='区域'></vxe-column>
+                        <vxe-column field='numberOfTerminals' title='终端个数' width='80'></vxe-column>
+                        <vxe-column field='normal' title='投运' width='80'></vxe-column>
+                        <vxe-column field='breaks' title='热备用' width='80'></vxe-column>
+                        <vxe-column field='shutdown' title='停运' width='80'></vxe-column>
+                        <vxe-column field='onlineRate' title='在线率（%）'>
+                            <template v-slot:default='scoped'>
+                                {{ scoped.row.onlineRate === 3.14159 ? '/' : scoped.row.onlineRate }}
+                            </template>
+                        </vxe-column>
                     </vxe-table>
                 </div>
                 <div>
-                    <my-echart :options="factoryStatistics" />
+                    <my-echart :options='factoryStatistics' />
                 </div>
                 <div>
                     <vxe-table
-                        ref="tableRef"
-                        height="auto"
-                        align="center"
-                        class="ba-data-table w100"
-                        header-cell-class-name="table-header-cell"
-                        :data="tableStore.table.data.factory.areaInfo"
-                        :border="true"
-                        stripe
-                        size="small"
-                        :column-config="{ resizable: true }"
-                        :row-config="{ isCurrent: true, isHover: true }"
+                        height='auto'
+                        auto-resize
+                        :data='tableStore.table.data.factory.areaInfo'
+                        v-bind='defaultAttribute'
                     >
-                        <vxe-column field="areaName" title="厂家"></vxe-column>
-                        <vxe-column field="numberOfTerminals" title="终端个数" width="80"></vxe-column>
-                        <vxe-column field="normal" title="投运" width="80"></vxe-column>
-                        <vxe-column field="breaks" title="热备用" width="80"></vxe-column>
-                        <vxe-column field="shutdown" title="停运" width="80"></vxe-column>
-                        <vxe-column field="onlineRate" title="在线率（%）"></vxe-column>
+                        <vxe-column field='areaName' title='厂家'></vxe-column>
+                        <vxe-column field='numberOfTerminals' title='终端个数' width='80'></vxe-column>
+                        <vxe-column field='normal' title='投运' width='80'></vxe-column>
+                        <vxe-column field='breaks' title='热备用' width='80'></vxe-column>
+                        <vxe-column field='shutdown' title='停运' width='80'></vxe-column>
+                        <vxe-column field='onlineRate' title='在线率（%）'>
+                            <template v-slot:default='scoped'>
+                                {{ scoped.row.onlineRate === 3.14159 ? '/' : scoped.row.onlineRate }}
+                            </template>
+                        </vxe-column>
                     </vxe-table>
                 </div>
             </template>
         </div>
     </div>
 </template>
-<script setup lang="ts">
+<script setup lang='ts'>
 import TableHeader from '@/components/table/header/index.vue'
 import Area from '@/components/form/area/index.vue'
 import TableStore from '@/utils/tableStore'
@@ -105,6 +99,7 @@ import { useDictData } from '@/stores/dictData'
 import { mainHeight } from '@/utils/layout'
 import MyEchart from '@/components/echarts/MyEchart.vue'
 import * as echarts from 'echarts/core'
+import { defaultAttribute } from '@/components/table/defaultAttribute'
 
 defineOptions({
     name: 'voltage/sags/operationsManagement/statistics'
@@ -149,7 +144,7 @@ const tableStore = new TableStore({
                         fontSize: 14
                     },
                     backgroundColor: 'rgba(0,0,0,0.35)',
-                    formatter: function (params) {
+                    formatter: function(params) {
                         var tips = ''
                         tips += params[0].name + '</br/>'
                         for (var i = 0; i < params.length; i++) {
@@ -169,7 +164,7 @@ const tableStore = new TableStore({
                         data: tableStore.table.data.area.areaInfo.map((item: any) => item.normalRate),
                         itemStyle: {
                             normal: {
-                                color: function (params) {
+                                color: function(params) {
                                     if (params.value != 3.14159) {
                                         return new echarts.graphic.LinearGradient(0, 1, 0, 0, [
                                             {
@@ -197,7 +192,7 @@ const tableStore = new TableStore({
                         type: 'bar',
                         itemStyle: {
                             normal: {
-                                color: function (params) {
+                                color: function(params) {
                                     if (params.value != 3.14159) {
                                         return new echarts.graphic.LinearGradient(0, 1, 0, 0, [
                                             {
@@ -223,7 +218,7 @@ const tableStore = new TableStore({
                         data: tableStore.table.data.area.areaInfo.map((item: any) => item.onlineRate),
                         itemStyle: {
                             normal: {
-                                color: function (params) {
+                                color: function(params) {
                                     if (params.value >= 90) {
                                         return new echarts.graphic.LinearGradient(0, 1, 0, 0, [
                                             {
@@ -294,7 +289,7 @@ const tableStore = new TableStore({
                         fontSize: 14
                     },
                     backgroundColor: 'rgba(0,0,0,0.35)',
-                    formatter: function (params) {
+                    formatter: function(params) {
                         var tips = ''
                         tips += params[0].name + '</br/>'
                         for (var i = 0; i < params.length; i++) {
@@ -314,7 +309,7 @@ const tableStore = new TableStore({
                         data: tableStore.table.data.factory.areaInfo.map((item: any) => item.normalRate),
                         itemStyle: {
                             normal: {
-                                color: function (params) {
+                                color: function(params) {
                                     if (params.value != 3.14159) {
                                         return new echarts.graphic.LinearGradient(0, 1, 0, 0, [
                                             {
@@ -342,7 +337,7 @@ const tableStore = new TableStore({
                         type: 'bar',
                         itemStyle: {
                             normal: {
-                                color: function (params) {
+                                color: function(params) {
                                     if (params.value != 3.14159) {
                                         return new echarts.graphic.LinearGradient(0, 1, 0, 0, [
                                             {
@@ -368,7 +363,7 @@ const tableStore = new TableStore({
                         data: tableStore.table.data.factory.areaInfo.map((item: any) => item.onlineRate),
                         itemStyle: {
                             normal: {
-                                color: function (params) {
+                                color: function(params) {
                                     if (params.value >= 90) {
                                         return new echarts.graphic.LinearGradient(0, 1, 0, 0, [
                                             {
@@ -428,7 +423,7 @@ onMounted(() => {
 const layout = mainHeight(104) as any
 </script>
 
-<style lang="scss" scoped>
+<style lang='scss' scoped>
 .statistics-main {
     box-sizing: border-box;
     height: v-bind('layout.height');