yudao-dev/src/views/monitoring/equipmentRecentHours/index.vue

900 lines
23 KiB
Vue
Raw Normal View History

2023-08-30 10:27:49 +08:00
<!--
filename: index.vue
author: liubin
date: 2023-08-04 14:44:58
description: 设备生产24小时记录
-->
<template>
<div class="app-container">
<SearchBar
:formConfigs="[{ label: '近24小时检测记录', type: 'title' }]"
ref="search-bar" />
<!-- <pre><code v-html="jsondemo"></code></pre> -->
<el-skeleton v-if="initing" :rows="6" animated />
<base-table
v-else
:span-method="mergeColumnHandler"
:table-props="tableProps"
:table-data="list"
@emitFun="handleEmitFun"></base-table>
<!-- :page="queryParams.pageNo"
:limit="queryParams.pageSize" -->
</div>
</template>
<script>
import response from './response.json';
import { handleNameData, handleDynamicData } from '@/utils/dynamicProps';
// import hljs from 'highlight.js/lib/highlight';
// import json from 'highlight.js/lib/languages/json';
// import 'highlight.js/styles/github-gist.css';
// hljs.registerLanguage('json', json);
export default {
name: 'QualityRecentHours',
components: {},
props: {},
data() {
return {
initing: false,
queryParams: {
pageNo: 1,
pageSize: 10,
},
list: [
{
productLine: '产线1',
specification: ['80*11', '100*10'].join(','),
equipmentName: '上片机',
totalQuantity: 1000,
'l-1__in': 100,
'l-1__out': 99,
'l-1__nok': 1,
'l-1__ratio': 1,
'l-2__in': 100,
'l-2__out': 99,
'l-2__nok': 1,
'l-2__ratio': 1,
'l-3__in': 100,
'l-3__out': 99,
'l-3__nok': 1,
'l-3__ratio': 1,
'l-4__in': 100,
'l-4__out': 99,
'l-4__nok': 1,
'l-4__ratio': 1,
},
{
productLine: '产线1',
specification: ['80*11', '100*10'].join(','),
equipmentName: '磨边机',
totalQuantity: 1000,
'l-1__in': 100,
'l-1__out': 99,
'l-1__nok': 1,
'l-1__ratio': 1,
'l-2__in': 100,
'l-2__out': 99,
'l-2__nok': 1,
'l-2__ratio': 1,
'l-3__in': 100,
'l-3__out': 99,
'l-3__nok': 1,
'l-3__ratio': 1,
'l-4__in': 100,
'l-4__out': 99,
'l-4__nok': 1,
'l-4__ratio': 1,
},
{
productLine: '产线1',
specification: ['80*11', '100*10'].join(','),
equipmentName: '清洗机',
totalQuantity: 1000,
'l-1__in': 100,
'l-1__out': 99,
'l-1__nok': 1,
'l-1__ratio': 1,
'l-2__in': 100,
'l-2__out': 99,
'l-2__nok': 1,
'l-2__ratio': 1,
'l-3__in': 100,
'l-3__out': 99,
'l-3__nok': 1,
'l-3__ratio': 1,
'l-4__in': 100,
'l-4__out': 99,
'l-4__nok': 1,
'l-4__ratio': 1,
},
// 产线2
{
productLine: '产线2',
specification: ['80*11', '100*10'].join(','),
equipmentName: '上片机',
totalQuantity: 1000,
'l-1__in': 100,
'l-1__out': 99,
'l-1__nok': 1,
'l-1__ratio': 1,
'l-2__in': 100,
'l-2__out': 99,
'l-2__nok': 1,
'l-2__ratio': 1,
'l-3__in': 100,
'l-3__out': 99,
'l-3__nok': 1,
'l-3__ratio': 1,
'l-4__in': 100,
'l-4__out': 99,
'l-4__nok': 1,
'l-4__ratio': 1,
},
{
productLine: '产线2',
specification: ['80*11', '100*10'].join(','),
equipmentName: '磨边机',
totalQuantity: 1000,
'l-1__in': 100,
'l-1__out': 99,
'l-1__nok': 1,
'l-1__ratio': 1,
'l-2__in': 100,
'l-2__out': 99,
'l-2__nok': 1,
'l-2__ratio': 1,
'l-3__in': 100,
'l-3__out': 99,
'l-3__nok': 1,
'l-3__ratio': 1,
'l-4__in': 100,
'l-4__out': 99,
'l-4__nok': 1,
'l-4__ratio': 1,
},
{
productLine: '产线2',
specification: ['80*11', '100*10'].join(','),
equipmentName: '清洗机',
totalQuantity: 1000,
'l-1__in': 100,
'l-1__out': 99,
'l-1__nok': 1,
'l-1__ratio': 1,
'l-2__in': 100,
'l-2__out': 99,
'l-2__nok': 1,
'l-2__ratio': 1,
'l-3__in': 100,
'l-3__out': 99,
'l-3__nok': 1,
'l-3__ratio': 1,
'l-4__in': 100,
'l-4__out': 99,
'l-4__nok': 1,
'l-4__ratio': 1,
},
],
tableProps: [
{ prop: 'productLine', label: '产线', align: 'center' },
{ prop: 'specification', label: '规格', align: 'center' },
{ prop: 'equipmentName', label: '设备', align: 'center' },
{ prop: 'totalQuantity', label: '生产总数', align: 'center' },
{
label: 'l-1',
align: 'center',
children: [
{ prop: 'l-1__in', label: '进数据', align: 'center' },
{ prop: 'l-1__out', label: '出数据', align: 'center' },
{ prop: 'l-1__nok', label: '报废数据', align: 'center' },
{ prop: 'l-1__ratio', label: '报废率', align: 'center' },
],
},
{
label: 'l-2',
align: 'center',
children: [
{ prop: 'l-2__in', label: '进数据', align: 'center' },
{ prop: 'l-2__out', label: '出数据', align: 'center' },
{ prop: 'l-2__nok', label: '报废数据', align: 'center' },
{ prop: 'l-2__ratio', label: '报废率', align: 'center' },
],
},
{
label: 'l-3',
align: 'center',
children: [
{ prop: 'l-3__in', label: '进数据', align: 'center' },
{ prop: 'l-3__out', label: '出数据', align: 'center' },
{ prop: 'l-3__nok', label: '报废数据', align: 'center' },
{ prop: 'l-3__ratio', label: '报废率', align: 'center' },
],
},
2023-08-30 11:37:11 +08:00
{
label: 'l-4',
align: 'center',
children: [
{ prop: 'l-4__in', label: '进数据', align: 'center' },
{ prop: 'l-4__out', label: '出数据', align: 'center' },
{ prop: 'l-4__nok', label: '报废数据', align: 'center' },
{ prop: 'l-4__ratio', label: '报废率', align: 'center' },
],
},
2023-08-30 10:27:49 +08:00
],
HTTPResponse: {
code: 0,
msg: 'success',
data: [
// 这是一行数据
{
productLine: '产线001',
spectification: '规格1、规格2、规格3',
data: [
{
equipmentName: '上片机',
totalQuantity: 24444,
1675180800000: { in: 100, out: 99, notOk: 1, ratio: '0.01' },
1675184400000: { in: 100, out: 99, notOk: 1, ratio: '0.01' },
// more 时间戳数据
},
{
equipmentName: '磨边机',
totalQuantity: 222222,
1675180800000: { in: 100, out: 99, notOk: 1, ratio: '0.01' },
1675184400000: { in: 100, out: 99, notOk: 1, ratio: '0.01' },
// more 时间戳数据
},
{
equipmentName: '清洗机',
totalQuantity: 222,
1675180800000: { in: 100, out: 99, notOk: 1, ratio: '0.01' },
1675184400000: { in: 100, out: 99, notOk: 1, ratio: '0.01' },
// more 时间戳数据
},
// more 设备数据
],
},
// 这是一行数据
{
productLine: '产线002',
spectification: '规格1、规格2、规格3',
data: [
{
equipmentName: '上片机',
totalQuantity: 24444,
1675180800000: { in: 100, out: 99, notOk: 1, ratio: '0.01' },
1675184400000: { in: 100, out: 99, notOk: 1, ratio: '0.01' },
// more 时间戳数据
},
{
equipmentName: '磨边机',
totalQuantity: 222222,
1675180800000: { in: 100, out: 99, notOk: 1, ratio: '0.01' },
1675184400000: { in: 100, out: 99, notOk: 1, ratio: '0.01' },
// more 时间戳数据
},
{
equipmentName: '清洗机',
totalQuantity: 222,
1675180800000: { in: 100, out: 99, notOk: 1, ratio: '0.01' },
1675184400000: { in: 100, out: 99, notOk: 1, ratio: '0.01' },
// more 时间戳数据
},
// more 设备数据
],
},
],
},
2023-08-30 11:37:11 +08:00
// res: {
// code: 0,
// msg: 'success',
// data: [
// {
// productLine: '产线22',
// specification: ['1000*29*1', '898'],
// data: [
// {
// equipmentName: '下片机',
// totalQuantity: 15,
// hourData: {
// '2023-08-29T09:24:09.878': {
// inQuantity: 1,
// nokQuantity: 0,
// outQuantity: 0,
// scrapRatio: 0.0,
// },
// '2023-08-29T10:24:09.878': {
// inQuantity: 0,
// nokQuantity: 2,
// outQuantity: 0,
// scrapRatio: 0.0,
// },
// '2023-08-29T11:24:09.878': {
// inQuantity: 0,
// nokQuantity: 0,
// outQuantity: 3,
// scrapRatio: 0.0,
// },
// '2023-08-29T12:24:09.878': {
// inQuantity: 0,
// nokQuantity: 0,
// outQuantity: 0,
// scrapRatio: 4.0,
// },
// '2023-08-29T13:24:09.878': {
// inQuantity: 0,
// nokQuantity: 0,
// outQuantity: 0,
// scrapRatio: 0.0,
// },
// '2023-08-29T14:24:09.878': {
// inQuantity: 0,
// nokQuantity: 0,
// outQuantity: 0,
// scrapRatio: 0.0,
// },
// '2023-08-29T15:24:09.878': {
// inQuantity: 9,
// nokQuantity: 6,
// outQuantity: 8,
// scrapRatio: 0.46153846,
// },
// '2023-08-29T16:24:09.878': {
// inQuantity: 0,
// nokQuantity: 0,
// outQuantity: 0,
// scrapRatio: 0.0,
// },
// '2023-08-29T17:24:09.878': {
// inQuantity: 1,
// nokQuantity: 1,
// outQuantity: 1,
// scrapRatio: 0.5,
// },
// '2023-08-29T18:24:09.878': {
// inQuantity: 0,
// nokQuantity: 0,
// outQuantity: 0,
// scrapRatio: 0.0,
// },
// '2023-08-29T19:24:09.878': {
// inQuantity: 0,
// nokQuantity: 0,
// outQuantity: 0,
// scrapRatio: 0.0,
// },
// '2023-08-29T20:24:09.878': {
// inQuantity: 0,
// nokQuantity: 0,
// outQuantity: 0,
// scrapRatio: 0.0,
// },
// '2023-08-29T21:24:09.878': {
// inQuantity: 0,
// nokQuantity: 0,
// outQuantity: 0,
// scrapRatio: 0.0,
// },
// '2023-08-29T22:24:09.878': {
// inQuantity: 0,
// nokQuantity: 0,
// outQuantity: 0,
// scrapRatio: 0.0,
// },
// '2023-08-29T23:24:09.878': {
// inQuantity: 0,
// nokQuantity: 0,
// outQuantity: 0,
// scrapRatio: 0.0,
// },
// '2023-08-30T00:24:09.878': {
// inQuantity: 0,
// nokQuantity: 0,
// outQuantity: 0,
// scrapRatio: 0.0,
// },
// '2023-08-30T01:24:09.878': {
// inQuantity: 0,
// nokQuantity: 0,
// outQuantity: 0,
// scrapRatio: 0.0,
// },
// '2023-08-30T02:24:09.878': {
// inQuantity: 0,
// nokQuantity: 0,
// outQuantity: 0,
// scrapRatio: 0.0,
// },
// '2023-08-30T03:24:09.878': {
// inQuantity: 0,
// nokQuantity: 0,
// outQuantity: 0,
// scrapRatio: 0.0,
// },
// '2023-08-30T04:24:09.878': {
// inQuantity: 0,
// nokQuantity: 0,
// outQuantity: 0,
// scrapRatio: 0.0,
// },
// '2023-08-30T05:24:09.878': {
// inQuantity: 0,
// nokQuantity: 0,
// outQuantity: 0,
// scrapRatio: 0.0,
// },
// '2023-08-30T06:24:09.878': {
// inQuantity: 0,
// nokQuantity: 0,
// outQuantity: 0,
// scrapRatio: 0.0,
// },
// '2023-08-30T07:24:09.878': {
// inQuantity: 0,
// nokQuantity: 0,
// outQuantity: 0,
// scrapRatio: 0.0,
// },
// '2023-08-30T08:24:09.878': {
// inQuantity: 0,
// nokQuantity: 0,
// outQuantity: 0,
// scrapRatio: 0.0,
// },
// },
// },
// {
// equipmentName: '磨边机',
// totalQuantity: 100,
// hourData: {
// '2023-08-29T09:24:09.878': {
// inQuantity: 0,
// nokQuantity: 0,
// outQuantity: 0,
// scrapRatio: 0.0,
// },
// '2023-08-29T10:24:09.878': {
// inQuantity: 0,
// nokQuantity: 0,
// outQuantity: 0,
// scrapRatio: 0.0,
// },
// '2023-08-29T11:24:09.878': {
// inQuantity: 0,
// nokQuantity: 0,
// outQuantity: 0,
// scrapRatio: 0.0,
// },
// '2023-08-29T12:24:09.878': {
// inQuantity: 0,
// nokQuantity: 0,
// outQuantity: 0,
// scrapRatio: 0.0,
// },
// '2023-08-29T13:24:09.878': {
// inQuantity: 0,
// nokQuantity: 0,
// outQuantity: 0,
// scrapRatio: 0.0,
// },
// '2023-08-29T14:24:09.878': {
// inQuantity: 0,
// nokQuantity: 0,
// outQuantity: 0,
// scrapRatio: 0.0,
// },
// '2023-08-29T15:24:09.878': {
// inQuantity: 9,
// nokQuantity: 6,
// outQuantity: 8,
// scrapRatio: 0.46153846,
// },
// '2023-08-29T16:24:09.878': {
// inQuantity: 0,
// nokQuantity: 0,
// outQuantity: 0,
// scrapRatio: 0.0,
// },
// '2023-08-29T17:24:09.878': {
// inQuantity: 1,
// nokQuantity: 1,
// outQuantity: 1,
// scrapRatio: 0.5,
// },
// '2023-08-29T18:24:09.878': {
// inQuantity: 0,
// nokQuantity: 0,
// outQuantity: 0,
// scrapRatio: 0.0,
// },
// '2023-08-29T19:24:09.878': {
// inQuantity: 0,
// nokQuantity: 0,
// outQuantity: 0,
// scrapRatio: 0.0,
// },
// '2023-08-29T20:24:09.878': {
// inQuantity: 0,
// nokQuantity: 0,
// outQuantity: 0,
// scrapRatio: 0.0,
// },
// '2023-08-29T21:24:09.878': {
// inQuantity: 0,
// nokQuantity: 0,
// outQuantity: 0,
// scrapRatio: 0.0,
// },
// '2023-08-29T22:24:09.878': {
// inQuantity: 0,
// nokQuantity: 0,
// outQuantity: 0,
// scrapRatio: 0.0,
// },
// '2023-08-29T23:24:09.878': {
// inQuantity: 0,
// nokQuantity: 0,
// outQuantity: 0,
// scrapRatio: 0.0,
// },
// '2023-08-30T00:24:09.878': {
// inQuantity: 0,
// nokQuantity: 0,
// outQuantity: 0,
// scrapRatio: 0.0,
// },
// '2023-08-30T01:24:09.878': {
// inQuantity: 0,
// nokQuantity: 0,
// outQuantity: 0,
// scrapRatio: 0.0,
// },
// '2023-08-30T02:24:09.878': {
// inQuantity: 0,
// nokQuantity: 0,
// outQuantity: 0,
// scrapRatio: 0.0,
// },
// '2023-08-30T03:24:09.878': {
// inQuantity: 0,
// nokQuantity: 0,
// outQuantity: 0,
// scrapRatio: 0.0,
// },
// '2023-08-30T04:24:09.878': {
// inQuantity: 0,
// nokQuantity: 0,
// outQuantity: 0,
// scrapRatio: 0.0,
// },
// '2023-08-30T05:24:09.878': {
// inQuantity: 0,
// nokQuantity: 0,
// outQuantity: 0,
// scrapRatio: 0.0,
// },
// '2023-08-30T06:24:09.878': {
// inQuantity: 0,
// nokQuantity: 0,
// outQuantity: 0,
// scrapRatio: 0.0,
// },
// '2023-08-30T07:24:09.878': {
// inQuantity: 0,
// nokQuantity: 0,
// outQuantity: 0,
// scrapRatio: 0.0,
// },
// '2023-08-30T08:24:09.878': {
// inQuantity: 0,
// nokQuantity: 0,
// outQuantity: 0,
// scrapRatio: 0.0,
// },
// },
// },
// {
// equipmentName: '清洗机',
// totalQuantity: 88,
// hourData: {
// '2023-08-29T09:24:09.878': {
// inQuantity: 0,
// nokQuantity: 0,
// outQuantity: 0,
// scrapRatio: 0.0,
// },
// '2023-08-29T10:24:09.878': {
// inQuantity: 0,
// nokQuantity: 0,
// outQuantity: 0,
// scrapRatio: 0.0,
// },
// '2023-08-29T11:24:09.878': {
// inQuantity: 0,
// nokQuantity: 0,
// outQuantity: 0,
// scrapRatio: 0.0,
// },
// '2023-08-29T12:24:09.878': {
// inQuantity: 0,
// nokQuantity: 0,
// outQuantity: 0,
// scrapRatio: 0.0,
// },
// '2023-08-29T13:24:09.878': {
// inQuantity: 0,
// nokQuantity: 0,
// outQuantity: 0,
// scrapRatio: 0.0,
// },
// '2023-08-29T14:24:09.878': {
// inQuantity: 0,
// nokQuantity: 0,
// outQuantity: 0,
// scrapRatio: 0.0,
// },
// '2023-08-29T15:24:09.878': {
// inQuantity: 9,
// nokQuantity: 6,
// outQuantity: 8,
// scrapRatio: 0.46153846,
// },
// '2023-08-29T16:24:09.878': {
// inQuantity: 0,
// nokQuantity: 0,
// outQuantity: 0,
// scrapRatio: 0.0,
// },
// '2023-08-29T17:24:09.878': {
// inQuantity: 1,
// nokQuantity: 1,
// outQuantity: 1,
// scrapRatio: 0.5,
// },
// '2023-08-29T18:24:09.878': {
// inQuantity: 0,
// nokQuantity: 0,
// outQuantity: 0,
// scrapRatio: 0.0,
// },
// '2023-08-29T19:24:09.878': {
// inQuantity: 0,
// nokQuantity: 0,
// outQuantity: 0,
// scrapRatio: 0.0,
// },
// '2023-08-29T20:24:09.878': {
// inQuantity: 0,
// nokQuantity: 0,
// outQuantity: 0,
// scrapRatio: 0.0,
// },
// '2023-08-29T21:24:09.878': {
// inQuantity: 0,
// nokQuantity: 0,
// outQuantity: 0,
// scrapRatio: 0.0,
// },
// '2023-08-29T22:24:09.878': {
// inQuantity: 0,
// nokQuantity: 0,
// outQuantity: 0,
// scrapRatio: 0.0,
// },
// '2023-08-29T23:24:09.878': {
// inQuantity: 0,
// nokQuantity: 0,
// outQuantity: 0,
// scrapRatio: 0.0,
// },
// '2023-08-30T00:24:09.878': {
// inQuantity: 0,
// nokQuantity: 0,
// outQuantity: 0,
// scrapRatio: 0.0,
// },
// '2023-08-30T01:24:09.878': {
// inQuantity: 0,
// nokQuantity: 0,
// outQuantity: 0,
// scrapRatio: 0.0,
// },
// '2023-08-30T02:24:09.878': {
// inQuantity: 0,
// nokQuantity: 0,
// outQuantity: 0,
// scrapRatio: 0.0,
// },
// '2023-08-30T03:24:09.878': {
// inQuantity: 0,
// nokQuantity: 0,
// outQuantity: 0,
// scrapRatio: 0.0,
// },
// '2023-08-30T04:24:09.878': {
// inQuantity: 0,
// nokQuantity: 0,
// outQuantity: 0,
// scrapRatio: 0.0,
// },
// '2023-08-30T05:24:09.878': {
// inQuantity: 0,
// nokQuantity: 0,
// outQuantity: 0,
// scrapRatio: 0.0,
// },
// '2023-08-30T06:24:09.878': {
// inQuantity: 0,
// nokQuantity: 0,
// outQuantity: 0,
// scrapRatio: 0.0,
// },
// '2023-08-30T07:24:09.878': {
// inQuantity: 0,
// nokQuantity: 0,
// outQuantity: 0,
// scrapRatio: 0.0,
// },
// '2023-08-30T08:24:09.878': {
// inQuantity: 0,
// nokQuantity: 0,
// outQuantity: 0,
// scrapRatio: 0.0,
// },
// },
// },
// ],
// },
// ],
// },
2023-08-30 11:37:11 +08:00
2023-08-30 10:27:49 +08:00
spanInfo: {},
};
},
computed: {},
mounted() {
this.getList();
},
methods: {
/** 构建tableProps - 依据第一个元素所提供的信息 */
buildProps(item) {
2023-08-30 11:37:11 +08:00
const {
data: [{ hourData }],
} = item;
const props = [
{ prop: 'productLine', label: '产线', align: 'center' },
{ prop: 'specification', label: '规格', align: 'center' },
{ prop: 'equipmentName', label: '设备', align: 'center' },
{ prop: 'totalQuantity', label: '生产总数', align: 'center' },
];
for (const key of Object.keys(hourData).sort()) {
const subprop = {
label: key,
align: 'center',
children: [
{ prop: key + '__in', label: '进数据', align: 'center' },
{ prop: key + '__out', label: '出数据', align: 'center' },
{ prop: key + '__nok', label: '报废数据', align: 'center' },
{
prop: key + '__ratio',
label: '报废率',
align: 'center',
filter: (val) => (val != null ? val + ' %' : '-'),
},
2023-08-30 11:37:11 +08:00
],
};
props.push(subprop);
}
2023-08-30 10:27:49 +08:00
this.tableProps = props;
},
/** 把 list 里的数据转换成 tableProps 对应的格式 */
2023-08-30 11:37:11 +08:00
convertList(list) {
this.list.splice(0);
let rowIndex = 0;
for (const line of list) {
const { productLine, specification, data } = line;
// 设置span的行数
this.spanInfo[rowIndex] = data.length;
for (const equipment of data) {
const { equipmentName, totalQuantity } = equipment;
let row = {
productLine,
specification: specification.join('、'),
equipmentName,
totalQuantity,
};
2023-08-30 14:11:24 +08:00
rowIndex += 1;
2023-08-30 11:37:11 +08:00
for (const [key, hourData] of Object.entries(equipment.hourData)) {
const { inQuantity, outQuantity, nokQuantity, scrapRatio } =
hourData;
row[key + '__in'] = inQuantity;
row[key + '__out'] = outQuantity;
row[key + '__nok'] = nokQuantity;
row[key + '__ratio'] = scrapRatio;
}
this.list.push(row);
2023-08-30 11:37:11 +08:00
}
}
},
buildData(data) {
this.convertList(data);
2023-08-30 10:27:49 +08:00
},
/** 合并table列的规则 */
mergeColumnHandler({ row, column, rowIndex, columnIndex }) {
if (columnIndex == 0 || columnIndex == 1) {
if (this.spanInfo[rowIndex]) {
2023-08-30 11:37:11 +08:00
return [
this.spanInfo[rowIndex], // row span
2023-08-30 11:37:11 +08:00
1, // col span
];
} else {
return [0, 0];
}
2023-08-30 10:27:49 +08:00
}
},
async getList() {
const { data } = await this.$axios({
url: '/monitoring/equipment-monitor/recent-24-hours',
method: 'get',
});
// const data = this.res.data;
// console.log('recent-24', data);
2023-08-30 10:27:49 +08:00
this.initing = true;
2023-08-30 11:37:11 +08:00
this.buildProps(data[0]);
this.buildData(data);
this.queryParams.pageSize = this.list.length;
2023-08-30 10:27:49 +08:00
setTimeout(() => {
this.initing = false;
}, 1000);
2023-08-30 10:27:49 +08:00
},
handleEmitFun(payload) {
console.log('payload', payload);
},
},
};
</script>
<style scoped lang="scss">
::-webkit-scrollbar {
display: none;
}
pre {
margin: 10px;
background: #f6f8faf6;
border: 1px solid #e1e4e8;
padding: 12px;
border-radius: 12px;
position: fixed;
// top: 15vh;
top: 10vh;
left: 0;
max-height: 80vh;
overflow-y: auto;
z-index: 100000;
box-shadow: 0 0 32px 12px #0001;
}
code {
font-family: 'IntelOne Mono', 'Ubuntu', 'Courier New', Courier, monospace;
}
</style>