line-height:normal 默认行高 html按钮点击无效button.disabled=true

本文介绍如何使用HTML设置按钮为不可点击状态,通过设置button元素的disabled属性为true实现按钮禁用效果,避免用户误操作。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

line-height:normal

默认行高,设置成默认行高这样当字号较大时不会遮挡其他行的

 

 

 

 html按钮button.disabled=true

是html按钮点击无效

我让你改了很多次,你始终没有改好,现在我给你一段代码,你完全按照这段代码的样式改<template> <div class="container"> <!-- 头部区域(左侧留空,右侧放置筛选框) --> <div class="header"> <div class="left-section"> <!-- 左侧可放置标题或其他内容 --> </div> <div class="right-section"> <el-select v-model="selectedType" placeholder="选择日志类型" clearable style="width: 200px;" > <el-option v-for="type in typeOptions" :key="type" :label="type" :value="type" /> </el-select> </div> </div> <!-- 日志表格 --> <el-table :data="pagedLogs" style="width: 100%" border stripe v-loading="loading" > <el-table-column prop="sn" label="设备SN" width="180" /> <el-table-column prop="type" label="类型" width="100" /> <el-table-column prop="type_label" label="类型标签" width="120" /> <el-table-column prop="label" label="标签" width="120" /> <el-table-column prop="message" label="消息" min-width="300" /> <el-table-column prop="create_time" label="时间" width="180"> <template #default="{ row }"> {{ formatTime(row.create_time) }} </template> </el-table-column> </el-table> <!-- 分页组件 --> <div class="pagination-center"> <el-pagination background layout="total, prev, pager, next" :total="filteredLogs.length" :page-size="pageSize" v-model:current-page="currentPage" /> </div> </div> </template> <script setup> import { ref, computed, onMounted, onBeforeUnmount } from 'vue' // 响应式数据 const logs = ref([]) const selectedType = ref('') const eventSource = ref(null) const loading = ref(false) // 分页相关状态 const currentPage = ref(1) const pageSize = ref(20) // 从日志中提取所有日志类型(去重) const typeOptions = computed(() => { const types = new Set() logs.value.forEach(log => { if (log.type) types.add(log.type) }) return Array.from(types) }) // 过滤后的日志:根据选择的日志类型 const filteredLogs = computed(() => { if (!selectedType.value) return logs.value return logs.value.filter(log => log.type === selectedType.value) }) // 分页后的日志 const pagedLogs = computed(() => { const start = (currentPage.value - 1) * pageSize.value const end = start + pageSize.value return filteredLogs.value.slice(start, end) }) // 格式化时间 const formatTime = (timestamp) => { if (!timestamp) return '' try { const date = new Date(timestamp) return `${date.getFullYear()}-${(date.getMonth()+1).toString().padStart(2, '0')}-${date.getDate().toString().padStart(2, '0')} ${date.getHours().toString().padStart(2, '0')}:${date.getMinutes().toString().padStart(2, '0')}:${date.getSeconds().toString().padStart(2, '0')}` } catch { return timestamp } } // 初始化SSE连接 const initSSE = () => { const sseUrl = 'http://127.0.0.1:8888/sse/logs' if (eventSource.value) { eventSource.value.close() } loading.value = true eventSource.value = new EventSource(sseUrl) eventSource.value.onmessage = (event) => { try { const newLogs = JSON.parse(event.data) // 直接替换整个日志数组 logs.value = newLogs loading.value = false } catch (error) { console.error('解析日志数据失败:', error) loading.value = false } } eventSource.value.onerror = (error) => { console.error('SSE连接错误:', error) loading.value = false // 错误时尝试重新连接 setTimeout(initSSE, 3000) } } onMounted(() => { initSSE() }) onBeforeUnmount(() => { if (eventSource.value) { eventSource.value.close() } }) </script> <style scoped> .container { padding: 20px; height: 100%; display: flex; flex-direction: column; } .header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 15px; } .left-section { display: flex; align-items: center; } .right-section { display: flex; align-items: center; } .el-table { flex: 1; overflow: hidden; } /* 分页居中样式 */ .pagination-center { display: flex; justify-content: center; /* 水平居中 */ margin-top: 15px; } /* 调整分页组件样式 */ .el-pagination { --el-pagination-bg-color: #fff; --el-pagination-button-disabled-bg-color: #fff; --el-pagination-button-bg-color: #fff; --el-pagination-hover-color: #409eff; --el-pagination-button-radius: 4px; } /* 分页按钮样式优化 */ .el-pagination .btn-prev, .el-pagination .btn-next, .el-pager li { min-width: 32px; height: 32px; line-height: 32px; margin: 0 4px; border-radius: 4px; } /* 当前页样式 */ .el-pager li.is-active { background-color: #409eff; color: #fff; font-weight: bold; } /* 表格边框优化 */ .el-table--border { border: 1px solid #ebeef5; border-radius: 4px; } /* 单元格内边距 */ .el-table td, .el-table th { padding: 8px 0; } </style>
最新发布
08-16
<template> <!-- 表格容器,根据 dialogTable 的值动态添加 'dialog-table' 类名 --> <div :class="{'dialog-table': dialogTable}" class="table-box"> <!-- Element UI 表格组件 --> <!-- ref: 为表格组件添加引用,方便后续操作 --> <!-- border: 是否显示表格边框 --> <!-- data: 表格展示的数据 --> <!-- header-cell-style: 设置表格表头的背景颜色 --> <!-- height: 设置表格的--> <!-- highlight-current-row: 是否亮当前选中 --> <!-- row-class-name: 自定义的类名 --> <!-- row-style: 设置的样式,此处设置为 24px --> <!-- stripe: 是否显示斑马纹 --> <!-- style: 设置表格的宽度和边框颜色 --> <!-- @selection-change: 当表格的选中项发生变化时触发的事件 --> <div class="table-container"> <el-table ref="table" v-loading="loading" :border="border" :data="tableData" :header-cell-style="{ background: headerBgColor }" :height="tableHeight" :highlight-current-row="highlightCurrentRow" :row-class-name="rowClassName" :row-style="{ height: '24px' }" :stripe="stripe" :style="{ width: '100%', borderColor: tableBorderColor }" @selection-change="handleSelectionChange" @row-dblclick="handleRowClick" @row-click="handleRowClickSelect" > <!-- 多选列 --> <!-- v-if: 当 multipleSelection 为 true 时显示多选列 --> <!-- selectable: 当开启单选模式时,使用 checkSelectable 方法判断是否可选 --> <!-- type: 列的类型,设置为 'selection' 表示多选列 --> <!-- width: 列的宽度 --> <el-table-column v-if="multipleSelection" :selectable="singleSelect ? checkSelectable : undefined" type="selection" width="40" ></el-table-column> <!-- 序号列 --> <!-- v-if: 当 showIndex 为 true 时显示序号列 --> <!-- align: 列内容的对齐方式,设置为居中对齐 --> <!-- label: 列的表头名称 --> <!-- width: 列的宽度 --> <el-table-column v-if="showIndex" align="center" label="序号" width="60" > <!-- 序号列的内容模板 --> <!-- 计算并显示当前的序号,考虑分页因素 --> <template #default="scope"> {{ (currentPage - 1) * pageSize + scope.$index + 1 }} </template> </el-table-column> <!-- 动态列 --> <!-- v-for: 遍历 columns 数组,动态生成列 --> <!-- key: 为每个列设置唯一的 key 值 --> <!-- formatter: 列的格式化函数 --> <!-- label: 列的表头名称 --> <!-- min-width: 列的最小宽度 --> <!-- prop: 列对应的数据字段 --> <!-- width: 列的宽度 --> <!-- show-overflow-tooltip: 是否在内容溢出时显示 tooltip --> <el-table-column v-for="column in columns" :key="column.prop" :formatter="column.formatter" :label="column.label" :min-width="column.minWidth || '80'" :prop="column.prop" :width="column.width" v-if="!isColumnHidden(column)" :show-overflow-tooltip="true" :fixed="column.fixed" > <!-- 动态列的内容模板 --> <template #default="scope"> <!-- Element UI 提示框组件 --> <!-- disabled: 是否禁用提示框 --> <!-- effect: 提示框的样式效果 --> <!-- placement: 提示框的位置 --> <el-tooltip :disabled="!isTextOverflow(scope.row[column.prop], column.className)" :effect="effect" style="max-width: 600px" :placement="placement" > <!-- 提示框的内容模板 --> <template #content> <div style="max-width: 600px; word-break: break-all">{{ scope.row[column.prop] }}</div> </template> <!-- 显示单元格内容的容器 --> <!-- class: 根据 column.preview 的值动态添加 'text-ellipsis' 类名 --> <!-- style: 设置文本颜色和鼠标指针样式 --> <!-- @click: 单元格点击事件 --> <div :class="{'text-ellipsis': typeof column.preview === 'function' ? column.preview(scope.row) : column.preview}" :style="{ color: getTextColor(scope.row, column), cursor: (typeof column.clickable === 'function' ? column.clickable(scope.row) : column.clickable) ? 'pointer' : 'default' // 新增样式 }" class="preview-text" @click="handleCellClick(column, scope.row)" > <!-- 显示单元格内容 --> <!-- v-html: 根据 column.formatter 的值动态显示内容 --> <div :class="column.className" v-html="column.formatter ? column.formatter(scope.row, column, scope.row[column.prop]) : scope.row[column.prop]" v-if="!column.isInlineViewing"></div> <!-- 内联查看图标 --> <!-- v-if: 当 column.isInlineViewing 为 true 时显示图标 --> <div v-if="column.isInlineViewing"> <el-button type="text" @click="handleAction(column.icon, scope.row)"> <!-- 操作按钮的内容 --> <div class="action-item"> <!-- 操作按钮的图标 --> <svg-icon :icon-class="column.icon"/> <!-- 操作按钮的文本 --> <div class="action-text" v-html="column.formatter ? column.formatter(scope.row, column, scope.row[column.prop]) : scope.row[column.prop]"></div> <!-- <span class="action-text">{{ scope.row[column.prop] }}</span>--> </div> </el-button> </div> <!-- 新增预览图标 --> <!-- v-if: 根据 column.preview 的值判断是否显示图标 --> <svg-icon v-if="typeof column.preview === 'function' ? column.preview(scope.row) : column.preview" class="preview-icon" icon-class="primary" /> </div> </el-tooltip> </template> </el-table-column> <!-- 操作列 --> <!-- v-if: 当 showActionColumn 为 true 时显示操作列 --> <!-- label: 操作列的表头名称 --> <!-- width: 操作列的宽度 :width="actionColumnWidth"--> <!-- fixed: 操作列固定在右侧 --> <el-table-column v-if="showActionColumn" :label="operation" :min-width="calculateActionColumnWidth()" fixed="right" > <!-- 操作列的内容模板 --> <template #default="scope"> <!-- 操作按钮容器 --> <div class="operation"> <!-- 遍历操作按钮数组,动态生成按钮 --> <!-- v-for: 遍历操作按钮数组 --> <!-- key: 为每个按钮设置唯一的 key 值 --> <!-- size: 按钮的大小 --> <!-- type: 按钮的类型 --> <!-- @click: 按钮点击事件 --> <el-button v-for="button in (scope.row.actionButtons || actionButtons)" :key="button.name" size="small" type="text" :loading="typeof button.loading === 'function' ? button.loading(scope.row) : button.loading" v-if="!button.hasPermission || $auth.hasPermi(button.hasPermission)" :disabled="button.disabled ? (typeof button.disabled === 'function' ? button.disabled(scope.row) : button.disabled) : false" @click.stop="handleAction(button.name, scope.row)" > <!-- 操作按钮的内容 --> <span class="action-item"> <!-- 操作按钮的图标 --> <svg-icon :icon-class="button.icon || button.name" class="action-icon" :class="{'disabled-text': button.disabled? (typeof button.disabled === 'function' ? button.disabled(scope.row) : button.disabled) : false}" /> <!-- 操作按钮的文本 --> <span class="action-text" :class="{'disabled-text': button.disabled? (typeof button.disabled === 'function' ? button.disabled(scope.row) : button.disabled) : false}">{{ button.label }}</span> </span> </el-button> </div> </template> </el-table-column> </el-table> </div> <!-- 分页组件容器 --> <div class="pagination-wrapper" v-if="paginationFlag"> <!-- Element UI 分页组件 --> <!-- background: 是否显示分页按钮的背景 --> <!-- current-page: 当前页码 --> <!-- layout: 分页组件的布局 --> <!-- page-size: 每页显示的记录数 --> <!-- page-sizes: 每页显示记录数的可选值 --> <!-- total: 总记录数 --> <!-- @size-change: 每页显示记录数变化时触发的事件 --> <!-- @current-change: 当前页码变化时触发的事件 --> <el-pagination :background="background" :current-page="currentPage" :layout="layout" :page-size="pageSize" :page-sizes="pageSizes" :total="total" @size-change="handleSizeChange" @current-change="handleCurrentChange" /> </div> </div> </template> <script> /** * ElementTableWrapper 组件 * 封装了 Element UI 的表格组件,提供了多选、序号、动态列、操作列和分页等功能 */ export default { name: 'ElementTableWrapper', props: { // 表格数据 tableData: { type: Array, default: () => [] }, // 列配置 columns: { type: Array, default: () => [] }, // 列配置 operation: { type: String, default: '操作' }, // 是否开启多选功能 multipleSelection: { type: Boolean, default: false }, // 是否显示操作列 showActionColumn: { type: Boolean, default: true }, // 是否显示边框 border: { type: Boolean, default: true }, // 是否显示斑马纹 stripe: { type: Boolean, default: false }, // 是否亮当前 highlightCurrentRow: { type: Boolean, default: false }, // 是否亮当前 dialogTable: { type: Boolean, default: false }, // 是否显示分页功能 paginationFlag: { type: Boolean, default: true }, // 样式类名回调函数 rowClassName: { type: Function, default: () => '' }, // 操作按钮配置 actionButtons: { type: Array, default: () => [ {name: 'add', label: '新增', icon: 'add'}, {name: 'edit', label: '编辑', icon: 'edit'}, {name: 'delete', label: '删除', icon: 'delete'} ] }, // 表格头背景颜色 headerBgColor: { type: String, default: '#F9FAFB' }, // 表格边框颜色 tableBorderColor: { type: String, default: 'rgb(234, 236, 240)' }, // 新增单选控制props singleSelect: { // 启用单选模式 type: Boolean, default: false }, // 默认选中首 defaultSelect: { type: Boolean, default: false }, // 新增分页相关props currentPage: { type: Number, default: 1 }, // 每页显示的记录数 pageSize: { type: Number, default: 10 }, // 总记录数 total: { type: Number, default: 0 }, // 每页显示记录数的可选值 pageSizes: { type: Array, default: () => [10, 20, 50, 100] }, // 分页组件的布局 layout: { type: String, default: 'total, sizes, prev, pager, next, jumper' }, // 是否显示分页按钮的背景 background: { type: Boolean, default: true }, // 表格度 tableHeight: { type: [String, Number], default: '100%' // 默认100%度 }, // 是否显示序号列 showIndex: { type: Boolean, default: true }, // 是否启用点击事件 rowClickEnable: { type: Boolean, default: false }, // 点击事件处理器 rowClickHandler: { type: Function, default: null }, // 提示框的样式效果 effect: { type: String, default: 'dark' }, // 提示框的位置 placement: { type: String, default: 'top' }, enableRowClickSelect: { type: Boolean, default: false }, // 新增 loading 属性 loading: { type: Boolean, default: false } }, data() { return { currentSelection: null, // 当前选中 crossPageSelection: [], // 跨页选择的数据 } }, watch: { /** * 监听表格数据变化 * 当表格数据变化且 defaultSelect 为 true 时,默认选中第一 * @param {Array} newVal - 新的表格数据 */ tableData(newVal) { if (this.defaultSelect && newVal.length > 0) { this.$nextTick(() => { // 切换第一的选中状态为选中 this.$refs.table.toggleRowSelection(newVal[0], true) }) } }, }, mounted() { this.$emit('rendered'); // 触发 rendered 事件 }, methods: { /** * 处理操作按钮点击事件 * 触发与按钮名称对应的自定义事件,并传递当前数据 * @param {string} actionName - 操作按钮的名称 * @param {Object} row - 当前的数据 */ handleAction(actionName, row) { this.$emit(actionName, row); }, // 处理点击事件 handleRowClick(row) { if (this.rowClickEnable) { // 触发自定义点击事件 this.$emit('row-click', row); // 如果有自定义处理函数则执 if (this.rowClickHandler) { this.rowClickHandler(row); } } }, /** * 获取文本颜色 * 根据列的文本颜色规则,判断是否需要修改文本颜色 * @param {Object} row - 当前的数据 * @param {Object} column - 当前列的配置 * @returns {string} - 文本颜色 */ getTextColor(row, column) { // 将参数名从prop改为column if (column.textColorRule) { const {condition, color} = column.textColorRule; if (condition(row)) { // 新增:如果 color 是函数则调用并传入当前数据,否则直接使用字符串 return typeof color === 'function' ? color(row) : color; } } return 'rgb(38, 38, 38)'; }, /** * 处理单元格点击事件 * 当单元格可点击时,触发 'cell-click' 自定义事件 * @param {Object} column - 当前列的配置 * @param {Object} row - 当前的数据 */ handleCellClick(column, row) { if (typeof column.clickable === 'function' ? column.clickable(row) : column.clickable) { this.$emit('cell-click', { column, row, prop: column.prop }) } }, /** * 判断文本是否溢出 * 通过比较元素的滚动宽度和客户端宽度来判断文本是否溢出 * @param {string} text - 文本内容 * @param className * @returns {boolean} - 文本是否溢出 */ isTextOverflow(text, className) { if (!text || !className) return false; // 创建测量容器 const container = document.createElement('div'); container.className = className; container.style.cssText = ` position: absolute; visibility: hidden; white-space: nowrap; font-size: 14px; padding: 0 8px; max-width: 100%; `; // 创建文本测量元素 const textSpan = document.createElement('div'); textSpan.textContent = text; // 测量逻辑 document.body.appendChild(container); container.appendChild(textSpan); const containerWidth = container.offsetWidth; const textWidth = textSpan.offsetWidth; document.body.removeChild(container); // 双重判断:文本超过容器宽度且在表格最大宽度范围内 return textWidth > containerWidth; }, /** * 处理每页显示记录数变化事件 * 触发 'update:pageSize' 和 'pagination-change' 自定义事件 * @param {number} val - 新的每页显示记录数 */ handleSizeChange(val) { this.$emit('update:pageSize', val); this.$emit('pagination-change', { page: this.currentPage, size: val }); // 新增:滚动到表格顶部 this.$nextTick(() => { const tableWrapper = this.$refs.table.$el.querySelector('.el-table__body-wrapper'); if (tableWrapper) { tableWrapper.scrollTop = 0; } }); }, // 暴露给父组件的方法 toggleRowSelection(row, selected) { this.$refs.table.toggleRowSelection(row, selected) }, /** * 处理表格选中项变化事件 * 当开启单选模式时,确保只选中一 * @param {Array} selection - 当前选中的数据数组 */ handleSelectionChange(selection) { if (this.singleSelect) { if (selection.length > 1) { const last = selection[selection.length - 1] // 清空所有选中项 this.$refs.table.clearSelection() // 切换最后一项的选中状态为选中 this.$refs.table.toggleRowSelection(last) this.currentSelection = last } else { this.currentSelection = selection[0] || null } } // 触发 'selection-change' 自定义事件,传递跨页选择的数据 this.$emit('selection-change', selection) }, /** * 计算操作列的宽度 * 根据操作按钮的数量和每个按钮的大致宽度计算操作列的宽度 * @returns {number} - 操作列的宽度 */ calculateActionColumnWidth() { const getButtonWidth = (text) => { if (text.length >= 4) return 80; else if (text.length >= 2) return 60; return 40; }; // 权限判断方法(与模板中的v-if逻辑保持一致) const hasPermission = (button) => { return !button.hasPermission || this.$auth.hasPermi(button.hasPermission); }; const maxButtonCountRow = this.tableData.reduce((prev, current) => { // 过滤无权限按钮后比较 const prevValid = (prev.actionButtons || this.actionButtons).filter(hasPermission); const currentValid = (current.actionButtons || this.actionButtons).filter(hasPermission); return prevValid.length > currentValid.length ? prev : current; }, {}); // 过滤有效按钮 const validButtons = (maxButtonCountRow.actionButtons || this.actionButtons).filter(hasPermission); return validButtons.reduce((sum, button) => { return sum + getButtonWidth(button.label); }, 0); // 增加安全边距 }, /** * 检查是否可选 * 当开启单选模式时,判断是否可以被选中 * @param {Object} row - 当前的数据 * @param {number} index - 当前的索引(未使用) * @returns {boolean} - 是否可选 */ checkSelectable(row, index) { return !this.currentSelection || row === this.currentSelection }, /** * 处理当前页码变化事件 * 触发 'update:currentPage' 和 'pagination-change' 自定义事件 * @param {number} val - 新的当前页码 */ handleCurrentChange(val) { this.$emit('update:currentPage', val); this.$emit('pagination-change', { page: val, size: this.pageSize }); // 新增:滚动到表格顶部 this.$nextTick(() => { const tableWrapper = this.$refs.table.$el.querySelector('.el-table__body-wrapper'); if (tableWrapper) { tableWrapper.scrollTop = 0; } }); }, // 新增列隐藏判断方法 isColumnHidden(column) { if (typeof column.hidden === 'function') { return column.hidden(this.$parent) // 传入父组件上下文 } return !!column.hidden }, /** * 处理点击选中事件 * 当 enableRowClickSelect 为 true 时,选中点击 * @param {Object} row - 当前点击的数据 */ handleRowClickSelect(row) { if (this.enableRowClickSelect) { if (this.singleSelect) { // 单选模式,清空其他选中项,选中当前 this.$refs.table.clearSelection(); this.$refs.table.toggleRowSelection(row, true); } else { // 多选模式,切换当前的选中状态 this.$refs.table.toggleRowSelection(row); } this.$emit('selection-change', this.$refs.table.selection); } } } }; </script> <style lang="scss" scoped> .table-box { display: flex; flex-direction: column; flex: 1; overflow: hidden; } .table-container { flex: 1; overflow: auto; ::v-deep .el-table { .el-table__body-wrapper { overflow: auto; height: calc(100% - 44px) !important; } } } /** * 对话框中的表格样式 * 设置表格度为 100% */ .dialog-table { height: 100%; } /** * 分页组件容器样式 * 绝对定位到底部右侧,宽度为表格宽度减去 33px,文本右对齐 */ .pagination-wrapper { position: relative; text-align: right; margin-bottom: 10px; margin-top: 15px; } /** * 表格容器样式 * 确保表格容器有相对定位,设置最小度 */ div:first-child { position: relative; min-height: 30px; /* 可根据需要调整最小度 */ } /** * 分页按钮样式 * 设置分页按钮的边框、圆角、内边距和鼠标悬停样式 */ ::v-deep .el-pagination.is-background { .btn-prev, .btn-next { border: 1px solid #DCDFE6; border-radius: 4px; padding: 0 8px; margin: 0 5px; &:hover { color: #409EFF; border-color: #409EFF; } } } /** * 表格基础样式 * 设置表格字体大小,处理文本换和溢出情况,设置预览图标样式 */ ::v-deep .el-table { font-size: 14px; /** * 允许换的列样式 * 允许文本换,调整 */ .wrap-text-column { white-space: normal !important; /* 允许换 */ word-break: break-all; /* 允许单词内换 */ line-height: 1.5; /* 调整 */ } /** * 鼠标悬停在表格上时的样式 * 显示预览图标 */ tr:hover { .preview-icon { display: inline-block !important; } } .cell-content { .content-wrapper { .el-icon-loading { display: inline-block !important; position: absolute; right: 8px; top: 25%; color: #1D9C9D; } } } /** * 非换列的样式 * 文本不换,溢出部分显示省略号 */ :not(.wrap-text-column) { .cell { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } } /** * 文本省略样式 * 文本不换,溢出部分显示省略号,为图标留出空间 */ .text-ellipsis { position: relative; padding-right: 24px; // 为图标留出空间 display: inline-block; width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } /** * 预览图标样式 * 默认隐藏,鼠标悬停在表格上时显示 */ .preview-icon { display: none; position: absolute; right: 8px; top: 25%; cursor: pointer; color: #1D9C9D; } /** * 预览文本样式 * 文本不换,溢出部分显示省略号,垂直居中 */ .preview-text { display: inline-block; width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; vertical-align: middle; line-height: 2; /** * 标签列样式 * 允许标签换设置标签样式 */ .tags-column { white-space: normal !important; line-height: 1.5; /** * 标签项样式 * 设置标签的边框、圆角、颜色和背景颜色 */ .tag-item { display: inline-block; padding: 2px 8px; margin: 2px; border: 1px solid rgba(255, 105, 41, 0.5); border-radius: 4px; color: #FF6929; background-color: transparent; font-size: 12px; word-break: keep-all; /* 防止单个标签换 */ } } } /** * 表格表头和单元格样式 * 调整内边距,设置文本不换,不隐藏溢出内容,不显示省略号 */ th, td { padding: 2px 0; .cell { white-space: nowrap; overflow: visible; text-overflow: ellipsis; line-height: 1; } } td.el-table__cell div { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } } /** * 操作项样式 * 设置操作按钮和操作项的布局为水平居中对齐 */ .operation, .action-item { display: flex; white-space: nowrap; /* 防止操作按钮 */ align-items: center; } /** * 文本省略样式 * 文本不换,溢出部分显示省略号 */ .text-ellipsis { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .action-item { cursor: pointer; margin-right: 8px; &:last-child { margin-right: 0; } .action-text { margin-left: 4px; font-size: 12px; color: rgb(31, 198, 234); } .action-icon { width: 1em; height: 1em; color: #1FC6EA; transition: color 0.2s; &:hover { color: #1FC6EA; } } .disabled-text { color: #999; } } ::v-deep .el-button--text { padding: 2px 0; } .action-item { display: inline-flex; align-items: center; cursor: pointer; margin-right: 8px; &:last-child { margin-right: 0; } } .action-text { margin-left: 4px; font-size: 12px; color: #606266; } .action-icon { width: 1em; height: 1em; cursor: pointer; color: #606266; transition: color 0.2s; } .action-icon:hover { color: #1FC6EA; } /* 添加表格字体大小设置 */ ::v-deep .el-table { font-size: 14px; /* 可调整字体大小 */ } ::v-deep .el-table th, ::v-deep .el-table td { padding: 10px 0; /* 调整单元格内边距 */ } /* 表格内容单显示 */ ::v-deep .el-table .cell { white-space: nowrap; /* 不换 */ overflow: visible; /* 不隐藏溢出内容 */ text-overflow: ellipsis; /* 不显示省略号 */ line-height: 1; /* */ } </style> 数据内容{ "total": 77251, "rows": [ { "id": "3109226059753587717", "stationId": "10042", "stationName": "盘城变", "voltageLevel": "220kV", "voltageLevelCode": "33", "bayId": "10006395", "bayName": "2号主变", "areaId": "206", "areaName": "220北", "equipLevel": "32", "equipLevelName": "110kV", "equipName": "2号主变110kV侧中性点成套装置", "equipNo": "10MZ0108517959259", "equipModel": "SR-JXB-110", "equipTypeId": 141, "equipTypeName": "主变中性点成套装置", "transRunNo": "", "useEnvironment": "户外式", "useEnvironmentCode": "2", "structType": "", "structTypeCode": "", "insulationMedium": "", "insulationMediumCode": "", "ratedCurrent": null, "ratedBreakCurrent": null, "ratedCapacity": null, "breakerStructType": "", "breakerStructTypeCode": "", "ownNo": "", "produceOrgId": "", "produceOrg": "江苏省如压电器有限公司", "startTime": "2022-09-30", "manufactureDate": "2021-05-01", "lastUpdateTime": "", "nextUpdateTime": "", "cycle": "6", "cycleUnit": "1", "dispatchRecord": "", "regulatePressureMode": null, "regulatePressureModeCode": null, "equipmentType": null, "equipmentTypeCode": null, "phase": "O", "phaseCode": "4", "psrStateName": "在运", "psrState": "20" }, { "id": "3109226059753587718", "stationId": "10089", "stationName": "万寿变", "voltageLevel": "110kV", "voltageLevelCode": "32", "bayId": "10004149", "bayName": "1号主变", "areaId": "213", "areaName": "城北", "equipLevel": "32", "equipLevelName": "110kV", "equipName": "1号主变中性点成套装置", "equipNo": "10MZ0108518228845", "equipModel": "CG-IXB-110/1600", "equipTypeId": 141, "equipTypeName": "主变中性点成套装置", "transRunNo": "", "useEnvironment": "户外式", "useEnvironmentCode": "2", "structType": "", "structTypeCode": "", "insulationMedium": "", "insulationMediumCode": "", "ratedCurrent": null, "ratedBreakCurrent": null, "ratedCapacity": null, "breakerStructType": "", "breakerStructTypeCode": "", "ownNo": "", "produceOrgId": "", "produceOrg": "湖南长压开关有限公司", "startTime": "2023-01-01", "manufactureDate": "2021-11-01", "lastUpdateTime": "", "nextUpdateTime": "", "cycle": "6", "cycleUnit": "1", "dispatchRecord": "", "regulatePressureMode": null, "regulatePressureModeCode": null, "equipmentType": null, "equipmentTypeCode": null, "phase": "O", "phaseCode": "4", "psrStateName": "在运", "psrState": "20" }, { "id": "3109226059753587719", "stationId": "64386cb90e3c11ee90179e25b59ef9e0", "stationName": "绿洲变", "voltageLevel": "110kV", "voltageLevelCode": "32", "bayId": "64d4ac720e3c11ee90179e25b59ef9e0", "bayName": "1号主变", "areaId": "210", "areaName": "城南", "equipLevel": "32", "equipLevelName": "110kV", "equipName": "1号主变中性点成套装置", "equipNo": "10MZ0108519189286", "equipModel": "XK-ZJB-110", "equipTypeId": 141, "equipTypeName": "主变中性点成套装置", "transRunNo": "", "useEnvironment": "户内式", "useEnvironmentCode": "1", "structType": "", "structTypeCode": "", "insulationMedium": "", "insulationMediumCode": "", "ratedCurrent": null, "ratedBreakCurrent": null, "ratedCapacity": null, "breakerStructType": "", "breakerStructTypeCode": "", "ownNo": "", "produceOrgId": "", "produceOrg": "西安西电压开关有限责任公司", "startTime": "2023-06-26", "manufactureDate": "2023-05-01", "lastUpdateTime": "", "nextUpdateTime": "", "cycle": "6", "cycleUnit": "1", "dispatchRecord": "", "regulatePressureMode": null, "regulatePressureModeCode": null, "equipmentType": null, "equipmentTypeCode": null, "phase": "O", "phaseCode": "4", "psrStateName": "在运", "psrState": "20" }, { "id": "3109226059753587720", "stationId": "64386cb90e3c11ee90179e25b59ef9e0", "stationName": "绿洲变", "voltageLevel": "110kV", "voltageLevelCode": "32", "bayId": "64d4ac7c0e3c11ee90179e25b59ef9e0", "bayName": "2号主变", "areaId": "210", "areaName": "城南", "equipLevel": "32", "equipLevelName": "110kV", "equipName": "2号主变中性点成套装置", "equipNo": "10MZ0108519190392", "equipModel": "XK-ZJB-110", "equipTypeId": 141, "equipTypeName": "主变中性点成套装置", "transRunNo": "", "useEnvironment": "户内式", "useEnvironmentCode": "1", "structType": "", "structTypeCode": "", "insulationMedium": "", "insulationMediumCode": "", "ratedCurrent": null, "ratedBreakCurrent": null, "ratedCapacity": null, "breakerStructType": "", "breakerStructTypeCode": "", "ownNo": "", "produceOrgId": "", "produceOrg": "西安西电压开关有限责任公司", "startTime": "2023-06-26", "manufactureDate": "2023-05-01", "lastUpdateTime": "", "nextUpdateTime": "", "cycle": "6", "cycleUnit": "1", "dispatchRecord": "", "regulatePressureMode": null, "regulatePressureModeCode": null, "equipmentType": null, "equipmentTypeCode": null, "phase": "O", "phaseCode": "4", "psrStateName": "在运", "psrState": "20" }, { "id": "3109226059753587721", "stationId": "10000002", "stationName": "徐庄变", "voltageLevel": "110kV", "voltageLevelCode": "32", "bayId": "128246796", "bayName": "2号主变", "areaId": "213", "areaName": "城北", "equipLevel": "32", "equipLevelName": "110kV", "equipName": "2号主变中性点成套装置", "equipNo": "10MZ0108519046377", "equipModel": "GW13-72.5(W)", "equipTypeId": 141, "equipTypeName": "主变中性点成套装置", "transRunNo": "", "useEnvironment": "户内式", "useEnvironmentCode": "1", "structType": "", "structTypeCode": "", "insulationMedium": "", "insulationMediumCode": "", "ratedCurrent": null, "ratedBreakCurrent": null, "ratedCapacity": null, "breakerStructType": "", "breakerStructTypeCode": "", "ownNo": "", "produceOrgId": "", "produceOrg": "江苏如皋压电器有限公司", "startTime": "2011-03-11", "manufactureDate": "2011-01-01", "lastUpdateTime": "", "nextUpdateTime": "", "cycle": "6", "cycleUnit": "1", "dispatchRecord": "", "regulatePressureMode": null, "regulatePressureModeCode": null, "equipmentType": null, "equipmentTypeCode": null, "phase": "O", "phaseCode": "4", "psrStateName": "在运", "psrState": "20" }, { "id": "3109226059753587722", "stationId": "10000002", "stationName": "徐庄变", "voltageLevel": "110kV", "voltageLevelCode": "32", "bayId": "10014690", "bayName": "1号主变", "areaId": "213", "areaName": "城北", "equipLevel": "32", "equipLevelName": "110kV", "equipName": "1号主变中性点成套装置", "equipNo": "10MZ0108519046388", "equipModel": "GW13-72.5(W)", "equipTypeId": 141, "equipTypeName": "主变中性点成套装置", "transRunNo": "", "useEnvironment": "户内式", "useEnvironmentCode": "1", "structType": "", "structTypeCode": "", "insulationMedium": "", "insulationMediumCode": "", "ratedCurrent": null, "ratedBreakCurrent": null, "ratedCapacity": null, "breakerStructType": "", "breakerStructTypeCode": "", "ownNo": "", "produceOrgId": "", "produceOrg": "江苏如皋压电器有限公司", "startTime": "2011-03-11", "manufactureDate": "2011-01-01", "lastUpdateTime": "", "nextUpdateTime": "", "cycle": "6", "cycleUnit": "1", "dispatchRecord": "", "regulatePressureMode": null, "regulatePressureModeCode": null, "equipmentType": null, "equipmentTypeCode": null, "phase": "O", "phaseCode": "4", "psrStateName": "在运", "psrState": "20" }, { "id": "3109226059753587723", "stationId": "a13ce0756f8a06deed5382a7950153a13cbdc630ab", "stationName": "诚实变", "voltageLevel": "110kV", "voltageLevelCode": "32", "bayId": "c2b10909-afe1-47fa-af68-c268247d1a7d", "bayName": "2号主变", "areaId": "213", "areaName": "城北", "equipLevel": "32", "equipLevelName": "110kV", "equipName": "2号主变中性点成套装置", "equipNo": "10MZ0108521242648", "equipModel": "GW13-126W/1600", "equipTypeId": 141, "equipTypeName": "主变中性点成套装置", "transRunNo": "", "useEnvironment": "户内式", "useEnvironmentCode": "1", "structType": "", "structTypeCode": "", "insulationMedium": "", "insulationMediumCode": "", "ratedCurrent": null, "ratedBreakCurrent": null, "ratedCapacity": null, "breakerStructType": "", "breakerStructTypeCode": "", "ownNo": "", "produceOrgId": "", "produceOrg": "常州思源东芝变压器有限公司", "startTime": "2024-09-06", "manufactureDate": "2024-01-01", "lastUpdateTime": "", "nextUpdateTime": "", "cycle": "6", "cycleUnit": "1", "dispatchRecord": "", "regulatePressureMode": null, "regulatePressureModeCode": null, "equipmentType": null, "equipmentTypeCode": null, "phase": "O", "phaseCode": "4", "psrStateName": "在运", "psrState": "20" }, { "id": "3109226059753587724", "stationId": "19b7e87c-70b3-4736-9126-066604cfe72f", "stationName": "小村变", "voltageLevel": "110kV", "voltageLevelCode": "32", "bayId": "d22b61f9-4a32-4da2-b2d8-c10a447d1f51", "bayName": "2号主变", "areaId": "210", "areaName": "城南", "equipLevel": "32", "equipLevelName": "110kV", "equipName": "2号主变中性点成套装置", "equipNo": "10MZ0108521256500", "equipModel": "ZJKK-320-15", "equipTypeId": 141, "equipTypeName": "主变中性点成套装置", "transRunNo": "", "useEnvironment": "户内式", "useEnvironmentCode": "1", "structType": "", "structTypeCode": "", "insulationMedium": "", "insulationMediumCode": "", "ratedCurrent": null, "ratedBreakCurrent": null, "ratedCapacity": null, "breakerStructType": "", "breakerStructTypeCode": "", "ownNo": "", "produceOrgId": "", "produceOrg": "江苏如压电器有限公司", "startTime": "2024-09-23", "manufactureDate": "2024-02-01", "lastUpdateTime": "", "nextUpdateTime": "", "cycle": "6", "cycleUnit": "1", "dispatchRecord": "", "regulatePressureMode": null, "regulatePressureModeCode": null, "equipmentType": null, "equipmentTypeCode": null, "phase": "O", "phaseCode": "4", "psrStateName": "在运", "psrState": "20" }, { "id": "3109226059753587725", "stationId": "19b7e87c-70b3-4736-9126-066604cfe72f", "stationName": "小村变", "voltageLevel": "110kV", "voltageLevelCode": "32", "bayId": "6acbf7ba-0563-4500-92af-07f80a9f0137", "bayName": "1号主变", "areaId": "210", "areaName": "城南", "equipLevel": "32", "equipLevelName": "110kV", "equipName": "1号主变中性点成套装置", "equipNo": "10MZ0108521256499", "equipModel": "ZJKK-320-15", "equipTypeId": 141, "equipTypeName": "主变中性点成套装置", "transRunNo": "", "useEnvironment": "户内式", "useEnvironmentCode": "1", "structType": "", "structTypeCode": "", "insulationMedium": "", "insulationMediumCode": "", "ratedCurrent": null, "ratedBreakCurrent": null, "ratedCapacity": null, "breakerStructType": "", "breakerStructTypeCode": "", "ownNo": "", "produceOrgId": "", "produceOrg": "江苏如压电器有限公司", "startTime": "2024-09-23", "manufactureDate": "2024-02-01", "lastUpdateTime": "", "nextUpdateTime": "", "cycle": "6", "cycleUnit": "1", "dispatchRecord": "", "regulatePressureMode": null, "regulatePressureModeCode": null, "equipmentType": null, "equipmentTypeCode": null, "phase": "O", "phaseCode": "4", "psrStateName": "在运", "psrState": "20" }, { "id": "3109226059753587726", "stationId": "10055", "stationName": "珠江路变", "voltageLevel": "110kV", "voltageLevelCode": "32", "bayId": "4fcb2a97-9e97-4382-ad72-76fa14a0a900", "bayName": "3号主变", "areaId": "213", "areaName": "城北", "equipLevel": "32", "equipLevelName": "110kV", "equipName": "3号主变中性点成套装置", "equipNo": "10MZ0108521889218", "equipModel": "SR-JXB-110", "equipTypeId": 141, "equipTypeName": "主变中性点成套装置", "transRunNo": "3号主变中性点成套装置", "useEnvironment": "户外式", "useEnvironmentCode": "2", "structType": "", "structTypeCode": "", "insulationMedium": "", "insulationMediumCode": "", "ratedCurrent": null, "ratedBreakCurrent": null, "ratedCapacity": null, "breakerStructType": "", "breakerStructTypeCode": "", "ownNo": "KH250066", "produceOrgId": "", "produceOrg": "江苏如压电气有限公司", "startTime": "2025-04-01", "manufactureDate": "2025-03-01", "lastUpdateTime": "", "nextUpdateTime": "", "cycle": "6", "cycleUnit": "1", "dispatchRecord": "", "regulatePressureMode": null, "regulatePressureModeCode": null, "equipmentType": null, "equipmentTypeCode": null, "phase": "O", "phaseCode": "4", "psrStateName": "在运", "psrState": "20" }, { "id": "3109226059753587727", "stationId": "10054", "stationName": "云南路变", "voltageLevel": "110kV", "voltageLevelCode": "32", "bayId": "10001660", "bayName": "1号主变", "areaId": "213", "areaName": "城北", "equipLevel": "32", "equipLevelName": "110kV", "equipName": "1号主变中性点成套装置", "equipNo": "10MZ0108521404169", "equipModel": "XK-ZJB-110", "equipTypeId": 141, "equipTypeName": "主变中性点成套装置", "transRunNo": "", "useEnvironment": "户内式", "useEnvironmentCode": "1", "structType": "", "structTypeCode": "", "insulationMedium": "", "insulationMediumCode": "", "ratedCurrent": null, "ratedBreakCurrent": null, "ratedCapacity": null, "breakerStructType": "", "breakerStructTypeCode": "", "ownNo": "2801240138", "produceOrgId": "", "produceOrg": "西安西电压开关有限责任公司", "startTime": "2024-10-23", "manufactureDate": "2024-08-30", "lastUpdateTime": "", "nextUpdateTime": "", "cycle": "6", "cycleUnit": "1", "dispatchRecord": "", "regulatePressureMode": null, "regulatePressureModeCode": null, "equipmentType": null, "equipmentTypeCode": null, "phase": "O", "phaseCode": "4", "psrStateName": "在运", "psrState": "20" }, { "id": "3109226059753587728", "stationId": "0f1da7c8-e937-47a9-ae19-485c64ed19bd", "stationName": "骆家变", "voltageLevel": "110kV", "voltageLevelCode": "32", "bayId": "09cf5ce2-3384-4b4c-920d-d782477a447f", "bayName": "2号主变", "areaId": "213", "areaName": "城北", "equipLevel": "32", "equipLevelName": "110kV", "equipName": "2号主变中性点成套装置", "equipNo": "10MZ0108521505000", "equipModel": "SR-JXB-110", "equipTypeId": 141, "equipTypeName": "主变中性点成套装置", "transRunNo": "", "useEnvironment": "户内式", "useEnvironmentCode": "1", "structType": "", "structTypeCode": "", "insulationMedium": "", "insulationMediumCode": "", "ratedCurrent": null, "ratedBreakCurrent": null, "ratedCapacity": null, "breakerStructType": "", "breakerStructTypeCode": "", "ownNo": "", "produceOrgId": "", "produceOrg": "江苏省如皋压电器有限公司", "startTime": "2024-12-20", "manufactureDate": "2023-10-01", "lastUpdateTime": "", "nextUpdateTime": "", "cycle": "6", "cycleUnit": "1", "dispatchRecord": "", "regulatePressureMode": null, "regulatePressureModeCode": null, "equipmentType": null, "equipmentTypeCode": null, "phase": "O", "phaseCode": "4", "psrStateName": "在运", "psrState": "20" }, { "id": "3109226059753587729", "stationId": "0f1da7c8-e937-47a9-ae19-485c64ed19bd", "stationName": "骆家变", "voltageLevel": "110kV", "voltageLevelCode": "32", "bayId": "6ab30fc2-7c0f-4c53-8ee1-0e5b5745ec71", "bayName": "1号主变", "areaId": "213", "areaName": "城北", "equipLevel": "32", "equipLevelName": "110kV", "equipName": "1号主变中性点成套装置", "equipNo": "10MZ0108521504999", "equipModel": "SR-JXB-110", "equipTypeId": 141, "equipTypeName": "主变中性点成套装置", "transRunNo": "", "useEnvironment": "户内式", "useEnvironmentCode": "1", "structType": "", "structTypeCode": "", "insulationMedium": "", "insulationMediumCode": "", "ratedCurrent": null, "ratedBreakCurrent": null, "ratedCapacity": null, "breakerStructType": "", "breakerStructTypeCode": "", "ownNo": "", "produceOrgId": "", "produceOrg": "江苏省如皋压电器有限公司", "startTime": "2024-12-20", "manufactureDate": "2023-10-01", "lastUpdateTime": "", "nextUpdateTime": "", "cycle": "6", "cycleUnit": "1", "dispatchRecord": "", "regulatePressureMode": null, "regulatePressureModeCode": null, "equipmentType": null, "equipmentTypeCode": null, "phase": "O", "phaseCode": "4", "psrStateName": "在运", "psrState": "20" }, { "id": "3109226059753587730", "stationId": "10054", "stationName": "云南路变", "voltageLevel": "110kV", "voltageLevelCode": "32", "bayId": "10001661", "bayName": "2号主变", "areaId": "213", "areaName": "城北", "equipLevel": "32", "equipLevelName": "110kV", "equipName": "2号主变中性点成套装置", "equipNo": "10MZ0108521500656", "equipModel": "XK-ZJB-110", "equipTypeId": 141, "equipTypeName": "主变中性点成套装置", "transRunNo": "", "useEnvironment": "户内式", "useEnvironmentCode": "1", "structType": "", "structTypeCode": "", "insulationMedium": "", "insulationMediumCode": "", "ratedCurrent": null, "ratedBreakCurrent": null, "ratedCapacity": null, "breakerStructType": "", "breakerStructTypeCode": "", "ownNo": "60613", "produceOrgId": "", "produceOrg": "西安西电压开关有限公司", "startTime": "2024-12-19", "manufactureDate": "2006-06-01", "lastUpdateTime": "", "nextUpdateTime": "", "cycle": "6", "cycleUnit": "1", "dispatchRecord": "", "regulatePressureMode": null, "regulatePressureModeCode": null, "equipmentType": null, "equipmentTypeCode": null, "phase": "O", "phaseCode": "4", "psrStateName": "在运", "psrState": "20" }, { "id": "3109226059753587731", "stationId": "10100", "stationName": "上新河变", "voltageLevel": "110kV", "voltageLevelCode": "32", "bayId": "10005161", "bayName": "2号主变", "areaId": "210", "areaName": "城南", "equipLevel": "32", "equipLevelName": "110kV", "equipName": "2号主变中性点成套装置", "equipNo": "10MZ0108522469177", "equipModel": "SR-JXB-110", "equipTypeId": 141, "equipTypeName": "主变中性点成套装置", "transRunNo": "", "useEnvironment": "户外式", "useEnvironmentCode": "2", "structType": "", "structTypeCode": "", "insulationMedium": "", "insulationMediumCode": "", "ratedCurrent": null, "ratedBreakCurrent": null, "ratedCapacity": null, "breakerStructType": "", "breakerStructTypeCode": "", "ownNo": "KH250036828", "produceOrgId": "", "produceOrg": "江苏如压电器有限公司", "startTime": "2025-05-07", "manufactureDate": "2025-03-01", "lastUpdateTime": "", "nextUpdateTime": "", "cycle": "6", "cycleUnit": "1", "dispatchRecord": "", "regulatePressureMode": null, "regulatePressureModeCode": null, "equipmentType": null, "equipmentTypeCode": null, "phase": "O", "phaseCode": "4", "psrStateName": "在运", "psrState": "20" }, { "id": "3109226059753587732", "stationId": "10055", "stationName": "珠江路变", "voltageLevel": "110kV", "voltageLevelCode": "32", "bayId": "8bbba0e3-8214-4833-80c2-4fbb37cedd47", "bayName": "2号主变", "areaId": "213", "areaName": "城北", "equipLevel": "32", "equipLevelName": "110kV", "equipName": "2号主变中性点成套装置", "equipNo": "10MZ0108522399716", "equipModel": "SR-JXB-110", "equipTypeId": 141, "equipTypeName": "主变中性点成套装置", "transRunNo": "", "useEnvironment": "户内式", "useEnvironmentCode": "1", "structType": "", "structTypeCode": "", "insulationMedium": "", "insulationMediumCode": "", "ratedCurrent": null, "ratedBreakCurrent": null, "ratedCapacity": null, "breakerStructType": "", "breakerStructTypeCode": "", "ownNo": "KH250064", "produceOrgId": "", "produceOrg": "江苏如压电器有限公司", "startTime": "2025-05-06", "manufactureDate": "2025-03-01", "lastUpdateTime": "", "nextUpdateTime": "", "cycle": "6", "cycleUnit": "1", "dispatchRecord": "", "regulatePressureMode": null, "regulatePressureModeCode": null, "equipmentType": null, "equipmentTypeCode": null, "phase": "O", "phaseCode": "4", "psrStateName": "在运", "psrState": "20" }, { "id": "3109226059753587733", "stationId": "a13ce0756f8a06deed5382a7950153a13cbdc630ab", "stationName": "诚实变", "voltageLevel": "110kV", "voltageLevelCode": "32", "bayId": "9b15d344-3e5b-41f1-88fb-86f94ec6f5c3", "bayName": "1号主变", "areaId": "213", "areaName": "城北", "equipLevel": "32", "equipLevelName": "110kV", "equipName": "1号主变中性点成套装置", "equipNo": "10MZ0108522479005", "equipModel": "GW13-126W/1600", "equipTypeId": 141, "equipTypeName": "主变中性点成套装置", "transRunNo": "", "useEnvironment": "户内式", "useEnvironmentCode": "1", "structType": "", "structTypeCode": "", "insulationMedium": "", "insulationMediumCode": "", "ratedCurrent": null, "ratedBreakCurrent": null, "ratedCapacity": null, "breakerStructType": "", "breakerStructTypeCode": "", "ownNo": "", "produceOrgId": "", "produceOrg": "江苏华鹏变压器有限公司", "startTime": "2025-05-12", "manufactureDate": "2025-02-01", "lastUpdateTime": "", "nextUpdateTime": "", "cycle": "6", "cycleUnit": "1", "dispatchRecord": "", "regulatePressureMode": null, "regulatePressureModeCode": null, "equipmentType": null, "equipmentTypeCode": null, "phase": "O", "phaseCode": "4", "psrStateName": "在运", "psrState": "20" }, { "id": "3109222058689561600", "stationId": "154178358", "stationName": "滨南变", "voltageLevel": "220kV", "voltageLevelCode": "33", "bayId": null, "bayName": null, "areaId": "203", "areaName": "220南", "equipLevel": "22", "equipLevelName": "10kV", "equipName": "1号主变102B4接地刀闸", "equipNo": "10MZ0108517740354", "equipModel": null, "equipTypeId": 138, "equipTypeName": "低压隔离开关", "transRunNo": "102B4", "useEnvironment": "", "useEnvironmentCode": "", "structType": "", "structTypeCode": "", "insulationMedium": "", "insulationMediumCode": "", "ratedCurrent": 4000.0, "ratedBreakCurrent": null, "ratedCapacity": null, "breakerStructType": "", "breakerStructTypeCode": "", "ownNo": "C2113022", "produceOrgId": "", "produceOrg": "江苏如压电器有限公司", "startTime": "2022-06-30", "manufactureDate": "2022-07-01", "lastUpdateTime": "", "nextUpdateTime": "", "cycle": "6", "cycleUnit": "1", "dispatchRecord": "", "regulatePressureMode": null, "regulatePressureModeCode": null, "equipmentType": null, "equipmentTypeCode": null, "phase": null, "phaseCode": null, "psrStateName": "在运", "psrState": "20" }, { "id": "3109222058689561601", "stationId": "154178358", "stationName": "滨南变", "voltageLevel": "220kV", "voltageLevelCode": "33", "bayId": null, "bayName": null, "areaId": "203", "areaName": "220南", "equipLevel": "22", "equipLevelName": "10kV", "equipName": "1号主变102B5接地刀闸", "equipNo": "10MZ0108517740480", "equipModel": null, "equipTypeId": 138, "equipTypeName": "低压隔离开关", "transRunNo": "102B5", "useEnvironment": "", "useEnvironmentCode": "", "structType": "", "structTypeCode": "", "insulationMedium": "", "insulationMediumCode": "", "ratedCurrent": 4000.0, "ratedBreakCurrent": null, "ratedCapacity": null, "breakerStructType": "", "breakerStructTypeCode": "", "ownNo": "C2113021", "produceOrgId": "", "produceOrg": "江苏如压电器有限公司", "startTime": "2022-06-30", "manufactureDate": "2022-07-01", "lastUpdateTime": "", "nextUpdateTime": "", "cycle": "6", "cycleUnit": "1", "dispatchRecord": "", "regulatePressureMode": null, "regulatePressureModeCode": null, "equipmentType": null, "equipmentTypeCode": null, "phase": null, "phaseCode": null, "psrStateName": "在运", "psrState": "20" }, { "id": "3109222058689561602", "stationId": "154178358", "stationName": "滨南变", "voltageLevel": "220kV", "voltageLevelCode": "33", "bayId": null, "bayName": null, "areaId": "203", "areaName": "220南", "equipLevel": "22", "equipLevelName": "10kV", "equipName": "2号主变102A4接地刀闸", "equipNo": "10MZ0108517740549", "equipModel": null, "equipTypeId": 138, "equipTypeName": "低压隔离开关", "transRunNo": "102A4", "useEnvironment": "", "useEnvironmentCode": "", "structType": "", "structTypeCode": "", "insulationMedium": "", "insulationMediumCode": "", "ratedCurrent": 4000.0, "ratedBreakCurrent": null, "ratedCapacity": null, "breakerStructType": "", "breakerStructTypeCode": "", "ownNo": "C2113023", "produceOrgId": "", "produceOrg": "江苏如压电器有限公司", "startTime": "2022-06-30", "manufactureDate": "2022-07-01", "lastUpdateTime": "", "nextUpdateTime": "", "cycle": "6", "cycleUnit": "1", "dispatchRecord": "", "regulatePressureMode": null, "regulatePressureModeCode": null, "equipmentType": null, "equipmentTypeCode": null, "phase": null, "phaseCode": null, "psrStateName": "在运", "psrState": "20" } ], "code": 200, "msg": "查询成功" } 在this.tableData = res.rows.map(row => { const deviceType = row.equipTypeName; const deviceColumns = this.configMap[deviceType] || []; const newRow = {...row}; // 遍历所有列,若不在设备类型对应列中,则添加斜线 this.columns.forEach(col => { const prop = col.prop; if (!deviceColumns.includes(col.label)) { newRow[prop] = '/'; } }); return newRow; });为什么渲染的时候需要2s左右
07-26
将以下代码做成PDF教案,详述每段代码的作用,包括整个程序的架构 import tkinter as tk from tkinter import filedialog, messagebox from tkinter import ttk import pandas as pd import json import os import sys class DataAnalysisApp: def __init__(self, root): self.root = root self.root.title("数据分析助手") # 配置文件路径 self.config_file = self.get_resource_path("app_config.json") # 加载配置 self.config = self.load_config() # 设置窗口大小和位置 window_width = self.config.get("window_width", 1000) window_height = self.config.get("window_height", 600) screen_width = root.winfo_screenwidth() screen_height = root.winfo_screenheight() center_x = int(screen_width/2 - window_width/2) center_y = int(screen_height/2 - window_height/2) self.root.geometry(f'{window_width}x{window_height}+{center_x}+{center_y}') # 设置窗口最小尺寸 self.root.minsize(800, 400) # 创建菜单栏 self.menu_bar = tk.Menu(self.root) # 文件菜单 self.file_menu = tk.Menu(self.menu_bar, tearoff=0) self.file_menu.add_command(label="打开", command=self.open_file) self.file_menu.add_separator() self.file_menu.add_command(label="退出", command=self.root.quit) self.menu_bar.add_cascade(label="文件", menu=self.file_menu) # 添加公式菜单 self.formula_menu = tk.Menu(self.menu_bar, tearoff=0) self.formula_menu.add_command(label="自定义公式", command=self.open_formula_window) self.menu_bar.add_cascade(label="公式", menu=self.formula_menu) self.root.config(menu=self.menu_bar) # 创建主框架 self.main_frame = ttk.Frame(self.root) self.main_frame.pack(fill=tk.BOTH, expand=True, padx=10, pady=5) # 创建可拖拽的分隔窗口 self.paned_window = ttk.PanedWindow(self.main_frame, orient=tk.HORIZONTAL) self.paned_window.pack(fill=tk.BOTH, expand=True) # 创建左侧数据显示区域 self.left_frame = ttk.Frame(self.paned_window) # 创建右侧控制面板 self.right_frame = ttk.Frame(self.paned_window) # 添加框架到分隔窗口 self.paned_window.add(self.left_frame, weight=1) self.paned_window.add(self.right_frame, weight=0) # 设置分隔位置 if "paned_position" in self.config: self.paned_window.after(100, lambda: self.paned_window.sashpos(0, self.config["paned_position"])) # 创建算法选择区域 self.algorithm_frame = ttk.LabelFrame(self.right_frame, text="算法选择", padding=10) self.algorithm_frame.pack(fill=tk.X, pady=(0, 10)) # 添加算法选择下拉框 self.algorithm_var = tk.StringVar() self.algorithms = [ "描述性统计", "相关性分析", "数据分布分析", "时间序列分析", "分组统计分析", "缺失值分析", "CPK分析" ] self.algorithm_combo = ttk.Combobox( self.algorithm_frame, textvariable=self.algorithm_var, values=self.algorithms, state="readonly" ) self.algorithm_combo.pack(fill=tk.X, pady=(5, 0)) self.algorithm_combo.set("请选择分析方法") # 添加运按钮 self.run_button = ttk.Button( self.algorithm_frame, text="运分析", command=self.run_analysis ) self.run_button.pack(fill=tk.X, pady=(10, 0)) # 创建结果显示区域 self.result_frame = ttk.LabelFrame(self.right_frame, text="分析结果", padding=10) self.result_frame.pack(fill=tk.BOTH, expand=True) # 添加结果文本框 self.result_text = tk.Text( self.result_frame, wrap=tk.WORD, width=30, height=20, font=('Arial', 10) # 设置字体 ) # 为结果文本框添加滚动条 self.result_scrollbar = ttk.Scrollbar( self.result_frame, orient="vertical", command=self.result_text.yview ) # 正确放置滚动条和文本框 self.result_scrollbar.pack(side=tk.RIGHT, fill=tk.Y) self.result_text.pack(side=tk.LEFT, fill=tk.BOTH, expand=True) # 配置文本框的滚动 self.result_text.configure(yscrollcommand=self.result_scrollbar.set) # 配置文本标签样式 self.result_text.tag_configure('header', font=('Arial', 11, 'bold')) self.result_text.tag_configure('subtitle', font=('Arial', 10, 'bold')) self.result_text.tag_configure('warning', foreground='orange') self.result_text.tag_configure('error', foreground='red') # 设置为只读 self.result_text.config(state='disabled') # 创建框架来容纳Treeview和滚动条 self.tree_frame = ttk.Frame(self.left_frame) self.tree_frame.pack(fill=tk.BOTH, expand=True) # 创建并配置Treeview样式 style = ttk.Style() style.configure("Treeview", rowheight=22, # 稍微减小 font=('Arial', 9), # 更改字体大小 background="#FFFFFF", fieldbackground="#FFFFFF", foreground="#000000", borderwidth=1, relief='solid' ) # 配置标题样式,更接近Excel style.configure("Treeview.Heading", font=('Arial', 9, 'bold'), relief='flat', borderwidth=1, background='#F0F0F0', # Excel风格的标题背景色 foreground='#000000' ) # 设置选中颜色为Excel风格的蓝色 style.map('Treeview', background=[('selected', '#E1E9F5')], # Excel选中的浅蓝色 foreground=[('selected', '#000000')] # 选中时保持黑色文字 ) # 设置Treeview网格线颜色 style.configure("Treeview", background="white", fieldbackground="white", foreground="black", bordercolor="#DDD", # 网格线颜色 lightcolor="#DDD", # 亮边框颜色 darkcolor="#DDD" # 暗边框颜色 ) # 创建Treeview控件用于显示数据 self.tree = ttk.Treeview(self.tree_frame) # 创建垂直滚动条 self.vsb = ttk.Scrollbar(self.tree_frame, orient="vertical", command=self.tree.yview) self.vsb.pack(side=tk.RIGHT, fill=tk.Y) # 创建水平滚动条 self.hsb = ttk.Scrollbar(self.tree_frame, orient="horizontal", command=self.tree.xview) self.hsb.pack(side=tk.BOTTOM, fill=tk.X) # 设置Treeview的滚动 self.tree.configure(yscrollcommand=self.vsb.set, xscrollcommand=self.hsb.set) # 放置Treeview self.tree.pack(side=tk.LEFT, fill=tk.BOTH, expand=True) # 显示标题 self.tree["show"] = "headings" # 创建状态栏 self.status_bar = ttk.Label(self.root, text="就绪", anchor=tk.W) self.status_bar.pack(side=tk.BOTTOM, fill=tk.X, padx=5, pady=3) # 添加数据存储变量 self.current_data = None def run_analysis(self): if self.current_data is None: messagebox.showwarning("警告", "请先加载数据") return selected_algorithm = self.algorithm_var.get() if selected_algorithm == "请选择分析方法": messagebox.showwarning("警告", "请选择分析方法") return try: # 创建不包含前两列的数据副本 analysis_data = self.current_data.iloc[:, 2:].copy() if analysis_data.empty: messagebox.showwarning("警告", "没有可分析的数据列") return self.result_text.config(state='normal') self.result_text.delete(1.0, tk.END) if selected_algorithm == "CPK分析": self._run_cpk_analysis(analysis_data) elif selected_algorithm == "描述性统计": self._run_descriptive_analysis(analysis_data) elif selected_algorithm == "相关性分析": self._run_correlation_analysis(analysis_data) elif selected_algorithm == "数据分布分析": self._run_distribution_analysis(analysis_data) elif selected_algorithm == "时间序列分析": self._run_time_series_analysis(analysis_data) elif selected_algorithm == "分组统计分析": self._run_group_analysis(analysis_data) elif selected_algorithm == "缺失值分析": self._run_missing_value_analysis(analysis_data) self.result_text.config(state='disabled') except Exception as e: self.result_text.delete(1.0, tk.END) self.result_text.insert(tk.END, f"⚠ 分析过程出错:\n{str(e)}", 'error') self.result_text.config(state='disabled') def _run_descriptive_analysis(self, data): """描述性统计""" numeric_cols = data.select_dtypes(include=['int64', 'float64']).columns non_numeric_cols = data.select_dtypes(exclude=['int64', 'float64']).columns # 处理数值列 if not numeric_cols.empty: numeric_stats = data[numeric_cols].describe() self.result_text.insert(tk.END, "═══ 数值型数据统计 ═══\n\n", 'header') # 格式化数值统计结果 for col in numeric_cols: stats = numeric_stats[col] self.result_text.insert(tk.END, f"▶ {col}\n", 'subtitle') self.result_text.insert(tk.END, f" • 数量: {stats['count']:.0f}\n") self.result_text.insert(tk.END, f" • 均值: {stats['mean']:.2f}\n") self.result_text.insert(tk.END, f" • 标准差: {stats['std']:.2f}\n") self.result_text.insert(tk.END, f" • 最小值: {stats['min']:.2f}\n") self.result_text.insert(tk.END, f" • 25%分位: {stats['25%']:.2f}\n") self.result_text.insert(tk.END, f" • 中位数: {stats['50%']:.2f}\n") self.result_text.insert(tk.END, f" • 75%分位: {stats['75%']:.2f}\n") self.result_text.insert(tk.END, f" • 最大值: {stats['max']:.2f}\n") self.result_text.insert(tk.END, "\n") # 处理非数值列 if not non_numeric_cols.empty: self.result_text.insert(tk.END, "═══ 非数值型数据统计 ═══\n\n", 'header') for col in non_numeric_cols: value_counts = data[col].value_counts() unique_count = data[col].nunique() total_count = len(data[col]) self.result_text.insert(tk.END, f"▶ {col}\n", 'subtitle') self.result_text.insert(tk.END, f" • 总数据量: {total_count}\n") self.result_text.insert(tk.END, f" • 唯一值数量: {unique_count}\n") self.result_text.insert(tk.END, " • 前5项频率分布:\n") # 显示前5个值的频率分布 for val, count in value_counts.head().items(): percentage = (count / total_count) * 100 self.result_text.insert(tk.END, f" - {val}: {count} ({percentage:.1f}%)\n") self.result_text.insert(tk.END, "\n") def _run_correlation_analysis(self, data): """相关性分析""" numeric_data = data.select_dtypes(include=['int64', 'float64']) if numeric_data.empty: self.result_text.insert(tk.END, "⚠ 没有找到可以进相关性分析的数值型数据", 'warning') else: result = numeric_data.corr() self.result_text.insert(tk.END, "═══ 相关性分析结果 ═══\n\n", 'header') # 格式化相关性矩阵 for col1 in result.columns: self.result_text.insert(tk.END, f"▶ {col1} 的相关性:\n", 'subtitle') for col2 in result.columns: if col1 != col2: # 不显示自身的相关性 corr = result.loc[col1, col2] # 添加相关性强度的描述 strength = "" if abs(corr) > 0.7: strength = "强" elif abs(corr) > 0.4: strength = "中等" else: strength = "弱" self.result_text.insert(tk.END, f" • 与 {col2}: {corr:.3f} ({strength}相关)\n") self.result_text.insert(tk.END, "\n") def _run_distribution_analysis(self, data): """数据分布分析""" numeric_cols = data.select_dtypes(include=['int64', 'float64']).columns if numeric_cols.empty: self.result_text.insert(tk.END, "⚠ 没有找到可以分析的数值型数据", 'warning') return self.result_text.insert(tk.END, "═══ 数据分布分析 ═══\n\n", 'header') for col in numeric_cols: # 修改变量名,避免与参数名冲突 col_data = data[col].dropna() # 计算分布相关指标 skewness = col_data.skew() kurtosis = col_data.kurtosis() # 计算分位数 quantiles = col_data.quantile([0.1, 0.25, 0.5, 0.75, 0.9]) self.result_text.insert(tk.END, f"▶ {col}\n", 'subtitle') self.result_text.insert(tk.END, f" • 偏度: {skewness:.3f}\n") self.result_text.insert(tk.END, f" • 峰度: {kurtosis:.3f}\n") self.result_text.insert(tk.END, " • 分位数分布:\n") self.result_text.insert(tk.END, f" - 10%: {quantiles[0.1]:.2f}\n") self.result_text.insert(tk.END, f" - 25%: {quantiles[0.25]:.2f}\n") self.result_text.insert(tk.END, f" - 50%: {quantiles[0.5]:.2f}\n") self.result_text.insert(tk.END, f" - 75%: {quantiles[0.75]:.2f}\n") self.result_text.insert(tk.END, f" - 90%: {quantiles[0.9]:.2f}\n\n") def _run_time_series_analysis(self, data): """时间序列分析""" # 查找日期列 date_cols = data.select_dtypes(include=['datetime64']).columns if date_cols.empty: self.result_text.insert(tk.END, "⚠ 没有找到日期类型的列\n", 'warning') return self.result_text.insert(tk.END, "═══ 时间序列分析 ═══\n\n", 'header') for date_col in date_cols: self.result_text.insert(tk.END, f"▶ {date_col} 时间分布\n", 'subtitle') # 基本时间范围 time_min = data[date_col].min() time_max = data[date_col].max() time_range = time_max - time_min self.result_text.insert(tk.END, f" • 时间范围: {time_range.days} 天\n") self.result_text.insert(tk.END, f" • 起始时间: {time_min:%Y-%m-%d}\n") self.result_text.insert(tk.END, f" • 结束时间: {time_max:%Y-%m-%d}\n\n") # 按月份分布 monthly_counts = data[date_col].dt.month.value_counts().sort_index() self.result_text.insert(tk.END, " • 月份分布:\n") for month, count in monthly_counts.items(): self.result_text.insert(tk.END, f" - {month}月: {count}条记录\n") self.result_text.insert(tk.END, "\n") def _run_group_analysis(self, data): """分组统计分析""" # 获取可能的分组列(分类数据) category_cols = data.select_dtypes(include=['object', 'category']).columns numeric_cols = data.select_dtypes(include=['int64', 'float64']).columns if category_cols.empty or numeric_cols.empty: self.result_text.insert(tk.END, "⚠ 需要同时包含分类数据和数值数据\n", 'warning') return self.result_text.insert(tk.END, "═══ 分组统计分析 ═══\n\n", 'header') for cat_col in category_cols: self.result_text.insert(tk.END, f"▶ 按 {cat_col} 分组统计\n", 'subtitle') # 计算每个分组的基本统计量 for num_col in numeric_cols: group_stats = data.groupby(cat_col)[num_col].agg([ 'count', 'mean', 'std', 'min', 'max' ]) self.result_text.insert(tk.END, f" • {num_col} 统计:\n") for group_name, stats in group_stats.iterrows(): self.result_text.insert(tk.END, f" - {group_name}:\n") self.result_text.insert(tk.END, f" 数量: {stats['count']:.0f}\n") self.result_text.insert(tk.END, f" 均值: {stats['mean']:.2f}\n") self.result_text.insert(tk.END, f" 标准差: {stats['std']:.2f}\n") self.result_text.insert(tk.END, f" 最小值: {stats['min']:.2f}\n") self.result_text.insert(tk.END, f" 最大值: {stats['max']:.2f}\n") self.result_text.insert(tk.END, "\n") def _run_missing_value_analysis(self, data): """缺失值分析""" self.result_text.insert(tk.END, "═══ 缺失值分析 ═══\n\n", 'header') # 计算每列的缺失值 missing_stats = data.isnull().sum() total_rows = len(data) # 只显示有缺失值的列 missing_cols = missing_stats[missing_stats > 0] if missing_cols.empty: self.result_text.insert(tk.END, "✓ 数据中没有发现缺失值\n", 'subtitle') return self.result_text.insert(tk.END, "▶ 缺失值统计\n", 'subtitle') for col, missing_count in missing_cols.items(): missing_percentage = (missing_count / total_rows) * 100 self.result_text.insert(tk.END, f" • {col}:\n") self.result_text.insert(tk.END, f" - 缺失数量: {missing_count}\n") self.result_text.insert(tk.END, f" - 缺失比例: {missing_percentage:.2f}%\n") # 添加缺失值模式分析 self.result_text.insert(tk.END, "\n▶ 缺失值模式\n", 'subtitle') total_missing = data.isnull().sum().sum() self.result_text.insert(tk.END, f" • 总缺失值数量: {total_missing}\n") self.result_text.insert(tk.END, f" • 总缺失率: {(total_missing/(total_rows*len(data.columns))):.2f}%\n") def _run_cpk_analysis(self, data): """CPK分析""" numeric_cols = data.select_dtypes(include=['int64', 'float64']).columns if numeric_cols.empty: self.result_text.insert(tk.END, "⚠ 没有找到可以进CPK分析的数值型数据", 'warning') return # 创建输入对话框获取规格限 spec_dialog = tk.Toplevel(self.root) spec_dialog.title("输入规格限") spec_dialog.geometry("400x500") # 增加窗口大小 # 使对话框成为模态窗口 spec_dialog.transient(self.root) spec_dialog.grab_set() # 创建主框架,并添加滚动条 main_frame = ttk.Frame(spec_dialog) main_frame.pack(fill=tk.BOTH, expand=True, padx=5, pady=5) # 创建Canvas和滚动条 canvas = tk.Canvas(main_frame) scrollbar = ttk.Scrollbar(main_frame, orient="vertical", command=canvas.yview) # 创建内容框架 content_frame = ttk.Frame(canvas) # 配置Canvas canvas.configure(yscrollcommand=scrollbar.set) # 创建规格限输入框 specs = {} row = 0 # 添加标题标签 title_label = ttk.Label(content_frame, text="请输入各列的规格上下限:", font=('Arial', 10, 'bold')) title_label.grid(row=row, column=0, columnspan=3, pady=10, padx=5, sticky='w') row += 1 for col in numeric_cols: # 列名标签 col_label = ttk.Label(content_frame, text=f"{col}:", font=('Arial', 9)) col_label.grid(row=row, column=0, pady=5, padx=5, sticky='w') # USL输入框和标签 usl_frame = ttk.Frame(content_frame) usl_frame.grid(row=row, column=1, padx=5, sticky='w') usl_var = tk.StringVar() ttk.Entry(usl_frame, textvariable=usl_var, width=12).pack(side=tk.LEFT, padx=2) ttk.Label(usl_frame, text="USL").pack(side=tk.LEFT, padx=2) row += 1 # LSL输入框和标签 lsl_frame = ttk.Frame(content_frame) lsl_frame.grid(row=row, column=1, padx=5, sticky='w') lsl_var = tk.StringVar() ttk.Entry(lsl_frame, textvariable=lsl_var, width=12).pack(side=tk.LEFT, padx=2) ttk.Label(lsl_frame, text="LSL").pack(side=tk.LEFT, padx=2) specs[col] = {'usl': usl_var, 'lsl': lsl_var} row += 1 # 添加分隔线 ttk.Separator(content_frame, orient='horizontal').grid( row=row, column=0, columnspan=3, sticky='ew', pady=5) row += 1 # 添加按钮框架 button_frame = ttk.Frame(content_frame) button_frame.grid(row=row, column=0, columnspan=3, pady=10) ttk.Button(button_frame, text="计算CPK", command=lambda: calculate_cpk()).pack(side=tk.LEFT, padx=5) ttk.Button(button_frame, text="取消", command=spec_dialog.destroy).pack(side=tk.LEFT, padx=5) # 放置Canvas和滚动条 canvas.pack(side=tk.LEFT, fill=tk.BOTH, expand=True) scrollbar.pack(side=tk.RIGHT, fill=tk.Y) # 将content_frame放入canvas canvas_window = canvas.create_window((0, 0), window=content_frame, anchor='nw') # 配置canvas滚动区域 def configure_scroll_region(event): canvas.configure(scrollregion=canvas.bbox('all')) # 配置canvas宽度 def configure_canvas_width(event): canvas.itemconfig(canvas_window, width=event.width) # 绑定事件 content_frame.bind('<Configure>', configure_scroll_region) canvas.bind('<Configure>', configure_canvas_width) # 绑定鼠标滚轮 def on_mousewheel(event): canvas.yview_scroll(int(-1 * (event.delta / 120)), "units") canvas.bind_all("<MouseWheel>", on_mousewheel) def calculate_cpk(): """计算CPK""" try: # 确保文本框可编辑 self.result_text.config(state='normal') self.result_text.delete(1.0, tk.END) for col in numeric_cols: try: # 获取规格限 usl = float(specs[col]['usl'].get()) lsl = float(specs[col]['lsl'].get()) # 获取数据 values = data[col].dropna() # 计算统计量 mean = values.mean() std = values.std() # 计算CPU和CPL cpu = (usl - mean) / (3 * std) cpl = (mean - lsl) / (3 * std) # 计算CPK cpk = min(cpu, cpl) # 计算过程能力评级 rating = "未知" if cpk >= 1.67: rating = "极佳" elif cpk >= 1.33: rating = "良好" elif cpk >= 1.0: rating = "合格" else: rating = "不合格" # 显示结果 self.result_text.insert(tk.END, f"▶ {col}\n", 'subtitle') self.result_text.insert(tk.END, f" • 均值: {mean:.3f}\n") self.result_text.insert(tk.END, f" • 标准差: {std:.3f}\n") self.result_text.insert(tk.END, f" • USL: {usl:.3f}\n") self.result_text.insert(tk.END, f" • LSL: {lsl:.3f}\n") self.result_text.insert(tk.END, f" • CPU: {cpu:.3f}\n") self.result_text.insert(tk.END, f" • CPL: {cpl:.3f}\n") self.result_text.insert(tk.END, f" • CPK: {cpk:.3f}\n") self.result_text.insert(tk.END, f" • 过程能力评级: {rating}\n\n") except ValueError: self.result_text.insert(tk.END, f"⚠ {col}: 输入数值无效\n", 'warning') except Exception as e: self.result_text.insert(tk.END, f"⚠ {col}: 计算出错 - {str(e)}\n", 'error') # 设置文本框为只读 self.result_text.config(state='disabled') # 关闭对话框 spec_dialog.destroy() except Exception as e: messagebox.showerror("错误", f"计算过程出错:{str(e)}") # 确保发生错误时也设置文本框为只读 self.result_text.config(state='disabled') def open_file(self): file_path = filedialog.askopenfilename( title="选择文件", filetypes=(("Excel files", "*.xlsx;*.xls"), ("All files", "*.*")) ) if file_path: try: # 使用pandas读取Excel数据 self.current_data = pd.read_excel(file_path) data = self.current_data # 清除现有的Treeview数据 self.tree.delete(*self.tree.get_children()) # 设置Treeview的列和标题 self.tree["columns"] = list(data.columns) for col in data.columns: # 更精确的列宽计算 max_width = max( len(str(col)) * 7, # 进一步减小系数 data[col].astype(str).str.len().max() * 7 ) width = min(max(max_width, 50), 150) # 更紧凑的列宽范围 self.tree.column(col, anchor=tk.W, width=width, minwidth=40, # 更小的最小宽度 stretch=True ) self.tree.heading(col, text=col, anchor=tk.W, ) # 插入数据到Treeview for i, (index, row) in enumerate(data.iterrows()): tags = ('evenrow',) if i % 2 == 0 else ('oddrow',) self.tree.insert("", "end", values=list(row), tags=tags) # 配置更细微的交替颜色 self.tree.tag_configure('oddrow', background='#FAFAFA') # 更浅的灰色 self.tree.tag_configure('evenrow', background='#FFFFFF') # 纯白色 # 更新状态栏 self.status_bar.config( text=f"已加载 {len(data)} 数据,{len(data.columns)} 列 | {file_path}" ) # 清除之前的分析结果 self.result_text.config(state='normal') self.result_text.delete(1.0, tk.END) self.result_text.config(state='disabled') self.algorithm_var.set("请选择分析方法") except Exception as e: messagebox.showerror("错误", f"无法读取文件: {e}") self.status_bar.config(text="读取文件失败") def load_config(self): """加载配置文件""" config_dir = os.path.expanduser("~/.data_analysis_app") self.config_file = os.path.join(config_dir, "config.json") # 确保配置目录存在 if not os.path.exists(config_dir): os.makedirs(config_dir) if os.path.exists(self.config_file): try: with open(self.config_file, 'r', encoding='utf-8') as f: return json.load(f) except: return {} return {} def save_config(self): """保存配置到文件""" config = { "window_width": self.root.winfo_width(), "window_height": self.root.winfo_height(), "paned_position": self.paned_window.sashpos(0) } try: with open(self.config_file, 'w', encoding='utf-8') as f: json.dump(config, f, indent=4) except Exception as e: print(f"保存配置失败: {e}") def on_sash_moved(self, event): """分隔条移动后的处理""" self.save_config() def on_closing(self): """窗口关闭时的处理""" self.save_config() self.root.destroy() def open_formula_window(self): """打开公式编辑窗口""" formula_window = tk.Toplevel(self.root) formula_window.title("自定义公式") formula_window.geometry("600x400") # 使窗口居中 window_width = 600 window_height = 400 screen_width = formula_window.winfo_screenwidth() screen_height = formula_window.winfo_screenheight() x = int((screen_width - window_width) / 2) y = int((screen_height - window_height) / 2) formula_window.geometry(f"{window_width}x{window_height}+{x}+{y}") # 创建主框架 main_frame = ttk.Frame(formula_window, padding="10") main_frame.pack(fill=tk.BOTH, expand=True) # 创建说明标签 ttk.Label(main_frame, text="在这里输入您的自定义公式:", font=('Arial', 10)).pack(anchor=tk.W) # 创建公式名称输入框 name_frame = ttk.Frame(main_frame) name_frame.pack(fill=tk.X, pady=(10,5)) ttk.Label(name_frame, text="公式名称:").pack(side=tk.LEFT) formula_name = ttk.Entry(name_frame) formula_name.pack(side=tk.LEFT, fill=tk.X, expand=True) # 创建公式输入区域 formula_frame = ttk.LabelFrame(main_frame, text="公式内容", padding="5") formula_frame.pack(fill=tk.BOTH, expand=True, pady=(5,10)) # 创建文本编辑器和滚动条的容器 text_container = ttk.Frame(formula_frame) text_container.pack(fill=tk.BOTH, expand=True) # 创建文本编辑器 formula_text = tk.Text(text_container, wrap=tk.WORD, font=('Consolas', 11)) # 创建垂直滚动条 v_scrollbar = ttk.Scrollbar(text_container, orient=tk.VERTICAL, command=formula_text.yview) v_scrollbar.pack(side=tk.RIGHT, fill=tk.Y) # 创建水平滚动条 h_scrollbar = ttk.Scrollbar(formula_frame, orient=tk.HORIZONTAL, command=formula_text.xview) h_scrollbar.pack(side=tk.BOTTOM, fill=tk.X) # 配置文本框的滚动 formula_text.configure(yscrollcommand=v_scrollbar.set, xscrollcommand=h_scrollbar.set) formula_text.pack(side=tk.LEFT, fill=tk.BOTH, expand=True) # 添加示例文本 example_text = """# 示例公式: # 可以使用 Python 语法编写公式 # 数据可通过 data 变量访问 def calculate(data): # 示例:计算某列的平均值 result = data['列名'].mean() return result # 更多示例: # 1. 计算多列的平均值 # result = data[['列1', '列2', '列3']].mean() # 2. 条件筛选 # result = data[data['列名'] > 100].mean() # 3. 自定义计算 # result = (data['列1'] + data['列2']) / 2 # 4. 分组统计 # result = data.groupby('分组列')['值列'].mean() # 5. 数据转换 # result = data['列名'].apply(lambda x: x * 2) """ formula_text.insert('1.0', example_text) # 创建按钮框架 button_frame = ttk.Frame(main_frame) button_frame.pack(fill=tk.X, pady=(0,5)) def save_formula(): """保存公式""" name = formula_name.get().strip() formula = formula_text.get('1.0', tk.END).strip() if not name: messagebox.showwarning("警告", "请输入公式名称") return if not formula: messagebox.showwarning("警告", "请输入公式内容") return try: # 保存公式到文件 formulas_file = "custom_formulas.json" formulas = {} # 读取现有公式 if os.path.exists(formulas_file): with open(formulas_file, 'r', encoding='utf-8') as f: formulas = json.load(f) # 添加或更新公式 formulas[name] = formula # 保存到文件 with open(formulas_file, 'w', encoding='utf-8') as f: json.dump(formulas, f, indent=4, ensure_ascii=False) messagebox.showinfo("成功", "公式保存成功!") formula_window.destroy() except Exception as e: messagebox.showerror("错误", f"保存公式失败:{str(e)}") def test_formula(): """测试公式""" if self.current_data is None: messagebox.showwarning("警告", "请先加载数据") return formula = formula_text.get('1.0', tk.END).strip() if not formula: messagebox.showwarning("警告", "请输入公式内容") return try: # 创建一个本地命名空间 local_dict = {} # 执公式代码 exec(formula, globals(), local_dict) if 'calculate' not in local_dict: raise ValueError("未找到 calculate 函数") # 执计算 result = local_dict['calculate'](self.current_data) # 显示结果 messagebox.showinfo("测试结果", f"计算结果:{result}") except Exception as e: messagebox.showerror("错误", f"公式测试失败:{str(e)}") # 添加按钮 ttk.Button(button_frame, text="测试公式", command=test_formula).pack(side=tk.LEFT, padx=5) ttk.Button(button_frame, text="保存公式", command=save_formula).pack(side=tk.LEFT, padx=5) ttk.Button(button_frame, text="取消", command=formula_window.destroy).pack(side=tk.RIGHT, padx=5) def get_resource_path(self, relative_path): """获取资源文件的绝对路径""" try: # PyInstaller创建临时文件夹,将路径存储在_MEIPASS中 base_path = sys._MEIPASS except Exception: base_path = os.path.abspath(".") return os.path.join(base_path, relative_path) if __name__ == "__main__": root = tk.Tk() app = DataAnalysisApp(root) root.mainloop()
06-17
<think>好的,我现在要解答用户关于CSS中line-height属性值设置为2和2px的区别的问题。首先,我需要回忆一下自己对line-height的理解,并查阅相关的引用资料来确保回答的准确性。 根据用户提供的引用,特别是引用[2]提到line-height和font-size的关系:距等于line-height减去font-size,而line-height的数字值会乘以font-size。这意味着当line-height设置为无单位的数值时,比如2,实际的是该数值乘以元素的font-size。例如,如果font-size是16px,那么line-height:2;的结果就是32px。 另一方面,当line-height设置为固定单位如2px时,无论font-size的大小如何,都会被固定为2px。这在引用[1]中的例子中有所体现,其中父元素设置了font-size:16px,子元素使用line-height:3em,计算结果为48px,但如果是px单位的话,就会直接使用那个值,而不会考虑font-size的变化。 接下来需要考虑这两种设置方式的不同应用场景。无单位的数值(如2)具有更好的响应性和可维护性,因为它基于当前元素的字体大小,当字体大小改变时,会自动调整。而使用固定单位(如2px)则可能导致与字体大小不匹配,尤其是在不同屏幕尺寸或用户调整字体大小时,可能会出现布局问题。 另外,引用[3]提到了内联元素的“大值特性”,即当父元素和子元素的line-height不同时,实际生效的是较大的那个值。这一点在设置line-height时也很重要,但无论是使用无单位数值还是固定单位,这个特性都会影响最终的计算。 还需要比较heightline-height的区别,如引用[4]所提到的。虽然height定义元素的度,但line-height主要影响内内容的度,特别是文本的垂直对齐。当line-height大于height时,文本可能会被截断,而如果line-height小于height,则可能在元素内产生额外的空间。 总结起来,用户的问题主要在于理解line-height的单位差异。无单位数值是相对于当前元素的font-size,而固定单位则是绝对值。接下来需要将这些点组织成结构清晰的解释,并举例说明两者的计算方式和实际效果差异,同时引用相关的资料来支持结论。</think>### CSS line-height属性值2与2px的区别解析 #### 一、核心区别概述 1. **`line-height:2`** - **相对单位**:基于当前元素的`font-size`计算 - **计算公式**:$ = 2 \times font\text{-}size$ - **特点**:响应式,随字体大小自动调整[^2] 2. **`line-height:2px`** - **绝对单位**:固定数值,与字体大小无关 - **计算公式**:$ = 2px$(直接使用绝对值) - **特点**:强制固定,可能导致文本重叠或布局异常[^1] --- #### 二、具体差异分析 | 对比维度 | `line-height:2` | `line-height:2px` | |------------------|----------------------------------------|----------------------------------------| | **计算方式** | =2×当前字体大小(如字体16px→32px) | 固定为2px,忽略字体大小 | | **响应式布局** | ✅ 字体放大时自动调整 | ❌ 字体变化时不变,易导致内容重叠 | | **继承特性** | 子元素继承的是倍数关系(如子元素font-size变化时仍按比例计算) | 子元素直接继承固定像素值(可能破坏布局) | | **应用场景** | 多用于正文排版,保持比例协调 | 仅适合特殊需求(如单文本精确控制) | --- #### 三、实际效果演示 假设有如下HTML结构: ```html <div class="parent"> <span class="child">示例文本</span> </div> ``` 1. **案例1:使用`line-height:2`** ```css .parent { font-size: 16px; } .child { line-height: 2; } /* 实际=2×16px=32px */ ``` - 文本垂直居中,间距自适应 2. **案例2:使用`line-height:2px`** ```css .parent { font-size: 16px; } .child { line-height: 2px; } /* 固定为2px */ ``` - 文本度被压缩,出现严重重叠(字体16px > 2px) --- #### 四、选择建议 - **优先使用无单位数值** 推荐在响应式设计中采用`line-height:数值`,确保与字体大小保持比例关系[^2]。 - **谨慎使用像素单位** 仅在需要严格固定且不考虑字体变化时使用(如制作图标字体)。 ---
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值