| | |
|---|
| | | <template> |
|---|
| | | <div class="dashboard"> |
|---|
| | | <!-- 顶部横向两栏 --> |
|---|
| | | <div class="dashboard-top"> |
|---|
| | | <!-- 左：企业信息+三大数据卡片（上下排列） --> |
|---|
| | | <div class="top-left"> |
|---|
| | | <div class="company-info"> |
|---|
| | | <div class="section-title">登陆信息</div> |
|---|
| | | <div style="display: flex;align-items: center;gap: 20px"> |
|---|
| | | <img :src="userStore.avatar" class="avatar" alt=""/> |
|---|
| | | <div class="company-card"> |
|---|
| | | <div class="company-name">{{userStore.name}}</div> |
|---|
| | | <div class="company-meta">{{userStore.roleName}}</div> |
|---|
| | | </div> |
|---|
| | | <div style="display: flex;align-items: center;gap: 8px"> |
|---|
| | | <el-icon color="#5053B5" size="22"><Clock /></el-icon> |
|---|
| | | <span>登陆日期：{{userStore.currentLoginTime}}</span> |
|---|
| | | </div> |
|---|
| | | </div> |
|---|
| | | </div> |
|---|
| | | <div class="data-cards"> |
|---|
| | | <div class="data-card sales"> |
|---|
| | | <div class="data-title">销售数据</div> |
|---|
| | | <div class="data-num"> |
|---|
| | | <div> |
|---|
| | | <div class="data-desc">本月销售额/元</div> |
|---|
| | | <div class="data-value">{{businessInfo.monthSaleMoney}}</div> |
|---|
| | | </div> |
|---|
| | | <div> |
|---|
| | | <div class="data-desc">未开票金额/元</div> |
|---|
| | | <div class="data-value">{{businessInfo.monthSaleHaveMoney}}</div> |
|---|
| | | </div> |
|---|
| | | </div> |
|---|
| | | |
|---|
| | | </div> |
|---|
| | | <div class="data-card purchase"> |
|---|
| | | <div class="data-title">采购数据</div> |
|---|
| | | <div class="data-num"> |
|---|
| | | <div> |
|---|
| | | <div class="data-desc">本月采购额/元</div> |
|---|
| | | <div class="data-value">{{businessInfo.monthPurchaseMoney}}</div> |
|---|
| | | </div> |
|---|
| | | <div> |
|---|
| | | <div class="data-desc">待付款金额/元</div> |
|---|
| | | <div class="data-value">{{businessInfo.monthPurchaseHaveMoney}}</div> |
|---|
| | | </div> |
|---|
| | | </div> |
|---|
| | | </div> |
|---|
| | | <div class="data-card inventory"> |
|---|
| | | <div class="data-title">库存数据</div> |
|---|
| | | <div class="data-num"> |
|---|
| | | <div> |
|---|
| | | <div class="data-desc">当前库存总量/件</div> |
|---|
| | | <div class="data-value">{{businessInfo.inventoryNum}}</div> |
|---|
| | | </div> |
|---|
| | | <div> |
|---|
| | | <div class="data-desc">今日入库/件</div> |
|---|
| | | <div class="data-value">{{businessInfo.todayInventoryNum}}</div> |
|---|
| | | </div> |
|---|
| | | </div> |
|---|
| | | </div> |
|---|
| | | </div> |
|---|
| | | </div> |
|---|
| | | <!-- 右：待办事项 --> |
|---|
| | | <div class="todo-panel"> |
|---|
| | | <div class="section-title">待办事项</div> |
|---|
| | | <ul class="todo-list" v-if="todoList.length > 0"> |
|---|
| | | <li v-for="item in todoList" :key="item.id"> |
|---|
| | | <div style="display: flex;flex-direction: column;justify-content: space-between;width: 100%;gap: 20px"> |
|---|
| | | <div style="display: flex;justify-content: space-between;align-items: center;"> |
|---|
| | | <div class="todo-title">待办编号：{{item.approveId}}</div> |
|---|
| | | <div class="todo-division">部门：{{item.approveDeptName}}</div> |
|---|
| | | <div class="todo-time">{{item.approveTime}}</div> |
|---|
| | | </div> |
|---|
| | | <div class="todo-division">待办事由：{{item.approveReason}}</div> |
|---|
| | | </div> |
|---|
| | | </li> |
|---|
| | | </ul> |
|---|
| | | <div v-else style="text-align: center"> |
|---|
| | | 暂无数据 |
|---|
| | | </div> |
|---|
| | | </div> |
|---|
| | | </div> |
|---|
| | | |
|---|
| | | <!-- 中部横向两栏 --> |
|---|
| | | <div class="dashboard-row"> |
|---|
| | | <div class="main-panel"> |
|---|
| | | <div class="section-title">客户合同金额分析</div> |
|---|
| | | <div class="contract-summary"> |
|---|
| | | <div class="contract-info"> |
|---|
| | | <img src="../assets/images/khtitle.png" alt="" style="width: 42px"/> |
|---|
| | | <div class="contract-card"> |
|---|
| | | <div class="contract-name">总合同金额(元)</div> |
|---|
| | | <div class="contract-meta"> |
|---|
| | | <div class="main-amount">{{sum}}</div> |
|---|
| | | <div>周同比: <span class="up">{{yny}}% </span> 日环比: <span class="up">{{chain}}% </span></div> |
|---|
| | | </div> |
|---|
| | | </div> |
|---|
| | | </div> |
|---|
| | | </div> |
|---|
| | | <div style="display: flex;align-items: center;gap: 20px;justify-content: space-evenly;height: 180px;margin-top: 20px"> |
|---|
| | | <div> |
|---|
| | | <Echarts ref="chart" :legend="pieLegend" :chartStyle="chartStylePie" |
|---|
| | | :series="materialPieSeries" |
|---|
| | | :tooltip="pieTooltip"></Echarts> |
|---|
| | | </div> |
|---|
| | | <ul class="contract-list"> |
|---|
| | | <li v-for="item in materialPieSeries[0].data" :key="item.name"> |
|---|
| | | <div style="display: flex;align-items: center;justify-content: space-between;width: 100%"> |
|---|
| | | <div class="line" :style="{color: item.itemStyle.color}">●{{item.name}}</div> |
|---|
| | | <div style="width: 70px">{{item.rate}}%</div> |
|---|
| | | <div>￥{{item.value}}</div> |
|---|
| | | </div> |
|---|
| | | </li> |
|---|
| | | </ul> |
|---|
| | | </div> |
|---|
| | | </div> |
|---|
| | | <div class="main-panel"> |
|---|
| | | <div style="display: flex;justify-content: space-between;"> |
|---|
| | | <div class="section-title">应收应付统计</div> |
|---|
| | | <el-radio-group v-model="radio1" size="large" @change="statisticsReceivable"> |
|---|
| | | <el-radio-button label="按周" :value="1" /> |
|---|
| | | <el-radio-button label="按月" :value="2" /> |
|---|
| | | <el-radio-button label="按季度" :value="3" /> |
|---|
| | | </el-radio-group> |
|---|
| | | </div> |
|---|
| | | <Echarts ref="chart" |
|---|
| | | :color="barColors2" |
|---|
| | | :chartStyle="chartStyle" |
|---|
| | | :grid="grid" |
|---|
| | | :series="barSeries" |
|---|
| | | :tooltip="tooltip" |
|---|
| | | :xAxis="xAxis" |
|---|
| | | :yAxis="yAxis" |
|---|
| | | style="height: 260px"></Echarts> |
|---|
| | | </div> |
|---|
| | | </div> |
|---|
| | | |
|---|
| | | <!-- 底部横向两栏 --> |
|---|
| | | <div class="dashboard-row"> |
|---|
| | | <div class="main-panel"> |
|---|
| | | <div class="section-title">质量统计</div> |
|---|
| | | <div class="quality-cards"> |
|---|
| | | <div class="quality-card one">原材料已检测数 <span>{{qualityStatisticsObject.supplierNum}}件</span></div> |
|---|
| | | <div class="quality-card two">过程检验数量 <span>{{qualityStatisticsObject.processNum}}件</span></div> |
|---|
| | | <div class="quality-card three">出厂已检数量 <span>{{qualityStatisticsObject.factoryNum}}件</span></div> |
|---|
| | | </div> |
|---|
| | | <Echarts ref="chart" |
|---|
| | | :chartStyle="chartStyle" |
|---|
| | | :grid="grid" |
|---|
| | | :legend="barLegend" |
|---|
| | | :series="barSeries1" |
|---|
| | | :tooltip="tooltip" |
|---|
| | | :xAxis="xAxis1" |
|---|
| | | :yAxis="yAxis1" |
|---|
| | | style="height: 260px"></Echarts> |
|---|
| | | </div> |
|---|
| | | <div class="main-panel"> |
|---|
| | | <div class="section-title">回款与开票分析</div> |
|---|
| | | <Echarts ref="chart" :chartStyle="chartStyle" :grid="grid" :legend="lineLegend" :series="lineSeries" |
|---|
| | | :tooltip="tooltipLine" :xAxis="xAxis2" :yAxis="yAxis2" style="height: 270px;"></Echarts> |
|---|
| | | </div> |
|---|
| | | </div> |
|---|
| | | </div> |
|---|
| | | <div class="dashboard"> |
|---|
| | | <!-- 顶部横向两栏 --> |
|---|
| | | <div class="dashboard-top"> |
|---|
| | | <!-- 左：企业信息 --> |
|---|
| | | <div class="top-left"> |
|---|
| | | <div class="company-info"> |
|---|
| | | <!-- 顶部问候条 --> |
|---|
| | | <div class="welcome-banner"> |
|---|
| | | <div class="welcome-title"> |
|---|
| | | <span class="welcome-user">{{ userStore.nickName || '系统管理员' }}</span> |
|---|
| | | <span> 您好！祝您开心每一天</span> |
|---|
| | | </div> |
|---|
| | | <div class="welcome-time">登录于: {{ userStore.currentLoginTime }}</div> |
|---|
| | | </div> |
|---|
| | | |
|---|
| | | <!-- 用户信息卡片 --> |
|---|
| | | <div class="user-card"> |
|---|
| | | <img :src="userStore.avatar" class="avatar" alt="" /> |
|---|
| | | <div class="user-card-main"> |
|---|
| | | <div class="user-name">{{ userStore.name }}</div> |
|---|
| | | <div class="user-role">{{ userStore.roleName }}</div> |
|---|
| | | <div class="user-meta"> |
|---|
| | | <span>{{ userStore.phonenumber || '123456789' }}</span> |
|---|
| | | <span class="sep">|</span> |
|---|
| | | <span>{{ userStore.currentFactoryName || '组织架构' }}</span> |
|---|
| | | <span class="sep">|</span> |
|---|
| | | <span>{{ userStore.remark || '岗位名' }}</span> |
|---|
| | | </div> |
|---|
| | | </div> |
|---|
| | | </div> |
|---|
| | | </div> |
|---|
| | | </div> |
|---|
| | | |
|---|
| | | <!-- 销售/采购/库存数据卡片 - 注释掉 --> |
|---|
| | | <!-- |
|---|
| | | <div class="data-cards"> |
|---|
| | | <div class="data-card sales"> |
|---|
| | | <div class="data-title">销售数据</div> |
|---|
| | | <div class="data-num"> |
|---|
| | | <div> |
|---|
| | | <div class="data-desc">本月销售额/元</div> |
|---|
| | | <div class="data-value">{{ businessInfo.monthSaleMoney }}</div> |
|---|
| | | </div> |
|---|
| | | <div> |
|---|
| | | <div class="data-desc">未开票金额/元</div> |
|---|
| | | <div class="data-value">{{ businessInfo.monthSaleHaveMoney }}</div> |
|---|
| | | </div> |
|---|
| | | </div> |
|---|
| | | </div> |
|---|
| | | <div class="data-card purchase"> |
|---|
| | | <div class="data-title">采购数据</div> |
|---|
| | | <div class="data-num"> |
|---|
| | | <div> |
|---|
| | | <div class="data-desc">本月采购额/元</div> |
|---|
| | | <div class="data-value">{{ businessInfo.monthPurchaseMoney }}</div> |
|---|
| | | </div> |
|---|
| | | <div> |
|---|
| | | <div class="data-desc">待付款金额/元</div> |
|---|
| | | <div class="data-value">{{ businessInfo.monthPurchaseHaveMoney }}</div> |
|---|
| | | </div> |
|---|
| | | </div> |
|---|
| | | </div> |
|---|
| | | <div class="data-card inventory"> |
|---|
| | | <div class="data-title">库存数据</div> |
|---|
| | | <div class="data-num"> |
|---|
| | | <div> |
|---|
| | | <div class="data-desc">当前库存总量/件</div> |
|---|
| | | <div class="data-value">{{ businessInfo.inventoryNum }}</div> |
|---|
| | | </div> |
|---|
| | | <div> |
|---|
| | | <div class="data-desc">今日入库/件</div> |
|---|
| | | <div class="data-value">{{ businessInfo.todayInventoryNum }}</div> |
|---|
| | | </div> |
|---|
| | | </div> |
|---|
| | | </div> |
|---|
| | | </div> |
|---|
| | | --> |
|---|
| | | |
|---|
| | | <!-- 待办事项 - 注释掉 --> |
|---|
| | | <!-- |
|---|
| | | <div class="todo-panel"> |
|---|
| | | <div class="section-title">待办事项</div> |
|---|
| | | <ul class="todo-list" v-if="todoList.length > 0"> |
|---|
| | | <li v-for="item in todoList" :key="item.id"> |
|---|
| | | <div style="display: flex;flex-direction: column;justify-content: space-between;width: 100%;gap: 20px"> |
|---|
| | | <div style="display: flex;justify-content: space-between;align-items: center;"> |
|---|
| | | <div class="todo-title">待办编号：{{ item.approveId }}</div> |
|---|
| | | <div class="todo-division">部门：{{ item.approveDeptName }}</div> |
|---|
| | | <div class="todo-time">{{ item.approveTime }}</div> |
|---|
| | | </div> |
|---|
| | | <div class="todo-division">待办事由：{{ item.approveReason }}</div> |
|---|
| | | </div> |
|---|
| | | </li> |
|---|
| | | </ul> |
|---|
| | | <div v-else style="text-align: center"> |
|---|
| | | 暂无数据 |
|---|
| | | </div> |
|---|
| | | </div> |
|---|
| | | --> |
|---|
| | | </div> |
|---|
| | | |
|---|
| | | <!-- 工序数据生产统计明细 - 生产相关，保留 --> |
|---|
| | | <div class="dashboard-row"> |
|---|
| | | <div class="main-panel process-panel"> |
|---|
| | | <div class="process-panel__header"> |
|---|
| | | <div class="section-title">工序数据生产统计明细</div> |
|---|
| | | <div style="display: flex; gap: 10px; align-items: center;"> |
|---|
| | | <el-button type="primary" size="small" plain icon="Filter" @click="openProcessDialog">选择工序</el-button> |
|---|
| | | <el-button type="info" size="small" plain icon="Refresh" @click="resetProcessFilter">重置</el-button> |
|---|
| | | <el-radio-group v-model="processRange" size="small" @change="refreshProcessStats"> |
|---|
| | | <el-radio-button :value="1">日</el-radio-button> |
|---|
| | | <el-radio-button :value="2">周</el-radio-button> |
|---|
| | | <el-radio-button :value="3">月</el-radio-button> |
|---|
| | | </el-radio-group> |
|---|
| | | </div> |
|---|
| | | </div> |
|---|
| | | |
|---|
| | | <div class="process-panel__body"> |
|---|
| | | <div class="process-panel__chart"> |
|---|
| | | <Echarts :chartStyle="{ width: '100%', height: '100%' }" :grid="processGrid" :series="processSeries" |
|---|
| | | :tooltip="processTooltip" :xAxis="processXAxis" :yAxis="processYAxis" style="height: 100%" |
|---|
| | | @click="handleChartClick" /> |
|---|
| | | </div> |
|---|
| | | |
|---|
| | | <div class="process-panel__aside"> |
|---|
| | | <div class="process-legend"> |
|---|
| | | <div class="process-legend__item"> |
|---|
| | | <span class="dot dot-blue"></span><span>投入量</span> |
|---|
| | | </div> |
|---|
| | | <div class="process-legend__item"> |
|---|
| | | <span class="dot dot-yellow"></span><span>报废量</span> |
|---|
| | | </div> |
|---|
| | | <div class="process-legend__item"> |
|---|
| | | <span class="dot dot-teal"></span><span>产出量</span> |
|---|
| | | </div> |
|---|
| | | </div> |
|---|
| | | |
|---|
| | | <div class="process-card process-card--name">{{ processAside.processName }}</div> |
|---|
| | | |
|---|
| | | <div class="process-card"> |
|---|
| | | <div class="process-card__label">累计总投入</div> |
|---|
| | | <div class="process-card__value">{{ formatAmount(processAside.totalInput) }}</div> |
|---|
| | | </div> |
|---|
| | | <div class="process-card"> |
|---|
| | | <div class="process-card__label">累计总报废</div> |
|---|
| | | <div class="process-card__value">{{ formatAmount(processAside.totalScrap) }}</div> |
|---|
| | | </div> |
|---|
| | | <div class="process-card"> |
|---|
| | | <div class="process-card__label">累计总产出</div> |
|---|
| | | <div class="process-card__value">{{ formatAmount(processAside.totalOutput) }}</div> |
|---|
| | | </div> |
|---|
| | | </div> |
|---|
| | | </div> |
|---|
| | | </div> |
|---|
| | | </div> |
|---|
| | | |
|---|
| | | <!-- 选择工序对话框 --> |
|---|
| | | <el-dialog v-model="processDialogVisible" title="选择工序" width="500px" append-to-body> |
|---|
| | | <div class="process-selection-wrapper"> |
|---|
| | | <el-checkbox-group v-model="tempProcessIds"> |
|---|
| | | <div class="process-grid"> |
|---|
| | | <el-checkbox v-for="item in processOptions" :key="item.id" :label="item.id" border> |
|---|
| | | {{ item.name }} |
|---|
| | | </el-checkbox> |
|---|
| | | </div> |
|---|
| | | </el-checkbox-group> |
|---|
| | | </div> |
|---|
| | | <template #footer> |
|---|
| | | <span class="dialog-footer"> |
|---|
| | | <el-button @click="processDialogVisible = false">取消</el-button> |
|---|
| | | <el-button type="primary" @click="handleProcessDialogConfirm">确认</el-button> |
|---|
| | | </span> |
|---|
| | | </template> |
|---|
| | | </el-dialog> |
|---|
| | | |
|---|
| | | <!-- 客户合同金额分析 - 注释掉 --> |
|---|
| | | <!-- |
|---|
| | | <div class="dashboard-row"> |
|---|
| | | <div class="main-panel contract-panel"> |
|---|
| | | <div class="section-title">客户合同金额分析</div> |
|---|
| | | <div class="contract-summary"> |
|---|
| | | <div class="contract-info"> |
|---|
| | | <img src="../assets/images/khtitle.png" alt="" style="width: 42px" /> |
|---|
| | | <div class="contract-card"> |
|---|
| | | <div class="contract-name">总合同金额(元)</div> |
|---|
| | | <div class="contract-meta"> |
|---|
| | | <div class="main-amount">{{ sum }}</div> |
|---|
| | | <div>周同比: <span class="up">{{ yny }}% </span> 日环比: <span class="up">{{ chain }}% </span></div> |
|---|
| | | </div> |
|---|
| | | </div> |
|---|
| | | </div> |
|---|
| | | </div> |
|---|
| | | <div class="contract-chart-wrapper"> |
|---|
| | | <div class="chart-container"> |
|---|
| | | <Echarts ref="chart" :legend="pieLegend" :chartStyle="{ width: '100%', height: '280px' }" :series="materialPieSeries" |
|---|
| | | :tooltip="pieTooltip"></Echarts> |
|---|
| | | </div> |
|---|
| | | <ul class="contract-list"> |
|---|
| | | <li v-for="item in materialPieSeries[0].data" :key="item.name"> |
|---|
| | | <div class="contract-item"> |
|---|
| | | <span class="contract-dot" :style="{ background: item.itemStyle?.color || '#999' }"></span> |
|---|
| | | <span class="contract-name">{{ item.name }}</span> |
|---|
| | | <span class="contract-rate">{{ item.rate }}%</span> |
|---|
| | | <span class="contract-value">￥{{ item.value }}</span> |
|---|
| | | </div> |
|---|
| | | </li> |
|---|
| | | </ul> |
|---|
| | | </div> |
|---|
| | | </div> |
|---|
| | | </div> |
|---|
| | | --> |
|---|
| | | |
|---|
| | | <!-- 底部横向两栏 - 质量统计和回款开票 - 注释掉 --> |
|---|
| | | <!-- |
|---|
| | | <div class="dashboard-row"> |
|---|
| | | <div class="main-panel"> |
|---|
| | | <div style="display: flex;justify-content: space-between;align-items: center;margin-bottom: 10px;"> |
|---|
| | | <div class="section-title" style="margin-bottom: 0;">质量统计</div> |
|---|
| | | <el-radio-group v-model="qualityRange" size="small" @change="qualityStatisticsInfo"> |
|---|
| | | <el-radio-button :value="1">周</el-radio-button> |
|---|
| | | <el-radio-button :value="2">月</el-radio-button> |
|---|
| | | <el-radio-button :value="3">季度</el-radio-button> |
|---|
| | | </el-radio-group> |
|---|
| | | </div> |
|---|
| | | <div class="quality-cards"> |
|---|
| | | <div class="quality-card one">原材料已检测数 <span>{{ qualityStatisticsObject.supplierNum }}件</span></div> |
|---|
| | | <div class="quality-card two">过程检验数量 <span>{{ qualityStatisticsObject.processNum }}件</span></div> |
|---|
| | | <div class="quality-card three">出厂已检数量 <span>{{ qualityStatisticsObject.factoryNum }}件</span></div> |
|---|
| | | </div> |
|---|
| | | <Echarts ref="chart" :chartStyle="chartStyle" :grid="grid" :legend="barLegend" :series="barSeries1" |
|---|
| | | :tooltip="tooltip" :xAxis="xAxis1" :yAxis="yAxis1" style="height: 260px"></Echarts> |
|---|
| | | </div> |
|---|
| | | |
|---|
| | | <div class="main-panel"> |
|---|
| | | <div class="section-title">回款与开票分析</div> |
|---|
| | | <Echarts ref="invoiceChart" :chartStyle="chartStyle" :grid="grid" :legend="lineLegend" :series="lineSeries" |
|---|
| | | :tooltip="tooltipLine" :xAxis="xAxis2" :yAxis="yAxis2" style="height: 270px;" /> |
|---|
| | | </div> |
|---|
| | | </div> |
|---|
| | | --> |
|---|
| | | </div> |
|---|
| | | </template> |
|---|
| | | |
|---|
| | | <script setup> |
|---|
| | | import { ref, onMounted } from 'vue' |
|---|
| | | import { ref, onMounted, computed, reactive } from 'vue' |
|---|
| | | import Echarts from "@/components/Echarts/echarts.vue"; |
|---|
| | | import * as echarts from 'echarts'; |
|---|
| | | import useUserStore from "@/store/modules/user.js"; |
|---|
| | | import { |
|---|
| | | analysisCustomerContractAmounts, getAmountHalfYear, |
|---|
| | | getBusiness, |
|---|
| | | homeTodos, |
|---|
| | | qualityStatistics, |
|---|
| | | statisticsReceivablePayable |
|---|
| | | } from "@/api/viewIndex.js"; |
|---|
| | | import { list } from '@/api/productionManagement/productionProcess'; |
|---|
| | | |
|---|
| | | const userStore = useUserStore() |
|---|
| | | |
|---|
| | | const businessInfo = ref({ |
|---|
| | | inventoryNum: 0, |
|---|
| | | monthPurchaseHaveMoney: 0, |
|---|
| | | monthPurchaseMoney: 0, |
|---|
| | | monthSaleHaveMoney: 0, |
|---|
| | | monthSaleMoney: 0, |
|---|
| | | todayInventoryNum: 0, |
|---|
| | | }) |
|---|
| | | const qualityStatisticsObject = ref({ |
|---|
| | | supplierNum: 0, |
|---|
| | | processNum: 0, |
|---|
| | | factoryNum: 0, |
|---|
| | | }) |
|---|
| | | const sum = ref(0) |
|---|
| | | const yny = ref(0) |
|---|
| | | const chain = ref(0) |
|---|
| | | const processOptions = ref([]) |
|---|
| | | const selectedProcessIds = ref([]) |
|---|
| | | const tempProcessIds = ref([]) |
|---|
| | | const processDialogVisible = ref(false) |
|---|
| | | const activeProcessIndex = ref(0) |
|---|
| | | |
|---|
| | | const pieLegend = reactive({ |
|---|
| | | show: false, |
|---|
| | | }) |
|---|
| | | const barSeries = ref([ |
|---|
| | | { |
|---|
| | | type: 'bar', |
|---|
| | | data: [], |
|---|
| | | label: { |
|---|
| | | show: true, |
|---|
| | | } |
|---|
| | | }, |
|---|
| | | ]) |
|---|
| | | const barSeries1 = ref([ |
|---|
| | | { |
|---|
| | | name: '原材料不合格数', |
|---|
| | | type: 'bar', |
|---|
| | | barGap: 0, |
|---|
| | | emphasis: { |
|---|
| | | focus: 'series' |
|---|
| | | }, |
|---|
| | | data: [] |
|---|
| | | }, |
|---|
| | | { |
|---|
| | | name: '过程不合格数', |
|---|
| | | type: 'bar', |
|---|
| | | emphasis: { |
|---|
| | | focus: 'series' |
|---|
| | | }, |
|---|
| | | data: [] |
|---|
| | | }, |
|---|
| | | { |
|---|
| | | name: '出厂不合格数', |
|---|
| | | type: 'bar', |
|---|
| | | emphasis: { |
|---|
| | | focus: 'series' |
|---|
| | | }, |
|---|
| | | data: [] |
|---|
| | | }, |
|---|
| | | ]) |
|---|
| | | const chartStyle = { |
|---|
| | | width: '100%', |
|---|
| | | height: '100%' // 设置图表容器的高度 |
|---|
| | | } |
|---|
| | | const chartStylePie = { |
|---|
| | | width: '140%', |
|---|
| | | height: '140%' // 设置图表容器的高度 |
|---|
| | | } |
|---|
| | | const grid = { |
|---|
| | | left: '3%', |
|---|
| | | right: '4%', |
|---|
| | | bottom: '3%', |
|---|
| | | containLabel: true |
|---|
| | | } |
|---|
| | | const barLegend = { |
|---|
| | | show: true, |
|---|
| | | data: ['原材料不合格数', '过程不合格数', '出厂不合格数'] |
|---|
| | | } |
|---|
| | | const barLegend1 = { |
|---|
| | | show: true, |
|---|
| | | data: ['预付账款', '应付账款', '预收账款', '应收账款'] |
|---|
| | | } |
|---|
| | | const lineLegend = { |
|---|
| | | show: true, |
|---|
| | | data: ['开票', '回款'] |
|---|
| | | } |
|---|
| | | const tooltip = { |
|---|
| | | trigger: 'axis', |
|---|
| | | axisPointer: { |
|---|
| | | type: 'shadow' |
|---|
| | | } |
|---|
| | | } |
|---|
| | | const xAxis = [{ |
|---|
| | | type: 'value', |
|---|
| | | }] |
|---|
| | | const xAxis1 = ref([{ |
|---|
| | | type: 'category', |
|---|
| | | axisTick: { show: false }, |
|---|
| | | data: [] |
|---|
| | | }]) |
|---|
| | | const yAxis = [{ |
|---|
| | | type: 'category', |
|---|
| | | data: [ '应付账款', '应收账款',] |
|---|
| | | }] |
|---|
| | | const yAxis1 = [{ |
|---|
| | | type: 'value' |
|---|
| | | }] |
|---|
| | | const pieTooltip = reactive({ |
|---|
| | | trigger: 'item', |
|---|
| | | formatter: function (params) { |
|---|
| | | // 动态生成提示信息，基于数据项的 name 属性 |
|---|
| | | const description = params.name === '本月回款金额' ? '本月回款金额' : '应收款金额'; |
|---|
| | | return `${description} ${formatNumber(params.value)}元 ${params.percent}%`; |
|---|
| | | }, |
|---|
| | | position: 'right' |
|---|
| | | }) |
|---|
| | | const materialPieSeries = ref([ |
|---|
| | | { |
|---|
| | | type: 'pie', |
|---|
| | | radius: ['66%', '90%'], |
|---|
| | | avoidLabelOverlap: false, |
|---|
| | | itemStyle: { |
|---|
| | | borderColor: '#fff', |
|---|
| | | borderWidth: 2 |
|---|
| | | }, |
|---|
| | | label: { |
|---|
| | | show: false |
|---|
| | | }, |
|---|
| | | data: [] |
|---|
| | | } |
|---|
| | | ]) |
|---|
| | | const lineSeries = ref([ |
|---|
| | | { |
|---|
| | | type: 'line', |
|---|
| | | data: [], |
|---|
| | | label: { |
|---|
| | | show: true |
|---|
| | | }, |
|---|
| | | showSymbol: true, // 显示圆点 |
|---|
| | | }, |
|---|
| | | ]) |
|---|
| | | const tooltipLine = { |
|---|
| | | trigger: 'axis', |
|---|
| | | } |
|---|
| | | const yAxis2 = ref([ |
|---|
| | | { |
|---|
| | | type: 'value', |
|---|
| | | } |
|---|
| | | ]) |
|---|
| | | const xAxis2 = ref([ |
|---|
| | | { |
|---|
| | | type: 'category', |
|---|
| | | data: [], |
|---|
| | | axisLabel: { |
|---|
| | | interval: 0, |
|---|
| | | formatter: function(value) { |
|---|
| | | return value.replace(/~/g, '\n'); |
|---|
| | | }, |
|---|
| | | } |
|---|
| | | } |
|---|
| | | const processRange = ref(1) |
|---|
| | | const processChartData = ref([]) |
|---|
| | | |
|---|
| | | const processXAxis = ref([ |
|---|
| | | { |
|---|
| | | nameTextStyle: { color: 'rgba(0,0,0,0.35)', fontSize: 12 }, |
|---|
| | | axisLabel: { color: 'rgba(0,0,0,0.35)' }, |
|---|
| | | splitLine: { lineStyle: { color: 'rgba(0,0,0,0.06)', type: 'dashed' } }, |
|---|
| | | }, |
|---|
| | | ]) |
|---|
| | | |
|---|
| | | // 待办事项 |
|---|
| | | const todoList = ref([]) |
|---|
| | | const radio1 = ref(1) |
|---|
| | | const processYAxis = ref([ |
|---|
| | | { |
|---|
| | | type: 'category', |
|---|
| | | axisLabel: { color: 'rgba(0,0,0,0.35)', fontSize: 12 }, |
|---|
| | | axisLine: { show: false }, |
|---|
| | | axisTick: { show: false }, |
|---|
| | | data: [], |
|---|
| | | }, |
|---|
| | | ]) |
|---|
| | | |
|---|
| | | // 图表引用 |
|---|
| | | const barChart = ref(null) |
|---|
| | | const lineChart = ref(null) |
|---|
| | | const barColors2 = ['#5181DB', '#D369E0', '#F2CA6D', '#60CCA8'] |
|---|
| | | const processTooltip = ref({ |
|---|
| | | trigger: 'axis', |
|---|
| | | axisPointer: { type: 'shadow' }, |
|---|
| | | }) |
|---|
| | | |
|---|
| | | // 随机颜色生成函数 |
|---|
| | | const getRandomColor = () => { |
|---|
| | | return '#' + Math.floor(Math.random() * 0xffffff).toString(16).padStart(6, '0'); |
|---|
| | | const processSeries = ref([ |
|---|
| | | { |
|---|
| | | name: '投入量', |
|---|
| | | type: 'bar', |
|---|
| | | stack: 'total', |
|---|
| | | barWidth: 16, |
|---|
| | | itemStyle: { color: '#2D99FF', borderRadius: [0, 4, 4, 0] }, |
|---|
| | | data: [], |
|---|
| | | }, |
|---|
| | | { |
|---|
| | | name: '报废量', |
|---|
| | | type: 'bar', |
|---|
| | | stack: 'total', |
|---|
| | | barWidth: 16, |
|---|
| | | itemStyle: { color: '#F2CA6D', borderRadius: [0, 4, 4, 0] }, |
|---|
| | | data: [], |
|---|
| | | }, |
|---|
| | | { |
|---|
| | | name: '产出量', |
|---|
| | | type: 'bar', |
|---|
| | | stack: 'total', |
|---|
| | | barWidth: 16, |
|---|
| | | itemStyle: { color: '#5EE9C0', borderRadius: [0, 4, 4, 0] }, |
|---|
| | | data: [], |
|---|
| | | }, |
|---|
| | | ]) |
|---|
| | | |
|---|
| | | const processGrid = ref({ |
|---|
| | | left: '3%', |
|---|
| | | right: '4%', |
|---|
| | | bottom: '3%', |
|---|
| | | top: '3%', |
|---|
| | | containLabel: true, |
|---|
| | | }) |
|---|
| | | |
|---|
| | | const processAside = computed(() => { |
|---|
| | | const idx = activeProcessIndex.value |
|---|
| | | const item = processChartData.value[idx] || {} |
|---|
| | | return { |
|---|
| | | processName: item.processName || '-', |
|---|
| | | totalInput: item.inputNum || 0, |
|---|
| | | totalScrap: item.scrapNum || 0, |
|---|
| | | totalOutput: item.outputNum || 0, |
|---|
| | | } |
|---|
| | | }) |
|---|
| | | |
|---|
| | | const formatAmount = (num) => { |
|---|
| | | if (!num) return '0' |
|---|
| | | return num.toLocaleString() |
|---|
| | | } |
|---|
| | | |
|---|
| | | const getProcessList = () => { |
|---|
| | | list().then(res => { |
|---|
| | | processOptions.value = res.data.records |
|---|
| | | }) |
|---|
| | | } |
|---|
| | | |
|---|
| | | const openProcessDialog = () => { |
|---|
| | | tempProcessIds.value = [...selectedProcessIds.value] |
|---|
| | | processDialogVisible.value = true |
|---|
| | | } |
|---|
| | | |
|---|
| | | const handleProcessDialogConfirm = () => { |
|---|
| | | selectedProcessIds.value = [...tempProcessIds.value] |
|---|
| | | processDialogVisible.value = false |
|---|
| | | refreshProcessStats() |
|---|
| | | } |
|---|
| | | |
|---|
| | | const resetProcessFilter = () => { |
|---|
| | | selectedProcessIds.value = [] |
|---|
| | | tempProcessIds.value = [] |
|---|
| | | refreshProcessStats() |
|---|
| | | } |
|---|
| | | |
|---|
| | | const handleChartClick = (params) => { |
|---|
| | | if (params && params.dataIndex !== undefined) { |
|---|
| | | activeProcessIndex.value = params.dataIndex |
|---|
| | | } |
|---|
| | | } |
|---|
| | | |
|---|
| | | const refreshProcessStats = async () => { |
|---|
| | | // 这里调用工序数据统计API |
|---|
| | | console.log('刷新工序数据', selectedProcessIds.value, processRange.value) |
|---|
| | | } |
|---|
| | | |
|---|
| | | onMounted(() => { |
|---|
| | | getBusinessData() |
|---|
| | | analysisCustomer() |
|---|
| | | todoInfoS() |
|---|
| | | statisticsReceivable() |
|---|
| | | qualityStatisticsInfo() |
|---|
| | | getAmountHalfYearNum() |
|---|
| | | getProcessList() |
|---|
| | | }) |
|---|
| | | // 数据统计 |
|---|
| | | const getBusinessData = () => { |
|---|
| | | getBusiness().then((res) => { |
|---|
| | | businessInfo.value = {...res.data} |
|---|
| | | }) |
|---|
| | | } |
|---|
| | | // 合同金额 |
|---|
| | | const analysisCustomer = () => { |
|---|
| | | analysisCustomerContractAmounts().then((res) => { |
|---|
| | | sum.value = res.data.sum |
|---|
| | | yny.value = res.data.yny |
|---|
| | | chain.value = res.data.chain |
|---|
| | | // 为每个数据项分配随机颜色 |
|---|
| | | materialPieSeries.value[0].data = res.data.item.map(item => ({ |
|---|
| | | ...item, |
|---|
| | | itemStyle: { color: getRandomColor() } |
|---|
| | | })) |
|---|
| | | }) |
|---|
| | | } |
|---|
| | | // 待办事项 |
|---|
| | | const todoInfoS = () => { |
|---|
| | | homeTodos().then((res) => { |
|---|
| | | todoList.value = res.data |
|---|
| | | }) |
|---|
| | | } |
|---|
| | | // 应付应收统计 |
|---|
| | | const statisticsReceivable = (type) => { |
|---|
| | | console.log(type) |
|---|
| | | statisticsReceivablePayable({type: radio1.value}).then((res) => { |
|---|
| | | barSeries.value[0].data = [ |
|---|
| | | // { value: res.data.prepayMoney, itemStyle: { color: barColors2[0] } }, |
|---|
| | | { value: res.data.payableMoney, itemStyle: { color: barColors2[0] } }, |
|---|
| | | // { value: res.data.advanceMoney, itemStyle: { color: barColors2[2] } }, |
|---|
| | | { value: res.data.receivableMoney, itemStyle: { color: barColors2[1] } } |
|---|
| | | ] |
|---|
| | | }) |
|---|
| | | } |
|---|
| | | // 质检统计 |
|---|
| | | const qualityStatisticsInfo = () => { |
|---|
| | | qualityStatistics().then((res) => { |
|---|
| | | res.data.item.forEach(item => { |
|---|
| | | xAxis1.value[0].data.push(item.date) |
|---|
| | | barSeries1.value[0].data.push(item.supplierNum) |
|---|
| | | barSeries1.value[1].data.push(item.processNum) |
|---|
| | | barSeries1.value[2].data.push(item.factoryNum) |
|---|
| | | }) |
|---|
| | | qualityStatisticsObject.value.supplierNum = res.data.supplierNum |
|---|
| | | qualityStatisticsObject.value.processNum = res.data.processNum |
|---|
| | | qualityStatisticsObject.value.factoryNum = res.data.factoryNum |
|---|
| | | }) |
|---|
| | | } |
|---|
| | | const getAmountHalfYearNum = async () => { |
|---|
| | | const res = await getAmountHalfYear() |
|---|
| | | console.log(res) |
|---|
| | | const monthName = [] |
|---|
| | | const receiptAmount = [] |
|---|
| | | const invoiceAmount = [] |
|---|
| | | res.data.forEach(item => { |
|---|
| | | monthName.push(item.month) |
|---|
| | | receiptAmount.push(item.receiptAmount) |
|---|
| | | invoiceAmount.push(item.invoiceAmount) |
|---|
| | | }) |
|---|
| | | // 正确响应式赋值：创建新的 xAxis 和 series 对象 |
|---|
| | | xAxis2.value[0].data = monthName |
|---|
| | | xAxis2.value[0].data = monthName.map(item => item.replace(/~/g, '\n~')); |
|---|
| | | lineSeries.value = [ |
|---|
| | | { |
|---|
| | | name: '开票', |
|---|
| | | type: 'line', |
|---|
| | | data: receiptAmount, |
|---|
| | | stack: 'Total', |
|---|
| | | areaStyle: { |
|---|
| | | color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [ |
|---|
| | | { |
|---|
| | | offset: 0, |
|---|
| | | color: 'rgba(131, 207, 255, 1)' |
|---|
| | | }, |
|---|
| | | { |
|---|
| | | offset: 1, |
|---|
| | | color: 'rgba(186, 228, 255, 1)' |
|---|
| | | } |
|---|
| | | ]) |
|---|
| | | }, |
|---|
| | | itemStyle: { |
|---|
| | | color: '#2D99FF', |
|---|
| | | borderColor: '#2D99FF' |
|---|
| | | }, |
|---|
| | | emphasis: { |
|---|
| | | focus: 'series' |
|---|
| | | }, |
|---|
| | | lineStyle: { |
|---|
| | | width: 0 |
|---|
| | | }, |
|---|
| | | showSymbol: true, |
|---|
| | | }, |
|---|
| | | { |
|---|
| | | name: '回款', |
|---|
| | | type: 'line', |
|---|
| | | data: invoiceAmount, |
|---|
| | | stack: 'Total', |
|---|
| | | lineStyle: { |
|---|
| | | width: 0 |
|---|
| | | }, |
|---|
| | | itemStyle: { |
|---|
| | | color: '#83CFFF', |
|---|
| | | borderColor: '#83CFFF' |
|---|
| | | }, |
|---|
| | | showSymbol: true, |
|---|
| | | areaStyle: { |
|---|
| | | color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [ |
|---|
| | | { |
|---|
| | | offset: 0, |
|---|
| | | color: 'rgba(54, 153, 255, 1)' |
|---|
| | | }, |
|---|
| | | { |
|---|
| | | offset: 1, |
|---|
| | | color: 'rgba(89, 169, 254, 1)' |
|---|
| | | } |
|---|
| | | ]) |
|---|
| | | }, |
|---|
| | | emphasis: { |
|---|
| | | focus: 'series' |
|---|
| | | }, |
|---|
| | | } |
|---|
| | | ] |
|---|
| | | } |
|---|
| | | </script> |
|---|
| | | |
|---|
| | | <style scoped> |
|---|
| | | <style lang="scss" scoped> |
|---|
| | | .dashboard { |
|---|
| | | background: #f5f7fa; |
|---|
| | | min-height: 100vh; |
|---|
| | | padding: 20px; |
|---|
| | | box-sizing: border-box; |
|---|
| | | padding: 20px; |
|---|
| | | background: #f5f7fa; |
|---|
| | | min-height: calc(100vh - 84px); |
|---|
| | | } |
|---|
| | | |
|---|
| | | .dashboard-top { |
|---|
| | | display: flex; |
|---|
| | | gap: 20px; |
|---|
| | | margin-bottom: 20px; |
|---|
| | | } |
|---|
| | | .company-info { |
|---|
| | | display: flex; |
|---|
| | | flex-direction: column; |
|---|
| | | gap: 8px; |
|---|
| | | padding: 20px; |
|---|
| | | min-width: 0; |
|---|
| | | background-color: #EFF2FB; /* 使用指定的背景颜色 */ |
|---|
| | | background-image: url("../assets/images/denglu.png"); |
|---|
| | | background-size: cover; |
|---|
| | | background-position: center; |
|---|
| | | background-repeat: no-repeat; |
|---|
| | | border-radius: 12px; |
|---|
| | | height: 138px; |
|---|
| | | } |
|---|
| | | .avatar { |
|---|
| | | width: 60px; |
|---|
| | | height: 60px; |
|---|
| | | border-radius: 50%; |
|---|
| | | object-fit: contain; |
|---|
| | | background: #fff; |
|---|
| | | border: 1px solid #eee; |
|---|
| | | } |
|---|
| | | .company-card { |
|---|
| | | display: flex; |
|---|
| | | flex-direction: column; |
|---|
| | | gap: 10px; |
|---|
| | | position: relative; |
|---|
| | | padding-right: 15px; |
|---|
| | | display: grid; |
|---|
| | | grid-template-columns: 380px 1fr; |
|---|
| | | gap: 20px; |
|---|
| | | margin-bottom: 20px; |
|---|
| | | } |
|---|
| | | |
|---|
| | | .company-card::after { |
|---|
| | | content: ''; |
|---|
| | | position: absolute; |
|---|
| | | right: 0; |
|---|
| | | top: 0; |
|---|
| | | bottom: 0; |
|---|
| | | width: 1px; |
|---|
| | | background-color: #C9C5C5; |
|---|
| | | border-radius: 2px; |
|---|
| | | } |
|---|
| | | .company-name { |
|---|
| | | font-weight: 400; |
|---|
| | | font-size: 16px; |
|---|
| | | color: #161A9A; |
|---|
| | | } |
|---|
| | | .company-meta { |
|---|
| | | font-weight: 400; |
|---|
| | | font-size: 12px; |
|---|
| | | color: #818185; |
|---|
| | | } |
|---|
| | | .data-cards { |
|---|
| | | display: flex; |
|---|
| | | gap: 16px; |
|---|
| | | justify-content: flex-start; |
|---|
| | | background: #ffffff; |
|---|
| | | border-radius: 12px; |
|---|
| | | padding: 20px; |
|---|
| | | } |
|---|
| | | .data-title { |
|---|
| | | font-weight: 700; |
|---|
| | | font-size: 26px; |
|---|
| | | color: #FFFFFF; |
|---|
| | | } |
|---|
| | | .data-num { |
|---|
| | | display: flex; |
|---|
| | | align-items: center; |
|---|
| | | justify-content: space-between; |
|---|
| | | margin-top: 20px; |
|---|
| | | } |
|---|
| | | .data-card { |
|---|
| | | background: #fff; |
|---|
| | | border-radius: 12px; |
|---|
| | | padding: 14px 10px 10px 10px; |
|---|
| | | min-width: 160px; |
|---|
| | | box-shadow: 0 2px 8px #eee; |
|---|
| | | display: flex; |
|---|
| | | flex-direction: column; |
|---|
| | | width: 32%; |
|---|
| | | height: 140px; |
|---|
| | | } |
|---|
| | | .data-card.sales { |
|---|
| | | background-image: url("../assets/images/xioashoushuju.png"); |
|---|
| | | background-size: cover; |
|---|
| | | background-position: center; |
|---|
| | | background-repeat: no-repeat; |
|---|
| | | } |
|---|
| | | .data-card.purchase { |
|---|
| | | background-image: url("../assets/images/caigou.png"); |
|---|
| | | background-size: cover; |
|---|
| | | background-position: center; |
|---|
| | | background-repeat: no-repeat; |
|---|
| | | } |
|---|
| | | .data-card.inventory { |
|---|
| | | background-image: url("../assets/images/kucun.png"); |
|---|
| | | background-size: cover; |
|---|
| | | background-position: center; |
|---|
| | | background-repeat: no-repeat; |
|---|
| | | } |
|---|
| | | .data-desc { |
|---|
| | | font-weight: 500; |
|---|
| | | font-size: 13px; |
|---|
| | | color: #FFFFFF; |
|---|
| | | } |
|---|
| | | .data-value { |
|---|
| | | font-size: 18px; |
|---|
| | | font-weight: 500; |
|---|
| | | margin: 10px 0; |
|---|
| | | color: #FFFFFF; |
|---|
| | | } |
|---|
| | | .top-left { |
|---|
| | | display: flex; |
|---|
| | | flex-direction: column; |
|---|
| | | gap: 20px; |
|---|
| | | width: 50%; |
|---|
| | | } |
|---|
| | | .todo-panel { |
|---|
| | | background: #fff; |
|---|
| | | border-radius: 12px; |
|---|
| | | padding: 20px; |
|---|
| | | width: 50%; |
|---|
| | | } |
|---|
| | | .todo-list { |
|---|
| | | list-style: none; |
|---|
| | | padding: 0; |
|---|
| | | margin: 0; |
|---|
| | | font-size: 15px; |
|---|
| | | overflow-y: auto; |
|---|
| | | height: 260px; |
|---|
| | | } |
|---|
| | | .todo-list li { |
|---|
| | | border-radius: 8px; |
|---|
| | | margin-bottom: 12px; |
|---|
| | | padding: 8px 20px; |
|---|
| | | height: 74px; |
|---|
| | | display: flex; |
|---|
| | | justify-content: space-between; |
|---|
| | | align-items: center; |
|---|
| | | background: rgba(225,227,250,0.62); |
|---|
| | | } |
|---|
| | | .todo-title { |
|---|
| | | font-weight: 400; |
|---|
| | | font-size: 12px; |
|---|
| | | color: #000000; |
|---|
| | | position: relative; |
|---|
| | | } |
|---|
| | | .todo-title::before { |
|---|
| | | content: ''; /* 必需，表示这里有一个内容 */ |
|---|
| | | position: absolute; |
|---|
| | | left: -10px; /* 定位到左侧 */ |
|---|
| | | top: 50%; /* 垂直居中 */ |
|---|
| | | transform: translateY(-50%); /* 微调垂直居中 */ |
|---|
| | | width: 6px; /* 圆的直径 */ |
|---|
| | | height: 6px; /* 圆的直径 */ |
|---|
| | | background: #498CEB; |
|---|
| | | border-radius: 50%; /* 让其变成圆形 */ |
|---|
| | | } |
|---|
| | | .todo-division { |
|---|
| | | font-weight: 400; |
|---|
| | | font-size: 12px; |
|---|
| | | color: #000000; |
|---|
| | | } |
|---|
| | | .todo-time { |
|---|
| | | font-weight: 400; |
|---|
| | | font-size: 12px; |
|---|
| | | color: #000000; |
|---|
| | | } |
|---|
| | | .todo-meta { |
|---|
| | | color: #888; |
|---|
| | | font-size: 13px; |
|---|
| | | } |
|---|
| | | .dashboard-row { |
|---|
| | | display: flex; |
|---|
| | | gap: 20px; |
|---|
| | | margin-bottom: 20px; |
|---|
| | | } |
|---|
| | | .main-panel { |
|---|
| | | background: #fff; |
|---|
| | | border-radius: 12px; |
|---|
| | | padding: 20px; |
|---|
| | | flex: 1; |
|---|
| | | min-width: 0; |
|---|
| | | display: flex; |
|---|
| | | flex-direction: column; |
|---|
| | | } |
|---|
| | | .section-title { |
|---|
| | | position: relative; |
|---|
| | | font-size: 18px; |
|---|
| | | color: #333; |
|---|
| | | padding-left: 10px; |
|---|
| | | margin-bottom: 10px; |
|---|
| | | font-weight: 700; |
|---|
| | | .company-info { |
|---|
| | | background: #fff; |
|---|
| | | border-radius: 12px; |
|---|
| | | overflow: hidden; |
|---|
| | | box-shadow: 0 2px 12px rgba(0, 0, 0, 0.04); |
|---|
| | | } |
|---|
| | | } |
|---|
| | | |
|---|
| | | .section-title::before { |
|---|
| | | position: absolute; |
|---|
| | | left: 0; |
|---|
| | | top: 4px; |
|---|
| | | content: ''; |
|---|
| | | width: 4px; |
|---|
| | | height: 18px; |
|---|
| | | background-color: #002FA7; |
|---|
| | | border-radius: 2px; |
|---|
| | | .welcome-banner { |
|---|
| | | background: linear-gradient(135deg, var(--el-color-primary) 0%, var(--el-color-primary-light-3) 100%); |
|---|
| | | padding: 20px; |
|---|
| | | color: #fff; |
|---|
| | | |
|---|
| | | .welcome-title { |
|---|
| | | font-size: 16px; |
|---|
| | | margin-bottom: 8px; |
|---|
| | | |
|---|
| | | .welcome-user { |
|---|
| | | font-size: 20px; |
|---|
| | | font-weight: 600; |
|---|
| | | } |
|---|
| | | } |
|---|
| | | |
|---|
| | | .welcome-time { |
|---|
| | | font-size: 13px; |
|---|
| | | opacity: 0.9; |
|---|
| | | } |
|---|
| | | } |
|---|
| | | .contract-info { |
|---|
| | | display: flex; |
|---|
| | | align-items: center; |
|---|
| | | gap: 20px; |
|---|
| | | height: 90px; |
|---|
| | | background: rgba(245,245,245,0.59); |
|---|
| | | width: 100%; |
|---|
| | | border-radius: 10px; |
|---|
| | | padding: 10px 30px; |
|---|
| | | |
|---|
| | | .user-card { |
|---|
| | | display: flex; |
|---|
| | | align-items: center; |
|---|
| | | gap: 16px; |
|---|
| | | padding: 20px; |
|---|
| | | |
|---|
| | | .avatar { |
|---|
| | | width: 64px; |
|---|
| | | height: 64px; |
|---|
| | | border-radius: 50%; |
|---|
| | | object-fit: cover; |
|---|
| | | border: 3px solid var(--el-color-primary-light-8); |
|---|
| | | } |
|---|
| | | |
|---|
| | | .user-card-main { |
|---|
| | | flex: 1; |
|---|
| | | |
|---|
| | | .user-name { |
|---|
| | | font-size: 18px; |
|---|
| | | font-weight: 600; |
|---|
| | | color: #303133; |
|---|
| | | margin-bottom: 4px; |
|---|
| | | } |
|---|
| | | |
|---|
| | | .user-role { |
|---|
| | | font-size: 13px; |
|---|
| | | color: var(--el-color-primary); |
|---|
| | | background: var(--el-color-primary-light-9); |
|---|
| | | display: inline-block; |
|---|
| | | padding: 2px 10px; |
|---|
| | | border-radius: 12px; |
|---|
| | | margin-bottom: 8px; |
|---|
| | | } |
|---|
| | | |
|---|
| | | .user-meta { |
|---|
| | | font-size: 13px; |
|---|
| | | color: #909399; |
|---|
| | | |
|---|
| | | .sep { |
|---|
| | | margin: 0 8px; |
|---|
| | | color: #dcdfe6; |
|---|
| | | } |
|---|
| | | } |
|---|
| | | } |
|---|
| | | } |
|---|
| | | .contract-summary { |
|---|
| | | display: flex; |
|---|
| | | align-items: center; |
|---|
| | | gap: 30px; |
|---|
| | | |
|---|
| | | .dashboard-row { |
|---|
| | | display: grid; |
|---|
| | | grid-template-columns: 1fr; |
|---|
| | | gap: 20px; |
|---|
| | | margin-bottom: 20px; |
|---|
| | | } |
|---|
| | | .contract-card { |
|---|
| | | display: flex; |
|---|
| | | flex-direction: column; |
|---|
| | | gap: 10px; |
|---|
| | | |
|---|
| | | .main-panel { |
|---|
| | | background: #fff; |
|---|
| | | border-radius: 12px; |
|---|
| | | padding: 20px; |
|---|
| | | box-shadow: 0 2px 12px rgba(0, 0, 0, 0.04); |
|---|
| | | } |
|---|
| | | .contract-name { |
|---|
| | | font-weight: 400; |
|---|
| | | font-size: 14px; |
|---|
| | | color: #050505; |
|---|
| | | |
|---|
| | | .section-title { |
|---|
| | | font-size: 16px; |
|---|
| | | font-weight: 600; |
|---|
| | | color: #303133; |
|---|
| | | } |
|---|
| | | .contract-meta { |
|---|
| | | display: flex; |
|---|
| | | align-items: center; |
|---|
| | | width: 100%; |
|---|
| | | gap: 80px; |
|---|
| | | |
|---|
| | | .process-panel { |
|---|
| | | &__header { |
|---|
| | | display: flex; |
|---|
| | | justify-content: space-between; |
|---|
| | | align-items: center; |
|---|
| | | margin-bottom: 20px; |
|---|
| | | } |
|---|
| | | |
|---|
| | | &__body { |
|---|
| | | display: flex; |
|---|
| | | gap: 20px; |
|---|
| | | height: 400px; |
|---|
| | | } |
|---|
| | | |
|---|
| | | &__chart { |
|---|
| | | flex: 1; |
|---|
| | | min-width: 0; |
|---|
| | | } |
|---|
| | | |
|---|
| | | &__aside { |
|---|
| | | width: 200px; |
|---|
| | | display: flex; |
|---|
| | | flex-direction: column; |
|---|
| | | gap: 12px; |
|---|
| | | } |
|---|
| | | } |
|---|
| | | .main-amount { |
|---|
| | | font-size: 24px; |
|---|
| | | color: rgba(51,50,50,0.85); |
|---|
| | | |
|---|
| | | .process-legend { |
|---|
| | | display: flex; |
|---|
| | | flex-direction: column; |
|---|
| | | gap: 10px; |
|---|
| | | margin-bottom: 10px; |
|---|
| | | |
|---|
| | | &__item { |
|---|
| | | display: flex; |
|---|
| | | align-items: center; |
|---|
| | | gap: 8px; |
|---|
| | | font-size: 13px; |
|---|
| | | color: #606266; |
|---|
| | | |
|---|
| | | .dot { |
|---|
| | | width: 10px; |
|---|
| | | height: 10px; |
|---|
| | | border-radius: 50%; |
|---|
| | | |
|---|
| | | &.dot-blue { |
|---|
| | | background: #2D99FF; |
|---|
| | | } |
|---|
| | | |
|---|
| | | &.dot-yellow { |
|---|
| | | background: #F2CA6D; |
|---|
| | | } |
|---|
| | | |
|---|
| | | &.dot-teal { |
|---|
| | | background: #5EE9C0; |
|---|
| | | } |
|---|
| | | } |
|---|
| | | } |
|---|
| | | } |
|---|
| | | .up { color: #e57373; } |
|---|
| | | .contract-list { |
|---|
| | | margin-top: 16px; |
|---|
| | | font-size: 14px; |
|---|
| | | color: #666; |
|---|
| | | list-style: none; |
|---|
| | | padding: 0; |
|---|
| | | |
|---|
| | | .process-card { |
|---|
| | | background: #f5f7fa; |
|---|
| | | border-radius: 8px; |
|---|
| | | padding: 16px; |
|---|
| | | |
|---|
| | | &--name { |
|---|
| | | font-size: 16px; |
|---|
| | | font-weight: 600; |
|---|
| | | color: #303133; |
|---|
| | | text-align: center; |
|---|
| | | background: var(--el-color-primary-light-9); |
|---|
| | | color: var(--el-color-primary); |
|---|
| | | } |
|---|
| | | |
|---|
| | | &__label { |
|---|
| | | font-size: 12px; |
|---|
| | | color: #909399; |
|---|
| | | margin-bottom: 4px; |
|---|
| | | } |
|---|
| | | |
|---|
| | | &__value { |
|---|
| | | font-size: 20px; |
|---|
| | | font-weight: 600; |
|---|
| | | color: #303133; |
|---|
| | | } |
|---|
| | | } |
|---|
| | | .line { |
|---|
| | | position: relative; |
|---|
| | | width: 250px; |
|---|
| | | |
|---|
| | | .process-selection-wrapper { |
|---|
| | | max-height: 400px; |
|---|
| | | overflow-y: auto; |
|---|
| | | } |
|---|
| | | .line::after { |
|---|
| | | content: ''; |
|---|
| | | position: absolute; |
|---|
| | | right: 12px; |
|---|
| | | top: 0; |
|---|
| | | bottom: 0; |
|---|
| | | width: 1px; |
|---|
| | | background-color: #C9C5C5; |
|---|
| | | border-radius: 2px; |
|---|
| | | |
|---|
| | | .process-grid { |
|---|
| | | display: grid; |
|---|
| | | grid-template-columns: repeat(2, 1fr); |
|---|
| | | gap: 12px; |
|---|
| | | } |
|---|
| | | .contract-list li { |
|---|
| | | margin-top: 10px; |
|---|
| | | |
|---|
| | | @media (max-width: 1200px) { |
|---|
| | | .dashboard-top { |
|---|
| | | grid-template-columns: 1fr; |
|---|
| | | } |
|---|
| | | |
|---|
| | | .process-panel__body { |
|---|
| | | flex-direction: column; |
|---|
| | | height: auto; |
|---|
| | | } |
|---|
| | | |
|---|
| | | .process-panel__aside { |
|---|
| | | width: 100%; |
|---|
| | | flex-direction: row; |
|---|
| | | flex-wrap: wrap; |
|---|
| | | |
|---|
| | | .process-card { |
|---|
| | | flex: 1; |
|---|
| | | min-width: 150px; |
|---|
| | | } |
|---|
| | | } |
|---|
| | | } |
|---|
| | | .quality-cards { |
|---|
| | | display: flex; |
|---|
| | | gap: 12px; |
|---|
| | | margin-bottom: 12px; |
|---|
| | | |
|---|
| | | @media (max-width: 768px) { |
|---|
| | | .process-panel__header { |
|---|
| | | flex-direction: column; |
|---|
| | | gap: 12px; |
|---|
| | | align-items: flex-start; |
|---|
| | | } |
|---|
| | | |
|---|
| | | .process-grid { |
|---|
| | | grid-template-columns: 1fr; |
|---|
| | | } |
|---|
| | | } |
|---|
| | | .quality-card { |
|---|
| | | border-radius: 8px; |
|---|
| | | padding: 15px 10px 10px 50px; |
|---|
| | | font-weight: 400; |
|---|
| | | font-size: 12px; |
|---|
| | | color: rgba(0,0,0,0.67); |
|---|
| | | width: 236px; |
|---|
| | | height: 49px; |
|---|
| | | background-size: cover; |
|---|
| | | background-position: center; |
|---|
| | | background-repeat: no-repeat; |
|---|
| | | } |
|---|
| | | .quality-card.one { |
|---|
| | | background-image: url("../assets/images/yuancailiao.png"); |
|---|
| | | } |
|---|
| | | .quality-card.two { |
|---|
| | | background-image: url("../assets/images/guocheng.png"); |
|---|
| | | } |
|---|
| | | .quality-card.three { |
|---|
| | | background-image: url("../assets/images/chuchang.png"); |
|---|
| | | |
|---|
| | | } |
|---|
| | | .quality-card span { |
|---|
| | | color: #4fc3f7; |
|---|
| | | font-weight: bold; |
|---|
| | | margin-left: 6px; |
|---|
| | | } |
|---|
| | | .chart { |
|---|
| | | width: 100%; |
|---|
| | | height: 220px; |
|---|
| | | margin-top: 10px; |
|---|
| | | } |
|---|
| | | </style> |
|---|
| | | </style> |
|---|
