Web/admin-govern
5
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

设置表格默认属性

Browse Source
This commit is contained in:
仲么了
2024-01-02 14:33:55 +08:00
parent 43ca358cb8
commit cd98dc3fa3
3 changed files with 76 additions and 78 deletions
Download Patch File Download Diff File Expand all files Collapse all files

11
src/components/table/defaultAttribute.ts Normal file
View File

@@ -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 },
}

14
src/components/table/index.vue
View File

@@ -1,18 +1,9 @@
<template> <template>
<vxe-table <vxe-table
ref='tableRef' ref='tableRef'
class='ba-data-table w100'
header-cell-class-name='table-header-cell'
:data='tableStore.table.data' :data='tableStore.table.data'
:border='true'
v-loading='tableStore.table.loading' v-loading='tableStore.table.loading'
stripe v-bind='Object.assign({}, defaultAttribute, $attrs)'
size='small'
@checkbox-change='onSelectionChange'
v-bind='$attrs'
:column-config='{resizable: true}'
:tree-config='{}'
:row-config='{isCurrent: true, isHover: true}'
> >
<!-- Column 组件内部是 el-table-column --> <!-- Column 组件内部是 el-table-column -->
<template v-if='isGroup'> <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 Column from '@/components/table/column/index.vue'
import { useConfig } from '@/stores/config' import { useConfig } from '@/stores/config'
import type TableStoreClass from '@/utils/tableStore' import type TableStoreClass from '@/utils/tableStore'
import { defaultAttribute } from '@/components/table/defaultAttribute'
const config = useConfig() const config = useConfig()
const tableRef = ref<TableInstance>() const tableRef = ref<TableInstance>()
@@ -102,7 +94,7 @@ const props = withDefaults(defineProps<Props>(), {
pagination: true, pagination: true,
isGroup: false isGroup: false
}) })
console.log(props)
const onTableSizeChange = (val: number) => { const onTableSizeChange = (val: number) => {
tableStore.onTableAction('page-size-change', { size: val }) tableStore.onTableAction('page-size-change', { size: val })
} }

129
src/views/voltage/sags/operationsManagement/statistics.vue
View File

