580 lines
17 KiB
Vue
580 lines
17 KiB
Vue
|
<template>
|
|||
|
|
<div class="pdo-container">
|
|||
|
|
<!-- 查询表单区域 -->
|
|||
|
|
<div class="pdo-header">
|
|||
|
|
<el-form :inline="true" :model="queryForm" ref="queryForm" label-width="100px" size="small">
|
|||
|
|
<el-form-item label="钢卷号" prop="coilid">
|
|||
|
|
<el-input v-model="queryForm.coilid" placeholder="请输入钢卷号"></el-input>
|
|||
|
|
</el-form-item>
|
|||
|
|
<el-form-item label="开始日期" prop="startDate">
|
|||
|
|
<el-date-picker v-model="queryForm.startDate" type="date" placeholder="选择开始日期" value-format="yyyy-MM-dd"
|
|||
|
|
clearable></el-date-picker>
|
|||
|
|
</el-form-item>
|
|||
|
|
<el-form-item label="结束日期" prop="endDate">
|
|||
|
|
<el-date-picker v-model="queryForm.endDate" type="date" placeholder="选择结束日期" value-format="yyyy-MM-dd"
|
|||
|
|
clearable></el-date-picker>
|
|||
|
|
</el-form-item>
|
|||
|
|
<el-form-item>
|
|||
|
|
<el-button type="primary" @click="handleQuery" :loading="btnLoading" icon="el-icon-search">查询</el-button>
|
|||
|
|
<el-button @click="handleReset" icon="el-icon-refresh">重置</el-button>
|
|||
|
|
<el-button type="success" @click="handleAdd" icon="el-icon-plus">补录</el-button>
|
|||
|
|
</el-form-item>
|
|||
|
|
</el-form>
|
|||
|
|
</div>
|
|||
|
|
|
|||
|
|
<!-- 卡片网格布局 -->
|
|||
|
|
<div v-loading="tableLoading" class="card-grid-container">
|
|||
|
|
<el-row :gutter="10">
|
|||
|
|
<el-col v-for="(item, index) in tableData" :key="index" :xs="24" :sm="12" :md="8" :lg="6" :xl="5"
|
|||
|
|
class="card-col">
|
|||
|
|
<el-card class="parameter-card" shadow="never" :body-style="{ padding: '8px' }"
|
|||
|
|
:class="{ 'card-selected': currentRow.exitMatId === item.exitMatId }" @click.native="handleRowClick(item)">
|
|||
|
|
<div slot="header" class="card-header">
|
|||
|
|
<div class="card-title">成品卷: {{ item.exitMatId || '-' }}</div>
|
|||
|
|
<div class="card-subtitle">{{ item.entryMatId || '-' }} | {{ item.planNo || '-' }}</div>
|
|||
|
|
</div>
|
|||
|
|
<div class="card-body">
|
|||
|
|
<div class="param-groups-row">
|
|||
|
|
<!-- 基本信息 -->
|
|||
|
|
<div class="param-group">
|
|||
|
|
<div class="group-title">基本信息</div>
|
|||
|
|
<div class="param-list">
|
|||
|
|
<div class="param-line">
|
|||
|
|
<span class="param-label">状态:</span>
|
|||
|
|
<span class="param-value">{{ item.status || '-' }}</span>
|
|||
|
|
</div>
|
|||
|
|
<div class="param-line">
|
|||
|
|
<span class="param-label">钢种:</span>
|
|||
|
|
<span class="param-value">{{ item.steelGrade || '-' }}</span>
|
|||
|
|
</div>
|
|||
|
|
<div class="param-line">
|
|||
|
|
<span class="param-label">产品类型:</span>
|
|||
|
|
<span class="param-value">{{ item.prodCode || '-' }}</span>
|
|||
|
|
</div>
|
|||
|
|
<div class="param-line">
|
|||
|
|
<span class="param-label">客户:</span>
|
|||
|
|
<span class="param-value">{{ item.customer || '-' }}</span>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
|
|||
|
|
<!-- 来料信息 -->
|
|||
|
|
<div class="param-group">
|
|||
|
|
<div class="group-title">来料信息</div>
|
|||
|
|
<div class="param-list">
|
|||
|
|
<div class="param-line">
|
|||
|
|
<span class="param-label">厚度:</span>
|
|||
|
|
<span class="param-value">{{ item.entryThick || '-' }}</span>
|
|||
|
|
</div>
|
|||
|
|
<div class="param-line">
|
|||
|
|
<span class="param-label">宽度:</span>
|
|||
|
|
<span class="param-value">{{ item.entryWidth || '-' }}</span>
|
|||
|
|
</div>
|
|||
|
|
<div class="param-line">
|
|||
|
|
<span class="param-label">长度:</span>
|
|||
|
|
<span class="param-value">{{ item.entryLength || '-' }}</span>
|
|||
|
|
</div>
|
|||
|
|
<div class="param-line">
|
|||
|
|
<span class="param-label">重量:</span>
|
|||
|
|
<span class="param-value">{{ item.entryWeight || '-' }}</span>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
|
|||
|
|
<!-- 成品信息 -->
|
|||
|
|
<div class="param-group">
|
|||
|
|
<div class="group-title">成品信息</div>
|
|||
|
|
<div class="param-list">
|
|||
|
|
<div class="param-line">
|
|||
|
|
<span class="param-label">厚度:</span>
|
|||
|
|
<span class="param-value">{{ item.exitThickness || '-' }}</span>
|
|||
|
|
</div>
|
|||
|
|
<div class="param-line">
|
|||
|
|
<span class="param-label">宽度:</span>
|
|||
|
|
<span class="param-value">{{ item.exitWidth || '-' }}</span>
|
|||
|
|
</div>
|
|||
|
|
<div class="param-line">
|
|||
|
|
<span class="param-label">长度:</span>
|
|||
|
|
<span class="param-value">{{ item.exitLength || '-' }}</span>
|
|||
|
|
</div>
|
|||
|
|
<div class="param-line">
|
|||
|
|
<span class="param-label">重量:</span>
|
|||
|
|
<span class="param-value">{{ item.exitNetWeight || '-' }}</span>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
<div class="card-footer">
|
|||
|
|
<el-button size="mini" type="text" icon="el-icon-view" @click.stop="handlePrint(item)">打印</el-button>
|
|||
|
|
<el-button size="mini" type="text" icon="el-icon-edit" @click.stop="handleEdit(item)">操作</el-button>
|
|||
|
|
<el-button size="mini" type="text" icon="el-icon-delete" :loading="item.deleteLoading"
|
|||
|
|
@click.stop="handleDelete(item)">删除</el-button>
|
|||
|
|
</div>
|
|||
|
|
</el-card>
|
|||
|
|
</el-col>
|
|||
|
|
</el-row>
|
|||
|
|
<div v-if="tableData.length === 0 && !tableLoading" class="empty-data">
|
|||
|
|
<el-empty description="暂无数据"></el-empty>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
|
|||
|
|
<!-- 统计汇总和图表区域 -->
|
|||
|
|
<div class="statistics-container">
|
|||
|
|
<div class="statistics-header">
|
|||
|
|
<div class="selected-info" v-if="currentRow && currentRow.entryMatId">
|
|||
|
|
<i class="el-icon-check"></i>
|
|||
|
|
<span class="selected-label">已选中:</span>
|
|||
|
|
<span class="selected-value">成品卷 {{ currentRow.exitMatId }}</span>
|
|||
|
|
<span class="selected-detail" v-if="currentRow.entryMatId">(来料卷: {{ currentRow.entryMatId }})</span>
|
|||
|
|
</div>
|
|||
|
|
<div class="selected-info empty" v-else>
|
|||
|
|
<i class="el-icon-info"></i>
|
|||
|
|
<span>请选择上方卡片查看详情</span>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
<el-row :gutter="15" class="statistics-content">
|
|||
|
|
<el-col :span="4" class="summary-col">
|
|||
|
|
<div class="summary-wrapper">
|
|||
|
|
<div class="summary-header">统计汇总</div>
|
|||
|
|
<pdo-summary :table-data="tableData" />
|
|||
|
|
</div>
|
|||
|
|
</el-col>
|
|||
|
|
<el-col :span="20" class="chart-col">
|
|||
|
|
<div class="chart-wrapper">
|
|||
|
|
<line-chart :enCoilID="currentRow.entryMatId" :url="activeUrl" />
|
|||
|
|
</div>
|
|||
|
|
</el-col>
|
|||
|
|
</el-row>
|
|||
|
|
</div>
|
|||
|
|
|
|||
|
|
<!-- 编辑/新增弹窗：根据isAdd条件渲染内容 -->
|
|||
|
|
<el-dialog :title="dialogTitle" :visible.sync="dialogVisible" width="80%" :close-on-click-modal="false">
|
|||
|
|
<!-- 补录（新增）：仅显示数据修正组件，无tab -->
|
|||
|
|
<div v-if="isAdd">
|
|||
|
|
<pdo-data-correction :detail="formData" :save-callback="handleSave"
|
|||
|
|
:save-loading="saveLoading"></pdo-data-correction>
|
|||
|
|
</div>
|
|||
|
|
|
|||
|
|
|
|||
|
|
<pdo-data-correction :detail="formData" :save-callback="handleSave"
|
|||
|
|
:save-loading="saveLoading"></pdo-data-correction>
|
|||
|
|
|
|||
|
|
</el-dialog>
|
|||
|
|
|
|||
|
|
<el-dialog title="标签打印" :visible.sync="printOpen" width="600px" :close-on-click-modal="false">
|
|||
|
|
<div style="display: flex; justify-content: center; align-items: center;">
|
|||
|
|
<pdo-label-print :detail="formData"></pdo-label-print>
|
|||
|
|
</div>
|
|||
|
|
</el-dialog>
|
|||
|
|
</div>
|
|||
|
|
</template>
|
|||
|
|
|
|||
|
|
<script>
|
|||
|
|
import createFetch from '@/api/l2/pdo'
|
|||
|
|
import LineChart from './components/line.vue'
|
|||
|
|
// 引入封装的两个组件
|
|||
|
|
import PdoDataCorrection from './components/DataCorrection.vue'
|
|||
|
|
import PdoLabelPrint from './components/LabelPrint.vue'
|
|||
|
|
import PdoSummary from './components/PdoSummary.vue'
|
|||
|
|
|
|||
|
|
export default {
|
|||
|
|
name: 'PdoManagement',
|
|||
|
|
dicts: ['pdo_plan_origin'],
|
|||
|
|
components: {
|
|||
|
|
LineChart,
|
|||
|
|
PdoDataCorrection, // 注册数据修正组件
|
|||
|
|
PdoLabelPrint, // 注册标签打印组件
|
|||
|
|
PdoSummary
|
|||
|
|
},
|
|||
|
|
data() {
|
|||
|
|
return {
|
|||
|
|
activeUrl: '140.143.206.120:18081',
|
|||
|
|
queryForm: { coilid: '', startDate: '', endDate: '' },
|
|||
|
|
printOpen: false,
|
|||
|
|
tableData: [],
|
|||
|
|
tableLoading: false,
|
|||
|
|
btnLoading: false,
|
|||
|
|
dialogVisible: false,
|
|||
|
|
dialogTitle: '新增实绩',
|
|||
|
|
// 新增：区分「补录（新增）」和「编辑」的状态标识
|
|||
|
|
isAdd: false,
|
|||
|
|
// 传递给子组件的详情数据（父组件仅做数据中转，不直接修改）
|
|||
|
|
formData: {},
|
|||
|
|
saveLoading: false,
|
|||
|
|
currentRow: {},
|
|||
|
|
socketType: [
|
|||
|
|
{ value: 'alarm', label: '报警' },
|
|||
|
|
{ value: 'track_position', label: '跟踪位置' },
|
|||
|
|
{ value: 'track_measure', label: '跟踪测量' },
|
|||
|
|
{ value: 'track_signal', label: '跟踪信号' },
|
|||
|
|
{ value: 'track_matmap', label: '跟踪料号' },
|
|||
|
|
{ value: 'calc_setup_result', label: '计算结果' }
|
|||
|
|
]
|
|||
|
|
}
|
|||
|
|
},
|
|||
|
|
created() {
|
|||
|
|
this.pdoApi = createFetch(this.activeUrl)
|
|||
|
|
this.getPdoList()
|
|||
|
|
},
|
|||
|
|
methods: {
|
|||
|
|
// 获取列表数据（保持不变）
|
|||
|
|
getPdoList() {
|
|||
|
|
this.tableLoading = true
|
|||
|
|
this.pdoApi.getPdoList(this.queryForm).then(res => {
|
|||
|
|
this.tableData = res.data.map(item => ({ ...item, deleteLoading: false }))
|
|||
|
|
}).catch(err => {
|
|||
|
|
console.error(err)
|
|||
|
|
this.$message.error('获取数据失败')
|
|||
|
|
}).finally(() => {
|
|||
|
|
this.tableLoading = false
|
|||
|
|
this.btnLoading = false
|
|||
|
|
})
|
|||
|
|
},
|
|||
|
|
// 查询（保持不变）
|
|||
|
|
handleQuery() {
|
|||
|
|
this.btnLoading = true;
|
|||
|
|
this.getPdoList()
|
|||
|
|
},
|
|||
|
|
// 重置（保持不变）
|
|||
|
|
handleReset() {
|
|||
|
|
this.$refs.queryForm.resetFields();
|
|||
|
|
this.getPdoList()
|
|||
|
|
},
|
|||
|
|
// 行点击（保持不变）
|
|||
|
|
handleRowClick(row) {
|
|||
|
|
this.currentRow = row;
|
|||
|
|
},
|
|||
|
|
// 格式化时间
|
|||
|
|
formatTime(time) {
|
|||
|
|
if (!time) return '-';
|
|||
|
|
return this.parseTime(time, '{y}-{m}-{d} {h}:{i}:{s}');
|
|||
|
|
},
|
|||
|
|
// 补录（新增）：设置isAdd=true，初始化空表单
|
|||
|
|
handleAdd() {
|
|||
|
|
this.isAdd = true; // 标记为「补录」
|
|||
|
|
this.dialogTitle = '新增实绩';
|
|||
|
|
// 初始化空表单数据（传递给子组件）
|
|||
|
|
this.formData = {
|
|||
|
|
subId: 0,
|
|||
|
|
startPosition: 0,
|
|||
|
|
endPosition: 0,
|
|||
|
|
planId: 0,
|
|||
|
|
entryThick: 0,
|
|||
|
|
entryWidth: 0,
|
|||
|
|
entryLength: 0,
|
|||
|
|
entryWeight: 0,
|
|||
|
|
weightTop: 0,
|
|||
|
|
weightBottom: 0,
|
|||
|
|
exitLength: 0,
|
|||
|
|
exitNetWeight: 0,
|
|||
|
|
theoryWeight: 0,
|
|||
|
|
actualWeight: 0,
|
|||
|
|
exitOuterDiameter: 0,
|
|||
|
|
exitThickness: 0,
|
|||
|
|
exitWidth: 0,
|
|||
|
|
lastFlag: false,
|
|||
|
|
separateFlag: false
|
|||
|
|
};
|
|||
|
|
this.dialogVisible = true
|
|||
|
|
},
|
|||
|
|
// 编辑：设置isAdd=false，赋值行数据
|
|||
|
|
handleEdit(row) {
|
|||
|
|
this.isAdd = false; // 标记为「编辑」
|
|||
|
|
this.dialogTitle = '编辑实绩';
|
|||
|
|
// 深拷贝行数据（避免直接修改表格数据）
|
|||
|
|
this.formData = JSON.parse(JSON.stringify(row));
|
|||
|
|
this.dialogVisible = true
|
|||
|
|
},
|
|||
|
|
handlePrint(row) {
|
|||
|
|
// 深拷贝行数据（避免直接修改表格数据）
|
|||
|
|
this.formData = JSON.parse(JSON.stringify(row));
|
|||
|
|
this.printOpen = true
|
|||
|
|
},
|
|||
|
|
// 删除（保持不变）
|
|||
|
|
handleDelete(row) {
|
|||
|
|
this.$confirm(`确定删除成品卷 ${row.exitMatId}?`, '确认删除', { type: 'danger' }).then(() => {
|
|||
|
|
row.deleteLoading = true
|
|||
|
|
this.pdoApi.deletePdo(row.exitMatId, row.planId).then(res => {
|
|||
|
|
if (res.code === 200) {
|
|||
|
|
this.$message.success('删除成功');
|
|||
|
|
this.getPdoList()
|
|||
|
|
} else this.$message.error(res.msg || '删除失败')
|
|||
|
|
}).finally(() => row.deleteLoading = false)
|
|||
|
|
})
|
|||
|
|
},
|
|||
|
|
// 保存回调（子组件触发，处理实际API调用）
|
|||
|
|
handleSave(formData) {
|
|||
|
|
this.saveLoading = true
|
|||
|
|
// 根据是否有id判断是新增还是编辑
|
|||
|
|
const request = formData.id ? this.pdoApi.updatePdo(formData) : this.pdoApi.addPdo(formData)
|
|||
|
|
request.then(res => {
|
|||
|
|
if (res.code === 200) {
|
|||
|
|
this.$message.success('保存成功');
|
|||
|
|
this.dialogVisible = false;
|
|||
|
|
this.getPdoList() // 刷新列表
|
|||
|
|
} else this.$message.error(res.msg || '保存失败')
|
|||
|
|
}).finally(() => {
|
|||
|
|
this.saveLoading = false
|
|||
|
|
})
|
|||
|
|
},
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
</script>
|
|||
|
|
|
|||
|
|
<style lang="scss" scoped>
|
|||
|
|
.pdo-container {
|
|||
|
|
height: calc(100vh - 84px);
|
|||
|
|
display: flex;
|
|||
|
|
flex-direction: column;
|
|||
|
|
padding: 15px;
|
|||
|
|
background: #f5f5f5;
|
|||
|
|
overflow: hidden;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.pdo-header {
|
|||
|
|
background: #ffffff;
|
|||
|
|
border: 1px solid #d4d4d4;
|
|||
|
|
border-radius: 2px;
|
|||
|
|
padding: 15px;
|
|||
|
|
margin-bottom: 15px;
|
|||
|
|
flex-shrink: 0;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.card-grid-container {
|
|||
|
|
flex: 1;
|
|||
|
|
min-height: 0;
|
|||
|
|
overflow-y: auto;
|
|||
|
|
padding-right: 5px;
|
|||
|
|
margin-bottom: 15px;
|
|||
|
|
|
|||
|
|
&::-webkit-scrollbar {
|
|||
|
|
width: 6px;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
&::-webkit-scrollbar-thumb {
|
|||
|
|
background: #c0c0c0;
|
|||
|
|
border-radius: 3px;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
&::-webkit-scrollbar-track {
|
|||
|
|
background: #f0f0f0;
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.card-col {
|
|||
|
|
margin-bottom: 10px;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.parameter-card {
|
|||
|
|
border: 1px solid #d4d4d4;
|
|||
|
|
border-radius: 2px;
|
|||
|
|
cursor: pointer;
|
|||
|
|
transition: all 0.2s;
|
|||
|
|
|
|||
|
|
&.card-selected {
|
|||
|
|
border-color: #999;
|
|||
|
|
box-shadow: 0 2px 6px rgba(0, 0, 0, 0.12);
|
|||
|
|
background: #fafafa;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
::v-deep .el-card__header {
|
|||
|
|
padding: 6px 8px;
|
|||
|
|
background: #f8f8f8;
|
|||
|
|
border-bottom: 1px solid #e0e0e0;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
&:hover {
|
|||
|
|
border-color: #999;
|
|||
|
|
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08);
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.card-header {
|
|||
|
|
.card-title {
|
|||
|
|
font-weight: 600;
|
|||
|
|
font-size: 13px;
|
|||
|
|
color: #333;
|
|||
|
|
margin-bottom: 2px;
|
|||
|
|
line-height: 1.4;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.card-subtitle {
|
|||
|
|
font-size: 11px;
|
|||
|
|
color: #888;
|
|||
|
|
line-height: 1.3;
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.card-body {
|
|||
|
|
.param-groups-row {
|
|||
|
|
display: flex;
|
|||
|
|
gap: 8px;
|
|||
|
|
|
|||
|
|
.param-group {
|
|||
|
|
flex: 1;
|
|||
|
|
min-width: 0;
|
|||
|
|
|
|||
|
|
.group-title {
|
|||
|
|
font-size: 11px;
|
|||
|
|
font-weight: 600;
|
|||
|
|
color: #555;
|
|||
|
|
padding: 3px 0;
|
|||
|
|
border-bottom: 1px solid #e0e0e0;
|
|||
|
|
margin-bottom: 4px;
|
|||
|
|
background: #f5f5f5;
|
|||
|
|
padding-left: 4px;
|
|||
|
|
padding-right: 4px;
|
|||
|
|
margin-left: -4px;
|
|||
|
|
margin-right: -4px;
|
|||
|
|
text-align: center;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.param-list {
|
|||
|
|
.param-line {
|
|||
|
|
display: flex;
|
|||
|
|
justify-content: space-between;
|
|||
|
|
align-items: center;
|
|||
|
|
padding: 3px 0;
|
|||
|
|
border-bottom: 1px dotted #e8e8e8;
|
|||
|
|
|
|||
|
|
&:last-child {
|
|||
|
|
border-bottom: none;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.param-label {
|
|||
|
|
color: #777;
|
|||
|
|
font-size: 11px;
|
|||
|
|
flex-shrink: 0;
|
|||
|
|
margin-right: 8px;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.param-value {
|
|||
|
|
color: #333;
|
|||
|
|
font-weight: 500;
|
|||
|
|
font-size: 11px;
|
|||
|
|
text-align: right;
|
|||
|
|
flex: 1;
|
|||
|
|
overflow: hidden;
|
|||
|
|
text-overflow: ellipsis;
|
|||
|
|
white-space: nowrap;
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.card-footer {
|
|||
|
|
display: flex;
|
|||
|
|
justify-content: flex-end;
|
|||
|
|
gap: 6px;
|
|||
|
|
padding-top: 6px;
|
|||
|
|
border-top: 1px solid #e0e0e0;
|
|||
|
|
margin-top: 6px;
|
|||
|
|
|
|||
|
|
.el-button {
|
|||
|
|
font-size: 11px;
|
|||
|
|
padding: 2px 6px;
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.empty-data {
|
|||
|
|
text-align: center;
|
|||
|
|
padding: 40px 0;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.statistics-container {
|
|||
|
|
flex: 0 0 auto;
|
|||
|
|
background: #ffffff;
|
|||
|
|
border: 1px solid #d4d4d4;
|
|||
|
|
border-radius: 2px;
|
|||
|
|
padding: 0;
|
|||
|
|
display: flex;
|
|||
|
|
flex-direction: column;
|
|||
|
|
height: 280px;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.statistics-header {
|
|||
|
|
padding: 8px 15px;
|
|||
|
|
background: #f8f8f8;
|
|||
|
|
border-bottom: 1px solid #e0e0e0;
|
|||
|
|
flex-shrink: 0;
|
|||
|
|
|
|||
|
|
.selected-info {
|
|||
|
|
display: flex;
|
|||
|
|
align-items: center;
|
|||
|
|
font-size: 13px;
|
|||
|
|
|
|||
|
|
&.empty {
|
|||
|
|
color: #999;
|
|||
|
|
|
|||
|
|
i {
|
|||
|
|
color: #bbb;
|
|||
|
|
margin-right: 6px;
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
i {
|
|||
|
|
color: #67c23a;
|
|||
|
|
margin-right: 6px;
|
|||
|
|
font-size: 14px;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.selected-label {
|
|||
|
|
color: #666;
|
|||
|
|
margin-right: 6px;
|
|||
|
|
font-weight: 500;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.selected-value {
|
|||
|
|
color: #333;
|
|||
|
|
font-weight: 600;
|
|||
|
|
margin-right: 8px;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.selected-detail {
|
|||
|
|
color: #888;
|
|||
|
|
font-size: 12px;
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.statistics-content {
|
|||
|
|
flex: 1;
|
|||
|
|
min-height: 0;
|
|||
|
|
padding: 12px 15px;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.summary-col {
|
|||
|
|
height: 100%;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.summary-wrapper {
|
|||
|
|
height: 100%;
|
|||
|
|
display: flex;
|
|||
|
|
flex-direction: column;
|
|||
|
|
border-right: 1px solid #e8e8e8;
|
|||
|
|
padding-right: 15px;
|
|||
|
|
overflow: hidden;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.summary-header {
|
|||
|
|
font-size: 14px;
|
|||
|
|
font-weight: 600;
|
|||
|
|
color: #333;
|
|||
|
|
margin-bottom: 10px;
|
|||
|
|
padding-bottom: 8px;
|
|||
|
|
border-bottom: 1px solid #e8e8e8;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.chart-col {
|
|||
|
|
height: 100%;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.chart-wrapper {
|
|||
|
|
height: 100%;
|
|||
|
|
padding-left: 15px;
|
|||
|
|
}
|
|||
|
|
</style>
|