| | |
|---|
| | | <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> |
|---|
| | | <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"> |
|---|
| | | <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 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 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 { 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, |
|---|
| | | processDataProductionStatistics, |
|---|
| | | statisticsReceivablePayable, |
|---|
| | | qualityInspectionStatistics, |
|---|
| | | } from "@/api/viewIndex.js"; |
|---|
| | | import { list } from "@/api/productionManagement/productionProcess"; |
|---|
| | | |
|---|
| | | const userStore = useUserStore() |
|---|
| | | 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 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 todoList = ref([]) |
|---|
| | | const radio1 = ref(1) |
|---|
| | | const pieLegend = reactive({ |
|---|
| | | show: false, |
|---|
| | | }); |
|---|
| | | const barSeries = ref([ |
|---|
| | | { |
|---|
| | | type: "bar", |
|---|
| | | data: [], |
|---|
| | | label: { |
|---|
| | | show: true, |
|---|
| | | }, |
|---|
| | | }, |
|---|
| | | ]); |
|---|
| | | |
|---|
| | | // 图表引用 |
|---|
| | | const barChart = ref(null) |
|---|
| | | const lineChart = ref(null) |
|---|
| | | const barColors2 = ['#5181DB', '#D369E0', '#F2CA6D', '#60CCA8'] |
|---|
| | | 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 getRandomColor = () => { |
|---|
| | | return '#' + Math.floor(Math.random() * 0xffffff).toString(16).padStart(6, '0'); |
|---|
| | | } |
|---|
| | | // 待办事项 |
|---|
| | | const todoList = ref([]); |
|---|
| | | const radio1 = ref(1); |
|---|
| | | const qualityRange = ref(1); |
|---|
| | | |
|---|
| | | onMounted(() => { |
|---|
| | | getBusinessData() |
|---|
| | | analysisCustomer() |
|---|
| | | todoInfoS() |
|---|
| | | statisticsReceivable() |
|---|
| | | qualityStatisticsInfo() |
|---|
| | | getAmountHalfYearNum() |
|---|
| | | }) |
|---|
| | | // 数据统计 |
|---|
| | | 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' |
|---|
| | | }, |
|---|
| | | } |
|---|
| | | ] |
|---|
| | | } |
|---|
| | | // 图表引用 |
|---|
| | | const barChart = ref(null); |
|---|
| | | const lineChart = ref(null); |
|---|
| | | const barColors2 = ["#5181DB", "#D369E0", "#F2CA6D", "#60CCA8"]; |
|---|
| | | |
|---|
| | | // 随机颜色生成函数 |
|---|
| | | const getRandomColor = () => { |
|---|
| | | return ( |
|---|
| | | "#" + |
|---|
| | | Math.floor(Math.random() * 0xffffff) |
|---|
| | | .toString(16) |
|---|
| | | .padStart(6, "0") |
|---|
| | | ); |
|---|
| | | }; |
|---|
| | | |
|---|
| | | 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 getProcessList = () => { |
|---|
| | | list().then(res => { |
|---|
| | | processOptions.value = res.data; |
|---|
| | | }); |
|---|
| | | }; |
|---|
| | | |
|---|
| | | 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 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 = () => { |
|---|
| | | qualityInspectionStatistics({ type: qualityRange.value }).then(res => { |
|---|
| | | xAxis1.value[0].data = []; |
|---|
| | | barSeries1.value[0].data = []; |
|---|
| | | barSeries1.value[1].data = []; |
|---|
| | | barSeries1.value[2].data = []; |
|---|
| | | 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: invoiceAmount, |
|---|
| | | 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: receiptAmount, |
|---|
| | | 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(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 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 item = list[activeProcessIndex.value] || {}; |
|---|
| | | return { |
|---|
| | | processName: item.name || "暂无数据", |
|---|
| | | totalInput: item.input || 0, |
|---|
| | | totalScrap: item.scrap || 0, |
|---|
| | | totalOutput: item.output || 0, |
|---|
| | | }; |
|---|
| | | }); |
|---|
| | | |
|---|
| | | const formatAmount = n => { |
|---|
| | | const num = Number(n || 0); |
|---|
| | | return num.toLocaleString(undefined, { |
|---|
| | | minimumFractionDigits: 2, |
|---|
| | | maximumFractionDigits: 2, |
|---|
| | | }); |
|---|
| | | }; |
|---|
| | | |
|---|
| | | const refreshProcessStats = () => { |
|---|
| | | processDataProductionStatistics({ |
|---|
| | | type: processRange.value, |
|---|
| | | processIds: |
|---|
| | | selectedProcessIds.value.length > 0 |
|---|
| | | ? selectedProcessIds.value.join(",") |
|---|
| | | : null, |
|---|
| | | }).then(res => { |
|---|
| | | processChartData.value = res.data.map(item => ({ |
|---|
| | | name: item.processName, |
|---|
| | | input: item.totalInput, |
|---|
| | | scrap: item.totalScrap, |
|---|
| | | output: item.totalOutput, |
|---|
| | | })); |
|---|
| | | processYAxis.value[0].data = processChartData.value.map(i => i.name); |
|---|
| | | activeProcessIndex.value = 0; |
|---|
| | | }); |
|---|
| | | }; |
|---|
| | | |
|---|
| | | onMounted(() => { |
|---|
| | | getBusinessData(); |
|---|
| | | analysisCustomer(); |
|---|
| | | todoInfoS(); |
|---|
| | | statisticsReceivable(); |
|---|
| | | qualityStatisticsInfo(); |
|---|
| | | getAmountHalfYearNum(); |
|---|
| | | refreshProcessStats(); |
|---|
| | | }); |
|---|
| | | </script> |
|---|
| | | |
|---|
| | | <style scoped> |
|---|
| | | .dashboard { |
|---|
| | | background: #f5f7fa; |
|---|
| | | min-height: 100vh; |
|---|
| | | padding: 20px; |
|---|
| | | box-sizing: border-box; |
|---|
| | | } |
|---|
| | | .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; |
|---|
| | | } |
|---|
| | | .dashboard { |
|---|
| | | background: #f5f7fa; |
|---|
| | | min-height: 100vh; |
|---|
| | | padding: 20px; |
|---|
| | | box-sizing: border-box; |
|---|
| | | } |
|---|
| | | |
|---|
| | | .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; |
|---|
| | | } |
|---|
| | | .dashboard-top { |
|---|
| | | display: flex; |
|---|
| | | gap: 20px; |
|---|
| | | margin-bottom: 20px; |
|---|
| | | align-items: flex-start; |
|---|
| | | justify-content: space-evenly; |
|---|
| | | } |
|---|
| | | |
|---|
| | | .section-title::before { |
|---|
| | | 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; |
|---|
| | | } |
|---|
| | | .contract-summary { |
|---|
| | | display: flex; |
|---|
| | | align-items: center; |
|---|
| | | gap: 30px; |
|---|
| | | } |
|---|
| | | .contract-card { |
|---|
| | | display: flex; |
|---|
| | | flex-direction: column; |
|---|
| | | gap: 10px; |
|---|
| | | } |
|---|
| | | .contract-name { |
|---|
| | | font-weight: 400; |
|---|
| | | font-size: 14px; |
|---|
| | | color: #050505; |
|---|
| | | } |
|---|
| | | .contract-meta { |
|---|
| | | display: flex; |
|---|
| | | align-items: center; |
|---|
| | | width: 100%; |
|---|
| | | gap: 80px; |
|---|
| | | } |
|---|
| | | .main-amount { |
|---|
| | | 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; |
|---|
| | | } |
|---|
| | | .line { |
|---|
| | | position: relative; |
|---|
| | | width: 250px; |
|---|
| | | } |
|---|
| | | .line::after { |
|---|
| | | content: ''; |
|---|
| | | position: absolute; |
|---|
| | | right: 12px; |
|---|
| | | top: 0; |
|---|
| | | bottom: 0; |
|---|
| | | width: 1px; |
|---|
| | | background-color: #C9C5C5; |
|---|
| | | border-radius: 2px; |
|---|
| | | } |
|---|
| | | .contract-list li { |
|---|
| | | margin-top: 10px; |
|---|
| | | } |
|---|
| | | .quality-cards { |
|---|
| | | 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; |
|---|
| | | } |
|---|
| | | .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; |
|---|
| | | } |
|---|
| | | .company-info { |
|---|
| | | padding: 0; |
|---|
| | | overflow: hidden; |
|---|
| | | border-radius: 12px; |
|---|
| | | background: #fff; |
|---|
| | | height: 100%; |
|---|
| | | } |
|---|
| | | |
|---|
| | | .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) |
|---|
| | | ); |
|---|
| | | } |
|---|
| | | |
|---|
| | | .welcome-title { |
|---|
| | | font-size: 18px; |
|---|
| | | font-weight: 700; |
|---|
| | | color: #222; |
|---|
| | | line-height: 1.3; |
|---|
| | | } |
|---|
| | | |
|---|
| | | .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 { |
|---|
| | | 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; |
|---|
| | | } |
|---|
| | | |
|---|
| | | .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; |
|---|
| | | height: 180px; |
|---|
| | | width: 20%; |
|---|
| | | } |
|---|
| | | |
|---|
| | | .todo-panel { |
|---|
| | | background: #fff; |
|---|
| | | border-radius: 12px; |
|---|
| | | padding: 20px; |
|---|
| | | height: 180px; |
|---|
| | | width: 30%; |
|---|
| | | } |
|---|
| | | |
|---|
| | | .todo-list { |
|---|
| | | 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); |
|---|
| | | } |
|---|
| | | |
|---|
| | | .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; |
|---|
| | | } |
|---|
| | | |
|---|
| | | .section-title::before { |
|---|
| | | 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; |
|---|
| | | } |
|---|
| | | |
|---|
| | | .contract-summary { |
|---|
| | | display: flex; |
|---|
| | | align-items: center; |
|---|
| | | gap: 30px; |
|---|
| | | } |
|---|
| | | |
|---|
| | | .contract-card { |
|---|
| | | display: flex; |
|---|
| | | flex-direction: column; |
|---|
| | | gap: 10px; |
|---|
| | | } |
|---|
| | | |
|---|
| | | .contract-name { |
|---|
| | | font-weight: 400; |
|---|
| | | font-size: 14px; |
|---|
| | | color: #050505; |
|---|
| | | } |
|---|
| | | |
|---|
| | | .contract-meta { |
|---|
| | | display: flex; |
|---|
| | | align-items: center; |
|---|
| | | width: 100%; |
|---|
| | | gap: 80px; |
|---|
| | | } |
|---|
| | | |
|---|
| | | .main-amount { |
|---|
| | | 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; |
|---|
| | | } |
|---|
| | | |
|---|
| | | .line { |
|---|
| | | position: relative; |
|---|
| | | width: 230px; |
|---|
| | | } |
|---|
| | | |
|---|
| | | .line::after { |
|---|
| | | content: ""; |
|---|
| | | position: absolute; |
|---|
| | | right: 2px; |
|---|
| | | top: 0; |
|---|
| | | bottom: 0; |
|---|
| | | width: 1px; |
|---|
| | | background-color: #c9c5c5; |
|---|
| | | border-radius: 2px; |
|---|
| | | } |
|---|
| | | |
|---|
| | | .contract-list li { |
|---|
| | | margin-top: 10px; |
|---|
| | | } |
|---|
| | | |
|---|
| | | .quality-cards { |
|---|
| | | 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; |
|---|
| | | } |
|---|
| | | |
|---|
| | | .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; |
|---|
| | | } |
|---|
| | | |
|---|
| | | .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; |
|---|
| | | } |
|---|
| | | } |
|---|
| | | |
|---|
| | | .process-selection-wrapper { |
|---|
| | | max-height: 400px; |
|---|
| | | overflow-y: auto; |
|---|
| | | padding: 10px; |
|---|
| | | } |
|---|
| | | |
|---|
| | | .process-grid { |
|---|
| | | display: grid; |
|---|
| | | grid-template-columns: repeat(auto-fill, minmax(130px, 1fr)); |
|---|
| | | gap: 12px; |
|---|
| | | } |
|---|
| | | |
|---|
| | | :deep(.el-checkbox.is-bordered) { |
|---|
| | | margin-left: 0 !important; |
|---|
| | | width: 100%; |
|---|
| | | } |
|---|
| | | </style> |
|---|
