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>
<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 })
}

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

@@ -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');