@@ -1,102 +1,96 @@
<template> <template>
<div class="default-main"> <div class='default-main'>
<TableHeader date-picker :showOperation="false" showSelect> <TableHeader date-picker :showOperation='false' showSelect>
<template v-slot:select> <template v-slot:select>
<el-form-item label="区域"> <el-form-item label='区域'>
<Area v-model="tableStore.table.params.deptIndex" /> <Area v-model='tableStore.table.params.deptIndex' />
</el-form-item> </el-form-item>
</template> </template>
</TableHeader> </TableHeader>
<div style="font-weight: bold; background: #fff;text-indent: 1em"> <div style='font-weight: bold; background: #fff;text-indent: 1em'>
<span style="color: #000"> <span style='color: #000'>
(左柱): (左柱):
<span style="color: #0099cc"> <span style='color: #0099cc'>
<span class="smallBlock" style="background: #0099cc"></span> <span class='smallBlock' style='background: #0099cc'></span>
投运 投运
</span> </span>
<span style="color: #996600"> <span style='color: #996600'>
<span class="smallBlock" style="background: #996600"></span> <span class='smallBlock' style='background: #996600'></span>
热备用 热备用
</span> </span>
<span style="color: #cc0000"> <span style='color: #cc0000'>
<span class="smallBlock" style="background: #cc0000"></span> <span class='smallBlock' style='background: #cc0000'></span>
停运 停运
</span> </span>
</span> </span>
&nbsp;&nbsp; &nbsp;&nbsp;
<span style="color: #000"> <span style='color: #000'>
(右柱): (右柱):
<span style="color: #2e8b57"> <span style='color: #2e8b57'>
<span class="smallBlock" style="background: #2e8b57"></span> <span class='smallBlock' style='background: #2e8b57'></span>
{{ '在线率≥90 %' }} {{ '在线率≥90 %' }}
</span> </span>
<span style="color: #daa520"> <span style='color: #daa520'>
<span class="smallBlock" style="background: #daa520"></span> <span class='smallBlock' style='background: #daa520'></span>
{{ '60 %≤在线率 < 90 %' }} {{ '60 %≤在线率 < 90 %' }}
</span> </span>
<span style="color: #cc0000"> <span style='color: #cc0000'>
<span class="smallBlock" style="background: #cc0000"></span> <span class='smallBlock' style='background: #cc0000'></span>
{{ '在线率 < 60 %' }} {{ '在线率 < 60 %' }}
</span> </span>
</span> </span>
</div> </div>
<div class="statistics-main" v-loading="tableStore.table.loading"> <div class='statistics-main' v-loading='tableStore.table.loading'>
<template v-if="!tableStore.table.loading"> <template v-if='!tableStore.table.loading'>
<div> <div>
<my-echart :options="areaStatistics" /> <my-echart :options='areaStatistics' />
</div> </div>
<div> <div>
<vxe-table <vxe-table
ref="tableRef" height='auto'
height="auto" auto-resize
align="center" :data='tableStore.table.data.area.areaInfo'
class="ba-data-table w100" v-bind='defaultAttribute'
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 }"
> >
<vxe-column field="areaName" title="区域"></vxe-column> <vxe-column field='areaName' title='区域'></vxe-column>
<vxe-column field="numberOfTerminals" title="终端个数" width="80"></vxe-column> <vxe-column field='numberOfTerminals' title='终端个数' width='80'></vxe-column>
<vxe-column field="normal" 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='breaks' title='热备用' width='80'></vxe-column>
<vxe-column field="shutdown" title="停运" width="80"></vxe-column> <vxe-column field='shutdown' title='停运' width='80'></vxe-column>
<vxe-column field="onlineRate" title="在线率（%）"></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> </vxe-table>
</div> </div>
<div> <div>
<my-echart :options="factoryStatistics" /> <my-echart :options='factoryStatistics' />
</div> </div>
<div> <div>
<vxe-table <vxe-table
ref="tableRef" height='auto'
height="auto" auto-resize
align="center" :data='tableStore.table.data.factory.areaInfo'
class="ba-data-table w100" v-bind='defaultAttribute'
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 }"
> >
<vxe-column field="areaName" title="厂家"></vxe-column> <vxe-column field='areaName' title='厂家'></vxe-column>
<vxe-column field="numberOfTerminals" title="终端个数" width="80"></vxe-column> <vxe-column field='numberOfTerminals' title='终端个数' width='80'></vxe-column>
<vxe-column field="normal" 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='breaks' title='热备用' width='80'></vxe-column>
<vxe-column field="shutdown" title="停运" width="80"></vxe-column> <vxe-column field='shutdown' title='停运' width='80'></vxe-column>
<vxe-column field="onlineRate" title="在线率（%）"></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> </vxe-table>
</div> </div>
</template> </template>
</div> </div>
</div> </div>
</template> </template>
<script setup lang="ts"> <script setup lang='ts'>
import TableHeader from '@/components/table/header/index.vue' import TableHeader from '@/components/table/header/index.vue'
import Area from '@/components/form/area/index.vue' import Area from '@/components/form/area/index.vue'
import TableStore from '@/utils/tableStore' import TableStore from '@/utils/tableStore'
@@ -105,6 +99,7 @@ import { useDictData } from '@/stores/dictData'
import { mainHeight } from '@/utils/layout' import { mainHeight } from '@/utils/layout'
import MyEchart from '@/components/echarts/MyEchart.vue' import MyEchart from '@/components/echarts/MyEchart.vue'
import * as echarts from 'echarts/core' import * as echarts from 'echarts/core'
import { defaultAttribute } from '@/components/table/defaultAttribute'
defineOptions({ defineOptions({
name: 'voltage/sags/operationsManagement/statistics' name: 'voltage/sags/operationsManagement/statistics'
@@ -149,7 +144,7 @@ const tableStore = new TableStore({
fontSize: 14 fontSize: 14
}, },
backgroundColor: 'rgba(0,0,0,0.35)', backgroundColor: 'rgba(0,0,0,0.35)',
formatter: function (params) { formatter: function(params) {
var tips = '' var tips = ''
tips += params[0].name + '</br/>' tips += params[0].name + '</br/>'
for (var i = 0; i < params.length; i++) { 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), data: tableStore.table.data.area.areaInfo.map((item: any) => item.normalRate),
itemStyle: { itemStyle: {
normal: { normal: {
color: function (params) { color: function(params) {
if (params.value != 3.14159) { if (params.value != 3.14159) {
return new echarts.graphic.LinearGradient(0, 1, 0, 0, [ return new echarts.graphic.LinearGradient(0, 1, 0, 0, [
{ {
@@ -197,7 +192,7 @@ const tableStore = new TableStore({
type: 'bar', type: 'bar',
itemStyle: { itemStyle: {
normal: { normal: {
color: function (params) { color: function(params) {
if (params.value != 3.14159) { if (params.value != 3.14159) {
return new echarts.graphic.LinearGradient(0, 1, 0, 0, [ 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), data: tableStore.table.data.area.areaInfo.map((item: any) => item.onlineRate),
itemStyle: { itemStyle: {
normal: { normal: {
color: function (params) { color: function(params) {
if (params.value >= 90) { if (params.value >= 90) {
return new echarts.graphic.LinearGradient(0, 1, 0, 0, [ return new echarts.graphic.LinearGradient(0, 1, 0, 0, [
{ {
@@ -294,7 +289,7 @@ const tableStore = new TableStore({
fontSize: 14 fontSize: 14
}, },
backgroundColor: 'rgba(0,0,0,0.35)', backgroundColor: 'rgba(0,0,0,0.35)',
formatter: function (params) { formatter: function(params) {
var tips = '' var tips = ''
tips += params[0].name + '</br/>' tips += params[0].name + '</br/>'
for (var i = 0; i < params.length; i++) { 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), data: tableStore.table.data.factory.areaInfo.map((item: any) => item.normalRate),
itemStyle: { itemStyle: {
normal: { normal: {
color: function (params) { color: function(params) {
if (params.value != 3.14159) { if (params.value != 3.14159) {
return new echarts.graphic.LinearGradient(0, 1, 0, 0, [ return new echarts.graphic.LinearGradient(0, 1, 0, 0, [
{ {
@@ -342,7 +337,7 @@ const tableStore = new TableStore({
type: 'bar', type: 'bar',
itemStyle: { itemStyle: {
normal: { normal: {
color: function (params) { color: function(params) {
if (params.value != 3.14159) { if (params.value != 3.14159) {
return new echarts.graphic.LinearGradient(0, 1, 0, 0, [ 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), data: tableStore.table.data.factory.areaInfo.map((item: any) => item.onlineRate),
itemStyle: { itemStyle: {
normal: { normal: {
color: function (params) { color: function(params) {
if (params.value >= 90) { if (params.value >= 90) {
return new echarts.graphic.LinearGradient(0, 1, 0, 0, [ return new echarts.graphic.LinearGradient(0, 1, 0, 0, [
{ {
@@ -428,7 +423,7 @@ onMounted(() => {
const layout = mainHeight(104) as any const layout = mainHeight(104) as any
</script> </script>
<style lang="scss" scoped> <style lang='scss' scoped>
.statistics-main { .statistics-main {
box-sizing: border-box; box-sizing: border-box;
height: v-bind('layout.height'); height: v-bind('layout.height');