From 501fc9805cc9f3c66a311e09a46e3aa102a72667 Mon Sep 17 00:00:00 2001
From: gaoluyang <2820782392@qq.com>
Date: 星期四, 11 十二月 2025 11:25:52 +0800
Subject: [PATCH] 1.南洋电缆-质量统计过程检台账有数据但是BI大屏没有数据（改成月份统计和合格率） 2.南洋电缆-再加两个统计内容：产品合格率（%）、库存周转率BI展示
---
src/views/reportAnalysis/dataDashboard/index.vue | 469 +++++++++++++++-------------------------------------------
1 files changed, 120 insertions(+), 349 deletions(-)
diff --git a/src/views/reportAnalysis/dataDashboard/index.vue b/src/views/reportAnalysis/dataDashboard/index.vue
index da10fd7..645552d 100644
--- a/src/views/reportAnalysis/dataDashboard/index.vue
+++ b/src/views/reportAnalysis/dataDashboard/index.vue
@@ -12,6 +12,7 @@
<!-- 椤堕儴鏍囬鏍� -->
<div class="dashboard-header">
+ <div class="factory-name">{{ userStore.currentFactoryName }}</div>
</div>
<!-- 涓昏鍐呭鍖哄煙 -->
@@ -53,7 +54,7 @@
<!-- 璐ㄩ噺缁熻 -->
<div class="panel-header">
- <span class="panel-title">璐ㄩ噺缁熻</span>
+ <span class="panel-title">杩�4涓湀璐ㄩ噺缁熻</span>
</div>
<div class="main-panel">
<div class="panel-item-customers">
@@ -129,48 +130,73 @@
</div>
<div class="equipment-items">
<div class="equipment-item">
- <span class="equipment-value">{{equipmentNum}}</span>
+ <span class="equipment-value">21</span>
<span class="equipment-label">璁惧鎬绘暟</span>
</div>
<div class="equipment-item">
- <span class="equipment-value">{{equipmentRepair}}</span>
+ <span class="equipment-value">3</span>
<span class="equipment-label">寰呯淮淇澶�</span>
</div>
<div class="equipment-item">
- <span class="equipment-value">{{equipmentMaintain}}</span>
+ <span class="equipment-value">4</span>
<span class="equipment-label">寰呬繚鍏昏澶�</span>
</div>
- <div class="equipment-item">
+ <!-- <div class="equipment-item">
<span class="equipment-value">{{totalMeasuring}}</span>
<span class="equipment-label">璁￠噺鍣ㄥ叿鎬绘暟</span>
+ </div> -->
+ </div>
+ </div>
+ <!-- 鍚堟牸鐜� -->
+ <div class="equipment-stats">
+ <div class="equipment-header">
+ <img src="@/assets/BI/shujutongjiicon@2x.png" alt="鍥炬爣" class="equipment-icon" />
+ <span class="equipment-title">璐ㄦ缁熻</span>
+ </div>
+ <div class="equipment-items">
+ <div class="equipment-item">
+ <span class="equipment-value">{{rawMaterialQualifiedRate}}%</span>
+ <span class="equipment-label">鍘熸潗鏂欏悎鏍肩巼</span>
+ </div>
+ <div class="equipment-item">
+ <span class="equipment-value">{{processQualifiedRate}}%</span>
+ <span class="equipment-label">杩囩▼鍚堟牸鐜�</span>
+ </div>
+ <div class="equipment-item">
+ <span class="equipment-value">{{factoryQualifiedRate}}%</span>
+ <span class="equipment-label">鍑哄巶鍚堟牸鐜�</span>
+ </div>
+ <div class="equipment-item">
+ <span class="equipment-value">{{inventoryTurnoverRate}}%</span>
+ <span class="equipment-label">搴撳瓨鍛ㄨ浆鐜�</span>
</div>
</div>
</div>
<!-- 浜嬩欢鍚嶇О -->
- <div class="event-info">
- <div class="event-header">
- <img src="@/assets/BI/shijianmingxiicon@2x.png" alt="鍥炬爣" class="event-icon" />
- <span class="event-title">浜嬩欢鍚嶇О</span>
- </div>
- <div class="event-content">
- <ul class="todo-list" v-if="todoList.length > 0" ref="refTodoList">
- <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="event-info">-->
+<!-- <div class="event-header">-->
+<!-- <img src="@/assets/BI/shijianmingxiicon@2x.png" alt="鍥炬爣" class="event-icon" />-->
+<!-- <span class="event-title">浜嬩欢鍚嶇О</span>-->
+<!-- </div>-->
+<!-- <div class="event-content">-->
+<!-- <ul class="todo-list" v-if="todoList.length > 0" ref="refTodoList"> -->
+<!-- <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="financial-header">
<span class="financial-title">璐㈠姟鍒嗘瀽</span>
@@ -190,7 +216,7 @@
:xAxis="xAxis3"
:yAxis="yAxis3"
:options="{backgroundColor: 'transparent', textStyle: {color: '#B8C8E0'}}"
- style="height: 300px"></Echarts>
+ style="height: 280px"></Echarts>
</div>
</div>
</div>
@@ -204,11 +230,11 @@
<div class="panel-item-customers">
<div style="display: flex;justify-content: space-between;margin-bottom: 20px;">
<div class="section-title">搴旀敹搴斾粯缁熻</div>
- <el-radio-group v-model="radio1" size="large" @change="statisticsReceivable" class="custom-radio-group">
- <el-radio-button label="鎸夊懆" :value="1" />
- <el-radio-button label="鎸夋湀" :value="2" />
- <el-radio-button label="鎸夊搴�" :value="3" />
- </el-radio-group>
+<!-- <el-radio-group v-model="radio1" size="large" @change="statisticsReceivable" class="custom-radio-group">-->
+<!-- <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"
@@ -241,9 +267,10 @@
import { ref, onMounted, onBeforeUnmount, nextTick } from 'vue'
import autofit from 'autofit.js'
import Echarts from "@/components/Echarts/echarts.vue";
+import useUserStore from '@/store/modules/user'
import {
analysisCustomerContractAmounts, getAmountHalfYear,
- homeTodos,
+ homeTodos, qualityProductQualifiedRate,
qualityStatistics,
statisticsReceivablePayable
} from "@/api/viewIndex.js";
@@ -258,6 +285,9 @@
// 鍏ㄥ睆鐩稿叧鐘舵��
const isFullscreen = ref(false);
+
+// 鐢ㄦ埛store
+const userStore = useUserStore()
// 鍝嶅簲寮忔暟鎹�
const currentTime = ref('')
@@ -307,6 +337,10 @@
const equipmentRepair = ref(0)
const equipmentMaintain = ref(0)
const totalMeasuring = ref(0)
+const rawMaterialQualifiedRate = ref(0)
+const processQualifiedRate = ref(0)
+const factoryQualifiedRate = ref(0)
+const inventoryTurnoverRate = ref(0)
const pieTooltip = reactive({
trigger: 'item',
formatter: function (params) {
@@ -407,7 +441,7 @@
const barLegend = {
show: true,
textStyle: { color: '#B8C8E0' },
- data: ['鍘熸潗鏂欎笉鍚堟牸鏁�', '杩囩▼涓嶅悎鏍兼暟', '鍑哄巶涓嶅悎鏍兼暟']
+ data: ['鍘熸潗鏂欏悎鏍兼暟', '杩囩▼鍚堟牸鏁�', '鍑哄巶鍚堟牸鏁�']
}
const barLegend1 = {
show: true,
@@ -482,7 +516,7 @@
])
const barSeries1 = ref([
{
- name: '鍘熸潗鏂欎笉鍚堟牸鏁�',
+ name: '鍘熸潗鏂欏悎鏍兼暟',
type: 'bar',
barGap: 0,
emphasis: {
@@ -504,7 +538,7 @@
data: []
},
{
- name: '杩囩▼涓嶅悎鏍兼暟',
+ name: '杩囩▼鍚堟牸鏁�',
type: 'bar',
emphasis: {
focus: 'series'
@@ -525,7 +559,7 @@
data: []
},
{
- name: '鍑哄巶涓嶅悎鏍兼暟',
+ name: '鍑哄巶鍚堟牸鏁�',
type: 'bar',
emphasis: {
focus: 'series'
@@ -633,6 +667,15 @@
qualityStatisticsObject.value.supplierNum = res.data.supplierNum
qualityStatisticsObject.value.processNum = res.data.processNum
qualityStatisticsObject.value.factoryNum = res.data.factoryNum
+ })
+}
+// 浜у搧鍚堟牸鐜�
+const qualityProductQualifiedRateInfo = () => {
+ qualityProductQualifiedRate().then((res) => {
+ rawMaterialQualifiedRate.value = res.data.rawMaterialQualifiedRate
+ processQualifiedRate.value = res.data.processQualifiedRate
+ factoryQualifiedRate.value = res.data.factoryQualifiedRate
+ inventoryTurnoverRate.value = res.data.inventoryTurnoverRate
})
}
// 璐㈠姟缁熻
@@ -876,229 +919,29 @@
updateTime()
timer.value = setInterval(updateTime, 1000)
}
-
-// 瀹㈡埛楗煎浘
-const initCustomerPieChart = () => {
- if (!customerPieChartRef.value) return
- const chart = echarts.init(customerPieChartRef.value)
- const option = {
- tooltip: {
- trigger: 'item',
- formatter: '{a} <br/>{b}: {c} ({d}%)'
- },
- series: [{
- name: '瀹㈡埛鍒嗗竷',
- type: 'pie',
- radius: ['40%', '70%'],
- center: ['50%', '50%'],
- data: [
- { value: 25, name: '娼滃湪瀹㈡埛', itemStyle: { color: '#00d4ff' } },
- { value: 25, name: '鎰忓悜瀹㈡埛', itemStyle: { color: '#0099ff' } },
- { value: 25, name: '绛剧害瀹㈡埛', itemStyle: { color: '#6666ff' } },
- { value: 25, name: '娴佸け瀹㈡埛', itemStyle: { color: '#ffcc00' } }
- ],
- label: {
- show: false
- }
- }]
- }
- chart.setOption(option)
- charts.value.push(chart)
-}
-
-// 閿�鍞煴鐘跺浘
-const initSalesBarChart = () => {
- if (!salesBarChartRef.value) return
- const chart = echarts.init(salesBarChartRef.value)
- const option = {
- tooltip: {
- trigger: 'axis'
- },
- xAxis: {
- type: 'category',
- data: ['6/9', '6/10', '6/11', '6/12', '6/13'],
- axisLine: { lineStyle: { color: '#333' } },
- axisLabel: { color: '#B8C8E0' },
- },
- yAxis: {
- type: 'value',
- axisLine: { show: false },
- axisTick: { show: false },
- axisLabel: { color: '#B8C8E0' },
- splitLine: { lineStyle: { color: '#333' } }
- },
- series: [{
- data: [150, 200, 180, 220, 190],
- type: 'bar',
- itemStyle: {
- color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
- { offset: 0, color: 'rgba(0,164,237,0)' },
- { offset: 1, color: '#4EE4FF' }
- ])
- }
- }]
- }
- chart.setOption(option)
- charts.value.push(chart)
-}
-
-// 鏁版嵁缁熻妯悜鏌辩姸鍥�
-const initDataBarChart = () => {
- if (!dataBarChartRef.value) return
- const chart = echarts.init(dataBarChartRef.value)
- const option = {
- tooltip: {
- trigger: 'axis'
- },
- grid: {
- left: '10%',
- right: '10%',
- top: '10%',
- bottom: '10%'
- },
- xAxis: {
- type: 'value',
- axisLine: { show: false },
- axisTick: { show: false },
- axisLabel: { color: '#B8C8E0' },
- splitLine: { lineStyle: { color: '#333' } }
- },
- yAxis: {
- type: 'category',
- data: ['璁捐鏁版嵁', '璐㈠姟鏁版嵁', '鐢熶骇鏁版嵁', '鍚堝悓鏁版嵁'],
- axisLine: { lineStyle: { color: '#333' } },
- axisLabel: { color: '#B8C8E0' }
- },
- series: [{
- data: [80, 100, 120, 90],
- type: 'bar',
- itemStyle: {
- color: new echarts.graphic.LinearGradient(0, 0, 1, 0, [
- { offset: 0, color: 'rgba(0,164,237,0)' },
- { offset: 1, color: '#4EE4FF' }
- ])
- }
- }]
- }
- chart.setOption(option)
- charts.value.push(chart)
-}
-
-// 璐㈠姟鍒嗘瀽闈㈢Н鍥�
-const initFinancialAreaChart = () => {
- if (!financialAreaChartRef.value) return
- const chart = echarts.init(financialAreaChartRef.value)
- const option = {
- tooltip: {
- trigger: 'axis'
- },
- grid: {
- left: '10%',
- right: '10%',
- top: '10%',
- bottom: '20%'
- },
- xAxis: {
- type: 'category',
- data: ['6/9', '6/10', '6/11', '6/12', '6/13'],
- axisLine: { lineStyle: { color: '#333' } },
- axisLabel: { color: '#B8C8E0' }
- },
- yAxis: {
- type: 'value',
- axisLine: { show: false },
- axisTick: { show: false },
- axisLabel: { color: '#B8C8E0' },
- splitLine: { lineStyle: { color: '#333' } }
- },
- series: [{
- data: [150, 180, 200, 170, 190],
- type: 'line',
- areaStyle: {
- color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
- { offset: 0, color: 'rgba(0, 212, 255, 0.3)' },
- { offset: 1, color: 'rgba(0, 212, 255, 0.1)' }
- ])
- },
- lineStyle: { color: '#00d4ff' },
- itemStyle: { color: '#00d4ff' }
- }]
- }
- chart.setOption(option)
- charts.value.push(chart)
-}
-
-// 瀹炴椂鏁版嵁鎶樼嚎鍥�
-const initRealtimeLineChart = () => {
- if (!realtimeLineChartRef.value) return
- const chart = echarts.init(realtimeLineChartRef.value)
- const option = {
- tooltip: {
- trigger: 'axis'
- },
- grid: {
- left: '10%',
- right: '10%',
- top: '10%',
- bottom: '20%'
- },
- xAxis: {
- type: 'category',
- data: ['6/9', '6/10', '6/11', '6/12', '6/13'],
- axisLine: { lineStyle: { color: '#333' } },
- axisLabel: { color: '#B8C8E0' }
- },
- yAxis: {
- type: 'value',
- axisLine: { show: false },
- axisTick: { show: false },
- axisLabel: { color: '#B8C8E0' },
- splitLine: { lineStyle: { color: '#333' } }
- },
- series: [
- {
- name: '鏁版嵁1',
- data: [120, 140, 160, 130, 150],
- type: 'line',
- lineStyle: { color: '#00d4ff' },
- itemStyle: { color: '#00d4ff' }
- },
- {
- name: '鏁版嵁2',
- data: [100, 120, 140, 110, 130],
- type: 'line',
- lineStyle: { color: '#0099ff' },
- itemStyle: { color: '#0099ff' }
- }
- ]
- }
- chart.setOption(option)
- charts.value.push(chart)
-}
-
// 鍏ㄥ睆鍔熻兘瀹炵幇 - 閽堝data-dashboard鍏冪礌
const toggleFullscreen = () => {
- const element = document.querySelector('.data-dashboard')
-
- if (!element) return
-
- if (!isFullscreen.value) {
- if (element.requestFullscreen) {
- element.requestFullscreen()
- } else if (element.webkitRequestFullscreen) {
- element.webkitRequestFullscreen()
- } else if (element.msRequestFullscreen) {
- element.msRequestFullscreen()
- }
- } else {
- if (document.exitFullscreen) {
- document.exitFullscreen()
- } else if (document.webkitExitFullscreen) {
- document.webkitExitFullscreen()
- } else if (document.msExitFullscreen) {
- document.msExitFullscreen()
- }
- }
+ const element = document.querySelector('.data-dashboard')
+
+ if (!element) return
+
+ if (!isFullscreen.value) {
+ if (element.requestFullscreen) {
+ element.requestFullscreen()
+ } else if (element.webkitRequestFullscreen) {
+ element.webkitRequestFullscreen()
+ } else if (element.msRequestFullscreen) {
+ element.msRequestFullscreen()
+ }
+ } else {
+ if (document.exitFullscreen) {
+ document.exitFullscreen()
+ } else if (document.webkitExitFullscreen) {
+ document.webkitExitFullscreen()
+ } else if (document.msExitFullscreen) {
+ document.msExitFullscreen()
+ }
+ }
}
// 鐩戝惉鍏ㄥ睆鍙樺寲浜嬩欢
@@ -1115,7 +958,7 @@
// 浣跨敤nextTick纭繚DOM瀹屽叏娓叉煋鍚庡啀鍒濆鍖栧浘琛�
nextTick(() => {
// 鍒濆鍖朼utofit鑷�傚簲
- autofit.init({ dh: 1440, dw: 2560, el: '.data-dashboard', resize: true }, false)
+ autofit.init({ dh: 1080, dw: 1920, el: '.data-dashboard', resize: true }, false)
// 娣诲姞鑷姩婊氬姩鍔ㄧ敾鏁堟灉 - 瀹㈡埛淇℃伅鍒楄〃
const contractList = refContractList.value
@@ -1177,6 +1020,7 @@
window.addEventListener('resize', handleResize)
analysisCustomer()
qualityStatisticsInfo()
+ qualityProductQualifiedRateInfo()
accountStatisticsInfo()
getNum()
getLedgerNum()
@@ -1242,8 +1086,8 @@
<style scoped>
.data-dashboard {
position: relative;
- width: 100vw;
- overflow: hidden;
+ width: 100%;
+ height: 100%;
background-image: url("@/assets/BI/backImage@2x.png");
background-size: cover;
background-position: center;
@@ -1280,18 +1124,6 @@
z-index: 9999;
}
-/* 鍏ㄥ睆鐘舵�佷笅鐨勫唴瀹瑰尯鍩熼�傞厤 */
-.data-dashboard:fullscreen .dashboard-content {
- height: calc(100vh - 120px);
-}
-
-.data-dashboard:-webkit-full-screen .dashboard-content {
- height: calc(100vh - 120px);
-}
-
-.data-dashboard:-ms-fullscreen .dashboard-content {
- height: calc(100vh - 120px);
-}
.dashboard-header {
position: relative;
@@ -1301,6 +1133,17 @@
background-size: cover;
background-position: center;
background-repeat: no-repeat;
+ display: flex;
+ align-items: center;
+ justify-content: center;
+}
+
+.factory-name {
+ font-weight: 600;
+font-size: 52px;
+color: #FFFFFF;
+top: 32px;
+position: absolute;
}
.fullscreen-btn {
@@ -1332,7 +1175,7 @@
display: flex;
gap: 30px;
padding: 0 30px;
- height: calc(100vh - 120px);
+ height: calc(100% - 120px);
overflow: hidden;
}
@@ -1360,7 +1203,7 @@
border: 1px solid #1A58B0;
padding: 18px;
width: 100%;
- height: 540px;
+ height: 520px;
}
.panel-title-second {
height: 60px;
@@ -1413,21 +1256,12 @@
background-position: center;
background-repeat: no-repeat;
}
-.panel-item {
- background: rgba(0, 20, 60, 0.8);
- border: 1px solid rgba(0, 212, 255, 0.3);
- border-radius: 12px;
- padding: 30px;
- backdrop-filter: blur(10px);
- min-height: 200px;
-}
.panel-header {
background-image: url("@/assets/BI/kehuhetongback@2x.png");
background-size: 100% 100%;
background-position: center;
background-repeat: no-repeat;
- height: 36px;
}
.panel-title {
@@ -1667,9 +1501,6 @@
font-size: 20px;
color: #FFFFFE;
}
-.data-statistics {
- flex: 1;
-}
.financial-header {
background-image: url("@/assets/BI/caiwufenxiback@2x.png");
background-size: 100% 100%;
@@ -1683,66 +1514,6 @@
color: #D9ECFF;
padding-left: 46px;
line-height: 36px;
-}
-.data-legend {
- display: flex;
- flex-wrap: wrap;
- gap: 20px;
- margin-bottom: 20px;
-}
-
-.legend-item {
- display: flex;
- align-items: center;
- gap: 12px;
-}
-
-.legend-color {
- width: 12px;
- height: 12px;
- border-radius: 4px;
-}
-
-.legend-text {
- font-size: 12px;
- color: #999;
-}
-
-.horizontal-bar-chart {
- height: 150px;
-}
-
-.financial-analysis,
-.realtime-analysis {
- flex: 1;
-}
-
-.financial-tabs,
-.realtime-tabs {
- display: flex;
- gap: 16px;
- margin-bottom: 20px;
-}
-
-.tab {
- padding: 12px 24px;
- background: rgba(0, 0, 0, 0.3);
- border: 1px solid rgba(0, 212, 255, 0.3);
- border-radius: 6px;
- color: #999;
- cursor: pointer;
- transition: all 0.3s;
-}
-
-.tab.active {
- background: rgba(0, 212, 255, 0.2);
- color: #00d4ff;
- border-color: #00d4ff;
-}
-
-.area-chart,
-.line-chart {
- height: 150px;
}
/* 鑷畾涔夊崟閫夋寜閽粍鏍峰紡 */
--
Gitblit v1.9.3