Merge remote-tracking branch 'origin/dev_New' into dev_New
| | |
| | | method: "get", |
| | | }); |
| | | }; |
| | | // 质检分析 |
| | | export const qualityStatistics = () => { |
| | | // 质检分析(可传 dateType: 1周 2月 3季度) |
| | | export const qualityStatistics = (params) => { |
| | | return request({ |
| | | url: "/home/qualityStatistics", |
| | | method: "get", |
| | | params, |
| | | }); |
| | | }; |
| | | |
| | | // 工单执行效率分析(dateType: 1周 2月 3季度) |
| | | export const workOrderEfficiencyAnalysis = (params) => { |
| | | return request({ |
| | | url: "/home/workOrderEfficiencyAnalysis", |
| | | method: "get", |
| | | params, |
| | | }); |
| | | }; |
| | | |
| | | // 生产核算分析(dateType: 1周 2月 3季度) |
| | | export const productionAccountingAnalysis = (params) => { |
| | | return request({ |
| | | url: "/home/productionAccountingAnalysis", |
| | | method: "get", |
| | | params, |
| | | }); |
| | | }; |
| | | // 生产核算分析 |
| | |
| | | export const getProgressStatistics = () => { |
| | | return request({ |
| | | url: "/home/progressStatistics", |
| | | method: "get", |
| | | }); |
| | | }; |
| | | |
| | | // 订单数量统计(生产订单数、已完成订单数、待生产订单数) |
| | | export const orderCount = () => { |
| | | return request({ |
| | | url: "/home/orderCount", |
| | | method: "get", |
| | | }); |
| | | }; |
| | |
| | | }); |
| | | }; |
| | | |
| | | // 工序产出分析(dateType: 1周 2月 3季度) |
| | | export const processOutputAnalysis = (params) => { |
| | | return request({ |
| | | url: "/home/processOutputAnalysis", |
| | | method: "get", |
| | | params, |
| | | }); |
| | | }; |
| | | |
| | | // 原材料采购金额占比 |
| | | export const rawMaterialPurchaseAmountRatio = () => { |
| | | return request({ |
| | |
| | | }); |
| | | }; |
| | | |
| | | // 投入产出分析 |
| | | export const inputOutputAnalysis = (params) => { |
| | | return request({ |
| | | url: "/home/inputOutputAnalysis", |
| | | method: "get", |
| | | params, |
| | | }); |
| | | }; |
| | | |
| | | // 产品周转天数 |
| | | export const productTurnoverDays = () => { |
| | | return request({ |
| | |
| | | <!-- 左:企业信息+三大数据卡片(上下排列) --> |
| | | <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 class="welcome-banner"> |
| | | <div class="welcome-title"> |
| | | <span class="welcome-user">{{ userStore.roleName || '系统管理员' }}</span> |
| | | <span> 您好!祝您开心每一天</span> |
| | | </div> |
| | | <div style="display: flex;align-items: center;gap: 8px"> |
| | | <el-icon color="#5053B5" size="22"><Clock /></el-icon> |
| | | <span>登陆日期:{{userStore.currentLoginTime}}</span> |
| | | <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> |
| | | </div> |
| | | </div> |
| | | </div> |
| | | <!-- 右:待办事项 --> |
| | | <div class="todo-panel"> |
| | | <div class="section-title">待办事项</div> |
| | |
| | | </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="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> |
| | | <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> |
| | | <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"; |
| | |
| | | } |
| | | }, |
| | | ]) |
| | | |
| | | const barSeries1 = ref([ |
| | | { |
| | | name: '原材料不合格数', |
| | |
| | | }) |
| | | } |
| | | // 应付应收统计 |
| | | const statisticsReceivable = (type) => { |
| | | const statisticsReceivable = () => { |
| | | statisticsReceivablePayable({type: radio1.value}).then((res) => { |
| | | barSeries.value[0].data = [ |
| | | // { value: res.data.prepayMoney, itemStyle: { color: barColors2[0] } }, |
| | |
| | | } |
| | | ] |
| | | } |
| | | |
| | | // 工序数据生产统计明细(假数据 + 图表) |
| | | 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> |
| | |
| | | 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; |
| | | padding: 0; |
| | | overflow: hidden; |
| | | 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; |
| | | 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; |
| | | |
| | | .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: #161A9A; |
| | | color: rgba(0, 0, 0, 0.55); |
| | | } |
| | | .company-meta { |
| | | font-weight: 400; |
| | | |
| | | .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: #818185; |
| | | 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; |
| | |
| | | display: flex; |
| | | flex-direction: column; |
| | | gap: 20px; |
| | | width: 50%; |
| | | height: 180px; |
| | | width: 20%; |
| | | } |
| | | .todo-panel { |
| | | background: #fff; |
| | | border-radius: 12px; |
| | | padding: 20px; |
| | | width: 50%; |
| | | height: 180px; |
| | | width: 30%; |
| | | } |
| | | .todo-list { |
| | | height: 100px; |
| | | list-style: none; |
| | | padding: 0; |
| | | margin: 0; |
| | | font-size: 15px; |
| | | overflow-y: auto; |
| | | height: 260px; |
| | | } |
| | | .todo-list li { |
| | | border-radius: 8px; |
| | |
| | | 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> |
| | |
| | | import { ref, onMounted } from 'vue' |
| | | import * as echarts from 'echarts' |
| | | import Echarts from '@/components/Echarts/echarts.vue' |
| | | import { productInOutAnalysis } from '@/api/viewIndex.js' |
| | | import { inputOutputAnalysis } from '@/api/viewIndex.js' |
| | | |
| | | const chartStyle = { width: '100%', height: '100%' } |
| | | const grid = { |
| | |
| | | } |
| | | |
| | | const fetchData = () => { |
| | | productInOutAnalysis({ type: 1 }) |
| | | inputOutputAnalysis() |
| | | .then((res) => { |
| | | if (res.code === 200 && Array.isArray(res.data)) { |
| | | const list = res.data |
| | | xAxis1.value[0].data = list.map((d) => d.date) |
| | | lineSeries.value[0].data = list.map((d) => Number(d.outCount) || 0) |
| | | lineSeries.value[1].data = list.map((d) => Number(d.inCount) || 0) |
| | | lineSeries.value[0].data = list.map((d) => Number(d.outputSum) || 0) |
| | | lineSeries.value[1].data = list.map((d) => Number(d.inputSum) || 0) |
| | | } |
| | | }) |
| | | .catch((err) => { |
| | |
| | | |
| | | <script setup> |
| | | import { ref, onMounted } from 'vue' |
| | | import { salesPurchaseStorageProductCount } from '@/api/viewIndex.js' |
| | | import { orderCount } from '@/api/viewIndex.js' |
| | | |
| | | const statItems = ref([]) |
| | | |
| | |
| | | const compareClass = (val) => (val >= 0 ? 'compare-up' : 'compare-down') |
| | | |
| | | const fetchData = () => { |
| | | salesPurchaseStorageProductCount() |
| | | orderCount() |
| | | .then((res) => { |
| | | if (res.code === 200 && Array.isArray(res.data)) { |
| | | statItems.value = res.data.map((item) => ({ |
| | |
| | | } |
| | | }) |
| | | .catch((err) => { |
| | | console.error('获取销售/采购/储存产品数失败:', err) |
| | | console.error('获取订单数量统计失败:', err) |
| | | }) |
| | | } |
| | | |
| | |
| | | |
| | | <script setup> |
| | | import { ref, onMounted, onBeforeUnmount, computed } from 'vue' |
| | | import { productSalesAnalysis } from '@/api/viewIndex.js' |
| | | import { processOutputAnalysis } from '@/api/viewIndex.js' |
| | | import PanelHeader from './PanelHeader.vue' |
| | | import Echarts from '@/components/Echarts/echarts.vue' |
| | | import DateTypeSwitch from '@/views/reportAnalysis/financialAnalysis/components/DateTypeSwitch.vue' |
| | |
| | | formatter: function (name) { |
| | | const item = pieObjData.value[name] |
| | | if (!item) return name |
| | | return `{title|${name}}{value|${item.value}}{unit|元}{percent|${item.rate}}{unit|%}` |
| | | return `{title|${name}}{value|${item.value}}{unit|件}{percent|${item.rate}}{unit|%}` |
| | | }, |
| | | textStyle: { |
| | | rich: { |
| | |
| | | |
| | | const pieTooltip = { |
| | | trigger: 'item', |
| | | formatter: '{a} <br/>{b} : {c}元 ({d}%)', |
| | | formatter: '{a} <br/>{b} : {c}件 ({d}%)', |
| | | } |
| | | |
| | | const pieSeries = computed(() => [ |
| | | { |
| | | name: '产品销售金额分析', |
| | | name: '工序产出分析', |
| | | type: 'pie', |
| | | radius: '60%', |
| | | center: ['25%', '50%'], |
| | |
| | | }) |
| | | |
| | | const fetchData = () => { |
| | | productSalesAnalysis() |
| | | processOutputAnalysis({ dateType: dateType.value }) |
| | | .then((res) => { |
| | | if (res.code === 200 && Array.isArray(res.data)) { |
| | | const items = res.data |
| | |
| | | } |
| | | }) |
| | | .catch((err) => { |
| | | console.error('获取产品销售金额分析失败:', err) |
| | | console.error('获取工序产出分析失败:', err) |
| | | }) |
| | | } |
| | | |
| | |
| | | const barLegend = { |
| | | show: true, |
| | | textStyle: { color: '#B8C8E0' }, |
| | | data: ['产量', '工资', '合格率'], |
| | | data: ['生产核算'], |
| | | } |
| | | |
| | | // 柱状图:产量、工资;折线图:合格率(绿色) |
| | | // 柱状图:生产核算 |
| | | const chartSeries = ref([ |
| | | { |
| | | name: '产量', |
| | | name: '生产核算', |
| | | type: 'bar', |
| | | barWidth: 20, |
| | | barGap: '40%', |
| | | yAxisIndex: 0, |
| | | barWidth: 30, |
| | | emphasis: { focus: 'series' }, |
| | | itemStyle: { |
| | | color: { |
| | |
| | | }, |
| | | data: [], |
| | | }, |
| | | { |
| | | name: '工资', |
| | | type: 'bar', |
| | | barGap: '40%', |
| | | barWidth: 20, |
| | | yAxisIndex: 1, |
| | | emphasis: { focus: 'series' }, |
| | | itemStyle: { |
| | | color: { |
| | | type: 'linear', |
| | | x: 0, |
| | | y: 0, |
| | | x2: 0, |
| | | y2: 1, |
| | | colorStops: [ |
| | | { offset: 1, color: 'rgba(83, 126, 245, 0.19)' }, |
| | | { offset: 0, color: 'rgba(144, 97, 248, 1)' }, |
| | | ], |
| | | }, |
| | | }, |
| | | data: [], |
| | | }, |
| | | { |
| | | name: '合格率', |
| | | type: 'line', |
| | | yAxisIndex: 2, |
| | | showSymbol: true, |
| | | symbol: 'circle', |
| | | symbolSize: 8, |
| | | lineStyle: { color: 'rgba(90, 216, 166, 1)', width: 2 }, |
| | | itemStyle: { color: 'rgba(90, 216, 166, 1)' }, |
| | | data: [], |
| | | emphasis: { focus: 'series' }, |
| | | }, |
| | | ]) |
| | | |
| | | const tooltip = { |
| | |
| | | formatter(params) { |
| | | let result = params[0].axisValueLabel + '<br/>' |
| | | params.forEach((item) => { |
| | | let unit = '件' |
| | | if (item.seriesName === '合格率') unit = '%' |
| | | else if (item.seriesName === '工资') unit = '元' |
| | | result += `<div>${item.marker} ${item.seriesName}: ${item.value}${unit}</div>` |
| | | result += `<div>${item.marker} ${item.seriesName}: ${item.value} 元</div>` |
| | | }) |
| | | return result |
| | | }, |
| | |
| | | { type: 'category', axisTick: { show: false }, axisLabel: { color: '#B8C8E0' }, data: [] }, |
| | | ]) |
| | | const yAxis1 = [ |
| | | { type: 'value', name: '产量(件)', position: 'left', axisLabel: { color: '#B8C8E0' }, nameTextStyle: { color: '#B8C8E0' } }, |
| | | { type: 'value', name: '工资(元)', position: 'left', offset: 50, axisLabel: { color: '#B8C8E0' }, nameTextStyle: { color: '#B8C8E0' } }, |
| | | { |
| | | type: 'value', |
| | | name: '合格率(%)', |
| | | position: 'right', |
| | | min: 0, |
| | | max: 100, |
| | | axisLabel: { color: '#B8C8E0', formatter: '{value}%' }, |
| | | nameTextStyle: { color: '#B8C8E0' }, |
| | | splitLine: { lineStyle: { color: 'rgba(184, 200, 224, 0.2)' } }, |
| | | }, |
| | | { type: 'value', name: '单位: 元', axisLabel: { color: '#B8C8E0' }, nameTextStyle: { color: '#B8C8E0' }, splitLine: { lineStyle: { color: 'rgba(184, 200, 224, 0.2)' } } }, |
| | | ] |
| | | |
| | | const handleDateTypeChange = () => { |
| | |
| | | } |
| | | |
| | | const fetchData = () => { |
| | | productionAccountingAnalysis({ type: dateType.value }) |
| | | productionAccountingAnalysis({ dateType: dateType.value }) |
| | | .then((res) => { |
| | | console.log('res ======> ', res) |
| | | |
| | | if (!Array.isArray(res?.data)) return |
| | | |
| | | if (res.code !== 200 || !Array.isArray(res.data)) return |
| | | const items = res.data |
| | | |
| | | xAxis1.value[0].data = items.map(d => d.dateStr) |
| | | |
| | | // 产量 |
| | | chartSeries.value[0].data = items.map(d => Number(d.numberOfCompleted) || 0) |
| | | |
| | | // 工资 |
| | | chartSeries.value[1].data = items.map(d => Number(d.amount) || 0) |
| | | |
| | | // 合格率 |
| | | chartSeries.value[2].data = items.map(d => Number(d.passRate) || 0) |
| | | xAxis1.value[0].data = items.map((d) => d.name) |
| | | chartSeries.value[0].data = items.map((d) => parseFloat(d.value) || 0) |
| | | }) |
| | | .catch((err) => { |
| | | console.error('获取产量、工资与合格率数据失败:', err) |
| | | console.error('获取生产核算分析失败:', err) |
| | | }) |
| | | } |
| | | |
| | |
| | | <div> |
| | | <PanelHeader title="工单执行效率分析" /> |
| | | <div class="main-panel panel-item-customers"> |
| | | <Echarts ref="chart" :chartStyle="chartStyle" :grid="grid" :legend="barLegend" :series="chartSeries" |
| | | :tooltip="tooltip" :xAxis="xAxis1" :yAxis="yAxis1" |
| | | :options="{ backgroundColor: 'transparent', textStyle: { color: '#B8C8E0' } }" style="height: 260px" /> |
| | | <div class="filters-row"> |
| | | <DateTypeSwitch v-model="dateType" @change="handleDateTypeChange" /> |
| | | </div> |
| | | <Echarts |
| | | ref="chart" |
| | | :chartStyle="chartStyle" |
| | | :grid="grid" |
| | | :legend="barLegend" |
| | | :series="chartSeries" |
| | | :tooltip="tooltip" |
| | | :xAxis="xAxis1" |
| | | :yAxis="yAxis1" |
| | | :options="{ backgroundColor: 'transparent', textStyle: { color: '#B8C8E0' } }" |
| | | style="height: 260px" |
| | | /> |
| | | </div> |
| | | </div> |
| | | </template> |
| | |
| | | import { workOrderEfficiencyAnalysis } from '@/api/viewIndex.js' |
| | | import PanelHeader from './PanelHeader.vue' |
| | | import Echarts from '@/components/Echarts/echarts.vue' |
| | | import DateTypeSwitch from './DateTypeSwitch.vue' |
| | | |
| | | const dateType = ref(1) // 1=周 2=月 3=季度 |
| | | |
| | | const chartStyle = { |
| | | width: '100%', |
| | | height: '160%', |
| | | height: '140%', |
| | | } |
| | | |
| | | const grid = { left: '3%', right: '4%', bottom: '3%', top: '10%', containLabel: true } |
| | |
| | | }, |
| | | ] |
| | | |
| | | const handleDateTypeChange = () => { |
| | | fetchData() |
| | | } |
| | | |
| | | const fetchData = () => { |
| | | workOrderEfficiencyAnalysis() |
| | | workOrderEfficiencyAnalysis({ dateType: dateType.value }) |
| | | .then((res) => { |
| | | // 根据你的结构,数据直接在 res.data 中 |
| | | if (!res?.data || !Array.isArray(res.data)) return |
| | | |
| | | const list = res.data |
| | | |
| | | xAxis1.value[0].data = list.map((item) => item.date) |
| | | |
| | | chartSeries.value[0].data = list.map((item) => Number(item.startQuantity) || 0) |
| | | |
| | | chartSeries.value[1].data = list.map((item) => Number(item.finishQuantity) || 0) |
| | | |
| | | chartSeries.value[2].data = list.map((item) => Number(item.yieldRate) || 0) |
| | | if (res.code !== 200 || !Array.isArray(res.data)) return |
| | | const items = res.data |
| | | xAxis1.value[0].data = items.map((d) => d.date) |
| | | // 开工 |
| | | chartSeries.value[0].data = items.map((d) => Number(d.startQuantity) || 0) |
| | | // 完成 |
| | | chartSeries.value[1].data = items.map((d) => Number(d.finishQuantity) || 0) |
| | | // 良品率 |
| | | chartSeries.value[2].data = items.map((d) => Math.min(100, parseFloat(d.yieldRate) || 0)) |
| | | }) |
| | | .catch((err) => { |
| | | console.error('获取工单效率数据失败:', err) |
| | | console.error('获取工单执行效率分析失败:', err) |
| | | }) |
| | | } |
| | | |
| | |
| | | gap: 20px; |
| | | } |
| | | |
| | | .filters-row { |
| | | display: flex; |
| | | justify-content: flex-end; |
| | | align-items: center; |
| | | gap: 12px; |
| | | margin-bottom: 10px; |
| | | } |
| | | |
| | | .panel-item-customers { |
| | | border: 1px solid #1a58b0; |
| | | padding: 18px; |
| | |
| | | |
| | | <!-- 顶部标题栏 --> |
| | | <div class="dashboard-header"> |
| | | <div class="factory-name">进销质量类分析</div> |
| | | <div class="factory-name">质量数据分析</div> |
| | | </div> |
| | | |
| | | <!-- 主要内容区域 --> |