2024-08-14 11:34:13 +08:00
|
|
|
|
<template>
|
|
|
|
|
|
<div class="default-main" :style="height">
|
|
|
|
|
|
<splitpanes style="height: 100%" class="default-theme" id="navigation-splitpanes">
|
|
|
|
|
|
<pane :size="size">
|
|
|
|
|
|
<PointTree
|
|
|
|
|
|
:default-expand-all="false"
|
|
|
|
|
|
@node-click="handleNodeClick"
|
|
|
|
|
|
@init="handleNodeClick"
|
|
|
|
|
|
></PointTree>
|
|
|
|
|
|
</pane>
|
|
|
|
|
|
<pane :style="height" style="background: #fff">
|
|
|
|
|
|
<TableHeader ref="TableHeaderRef" datePicker>
|
|
|
|
|
|
<template v-slot:select>
|
|
|
|
|
|
<!-- <el-form-item label="有功功率区间">
|
|
|
|
|
|
<el-select
|
|
|
|
|
|
v-model="power"
|
|
|
|
|
|
multiple
|
|
|
|
|
|
collapse-tags
|
|
|
|
|
|
collapse-tags-tooltip
|
|
|
|
|
|
filterable
|
|
|
|
|
|
placeholder="请选择有功功率区间"
|
|
|
|
|
|
>
|
|
|
|
|
|
<el-option
|
|
|
|
|
|
v-for="item in powerList"
|
|
|
|
|
|
:key="item.value"
|
|
|
|
|
|
:label="item.label"
|
|
|
|
|
|
:value="item.value"
|
|
|
|
|
|
/>
|
|
|
|
|
|
</el-select>
|
|
|
|
|
|
</el-form-item>
|
|
|
|
|
|
<el-form-item label="各指标越限">
|
|
|
|
|
|
<el-select
|
|
|
|
|
|
v-model="index"
|
|
|
|
|
|
multiple
|
|
|
|
|
|
collapse-tags
|
|
|
|
|
|
collapse-tags-tooltip
|
|
|
|
|
|
filterable
|
|
|
|
|
|
placeholder="请选择各指标越限"
|
|
|
|
|
|
>
|
|
|
|
|
|
<el-option
|
|
|
|
|
|
v-for="item in indexList"
|
|
|
|
|
|
:key="item.value"
|
|
|
|
|
|
:label="item.label"
|
|
|
|
|
|
:value="item.value"
|
|
|
|
|
|
/>
|
|
|
|
|
|
</el-select>
|
|
|
|
|
|
</el-form-item> -->
|
|
|
|
|
|
</template>
|
|
|
|
|
|
<template #operation>
|
|
|
|
|
|
<el-button icon="el-icon-Download" type="primary">生成报表</el-button>
|
|
|
|
|
|
</template>
|
|
|
|
|
|
</TableHeader>
|
|
|
|
|
|
|
|
|
|
|
|
<div class="container pd10">
|
|
|
|
|
|
<div>
|
|
|
|
|
|
<el-card class="cardBox">
|
|
|
|
|
|
<div class="mb5" style="display: flex; justify-content: space-between">
|
|
|
|
|
|
<h3>有功功率趋势分析</h3>
|
|
|
|
|
|
<div>
|
|
|
|
|
|
<span>图例: </span>
|
|
|
|
|
|
<span style="color: red">稳态越限 </span>
|
|
|
|
|
|
<span style="color: green">合格</span>
|
|
|
|
|
|
</div>
|
|
|
|
|
|
</div>
|
|
|
|
|
|
<el-card class="card-top">
|
|
|
|
|
|
<div
|
|
|
|
|
|
v-for="item in powerList1"
|
|
|
|
|
|
class="pd10"
|
|
|
|
|
|
style="cursor: pointer"
|
|
|
|
|
|
:class="flag == item.label ? 'hoverBox' : ''"
|
|
|
|
|
|
@click="handleClick(item.label)"
|
|
|
|
|
|
>
|
|
|
|
|
|
<div style="font-size: 24px; font-weight: 700">
|
|
|
|
|
|
<span :style="{ color: item.crossTheLine === '越限' ? 'red' : 'green' }">
|
|
|
|
|
|
{{ item.quantity }}
|
|
|
|
|
|
</span>
|
|
|
|
|
|
<span style="font-size: 14px; font-weight: 500">个</span>
|
|
|
|
|
|
</div>
|
|
|
|
|
|
<div>
|
|
|
|
|
|
{{ item.label }}
|
|
|
|
|
|
</div>
|
|
|
|
|
|
</div>
|
|
|
|
|
|
</el-card>
|
|
|
|
|
|
|
|
|
|
|
|
<el-card class="card-top mt15">
|
|
|
|
|
|
<div
|
|
|
|
|
|
v-for="item in powerList2"
|
|
|
|
|
|
class="pd10"
|
|
|
|
|
|
style="cursor: pointer"
|
|
|
|
|
|
:class="flag == item.label ? 'hoverBox' : ''"
|
|
|
|
|
|
@click="handleClick(item.label)"
|
|
|
|
|
|
>
|
|
|
|
|
|
<div style="font-size: 24px; font-weight: 700">
|
|
|
|
|
|
<span :style="{ color: item.crossTheLine === '越限' ? 'red' : 'green' }">
|
|
|
|
|
|
{{ item.quantity }}
|
|
|
|
|
|
</span>
|
|
|
|
|
|
<span style="font-size: 14px; font-weight: 500">个</span>
|
|
|
|
|
|
</div>
|
|
|
|
|
|
<div>
|
|
|
|
|
|
{{ item.label }}
|
|
|
|
|
|
</div>
|
|
|
|
|
|
</div>
|
|
|
|
|
|
</el-card>
|
|
|
|
|
|
</el-card>
|
|
|
|
|
|
</div>
|
|
|
|
|
|
<el-card class="echart">
|
|
|
|
|
|
<my-echart :options="options" style="height: 198px" />
|
|
|
|
|
|
</el-card>
|
|
|
|
|
|
</div>
|
|
|
|
|
|
<div class="container mt10 ml10">
|
|
|
|
|
|
<el-card class="box">
|
|
|
|
|
|
<div :style="heightB" style="overflow-y: auto">
|
|
|
|
|
|
<vxe-table v-bind="defaultAttribute" ref="vxeRef" height="auto" :data="tableData">
|
|
|
|
|
|
<vxe-column field="num" title="时间" min-width="100px">
|
|
|
|
|
|
<template #default="{ row }">
|
|
|
|
|
|
<el-link type="primary" @click="timeClick(row)">{{ row.num }}</el-link>
|
|
|
|
|
|
</template>
|
|
|
|
|
|
</vxe-column>
|
|
|
|
|
|
<vxe-column field="num1" title="电压偏差(%)" />
|
|
|
|
|
|
<vxe-column field="num2" title="谐波电压(%)" />
|
|
|
|
|
|
<vxe-column field="num3" title="谐波电流(%)" />
|
|
|
|
|
|
<vxe-column field="num4" title="三相电压不平衡度(%)" />
|
|
|
|
|
|
<vxe-column field="num5" title="电压波动(%)" />
|
|
|
|
|
|
<vxe-column field="num6" title="闪变(%)" />
|
|
|
|
|
|
<vxe-column field="num7" title="间谐波电压含有率(%)" />
|
|
|
|
|
|
<vxe-column field="num8" title="流不平衡度" />
|
|
|
|
|
|
<vxe-column field="crossTheLine" title="越限情况">
|
|
|
|
|
|
<template #default="{ row }">
|
|
|
|
|
|
<el-link :type="row.crossTheLine === '越限' ? 'danger' : 'success'">
|
|
|
|
|
|
<span @click="detailClick(row)">{{ row.crossTheLine }}</span>
|
|
|
|
|
|
</el-link>
|
|
|
|
|
|
</template>
|
|
|
|
|
|
</vxe-column>
|
|
|
|
|
|
<vxe-column field="num3" title="操作">
|
2024-08-26 08:58:57 +08:00
|
|
|
|
<template #default="{ row }">
|
|
|
|
|
|
<el-button type="primary" link @click="addTo(row)">添加</el-button>
|
|
|
|
|
|
</template>
|
2024-08-14 11:34:13 +08:00
|
|
|
|
</vxe-column>
|
|
|
|
|
|
</vxe-table>
|
|
|
|
|
|
</div>
|
|
|
|
|
|
</el-card>
|
|
|
|
|
|
|
|
|
|
|
|
<el-card class="box mr10">
|
|
|
|
|
|
<div :style="heightB" style="overflow-y: auto">
|
|
|
|
|
|
<div style="display: flex; justify-content: space-between">
|
|
|
|
|
|
<span style="font-size: 16px; font-weight: 700">报告参数</span>
|
|
|
|
|
|
<el-radio-group v-model="radio2" size="small">
|
|
|
|
|
|
<el-radio-button label="统计结果" value="1" />
|
|
|
|
|
|
<el-radio-button label="原始数据" value="2" />
|
|
|
|
|
|
</el-radio-group>
|
|
|
|
|
|
</div>
|
2024-08-26 08:58:57 +08:00
|
|
|
|
<div>
|
|
|
|
|
|
<el-tree style="max-width: 600px" :data="dataSource" node-key="id" default-expand-all>
|
|
|
|
|
|
<template #default="{ node, data }">
|
|
|
|
|
|
<span class="custom-tree-node">
|
|
|
|
|
|
<span>{{ node.label }}</span>
|
|
|
|
|
|
<!-- <span>
|
|
|
|
|
|
<a style="margin-left: 8px" @click="remove(node, data)">删除</a>
|
|
|
|
|
|
</span> -->
|
|
|
|
|
|
<el-button
|
|
|
|
|
|
v-if="data.level != 0"
|
|
|
|
|
|
style="margin-left: 10px"
|
|
|
|
|
|
type="danger"
|
|
|
|
|
|
link
|
|
|
|
|
|
@click="remove(node, data)"
|
|
|
|
|
|
>
|
|
|
|
|
|
删除
|
|
|
|
|
|
</el-button>
|
|
|
|
|
|
</span>
|
|
|
|
|
|
</template>
|
|
|
|
|
|
</el-tree>
|
|
|
|
|
|
</div>
|
2024-08-14 11:34:13 +08:00
|
|
|
|
</div>
|
|
|
|
|
|
</el-card>
|
|
|
|
|
|
</div>
|
|
|
|
|
|
</pane>
|
|
|
|
|
|
</splitpanes>
|
|
|
|
|
|
<!-- 时间弹框 -->
|
|
|
|
|
|
<timePopUpBox
|
|
|
|
|
|
ref="timePopUpBoxRef"
|
|
|
|
|
|
:timePopUpBox="timePopUpBox"
|
|
|
|
|
|
@close="timePopUpBox = null"
|
|
|
|
|
|
v-if="timePopUpBox"
|
|
|
|
|
|
/>
|
|
|
|
|
|
<!-- 越限详情 -->
|
|
|
|
|
|
<detail ref="detailRef" />
|
|
|
|
|
|
</div>
|
|
|
|
|
|
</template>
|
|
|
|
|
|
|
|
|
|
|
|
<script setup lang="ts">
|
|
|
|
|
|
import { onMounted, ref, provide } from 'vue'
|
|
|
|
|
|
import 'splitpanes/dist/splitpanes.css'
|
|
|
|
|
|
import { Splitpanes, Pane } from 'splitpanes'
|
|
|
|
|
|
import TableStore from '@/utils/tableStore'
|
|
|
|
|
|
import PointTree from '@/components/tree/pqs/pointTree.vue'
|
|
|
|
|
|
import TableHeader from '@/components/table/header/index.vue'
|
|
|
|
|
|
import { useDictData } from '@/stores/dictData'
|
|
|
|
|
|
import { mainHeight } from '@/utils/layout'
|
|
|
|
|
|
import { defaultAttribute } from '@/components/table/defaultAttribute'
|
|
|
|
|
|
import MyEchart from '@/components/echarts/MyEchart.vue'
|
|
|
|
|
|
import TimePopUpBox from './components/timePopUpBox.vue'
|
|
|
|
|
|
import detail from './components/detail.vue'
|
|
|
|
|
|
defineOptions({
|
2024-08-15 20:31:02 +08:00
|
|
|
|
name: 'newEnergy/newEnergyAnalysis'
|
2024-08-14 11:34:13 +08:00
|
|
|
|
})
|
|
|
|
|
|
const timePopUpBox = ref<anyObj | null>(null)
|
|
|
|
|
|
const flag = ref('0%~10%')
|
|
|
|
|
|
const radio2 = ref('1')
|
|
|
|
|
|
const height = mainHeight(20)
|
|
|
|
|
|
const heightB = mainHeight(395)
|
|
|
|
|
|
const size = ref(0)
|
|
|
|
|
|
const TableHeaderRef = ref()
|
|
|
|
|
|
const detailRef = ref()
|
|
|
|
|
|
const dotList: any = ref({})
|
|
|
|
|
|
const power = ref([])
|
|
|
|
|
|
const timePopUpBoxRef = ref()
|
|
|
|
|
|
const index = ref([])
|
|
|
|
|
|
|
|
|
|
|
|
const powerList1: any = ref([
|
|
|
|
|
|
{
|
|
|
|
|
|
label: '0%~10%',
|
|
|
|
|
|
quantity: '20',
|
|
|
|
|
|
percentage: '10%',
|
|
|
|
|
|
crossTheLine: '越限',
|
|
|
|
|
|
value: '0%~10%'
|
|
|
|
|
|
},
|
|
|
|
|
|
{
|
|
|
|
|
|
label: '10%~20%',
|
|
|
|
|
|
quantity: '20',
|
|
|
|
|
|
percentage: '10%',
|
|
|
|
|
|
crossTheLine: '合格',
|
|
|
|
|
|
value: '10%~10%'
|
|
|
|
|
|
},
|
|
|
|
|
|
{
|
|
|
|
|
|
label: '20%~30%',
|
|
|
|
|
|
quantity: '20',
|
|
|
|
|
|
percentage: '10%',
|
|
|
|
|
|
crossTheLine: '合格',
|
|
|
|
|
|
value: '10%~30%'
|
|
|
|
|
|
},
|
|
|
|
|
|
{
|
|
|
|
|
|
label: '30%~40%',
|
|
|
|
|
|
quantity: '20',
|
|
|
|
|
|
percentage: '10%',
|
|
|
|
|
|
crossTheLine: '合格',
|
|
|
|
|
|
value: '30%~40%'
|
|
|
|
|
|
},
|
|
|
|
|
|
{
|
|
|
|
|
|
label: '40%~50%',
|
|
|
|
|
|
quantity: '20',
|
|
|
|
|
|
percentage: '10%',
|
|
|
|
|
|
crossTheLine: '合格',
|
|
|
|
|
|
value: '40%~50%'
|
|
|
|
|
|
}
|
|
|
|
|
|
])
|
|
|
|
|
|
const powerList2: any = ref([
|
|
|
|
|
|
{
|
|
|
|
|
|
label: '50%~60%',
|
|
|
|
|
|
quantity: '20',
|
|
|
|
|
|
percentage: '10%',
|
|
|
|
|
|
crossTheLine: '合格',
|
|
|
|
|
|
value: '50%~60%'
|
|
|
|
|
|
},
|
|
|
|
|
|
{
|
|
|
|
|
|
label: '60%~70%',
|
|
|
|
|
|
quantity: '20',
|
|
|
|
|
|
percentage: '10%',
|
|
|
|
|
|
crossTheLine: '合格',
|
|
|
|
|
|
value: '60%~70%'
|
|
|
|
|
|
},
|
|
|
|
|
|
{
|
|
|
|
|
|
label: '70%~80%',
|
|
|
|
|
|
quantity: '20',
|
|
|
|
|
|
percentage: '10%',
|
|
|
|
|
|
crossTheLine: '合格',
|
|
|
|
|
|
value: '70%~80%'
|
|
|
|
|
|
},
|
|
|
|
|
|
{
|
|
|
|
|
|
label: '80%~90%',
|
|
|
|
|
|
quantity: '20',
|
|
|
|
|
|
percentage: '10%',
|
|
|
|
|
|
crossTheLine: '越限',
|
|
|
|
|
|
value: '80%~90%'
|
|
|
|
|
|
},
|
|
|
|
|
|
{
|
|
|
|
|
|
label: '90%~100%',
|
|
|
|
|
|
quantity: '20',
|
|
|
|
|
|
percentage: '10%',
|
|
|
|
|
|
crossTheLine: '越限',
|
|
|
|
|
|
value: '90%~100%'
|
|
|
|
|
|
}
|
|
|
|
|
|
])
|
|
|
|
|
|
|
|
|
|
|
|
const tableData: any = ref([
|
|
|
|
|
|
{
|
|
|
|
|
|
num: '2023-08-08 09:00:00',
|
|
|
|
|
|
num1: '0',
|
|
|
|
|
|
num2: '1',
|
|
|
|
|
|
num3: '3',
|
|
|
|
|
|
num4: '2',
|
|
|
|
|
|
num5: '1',
|
|
|
|
|
|
num6: '1',
|
|
|
|
|
|
num7: '1',
|
|
|
|
|
|
num8: '0',
|
|
|
|
|
|
crossTheLine: '越限'
|
|
|
|
|
|
}
|
|
|
|
|
|
])
|
2024-08-26 08:58:57 +08:00
|
|
|
|
const dataSource = ref([
|
|
|
|
|
|
{
|
|
|
|
|
|
id: 1,
|
|
|
|
|
|
level: 0,
|
|
|
|
|
|
label: '0%~10%',
|
|
|
|
|
|
children: [
|
|
|
|
|
|
{
|
|
|
|
|
|
id: 11,
|
|
|
|
|
|
label: '测试',
|
|
|
|
|
|
children: []
|
|
|
|
|
|
}
|
|
|
|
|
|
]
|
|
|
|
|
|
},
|
|
|
|
|
|
{
|
|
|
|
|
|
id: 2,
|
|
|
|
|
|
level: 0,
|
|
|
|
|
|
label: '10%~20%',
|
|
|
|
|
|
children: []
|
|
|
|
|
|
},
|
|
|
|
|
|
{
|
|
|
|
|
|
id: 3,
|
|
|
|
|
|
level: 0,
|
|
|
|
|
|
label: '20%~30%',
|
|
|
|
|
|
children: []
|
|
|
|
|
|
},
|
|
|
|
|
|
{
|
|
|
|
|
|
id: 4,
|
|
|
|
|
|
level: 0,
|
|
|
|
|
|
label: '30%~40%',
|
|
|
|
|
|
children: []
|
|
|
|
|
|
},
|
|
|
|
|
|
{
|
|
|
|
|
|
id: 5,
|
|
|
|
|
|
level: 0,
|
|
|
|
|
|
label: '40%~50%',
|
|
|
|
|
|
children: []
|
|
|
|
|
|
},
|
|
|
|
|
|
{
|
|
|
|
|
|
id: 6,
|
|
|
|
|
|
level: 0,
|
|
|
|
|
|
label: '50%~60%',
|
|
|
|
|
|
children: []
|
|
|
|
|
|
},
|
|
|
|
|
|
{
|
|
|
|
|
|
id: 7,
|
|
|
|
|
|
level: 0,
|
|
|
|
|
|
label: '60%~70%',
|
|
|
|
|
|
children: []
|
|
|
|
|
|
},
|
|
|
|
|
|
{
|
|
|
|
|
|
id: 8,
|
|
|
|
|
|
level: 0,
|
|
|
|
|
|
label: '70%~80%',
|
|
|
|
|
|
children: []
|
|
|
|
|
|
},
|
|
|
|
|
|
{
|
|
|
|
|
|
id: 9,
|
|
|
|
|
|
level: 0,
|
|
|
|
|
|
label: '80%~90%',
|
|
|
|
|
|
children: []
|
|
|
|
|
|
},
|
|
|
|
|
|
{
|
|
|
|
|
|
id: 10,
|
|
|
|
|
|
level: 0,
|
|
|
|
|
|
label: '90%~100%',
|
|
|
|
|
|
children: []
|
|
|
|
|
|
}
|
|
|
|
|
|
])
|
|
|
|
|
|
// 添加树
|
|
|
|
|
|
const addTo = row => {
|
|
|
|
|
|
console.log('🚀 ~ addTo ~ row:', row)
|
|
|
|
|
|
}
|
|
|
|
|
|
// 树删除
|
|
|
|
|
|
const remove = (node: any, data: any) => {
|
|
|
|
|
|
const parent = node.parent
|
|
|
|
|
|
const children = parent.data.children || parent.data
|
|
|
|
|
|
const index = children.findIndex(d => d.id === data.id)
|
|
|
|
|
|
children.splice(index, 1)
|
|
|
|
|
|
dataSource.value = [...dataSource.value]
|
|
|
|
|
|
}
|
|
|
|
|
|
|
2024-08-14 11:34:13 +08:00
|
|
|
|
const options = ref({})
|
|
|
|
|
|
const tableStore = new TableStore({
|
|
|
|
|
|
url: '',
|
|
|
|
|
|
method: 'POST',
|
|
|
|
|
|
column: [],
|
|
|
|
|
|
beforeSearchFun: () => {},
|
|
|
|
|
|
loadCallback: () => {}
|
|
|
|
|
|
})
|
|
|
|
|
|
// 卡片点击变色
|
|
|
|
|
|
const handleClick = (e: string) => {
|
|
|
|
|
|
flag.value = e
|
|
|
|
|
|
}
|
|
|
|
|
|
// 点击时间
|
|
|
|
|
|
const timeClick = (row: any) => {
|
|
|
|
|
|
timePopUpBox.value = row
|
|
|
|
|
|
}
|
|
|
|
|
|
// 点击越限
|
2024-08-26 08:58:57 +08:00
|
|
|
|
const detailClick = (row: any) => {
|
2024-08-14 11:34:13 +08:00
|
|
|
|
detailRef.value.open()
|
|
|
|
|
|
}
|
|
|
|
|
|
provide('tableStore', tableStore)
|
|
|
|
|
|
|
|
|
|
|
|
onMounted(() => {
|
|
|
|
|
|
const dom = document.getElementById('navigation-splitpanes')
|
|
|
|
|
|
if (dom) {
|
|
|
|
|
|
size.value = Math.round((180 / dom.offsetHeight) * 100)
|
|
|
|
|
|
}
|
|
|
|
|
|
options.value = {
|
|
|
|
|
|
title: {
|
|
|
|
|
|
text: '占比',
|
|
|
|
|
|
left: '10px'
|
|
|
|
|
|
},
|
|
|
|
|
|
legend: {
|
|
|
|
|
|
show: false
|
|
|
|
|
|
},
|
|
|
|
|
|
tooltip: {},
|
|
|
|
|
|
xAxis: {
|
|
|
|
|
|
show: false
|
|
|
|
|
|
},
|
|
|
|
|
|
yAxis: {
|
|
|
|
|
|
show: false
|
|
|
|
|
|
},
|
|
|
|
|
|
dataZoom: { show: false },
|
|
|
|
|
|
|
|
|
|
|
|
options: {
|
|
|
|
|
|
series: [
|
|
|
|
|
|
{
|
|
|
|
|
|
type: 'pie',
|
|
|
|
|
|
center: ['50%', '50%'],
|
|
|
|
|
|
selectedOffset: 30,
|
|
|
|
|
|
label: {
|
|
|
|
|
|
show: true,
|
|
|
|
|
|
color: '#96A2B5',
|
|
|
|
|
|
lineHeight: 8,
|
|
|
|
|
|
minMargin: 10,
|
|
|
|
|
|
formatter: function (e) {
|
|
|
|
|
|
return '{name|' + e.name + '}{percent|' + e.data.percentage + '}'
|
|
|
|
|
|
},
|
|
|
|
|
|
rich: {
|
|
|
|
|
|
name: {
|
|
|
|
|
|
fontSize: 12
|
|
|
|
|
|
},
|
|
|
|
|
|
|
|
|
|
|
|
percent: {
|
|
|
|
|
|
fontSize: 14,
|
|
|
|
|
|
color: '#000',
|
|
|
|
|
|
padding: [0, 0, 0, 5]
|
|
|
|
|
|
}
|
|
|
|
|
|
}
|
|
|
|
|
|
},
|
|
|
|
|
|
data: [
|
|
|
|
|
|
...powerList1.value.map(item => {
|
|
|
|
|
|
return { value: item.quantity, name: item.label, percentage: item.percentage }
|
|
|
|
|
|
}),
|
|
|
|
|
|
...powerList2.value.map(item => {
|
|
|
|
|
|
return { value: item.quantity, name: item.label, percentage: item.percentage }
|
|
|
|
|
|
})
|
|
|
|
|
|
]
|
|
|
|
|
|
}
|
|
|
|
|
|
]
|
|
|
|
|
|
}
|
|
|
|
|
|
}
|
|
|
|
|
|
})
|
|
|
|
|
|
|
|
|
|
|
|
const handleNodeClick = (data: any, node: any) => {
|
|
|
|
|
|
dotList.value = data
|
|
|
|
|
|
}
|
|
|
|
|
|
</script>
|
|
|
|
|
|
<style lang="scss">
|
|
|
|
|
|
.splitpanes.default-theme .splitpanes__pane {
|
|
|
|
|
|
background: #eaeef1;
|
|
|
|
|
|
}
|
|
|
|
|
|
.cardBox {
|
|
|
|
|
|
.el-card__body {
|
|
|
|
|
|
padding: 5px 10px 10px;
|
|
|
|
|
|
}
|
|
|
|
|
|
}
|
|
|
|
|
|
.box {
|
|
|
|
|
|
.el-card__body {
|
|
|
|
|
|
padding: 10px;
|
|
|
|
|
|
}
|
|
|
|
|
|
}
|
|
|
|
|
|
.container {
|
|
|
|
|
|
display: grid;
|
|
|
|
|
|
grid-template-columns: 5fr 2.5fr;
|
|
|
|
|
|
gap: 20px;
|
|
|
|
|
|
.card-top {
|
|
|
|
|
|
background-color: var(--el-color-primary-light-9);
|
|
|
|
|
|
// color: #fff;
|
|
|
|
|
|
.el-card__body {
|
|
|
|
|
|
display: grid; /* 使用 Grid 布局 */
|
|
|
|
|
|
grid-template-columns: repeat(5, 1fr); /* 每行5列，每列占1份空间 */
|
|
|
|
|
|
text-align: center;
|
|
|
|
|
|
gap: 20px;
|
|
|
|
|
|
padding: 10px;
|
|
|
|
|
|
.img {
|
|
|
|
|
|
vertical-align: middle;
|
|
|
|
|
|
height: 16px;
|
|
|
|
|
|
}
|
|
|
|
|
|
}
|
|
|
|
|
|
}
|
|
|
|
|
|
.echart {
|
|
|
|
|
|
.el-card__body {
|
|
|
|
|
|
padding: 5px;
|
|
|
|
|
|
}
|
|
|
|
|
|
}
|
|
|
|
|
|
}
|
|
|
|
|
|
.el-card {
|
|
|
|
|
|
border-radius: 10px;
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
.hoverBox {
|
|
|
|
|
|
background-color: var(--el-color-primary-light-5);
|
|
|
|
|
|
border-radius: 10px;
|
|
|
|
|
|
}
|
|
|
|
|
|
</style>
|
