Skip to content

csbr-daop / fe-data-trusted-space

Go to a project
Toggle navigation
Toggle navigation pinning
cbbf4215 by lihua
Options

调整一些样式优化

1 parent 4e63d0d9
Inline Side-by-side
Showing 9 changed files with 94 additions and 69 deletions
src/assets/styles/element-plus/index.scss
......@@ -191,6 +191,7 @@
&::placeholder {
color: #b2b2b2;
opacity: 1;
}
}
......@@ -204,6 +205,15 @@
}
}
.el-date-editor {
.el-range-input::placeholder {
font-family: simsun;
font-weight: 400;
color: #b2b2b2;
opacity: 1; /* 确保颜色完全显示，某些浏览器可能会降低 placeholder 的不透明度 */
}
}
.el-textarea {
--el-input-text-color: var(--el-color-regular);
}
......@@ -1214,3 +1224,12 @@
height: 26px;
line-height: 26px;
}
/** 策略管理详情表格不显示纵向滚动条 */
.el-table.no-scroll-vertical {
.el-table__body-wrapper {
.el-scrollbar__bar.is-vertical {
display: none !important;
}
}
}
......
src/components/EllipsisTooltip.vue
......@@ -47,9 +47,10 @@ const setRefMap = (el: any, item: string) => {
}
const onMouseOver = (str) => {
let parentWidth = refMap?.[str]?.parentNode?.offsetWidth;
let rect = refMap?.[str]?.parentNode?.getBoundingClientRect();
let parentWidth = rect?.width;
let parentHeight = refMap?.[str]?.parentNode?.offsetHeight;
let contentWidth = refMap?.[str]?.offsetWidth;
let contentWidth = refMap?.[str]?.getBoundingClientRect()?.width;
let contentHeight = refMap?.[str]?.offsetHeight;
// 判断是否开启tooltip功能
......
src/components/Table/index.vue
......@@ -243,7 +243,7 @@ onMounted(() => {
height: props.tableInfo.height ?? '100%',
'min-height': props.tableInfo.minPanelHeight ?? ''
}">
<el-table ref="tableRef" :class="{ 'no-edit': props.tableInfo.readonly, 'sort-table': props.tableInfo.sortable }"
<el-table ref="tableRef" :class="[ props.tableInfo.readonly ? 'no-edit' : '', props.tableInfo.sortable ? 'sort-table' : '', props.tableInfo.class || '']"
:data="tableData" :highlight-current-row="props.tableInfo.heightlightRow ?? true"
:show-header="props.tableInfo.showHeader ?? true" stripe :border="props.tableInfo.border
?? true" :height="props.tableInfo.height === null ? null : (props.tableInfo.height ?? '100%')"
......@@ -523,7 +523,7 @@ onMounted(() => {
}}</span>
</template>
</el-table-column>
<el-table-column :width="actionInfo.width" :class-name="actionInfo.columClass" fixed="right"
<el-table-column :width="actionInfo.width" :class-name="actionInfo.columClass" :fixed="actionInfo.fixed ?? 'right'"
v-if="actionInfo.show ?? true">
<template #header>
<div class="header_title">
......
src/views/data_asset/registerCatalogDetail.vue
......@@ -336,7 +336,10 @@ const getDetailInfo = () => {
/** ----------------- 数据包信息 --------------------- */
const productTableInfo = ref({
id: "input-product-table",
height: '214px',
height: 'auto',
minPanelHeight: '40px',
minHeight: '40px',
class: 'no-scroll-vertical',
fields: [
{ label: "序号", type: "index", width: TableColumnWidth.INDEX, align: "center" },
{ label: "服务名称", field: "apiName", width: 180 },
......@@ -345,7 +348,7 @@ const productTableInfo = ref({
return scope.row.apiType && apiTypes.find(a => a.value == scope.row.apiType)?.label;
}
},
{ label: "API地址", field: "requestUrl", width: 240 },
{ label: "API地址", field: "requestUrl", width: 'auto', minWidth: 200 },
{ label: "描述", field: "apiDescription", width: 240 },
],
data: [],
......@@ -353,9 +356,10 @@ const productTableInfo = ref({
actionInfo: {
label: "操作",
type: "btn",
fixed: false,
show: !detailInfo.value.nodeId && (route.query.foundMode == 'read' || route.query.foundMode == 'download'),
isMore: false,
width: 130,
width: 90,
btns: (scope) => {
let arrBtns: any = [];
//若是使用方，则换一个api地址。使用操作是查看时可以查看
......@@ -1406,7 +1410,7 @@ const respParamsTableInfo = ref({
</div>
</ContentWrap>
<ContentWrap v-if="productTableInfo.data?.length" id="product-info" title="服务包信息" style="margin: 16px 16px 16px">
<Table ref="productTableRef" :tableInfo="productTableInfo" class="fiveRow-table" />
<Table ref="productTableRef" :tableInfo="productTableInfo" />
</ContentWrap>
<ContentWrap v-if="isJSZQ" id="id-paramsInfo" title="入参出参信息" description="" style="margin: 16px 16px 16px">
<el-tabs v-model="activeTabName" class="param-tabs">
......@@ -1421,10 +1425,9 @@ const respParamsTableInfo = ref({
<ContentWrap id="id-table" title="资源表" v-if="detailInfo.damCatalogTableInfo?.length" description=""
style="margin: 16px 16px 16px">
<el-table v-show="!fullscreenLoading" ref="tableRef" :data="detailInfo.damCatalogTableInfo"
:highlight-current-row="true" stripe border @expand-change="handleTableExpandChange" height="100%"
:highlight-current-row="true" stripe border @expand-change="handleTableExpandChange" max-height="350"
tooltip-effect="light" row-key="guid" :style="{
width: '100%',
height: '350px',
display: 'inline-block',
}">
<el-table-column type="expand">
......@@ -1480,11 +1483,11 @@ const respParamsTableInfo = ref({
</el-table-column>
<el-table-column label="序号" type="index" width="56px" align="center" show-overflow-tooltip>
</el-table-column>
<el-table-column prop="tableChName" label="表中文名称" width="150px" align="left" show-overflow-tooltip>
<el-table-column prop="tableChName" label="表中文名称" width="160px" align="left" show-overflow-tooltip>
</el-table-column>
<el-table-column prop="tableName" label="表英文名称" width="150px" align="left" show-overflow-tooltip>
<el-table-column prop="tableName" label="表英文名称" width="140px" align="left" show-overflow-tooltip>
</el-table-column>
<el-table-column prop="dataCount" label="表数据总数(条)" width="150px" align="right" show-overflow-tooltip>
<el-table-column prop="dataCount" label="表数据总数(条)" width="140px" align="right" show-overflow-tooltip>
<template #default="scope">
<span>{{ scope.row["dataCount"] == null ? '--' : changeNum(scope.row["dataCount"], 0) }}</span>
</template>
......@@ -1499,13 +1502,13 @@ const respParamsTableInfo = ref({
<span>{{ scope.row["updateUserName"] || '--' }}</span>
</template>
</el-table-column>
<el-table-column prop="updateTime" label="修改时间" width="180px" align="left" show-overflow-tooltip>
<el-table-column prop="updateTime" label="修改时间" width="170px" align="left" show-overflow-tooltip>
<template #default="scope">
<span>{{ scope.row["updateTime"] || '--' }}</span>
</template>
</el-table-column>
<el-table-column label="操作" v-if="!detailInfo.nodeId || foundMode == 'download' || foundMode == 'read' || foundMode == 'readAndDown'"
width="220px" align="left" fixed="right" show-overflow-tooltip>
:width="foundMode == 'readAndDown' ? '220px' : '140px'" align="left" fixed="right" show-overflow-tooltip>
<template #default="scope">
<!-- 如果是下载，就只显示下载，如果是查看和下载就都显示，就两个按钮都显示。仅查看，就仅查看 -->
<span v-show="foundMode != 'download'" class="text_btn" @click="handleTableViewData(scope)">查看样例数据</span>
......
src/views/data_service/apiManagement.vue
......@@ -163,17 +163,17 @@ const tableInfo = ref({
{
label: "平均响应时间(s)", field: "averageRespTime", width: 130, align: 'right', type: 'chnum'
},
{
label: "绑定连接器数", field: "bindingCount", width: 130, align: 'right', type: "text_btn", value: "detail", click: (scope) => {
if (!scope.row.bindingCount) {
proxy.$ElMessage.warning('当前没有绑定连接器');
return;
}
//TODO, 查看连接器信息。
}, getName: (scope) => {
return scope.row.bindingCount != null ? changeNum(scope.row.bindingCount ?? 0) : '--';
}
},
// {
// label: "绑定连接器数", field: "bindingCount", width: 130, align: 'right', type: "text_btn", value: "detail", click: (scope) => {
// if (!scope.row.bindingCount) {
// proxy.$ElMessage.warning('当前没有绑定连接器');
// return;
// }
// //TODO, 查看连接器信息。
// }, getName: (scope) => {
// return scope.row.bindingCount != null ? changeNum(scope.row.bindingCount ?? 0) : '--';
// }
// },
{ label: "API请求路径", field: "requestUrl", width: TableColumnWidth.DESCRIPTION },
{
label: '状态', field: 'apiState', type: 'switch', activeText: '启用', inactiveText: '停用', activeValue: 1, inactiveValue: 0, switchWidth: 56, width: 96, align: 'center'
......
src/views/data_smart_contract/components/strategyTable.vue
......@@ -3,11 +3,11 @@
<div class="h-title">策略信息</div>
<el-button v-if="!isLook" plain @click="invokeTemplate" v-preReClick>合约模板调用</el-button>
</div>
<el-table class="strategyTable" ref="strategyTableRef" v-loading="strategyDataLoading" :data="strategyData"
:height="isReport ? 'auto' : '250px'" :highlight-current-row="true" stripe tooltip-effect="light" border
<el-table class="strategyTable no-scroll-vertical" ref="strategyTableRef" v-loading="strategyDataLoading" :data="strategyData"
:height="(isReport || isLook) ? 'auto' : '250px'" :highlight-current-row="true" stripe tooltip-effect="light" border
:span-method="arraySpanMethod">
<el-table-column label="序号" width="56" align="center" fixed="left" :formatter="formatIndex" />
<el-table-column prop="action" label="行为类型" :width="isReport ? 'auto' : '150px'"
<el-table-column prop="action" label="行为类型" :width="isLook ? '106px' : (isReport ? 'auto' : '150px')"
:min-width="isReport ? '100px' : undefined" align="left" :show-overflow-tooltip="!isReport">
<template #header>
<span>行为类型</span>
......@@ -31,7 +31,7 @@
<span v-else>{{ scope.row['actionEnName'] || '--' }}</span>
</template>
</el-table-column>
<el-table-column prop="constraintName" label="约束条件" :width="isReport ? 'auto' : '150px'"
<el-table-column prop="constraintName" label="约束条件" :width="isLook ? '135px' : (isReport ? 'auto' : '150px')"
:min-width="isReport ? '100px' : undefined" align="left" :show-overflow-tooltip="!isReport">
<template #header>
<span>约束条件</span>
......@@ -46,14 +46,14 @@
<span v-else>{{ scope.row['constraintName'] || '--' }}</span>
</template>
</el-table-column>
<el-table-column prop="constraintEnName" label="约束条件英文名称" :width="isReport ? 'auto' : '150px'"
<el-table-column prop="constraintEnName" label="约束条件英文名称" :width="isReport ? 'auto' : '162px'"
:min-width="isReport ? '120px' : undefined" align="left" :show-overflow-tooltip="!isReport">
<template #default="scope">
<el-input v-if="!isLook" v-model="scope.row['constraintEnName']" :disabled="true" placeholder="-"></el-input>
<span v-else>{{ scope.row['constraintEnName'] || '--' }}</span>
</template>
</el-table-column>
<el-table-column prop="constraintOperatorCode" label="运算符" :width="isReport ? 'auto' : '150px'"
<el-table-column prop="constraintOperatorCode" label="运算符" :width="isLook ? '118px' : (isReport ? 'auto' : '150px')"
:min-width="isReport ? '100px' : undefined" align="left" :show-overflow-tooltip="!isReport">
<template #header>
<span>运算符</span>
......@@ -68,8 +68,8 @@
<span v-else>{{ scope.row['constraintOperatorName'] || '--' }}</span>
</template>
</el-table-column>
<el-table-column prop="constraintValue" label="约束值" :width="isReport ? 'auto' : '340px'"
:min-width="isReport ? '160px' : undefined" align="left" :show-overflow-tooltip="!isReport">
<el-table-column prop="constraintValue" label="约束值" :width="(isReport || isLook) ? 'auto' : '300px'"
:min-width="(isReport || isLook) ? '160px' : undefined" align="left" :show-overflow-tooltip="!isReport">
<template #header>
<span>约束值</span>
<!-- <span style="color:red;margin-left: 2px;">*</span> -->
......
src/views/data_smart_contract/contractRecordManage.vue
......@@ -65,7 +65,7 @@ const tableFields = ref([
{ label: "产品名称", field: "productName", width: 180 },
{ label: "合约编号", field: "contractId", width: 355 },
{ label: "合约状态", field: "contractStatus", type: "tag", width: 96, align: 'center' },
{ label: "发起主体", field: "tenantName", width: 205 },
{ label: "发起主体", field: "tenantName", width: 200 },
{ label: "签署时间", field: "signatureTime", width: 170 }
]);
......
src/views/data_smart_contract/smartContractDetail.vue
......@@ -256,7 +256,10 @@ const btnHandles = ref({
const extendTableInfo = ref({
id: "input-extend-table",
height: '214px',
height: 'auto',
class: 'no-scroll-vertical',
minPanelHeight: '60px',
minHeight: '60px',
fields: [
{ label: "序号", type: "index", width: TableColumnWidth.INDEX, align: "center" },
{ label: "扩展字段名称", field: "expansionFieldName", width: 160 },
......@@ -294,12 +297,12 @@ const exportExtendTableInfo = computed(() => {
const productTableInfo = ref({
id: "input-product-table",
height: '75px',
height: 'auto',
minHeight: '60px',
minPanelHeight: '60px',
fields: [
{ label: "序号", type: "index", width: TableColumnWidth.INDEX, align: "center" },
{ label: "数据产品", field: "dataProductName", width: 180 },
{ label: "数据产品", field: "dataProductName", width: 270 },
{ label: "数据产品编码", field: "dataProductId", width: 261 },
{ label: "所属主体名称", field: "dataProductEntityName", width: 240 },
{ label: "产品简介", field: "dataProductAbstract", width: 240 },
......@@ -586,37 +589,36 @@ const signFileLoading = ref(false);
const signFileUrlInfo: any = ref({ name: '', url: '' });
function getElementPdfPosition(element, options = {}) {
const { scale = 2, pageHeightPt = 842 } = options;
// function getElementPdfPosition(element, options = {}) {
// const { scale = 2, pageHeightPt = 842 } = options;
// 1. 获取元素距离容器顶部的像素距离
const container = document.getElementById('pdf-container'); // 你的根容器
const rect = element.getBoundingClientRect();
const containerRect = container.getBoundingClientRect();
const topPx = rect.top - containerRect.top + window.scrollY;
// // 1. 获取元素距离容器顶部的像素距离
// const container = document.getElementById('pdf-container'); // 你的根容器
// const rect = element.getBoundingClientRect();
// const containerRect = container.getBoundingClientRect();
// const topPx = rect.top - containerRect.top + window.scrollY;
// 2. html2canvas 默认使用 devicePixelRatio，但 html2pdf 通常固定 scale
// html2pdf 内部会将 canvas 高度按比例缩放到 PDF 页面宽度
// 简化模型：假设 PDF 宽度 = 595pt (A4)，对应 canvas.width / scale px
// // 2. html2canvas 默认使用 devicePixelRatio，但 html2pdf 通常固定 scale
// // html2pdf 内部会将 canvas 高度按比例缩放到 PDF 页面宽度
// // 简化模型：假设 PDF 宽度 = 595pt (A4)，对应 canvas.width / scale px
const pdfPageWidthPt = 595; // A4 width in pt
const containerWidthPx = container.offsetWidth;
const pxToPtRatio = pdfPageWidthPt / containerWidthPx; // 每像素多少 pt
const topPt = topPx * pxToPtRatio;
// const pdfPageWidthPt = 595; // A4 width in pt
// const containerWidthPx = container.offsetWidth;
// const pxToPtRatio = pdfPageWidthPt / containerWidthPx; // 每像素多少 pt
// 3. 计算落在第几页 & 页内 Y 坐标
const page = Math.floor(topPt / pageHeightPt) + 1;
const yInPage = topPt % pageHeightPt;
// const topPt = topPx * pxToPtRatio;
return {
page,
x: rect.left * pxToPtRatio, // 可选 X 坐标
y: yInPage,
totalY: topPt
};
}
// // 3. 计算落在第几页 & 页内 Y 坐标
// const page = Math.floor(topPt / pageHeightPt) + 1;
// const yInPage = topPt % pageHeightPt;
// return {
// page,
// x: rect.left * pxToPtRatio, // 可选 X 坐标
// y: yInPage,
// totalY: topPt
// };
// }
const geneSignFile = async () => {
const element = document.getElementById('pdf-content'); // 指定要转PDF的DOM
......@@ -1442,7 +1444,7 @@ onActivated(() => {
<el-table-column type="expand">
<template #default="scope">
<div class="h-title mt6">履约证明</div>
<div class="list_panel" style="width: 1000px;">
<div class="list_panel" style="width: 1200px;">
<div class="list_item">
<span class="item_label">日志摘要:</span>
<span class="item_value"><ellipsis-tooltip :content="scope.row?.contractProof?.logHash || '--'"
......@@ -1456,16 +1458,16 @@ onActivated(() => {
</span>
</div>
<div class="list_item">
<span class="item_label">发送时间:</span>
<span class="item_label">区块链时间:</span>
<span class="item_value"><ellipsis-tooltip :content="scope.row?.contractProof?.sendTime || '--'"
class-name="w100f mr8-i" :refName="'tooltipOver' + 'sendTime'"></ellipsis-tooltip></span>
</div>
<div class="list_item" style="width: 50%;">
<span class="item_label">履约连接器签名:</span>
<span class="item_label">履约连接器名称:</span>
<!-- <template v-if="scope.row?.signature?.url">
<showFile :file="[execProofDetailInfo.signature]"></showFile>
</template> -->
<span class="item_value">{{ scope.row?.contractProof?.signature || '--' }}</span>
<span class="item_value">{{ scope.row?.contractProof?.connectName || '--' }}</span>
</div>
</div>
</template>
......@@ -1571,7 +1573,7 @@ onActivated(() => {
<Dialog ref="dialogRef" :dialogInfo="detailDialogInfo" class="policy-table-detail"
@btnClick="handleVersionDialogBtnClick">
<template #extra-content>
<div v-loading="detailDialogInfo.contentLoading">
<div v-loading="detailDialogInfo.contentLoading" style="max-height: 600px;overflow-y: auto;">
<StrategyTable ref="strategyTableDetailRef" :show-title="true" :is-look="true" :value="versionDetail">
</StrategyTable>
</div>
......
src/views/data_smart_contract/smartContractManagement.vue
......@@ -54,7 +54,7 @@ const tableFields = ref([
{ label: "签署方式", field: "signModeName", width: 120 },
{ label: "合约状态", field: "contractStatus", type: "tag", width: 96, align: 'center' },
{ label: "合约编号", field: "contractId", width: 355 },
{ label: "发起主体", field: "tenantName", width: 205 },
{ label: "发起主体", field: "tenantName", width: 200 },
{ label: "创建人", field: "createUserName", width: 130 },
{ label: "创建时间", field: "createTime", width: 170 },
{ label: "提交企业", field: "submitTenantName", width: 200 },
......
Styling with Markdown is supported
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!