| | |
|---|
| | | <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.roleName || '系统管理员' }}</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.deptName || '组织架构' }}</span> |
|---|
| | | <span class="sep">|</span> |
|---|
| | | <span>{{ userStore.postName || '岗位名' }}</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> |
|---|
| | | <el-radio-group v-model="processRange" size="small" @change="refreshProcessStats"> |
|---|
| | | <el-radio-button :value="'week'">按周</el-radio-button> |
|---|
| | | <el-radio-button :value="'month'">按月</el-radio-button> |
|---|
| | | <el-radio-button :value="'quarter'">按季度</el-radio-button> |
|---|
| | | </el-radio-group> |
|---|
| | | </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%" |
|---|
| | | /> |
|---|
| | | </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) }}<span class="unit">万元</span></div> |
|---|
| | | </div> |
|---|
| | | <div class="process-card"> |
|---|
| | | <div class="process-card__label">累计总报废</div> |
|---|
| | | <div class="process-card__value">{{ formatAmount(processAside.totalScrap) }}<span class="unit">万元</span></div> |
|---|
| | | </div> |
|---|
| | | <div class="process-card"> |
|---|
| | | <div class="process-card__label">累计总产出</div> |
|---|
| | | <div class="process-card__value">{{ formatAmount(processAside.totalOutput) }}<span class="unit">万元</span></div> |
|---|
| | | </div> |
|---|
| | | </div> |
|---|
| | | </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="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 |
|---|
| | | analysisCustomerContractAmounts, getAmountHalfYear, |
|---|
| | | getBusiness, |
|---|
| | | homeTodos, |
|---|
| | | qualityStatistics, |
|---|
| | | statisticsReceivablePayable |
|---|
| | | } from "@/api/viewIndex.js"; |
|---|
| | | |
|---|
| | | const userStore = useUserStore() |
|---|
| | | |
|---|
| | | const businessInfo = ref({ |
|---|
| | | inventoryNum: 0, |
|---|
| | | monthPurchaseHaveMoney: 0, |
|---|
| | | monthPurchaseMoney: 0, |
|---|
| | | monthSaleHaveMoney: 0, |
|---|
| | | monthSaleMoney: 0, |
|---|
| | | todayInventoryNum: 0, |
|---|
| | | inventoryNum: 0, |
|---|
| | | monthPurchaseHaveMoney: 0, |
|---|
| | | monthPurchaseMoney: 0, |
|---|
| | | monthSaleHaveMoney: 0, |
|---|
| | | monthSaleMoney: 0, |
|---|
| | | todayInventoryNum: 0, |
|---|
| | | }) |
|---|
| | | const qualityStatisticsObject = ref({ |
|---|
| | | supplierNum: 0, |
|---|
| | | processNum: 0, |
|---|
| | | factoryNum: 0, |
|---|
| | | supplierNum: 0, |
|---|
| | | processNum: 0, |
|---|
| | | factoryNum: 0, |
|---|
| | | }) |
|---|
| | | const sum = ref(0) |
|---|
| | | const yny = ref(0) |
|---|
| | | const chain = ref(0) |
|---|
| | | |
|---|
| | | const pieLegend = reactive({ |
|---|
| | | show: false, |
|---|
| | | show: false, |
|---|
| | | }) |
|---|
| | | const barSeries = ref([ |
|---|
| | | { |
|---|
| | | type: 'bar', |
|---|
| | | data: [], |
|---|
| | | label: { |
|---|
| | | show: true, |
|---|
| | | } |
|---|
| | | }, |
|---|
| | | { |
|---|
| | | 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: [] |
|---|
| | | }, |
|---|
| | | { |
|---|
| | | 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%' // 设置图表容器的高度 |
|---|
| | | width: '100%', |
|---|
| | | height: '100%' // 设置图表容器的高度 |
|---|
| | | } |
|---|
| | | const chartStylePie = { |
|---|
| | | width: '140%', |
|---|
| | | height: '140%' // 设置图表容器的高度 |
|---|
| | | width: '140%', |
|---|
| | | height: '140%' // 设置图表容器的高度 |
|---|
| | | } |
|---|
| | | const grid = { |
|---|
| | | left: '3%', |
|---|
| | | right: '4%', |
|---|
| | | bottom: '3%', |
|---|
| | | containLabel: true |
|---|
| | | left: '3%', |
|---|
| | | right: '4%', |
|---|
| | | bottom: '3%', |
|---|
| | | containLabel: true |
|---|
| | | } |
|---|
| | | const barLegend = { |
|---|
| | | show: true, |
|---|
| | | data: ['原材料不合格数', '过程不合格数', '出厂不合格数'] |
|---|
| | | show: true, |
|---|
| | | data: ['原材料不合格数', '过程不合格数', '出厂不合格数'] |
|---|
| | | } |
|---|
| | | const barLegend1 = { |
|---|
| | | show: true, |
|---|
| | | data: ['预付账款', '应付账款', '预收账款', '应收账款'] |
|---|
| | | show: true, |
|---|
| | | data: ['预付账款', '应付账款', '预收账款', '应收账款'] |
|---|
| | | } |
|---|
| | | const lineLegend = { |
|---|
| | | show: true, |
|---|
| | | data: ['开票', '回款'] |
|---|
| | | show: true, |
|---|
| | | data: ['开票', '回款'] |
|---|
| | | } |
|---|
| | | const tooltip = { |
|---|
| | | trigger: 'axis', |
|---|
| | | axisPointer: { |
|---|
| | | type: 'shadow' |
|---|
| | | } |
|---|
| | | trigger: 'axis', |
|---|
| | | axisPointer: { |
|---|
| | | type: 'shadow' |
|---|
| | | } |
|---|
| | | } |
|---|
| | | const xAxis = [{ |
|---|
| | | type: 'value', |
|---|
| | | type: 'value', |
|---|
| | | }] |
|---|
| | | const xAxis1 = ref([{ |
|---|
| | | type: 'category', |
|---|
| | | axisTick: { show: false }, |
|---|
| | | data: [] |
|---|
| | | type: 'category', |
|---|
| | | axisTick: { show: false }, |
|---|
| | | data: [] |
|---|
| | | }]) |
|---|
| | | const yAxis = [{ |
|---|
| | | type: 'category', |
|---|
| | | data: [ '应付账款', '应收账款',] |
|---|
| | | type: 'category', |
|---|
| | | data: [ '应付账款', '应收账款',] |
|---|
| | | }] |
|---|
| | | const yAxis1 = [{ |
|---|
| | | type: 'value' |
|---|
| | | type: 'value' |
|---|
| | | }] |
|---|
| | | const pieTooltip = reactive({ |
|---|
| | | trigger: 'item', |
|---|
| | | formatter: function (params) { |
|---|
| | | // 动态生成提示信息，基于数据项的 name 属性 |
|---|
| | | const description = params.name === '本月回款金额' ? '本月回款金额' : '应收款金额'; |
|---|
| | | return `${description} ${formatNumber(params.value)}元 ${params.percent}%`; |
|---|
| | | }, |
|---|
| | | position: 'right' |
|---|
| | | 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: [] |
|---|
| | | } |
|---|
| | | { |
|---|
| | | 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 |
|---|
| | | }, |
|---|
| | | { |
|---|
| | | type: 'line', |
|---|
| | | data: [], |
|---|
| | | label: { |
|---|
| | | show: true |
|---|
| | | }, |
|---|
| | | showSymbol: true, // 显示圆点 |
|---|
| | | }, |
|---|
| | | }, |
|---|
| | | ]) |
|---|
| | | const tooltipLine = { |
|---|
| | | trigger: 'axis', |
|---|
| | | trigger: 'axis', |
|---|
| | | } |
|---|
| | | const yAxis2 = ref([ |
|---|
| | | { |
|---|
| | | type: 'value', |
|---|
| | | } |
|---|
| | | { |
|---|
| | | type: 'value', |
|---|
| | | } |
|---|
| | | ]) |
|---|
| | | const xAxis2 = ref([ |
|---|
| | | { |
|---|
| | | type: 'category', |
|---|
| | | data: [], |
|---|
| | | axisLabel: { |
|---|
| | | interval: 0, |
|---|
| | | formatter: function(value) { |
|---|
| | | return value.replace(/~/g, '\n'); |
|---|
| | | }, |
|---|
| | | } |
|---|
| | | } |
|---|
| | | { |
|---|
| | | type: 'category', |
|---|
| | | data: [], |
|---|
| | | axisLabel: { |
|---|
| | | interval: 0, |
|---|
| | | formatter: function(value) { |
|---|
| | | return value.replace(/~/g, '\n'); |
|---|
| | | }, |
|---|
| | | } |
|---|
| | | } |
|---|
| | | ]) |
|---|
| | | |
|---|
| | | // 待办事项 |
|---|
| | |
|---|
| | | } |
|---|
| | | |
|---|
| | | onMounted(() => { |
|---|
| | | getBusinessData() |
|---|
| | | analysisCustomer() |
|---|
| | | todoInfoS() |
|---|
| | | statisticsReceivable() |
|---|
| | | qualityStatisticsInfo() |
|---|
| | | getAmountHalfYearNum() |
|---|
| | | getBusinessData() |
|---|
| | | analysisCustomer() |
|---|
| | | todoInfoS() |
|---|
| | | statisticsReceivable() |
|---|
| | | qualityStatisticsInfo() |
|---|
| | | getAmountHalfYearNum() |
|---|
| | | }) |
|---|
| | | // 数据统计 |
|---|
| | | const getBusinessData = () => { |
|---|
| | | getBusiness().then((res) => { |
|---|
| | | businessInfo.value = {...res.data} |
|---|
| | | }) |
|---|
| | | 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 |
|---|
| | | 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 |
|---|
| | | }) |
|---|
| | | 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 statisticsReceivable = () => { |
|---|
| | | 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 |
|---|
| | | }) |
|---|
| | | 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' |
|---|
| | | }, |
|---|
| | | } |
|---|
| | | ] |
|---|
| | | 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' |
|---|
| | | }, |
|---|
| | | } |
|---|
| | | ] |
|---|
| | | } |
|---|
| | | |
|---|
| | | // 工序数据生产统计明细（假数据 + 图表） |
|---|
| | | const processRange = ref('week') |
|---|
| | | 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 processYAxis = ref([ |
|---|
| | | { |
|---|
| | | type: 'category', |
|---|
| | | axisTick: { show: false }, |
|---|
| | | axisLine: { show: false }, |
|---|
| | | axisLabel: { color: 'rgba(0,0,0,0.45)' }, |
|---|
| | | data: [], |
|---|
| | | }, |
|---|
| | | ]) |
|---|
| | | |
|---|
| | | const processGrid = reactive({ left: 0, right: 100, top: 30, bottom: 20, containLabel: true }) |
|---|
| | | |
|---|
| | | const processTooltip = reactive({ |
|---|
| | | trigger: 'axis', |
|---|
| | | axisPointer: { type: 'shadow' }, |
|---|
| | | formatter: (params) => { |
|---|
| | | const name = params?.[0]?.name ?? '' |
|---|
| | | const list = Array.isArray(params) ? params : [] |
|---|
| | | const lines = list |
|---|
| | | .map((p) => { |
|---|
| | | const colorBox = `<span style="display:inline-block;margin-right:6px;border-radius:2px;width:10px;height:10px;background:${p.color}"></span>` |
|---|
| | | return `${colorBox}${p.seriesName} <b style="float:right;">${Number(p.value || 0).toFixed(2)}</b>` |
|---|
| | | }) |
|---|
| | | .join('<br/>') |
|---|
| | | return `<div style="min-width:140px;"><div style="font-weight:700;margin-bottom:6px;">${name}</div>${lines}</div>` |
|---|
| | | }, |
|---|
| | | }) |
|---|
| | | |
|---|
| | | const processSeries = computed(() => { |
|---|
| | | const input = processChartData.value.map((i) => i.input) |
|---|
| | | const scrap = processChartData.value.map((i) => i.scrap) |
|---|
| | | const output = processChartData.value.map((i) => i.output) |
|---|
| | | |
|---|
| | | return [ |
|---|
| | | { |
|---|
| | | name: '投入量', |
|---|
| | | type: 'bar', |
|---|
| | | stack: 'total', |
|---|
| | | barWidth: 22, |
|---|
| | | itemStyle: { color: '#1E5BFF', borderRadius: [6, 0, 0, 6] }, |
|---|
| | | data: input, |
|---|
| | | }, |
|---|
| | | { |
|---|
| | | name: '报废量', |
|---|
| | | type: 'bar', |
|---|
| | | stack: 'total', |
|---|
| | | barWidth: 22, |
|---|
| | | itemStyle: { color: '#F7B500' }, |
|---|
| | | data: scrap, |
|---|
| | | }, |
|---|
| | | { |
|---|
| | | name: '产出量', |
|---|
| | | type: 'bar', |
|---|
| | | stack: 'total', |
|---|
| | | barWidth: 22, |
|---|
| | | itemStyle: { color: '#19C6C6', borderRadius: [0, 6, 6, 0] }, |
|---|
| | | data: output, |
|---|
| | | }, |
|---|
| | | ] |
|---|
| | | }) |
|---|
| | | |
|---|
| | | const processAside = computed(() => { |
|---|
| | | const list = processChartData.value |
|---|
| | | const totalInput = list.reduce((s, i) => s + Number(i.input || 0), 0) |
|---|
| | | const totalScrap = list.reduce((s, i) => s + Number(i.scrap || 0), 0) |
|---|
| | | const totalOutput = list.reduce((s, i) => s + Number(i.output || 0), 0) |
|---|
| | | return { |
|---|
| | | processName: '工序名称', |
|---|
| | | totalInput, |
|---|
| | | totalScrap, |
|---|
| | | totalOutput, |
|---|
| | | } |
|---|
| | | }) |
|---|
| | | |
|---|
| | | const formatAmount = (n) => { |
|---|
| | | const num = Number(n || 0) |
|---|
| | | return num.toLocaleString(undefined, { minimumFractionDigits: 2, maximumFractionDigits: 2 }) |
|---|
| | | } |
|---|
| | | |
|---|
| | | const buildProcessFake = (range) => { |
|---|
| | | // 让不同切换有点差异 |
|---|
| | | const factor = range === 'week' ? 1 : range === 'month' ? 1.4 : 1.9 |
|---|
| | | const baseNames = ['工序1', '工序2', '工序3', '工序4', '工序5', '工序6', '工序7'] |
|---|
| | | return baseNames.map((name, idx) => { |
|---|
| | | const seed = (idx + 1) * 120 * factor |
|---|
| | | const input = seed + (idx % 2 === 0 ? 80 : 40) |
|---|
| | | const scrap = Math.max(20, seed * 0.15) |
|---|
| | | const output = Math.max(30, seed * 0.35) |
|---|
| | | return { |
|---|
| | | name, |
|---|
| | | input: Number(input.toFixed(2)), |
|---|
| | | scrap: Number(scrap.toFixed(2)), |
|---|
| | | output: Number(output.toFixed(2)), |
|---|
| | | } |
|---|
| | | }) |
|---|
| | | } |
|---|
| | | |
|---|
| | | const refreshProcessStats = () => { |
|---|
| | | processChartData.value = buildProcessFake(processRange.value) |
|---|
| | | processYAxis.value[0].data = processChartData.value.map((i) => i.name) |
|---|
| | | } |
|---|
| | | |
|---|
| | | onMounted(() => { |
|---|
| | | getBusinessData() |
|---|
| | | analysisCustomer() |
|---|
| | | todoInfoS() |
|---|
| | | statisticsReceivable() |
|---|
| | | qualityStatisticsInfo() |
|---|
| | | getAmountHalfYearNum() |
|---|
| | | refreshProcessStats() |
|---|
| | | }) |
|---|
| | | </script> |
|---|
| | | |
|---|
| | | <style scoped> |
|---|
| | | .dashboard { |
|---|
| | | background: #f5f7fa; |
|---|
| | | min-height: 100vh; |
|---|
| | | padding: 20px; |
|---|
| | | box-sizing: border-box; |
|---|
| | | background: #f5f7fa; |
|---|
| | | min-height: 100vh; |
|---|
| | | padding: 20px; |
|---|
| | | box-sizing: border-box; |
|---|
| | | } |
|---|
| | | .dashboard-top { |
|---|
| | | display: flex; |
|---|
| | | gap: 20px; |
|---|
| | | margin-bottom: 20px; |
|---|
| | | display: flex; |
|---|
| | | gap: 20px; |
|---|
| | | margin-bottom: 20px; |
|---|
| | | align-items: flex-start; |
|---|
| | | justify-content: space-evenly; |
|---|
| | | } |
|---|
| | | .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; |
|---|
| | | padding: 0; |
|---|
| | | overflow: hidden; |
|---|
| | | border-radius: 12px; |
|---|
| | | background: #fff; |
|---|
| | | height: 100%; |
|---|
| | | } |
|---|
| | | |
|---|
| | | .company-card::after { |
|---|
| | | content: ''; |
|---|
| | | position: absolute; |
|---|
| | | right: 0; |
|---|
| | | top: 0; |
|---|
| | | bottom: 0; |
|---|
| | | width: 1px; |
|---|
| | | background-color: #C9C5C5; |
|---|
| | | border-radius: 2px; |
|---|
| | | .welcome-banner { |
|---|
| | | padding: 10px 10px; |
|---|
| | | background: linear-gradient(135deg, rgba(229, 240, 255, 0.9), rgba(214, 232, 255, 0.7), rgba(207, 236, 255, 0.9)); |
|---|
| | | } |
|---|
| | | .company-name { |
|---|
| | | font-weight: 400; |
|---|
| | | font-size: 16px; |
|---|
| | | color: #161A9A; |
|---|
| | | |
|---|
| | | .welcome-title { |
|---|
| | | font-size: 18px; |
|---|
| | | font-weight: 700; |
|---|
| | | color: #222; |
|---|
| | | line-height: 1.3; |
|---|
| | | } |
|---|
| | | .company-meta { |
|---|
| | | font-weight: 400; |
|---|
| | | font-size: 12px; |
|---|
| | | color: #818185; |
|---|
| | | |
|---|
| | | .welcome-user { |
|---|
| | | margin-right: 6px; |
|---|
| | | } |
|---|
| | | |
|---|
| | | .welcome-time { |
|---|
| | | margin-top: 10px; |
|---|
| | | font-size: 16px; |
|---|
| | | color: rgba(0, 0, 0, 0.55); |
|---|
| | | } |
|---|
| | | |
|---|
| | | .user-card { |
|---|
| | | display: flex; |
|---|
| | | align-items: center; |
|---|
| | | gap: 10px; |
|---|
| | | padding: 18px 22px; |
|---|
| | | } |
|---|
| | | |
|---|
| | | .user-card-main { |
|---|
| | | display: flex; |
|---|
| | | flex-direction: column; |
|---|
| | | gap: 5px; |
|---|
| | | min-width: 0; |
|---|
| | | } |
|---|
| | | |
|---|
| | | .user-name { |
|---|
| | | font-size: 16px; |
|---|
| | | font-weight: bold; |
|---|
| | | color: #111; |
|---|
| | | letter-spacing: 1px; |
|---|
| | | } |
|---|
| | | |
|---|
| | | .user-role { |
|---|
| | | display: inline-flex; |
|---|
| | | align-items: center; |
|---|
| | | justify-content: center; |
|---|
| | | height: 20px; |
|---|
| | | padding: 5px 10px; |
|---|
| | | background: rgba(245, 246, 248, 1); |
|---|
| | | color: #333; |
|---|
| | | width: fit-content; |
|---|
| | | font-weight: 600; |
|---|
| | | } |
|---|
| | | |
|---|
| | | .user-meta { |
|---|
| | | font-size: 12px; |
|---|
| | | color: rgba(0, 0, 0, 0.55); |
|---|
| | | white-space: nowrap; |
|---|
| | | overflow: hidden; |
|---|
| | | text-overflow: ellipsis; |
|---|
| | | } |
|---|
| | | |
|---|
| | | .user-meta .sep { |
|---|
| | | margin: 0 10px; |
|---|
| | | color: rgba(0, 0, 0, 0.25); |
|---|
| | | } |
|---|
| | | |
|---|
| | | .avatar { |
|---|
| | | width: 90px; |
|---|
| | | height: 90px; |
|---|
| | | border-radius: 50%; |
|---|
| | | object-fit: cover; |
|---|
| | | flex: 0 0 auto; |
|---|
| | | } |
|---|
| | | .data-cards { |
|---|
| | | display: flex; |
|---|
| | | gap: 16px; |
|---|
| | | justify-content: flex-start; |
|---|
| | | background: #ffffff; |
|---|
| | | border-radius: 12px; |
|---|
| | | padding: 20px; |
|---|
| | | width: 50%; |
|---|
| | | 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; |
|---|
| | | font-weight: 700; |
|---|
| | | font-size: 26px; |
|---|
| | | color: #FFFFFF; |
|---|
| | | } |
|---|
| | | .data-num { |
|---|
| | | display: flex; |
|---|
| | | align-items: center; |
|---|
| | | justify-content: space-between; |
|---|
| | | margin-top: 20px; |
|---|
| | | 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; |
|---|
| | | 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; |
|---|
| | | 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; |
|---|
| | | 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; |
|---|
| | | 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; |
|---|
| | | font-weight: 500; |
|---|
| | | font-size: 13px; |
|---|
| | | color: #FFFFFF; |
|---|
| | | } |
|---|
| | | .data-value { |
|---|
| | | font-size: 18px; |
|---|
| | | font-weight: 500; |
|---|
| | | margin: 10px 0; |
|---|
| | | color: #FFFFFF; |
|---|
| | | font-size: 18px; |
|---|
| | | font-weight: 500; |
|---|
| | | margin: 10px 0; |
|---|
| | | color: #FFFFFF; |
|---|
| | | } |
|---|
| | | .top-left { |
|---|
| | | display: flex; |
|---|
| | | flex-direction: column; |
|---|
| | | gap: 20px; |
|---|
| | | width: 50%; |
|---|
| | | display: flex; |
|---|
| | | flex-direction: column; |
|---|
| | | gap: 20px; |
|---|
| | | height: 180px; |
|---|
| | | width: 20%; |
|---|
| | | } |
|---|
| | | .todo-panel { |
|---|
| | | background: #fff; |
|---|
| | | border-radius: 12px; |
|---|
| | | padding: 20px; |
|---|
| | | width: 50%; |
|---|
| | | background: #fff; |
|---|
| | | border-radius: 12px; |
|---|
| | | padding: 20px; |
|---|
| | | height: 180px; |
|---|
| | | width: 30%; |
|---|
| | | } |
|---|
| | | .todo-list { |
|---|
| | | list-style: none; |
|---|
| | | padding: 0; |
|---|
| | | margin: 0; |
|---|
| | | font-size: 15px; |
|---|
| | | overflow-y: auto; |
|---|
| | | height: 260px; |
|---|
| | | height: 100px; |
|---|
| | | list-style: none; |
|---|
| | | padding: 0; |
|---|
| | | margin: 0; |
|---|
| | | font-size: 15px; |
|---|
| | | overflow-y: auto; |
|---|
| | | } |
|---|
| | | .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); |
|---|
| | | 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; |
|---|
| | | 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%; /* 让其变成圆形 */ |
|---|
| | | 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; |
|---|
| | | font-weight: 400; |
|---|
| | | font-size: 12px; |
|---|
| | | color: #000000; |
|---|
| | | } |
|---|
| | | .todo-time { |
|---|
| | | font-weight: 400; |
|---|
| | | font-size: 12px; |
|---|
| | | color: #000000; |
|---|
| | | font-weight: 400; |
|---|
| | | font-size: 12px; |
|---|
| | | color: #000000; |
|---|
| | | } |
|---|
| | | .todo-meta { |
|---|
| | | color: #888; |
|---|
| | | font-size: 13px; |
|---|
| | | color: #888; |
|---|
| | | font-size: 13px; |
|---|
| | | } |
|---|
| | | .dashboard-row { |
|---|
| | | display: flex; |
|---|
| | | gap: 20px; |
|---|
| | | margin-bottom: 20px; |
|---|
| | | 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; |
|---|
| | | 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; |
|---|
| | | position: relative; |
|---|
| | | font-size: 18px; |
|---|
| | | color: #333; |
|---|
| | | padding-left: 10px; |
|---|
| | | margin-bottom: 10px; |
|---|
| | | font-weight: 700; |
|---|
| | | } |
|---|
| | | |
|---|
| | | .section-title::before { |
|---|
| | | position: absolute; |
|---|
| | | left: 0; |
|---|
| | | top: 4px; |
|---|
| | | content: ''; |
|---|
| | | width: 4px; |
|---|
| | | height: 18px; |
|---|
| | | background-color: #002FA7; |
|---|
| | | border-radius: 2px; |
|---|
| | | position: absolute; |
|---|
| | | left: 0; |
|---|
| | | top: 4px; |
|---|
| | | content: ''; |
|---|
| | | width: 4px; |
|---|
| | | height: 18px; |
|---|
| | | background-color: #002FA7; |
|---|
| | | border-radius: 2px; |
|---|
| | | } |
|---|
| | | .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; |
|---|
| | | display: flex; |
|---|
| | | align-items: center; |
|---|
| | | gap: 20px; |
|---|
| | | height: 90px; |
|---|
| | | background: rgba(245,245,245,0.59); |
|---|
| | | width: 100%; |
|---|
| | | border-radius: 10px; |
|---|
| | | padding: 10px 30px; |
|---|
| | | } |
|---|
| | | .contract-summary { |
|---|
| | | display: flex; |
|---|
| | | align-items: center; |
|---|
| | | gap: 30px; |
|---|
| | | display: flex; |
|---|
| | | align-items: center; |
|---|
| | | gap: 30px; |
|---|
| | | } |
|---|
| | | .contract-card { |
|---|
| | | display: flex; |
|---|
| | | flex-direction: column; |
|---|
| | | gap: 10px; |
|---|
| | | display: flex; |
|---|
| | | flex-direction: column; |
|---|
| | | gap: 10px; |
|---|
| | | } |
|---|
| | | .contract-name { |
|---|
| | | font-weight: 400; |
|---|
| | | font-size: 14px; |
|---|
| | | color: #050505; |
|---|
| | | font-weight: 400; |
|---|
| | | font-size: 14px; |
|---|
| | | color: #050505; |
|---|
| | | } |
|---|
| | | .contract-meta { |
|---|
| | | display: flex; |
|---|
| | | align-items: center; |
|---|
| | | width: 100%; |
|---|
| | | gap: 80px; |
|---|
| | | display: flex; |
|---|
| | | align-items: center; |
|---|
| | | width: 100%; |
|---|
| | | gap: 80px; |
|---|
| | | } |
|---|
| | | .main-amount { |
|---|
| | | font-size: 24px; |
|---|
| | | color: rgba(51,50,50,0.85); |
|---|
| | | font-size: 24px; |
|---|
| | | color: rgba(51,50,50,0.85); |
|---|
| | | } |
|---|
| | | .up { color: #e57373; } |
|---|
| | | .contract-list { |
|---|
| | | margin-top: 16px; |
|---|
| | | font-size: 14px; |
|---|
| | | color: #666; |
|---|
| | | list-style: none; |
|---|
| | | padding: 0; |
|---|
| | | height: 190px; |
|---|
| | | overflow-y: auto; |
|---|
| | | width: 460px; |
|---|
| | | margin-top: 16px; |
|---|
| | | font-size: 14px; |
|---|
| | | color: #666; |
|---|
| | | list-style: none; |
|---|
| | | padding: 0; |
|---|
| | | height: 190px; |
|---|
| | | overflow-y: auto; |
|---|
| | | width: 460px; |
|---|
| | | } |
|---|
| | | .line { |
|---|
| | | position: relative; |
|---|
| | | width: 230px; |
|---|
| | | position: relative; |
|---|
| | | width: 230px; |
|---|
| | | } |
|---|
| | | .line::after { |
|---|
| | | content: ''; |
|---|
| | | position: absolute; |
|---|
| | | right: 2px; |
|---|
| | | top: 0; |
|---|
| | | bottom: 0; |
|---|
| | | width: 1px; |
|---|
| | | background-color: #C9C5C5; |
|---|
| | | border-radius: 2px; |
|---|
| | | content: ''; |
|---|
| | | position: absolute; |
|---|
| | | right: 2px; |
|---|
| | | top: 0; |
|---|
| | | bottom: 0; |
|---|
| | | width: 1px; |
|---|
| | | background-color: #C9C5C5; |
|---|
| | | border-radius: 2px; |
|---|
| | | } |
|---|
| | | .contract-list li { |
|---|
| | | margin-top: 10px; |
|---|
| | | margin-top: 10px; |
|---|
| | | } |
|---|
| | | .quality-cards { |
|---|
| | | display: flex; |
|---|
| | | gap: 12px; |
|---|
| | | margin-bottom: 12px; |
|---|
| | | display: flex; |
|---|
| | | gap: 12px; |
|---|
| | | margin-bottom: 12px; |
|---|
| | | } |
|---|
| | | .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; |
|---|
| | | 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"); |
|---|
| | | background-image: url("../assets/images/yuancailiao.png"); |
|---|
| | | } |
|---|
| | | .quality-card.two { |
|---|
| | | background-image: url("../assets/images/guocheng.png"); |
|---|
| | | background-image: url("../assets/images/guocheng.png"); |
|---|
| | | } |
|---|
| | | .quality-card.three { |
|---|
| | | background-image: url("../assets/images/chuchang.png"); |
|---|
| | | |
|---|
| | | background-image: url("../assets/images/chuchang.png"); |
|---|
| | | |
|---|
| | | } |
|---|
| | | .quality-card span { |
|---|
| | | color: #4fc3f7; |
|---|
| | | font-weight: bold; |
|---|
| | | margin-left: 6px; |
|---|
| | | color: #4fc3f7; |
|---|
| | | font-weight: bold; |
|---|
| | | margin-left: 6px; |
|---|
| | | } |
|---|
| | | .chart { |
|---|
| | | width: 100%; |
|---|
| | | height: 220px; |
|---|
| | | margin-top: 10px; |
|---|
| | | width: 100%; |
|---|
| | | height: 220px; |
|---|
| | | margin-top: 10px; |
|---|
| | | } |
|---|
| | | .process-panel { |
|---|
| | | padding-bottom: 10px; |
|---|
| | | } |
|---|
| | | |
|---|
| | | .process-panel__header { |
|---|
| | | display: flex; |
|---|
| | | justify-content: space-between; |
|---|
| | | align-items: center; |
|---|
| | | } |
|---|
| | | |
|---|
| | | .process-panel__body { |
|---|
| | | display: flex; |
|---|
| | | gap: 24px; |
|---|
| | | align-items: stretch; |
|---|
| | | margin-top: 10px; |
|---|
| | | } |
|---|
| | | |
|---|
| | | .process-panel__chart { |
|---|
| | | flex: 1; |
|---|
| | | min-width: 0; |
|---|
| | | padding: 6px 0; |
|---|
| | | } |
|---|
| | | |
|---|
| | | .process-panel__aside { |
|---|
| | | width: 260px; |
|---|
| | | display: flex; |
|---|
| | | flex-direction: column; |
|---|
| | | gap: 12px; |
|---|
| | | } |
|---|
| | | |
|---|
| | | .process-legend { |
|---|
| | | display: flex; |
|---|
| | | flex-direction: column; |
|---|
| | | gap: 10px; |
|---|
| | | align-items: flex-start; |
|---|
| | | padding: 8px 6px; |
|---|
| | | } |
|---|
| | | |
|---|
| | | .process-legend__item { |
|---|
| | | display: flex; |
|---|
| | | align-items: center; |
|---|
| | | gap: 8px; |
|---|
| | | font-size: 13px; |
|---|
| | | color: rgba(0, 0, 0, 0.55); |
|---|
| | | } |
|---|
| | | |
|---|
| | | .dot { |
|---|
| | | width: 10px; |
|---|
| | | height: 10px; |
|---|
| | | border-radius: 2px; |
|---|
| | | display: inline-block; |
|---|
| | | } |
|---|
| | | |
|---|
| | | .dot-blue { |
|---|
| | | background: #1E5BFF; |
|---|
| | | } |
|---|
| | | |
|---|
| | | .dot-yellow { |
|---|
| | | background: #F7B500; |
|---|
| | | } |
|---|
| | | |
|---|
| | | .dot-teal { |
|---|
| | | background: #19C6C6; |
|---|
| | | } |
|---|
| | | |
|---|
| | | .process-card { |
|---|
| | | background: rgba(245, 247, 250, 0.9); |
|---|
| | | border-radius: 10px; |
|---|
| | | padding: 16px 16px; |
|---|
| | | } |
|---|
| | | |
|---|
| | | .process-card--name { |
|---|
| | | background: rgba(235, 242, 255, 1); |
|---|
| | | color: #1E5BFF; |
|---|
| | | font-weight: 800; |
|---|
| | | font-size: 14px; |
|---|
| | | } |
|---|
| | | |
|---|
| | | .process-card__label { |
|---|
| | | font-size: 13px; |
|---|
| | | color: rgba(0, 0, 0, 0.55); |
|---|
| | | margin-bottom: 10px; |
|---|
| | | } |
|---|
| | | |
|---|
| | | .process-card__value { |
|---|
| | | font-size: 24px; |
|---|
| | | font-weight: 800; |
|---|
| | | color: rgba(0, 0, 0, 0.8); |
|---|
| | | } |
|---|
| | | |
|---|
| | | .process-card__value .unit { |
|---|
| | | font-size: 12px; |
|---|
| | | font-weight: 600; |
|---|
| | | color: rgba(0, 0, 0, 0.45); |
|---|
| | | margin-left: 6px; |
|---|
| | | } |
|---|
| | | |
|---|
| | | @media (max-width: 1200px) { |
|---|
| | | .process-panel__body { |
|---|
| | | flex-direction: column; |
|---|
| | | } |
|---|
| | | .process-panel__aside { |
|---|
| | | width: 100%; |
|---|
| | | flex-direction: row; |
|---|
| | | flex-wrap: wrap; |
|---|
| | | } |
|---|
| | | .process-card { |
|---|
| | | flex: 1; |
|---|
| | | min-width: 220px; |
|---|
| | | } |
|---|
| | | } |
|---|
| | | </style> |
|---|
