更新首页统计数据

ZRAdmin-vue-main/src/api/business/index.js

@@ -1 +1,49 @@
 import request from '@/utils/request'
+//获取日质检数，区分关键件非关键件
+export function GetQaCount(query) {
+  return request({
+    url: 'business/QaInspectRecord/DailyStatistics',
+    method: 'get',
+    params: query,
+  })
+}
+//获取日入库数，区分关键件非关键件
+export function GetInCount(query) {
+  return request({
+    url: 'business/InInstoreRecord/DailyStatistics',
+    method: 'get',
+    params: query,
+  })
+}
+//获取日出库数，区分关键件非关键件
+export function GetOutCount(query) {
+  return request({
+    url: 'business/OutOutstoreRecord/DailyStatistics',
+    method: 'get',
+    params: query,
+  })
+}
+//获取日装配数，区分关键件非关键件
+export function GetAssCount(query) {
+  return request({
+    url: 'business/OutAssembleRecord/DailyStatistics',
+    method: 'get',
+    params: query,
+  })
+}
+//获取关键件非关键件数量
+export function GetKeyProportion(query) {
+  return request({
+    url: 'business/StkBalanceDtl/KeyStatistics',
+    method: 'get',
+    params: query,
+  })
+}
+//获取物料类别分别数量
+export function GetCategoryProportion(query) {
+  return request({
+    url: 'business/StkBalanceDtl/CategoryStatistics',
+    method: 'get',
+    params: query,
+  })
+}

ZRAdmin-vue-main/src/views/dashboard/BarChart.vue

@@ -3,19 +3,14 @@
 </template>
 
 <script setup>
+import { faHandsAmericanSignLanguageInterpreting } from '@fortawesome/free-solid-svg-icons';
 import * as echarts from 'echarts'
 import { inject } from 'vue'
 let chart = null
+
 const { proxy } = getCurrentInstance()
 const animationDuration = 2000
-const data_qa = inject('statistics_qa')
-const data_qa_key = inject('statistics_qa_key')
-const data_in = inject('statistics_in')
-const data_in_key = inject('statistics_in_key')
-const data_out = inject('statistics_out')
-const data_out_key = inject('statistics_out_key')
-const data_ass = inject('statistics_ass')
-const data_ass_key = inject('statistics_ass_key')
+const data = inject('DailyStatistics')
 const props = defineProps({
   className: {
     type: String,
@@ -69,13 +64,32 @@ function initChart() {
       {
         name: '关键件',
         type: 'bar',
-        data: [data_qa_key, data_in_key, data_out_key, data_ass_key],
+        data: [data.qa_key, data.in_key, data.out_key, data.ass_key],
         animationDuration,
       },
       {
         name: '非关键件',
         type: 'bar',
-        data: [data_qa, data_in, data_out, data_ass],
+        data: [data.qa, data.in, data.out, data.ass],
+        animationDuration,
+      },
+    ],
+  })
+}
+
+function setOptions(data) {
+  chart.setOption({
+    series: [
+      {
+        name: '关键件',
+        type: 'bar',
+        data: [data.qa_key, data.in_key, data.out_key, data.ass_key],
+        animationDuration,
+      },
+      {
+        name: '非关键件',
+        type: 'bar',
+        data: [data.qa, data.in, data.out, data.ass],
         animationDuration,
       },
     ],
@@ -84,4 +98,11 @@ function initChart() {
 onMounted(() => {
   initChart()
 })
+window.onresize = function () {
+  chart.resize()
+}
+watch(data, (newData, oldData) => {
+  setOptions(newData)
+}
+)
 </script>

ZRAdmin-vue-main/src/views/dashboard/PieChart_category.vue

@@ -6,8 +6,7 @@
 import * as echarts from 'echarts'
 import { inject } from 'vue'
 const { proxy } = getCurrentInstance()
-const data0 = inject('statistics_category0')
-const data1 = inject('statistics_category1')
+const data = inject('groupByCategory')
 let chart = null
 const props = defineProps({
   className: {
@@ -53,8 +52,22 @@ function initChart() {
           formatter: '{b} : {c}'
         },
         data: [
-          { value: data0, name: '外协件' },
-          { value: data1, name: '外购件' },
+          { value: data.category0, name: '外协件' },
+          { value: data.category1, name: '外购件' },
+        ],
+        animationEasing: 'cubicInOut',
+        animationDuration: 2000,
+      },
+    ],
+  })
+}
+function setOptions(data) {
+  chart.setOption({
+    series: [
+      {
+        data: [
+          { value: data.category0, name: '外协件' },
+          { value: data.category1, name: '外购件' },
         ],
         animationEasing: 'cubicInOut',
         animationDuration: 2000,
@@ -65,4 +78,11 @@ function initChart() {
 onMounted(() => {
   initChart()
 })
+window.onresize = function () {
+  chart.resize()
+}
+watch(data, (newData, oldData) => {
+  setOptions(newData)
+}
+)
 </script>

ZRAdmin-vue-main/src/views/dashboard/PieChart_key.vue

@@ -6,8 +6,7 @@
 import * as echarts from 'echarts'
 import { inject } from 'vue'
 const { proxy } = getCurrentInstance()
-const data = inject('statistics_unkey')
-const data_key = inject('statistics_key')
+const data = inject('groupByKey')
 let chart = null
 const props = defineProps({
   className: {
@@ -34,7 +33,7 @@ function initChart() {
     },
     legend: {
       left: 'center',
-      bottom: '5%',
+      bottom: '1%',
       data: ['关键件', '非关键件'],
     },
     series: [
@@ -51,8 +50,22 @@ function initChart() {
           formatter: '{b} : {c}'
         },
         data: [
-          { value: data_key, name: '关键件' },
-          { value: data, name: '非关键件' },
+          { value: data.key, name: '关键件' },
+          { value: data.unkey, name: '非关键件' },
+        ],
+        animationEasing: 'cubicInOut',
+        animationDuration: 2000,
+      },
+    ],
+  })
+}
+function setOptions(data) {
+  chart.setOption({
+    series: [
+      {
+        data: [
+          { value: data.key, name: '关键件' },
+          { value: data.unkey, name: '非关键件' },
         ],
         animationEasing: 'cubicInOut',
         animationDuration: 2000,
@@ -63,4 +76,11 @@ function initChart() {
 onMounted(() => {
   initChart()
 })
+window.onresize = function () {
+  chart.resize()
+}
+watch(data, (newData, oldData) => {
+  setOptions(newData)
+}
+)
 </script>

ZRAdmin-vue-main/src/views/index_v1.vue

@@ -31,8 +31,9 @@
               </el-col>
               <el-col :span=intStatColWidth1>
                 <div class="statistic-card">
-                  <el-statistic :value=chartBar_qa_key>
+                  <el-statistic :value="DailyStatistics.qa_key">
                     <template #suffix>
+                      <span class="than-yesterday-label">相比昨天</span>
                       <span class="than-yesterday green">
                         24%<el-icon>
                           <CaretBottom />
@@ -49,8 +50,9 @@
               </el-col>
               <el-col :span=intStatColWidth1>
                 <div class="statistic-card">
-                  <el-statistic :value=chartBar_in_key>
+                  <el-statistic :value="DailyStatistics.in_key">
                     <template #suffix>
+                      <span class="than-yesterday-label">相比昨天</span>
                       <span class="than-yesterday red">
                         24%<el-icon>
                           <CaretTop />
@@ -67,8 +69,9 @@
               </el-col>
               <el-col :span=intStatColWidth1>
                 <div class="statistic-card">
-                  <el-statistic :value=chartBar_out_key>
+                  <el-statistic :value="DailyStatistics.out_key">
                     <template #suffix>
+                      <span class="than-yesterday-label">相比昨天</span>
                       <span class="than-yesterday red">
                         24%<el-icon>
                           <CaretTop />
@@ -85,8 +88,9 @@
               </el-col>
               <el-col :span=intStatColWidth1>
                 <div class="statistic-card">
-                  <el-statistic :value=chartBar_ass_key>
+                  <el-statistic :value="DailyStatistics.ass_key">
                     <template #suffix>
+                      <span class="than-yesterday-label">相比昨天</span>
                       <span class="than-yesterday red">
                         24%<el-icon>
                           <CaretTop />
@@ -103,8 +107,9 @@
               </el-col>
               <el-col :span=intStatColWidth1>
                 <div class="statistic-card">
-                  <el-statistic :value=totalUnkey>
+                  <el-statistic :value="totalUnkey">
                     <template #suffix>
+                      <span class="than-yesterday-label">相比昨天</span>
                       <span class="than-yesterday red">
                         24%<el-icon>
                           <CaretTop />
@@ -195,6 +200,9 @@ import useSocketStore from '@/store/modules/socket'
 import logoL from '@/assets/logo/logo-L.png'
 
 import { list as listOperLog } from '@/api/monitor/operlog'
+
+import { GetQaCount, GetInCount, GetOutCount, GetAssCount, GetKeyProportion, GetCategoryProportion } from '@/api/business/index.js'
+
 const strStatQA = '关键件质检数统计：'
 const strStatInstore = '关键件入库数统计：'
 const strStatOutstore = '关键件出库数统计：'
@@ -206,8 +214,8 @@ const strStatOutstoreTitle = '关键件出库数统计'
 const strStatAssembleTitle = '关键件装配数统计'
 const strStatWorkTitle = '非关键件作业数统计'
 
-const intStatColWidth0 = 10
-const intStatColWidth1 = 10
+const intStatColWidth0 = 8
+const intStatColWidth1 = 12
 const intStatColWidth2 = 10
 
 const data = {
@@ -280,34 +288,42 @@ const data = {
 }
 const { proxy } = getCurrentInstance()
 // 每日作业数
-const statistics_qa = 0
-provide('statistics_qa', statistics_qa)
-const statistics_qa_key = 0
-provide('statistics_qa_key', statistics_qa_key)
-const statistics_in = 0
-provide('statistics_in', statistics_in)
-const statistics_in_key = 0
-provide('statistics_in_key', statistics_in_key)
-const statistics_out = 0
-provide('statistics_out', statistics_out)
-const statistics_out_key = 0
-provide('statistics_out_key', statistics_out_key)
-const statistics_ass = 0
-provide('statistics_ass', statistics_ass)
-const statistics_ass_key = 0
-provide('statistics_ass_key', statistics_ass_key)
+const DailyStatistics = reactive({
+  qa: 0,
+  qa_key: 0,
+  in: 0,
+  in_key: 0,
+  out: 0,
+  out_key: 0,
+  ass: 0,
+  ass_key: 0,
+})
+provide('DailyStatistics', DailyStatistics)
+//昨日作业数
+const YesterdayStatistics = reactive({
+  qa: 0,
+  qa_key: 0,
+  in: 0,
+  in_key: 0,
+  out: 0,
+  out_key: 0,
+  ass: 0,
+  ass_key: 0,
+})
 // 非关键件一共作业数
-const totalUnkey = computed(() => { return statistics_qa + statistics_in + statistics_out + statistics_ass })
+var totalUnkey = computed(() => { return DailyStatistics.qa + DailyStatistics.in + DailyStatistics.out + DailyStatistics.ass })
 //关键件占比
-const statistics_unkey = 0//非关键件数
-provide('statistics_unkey', statistics_unkey)
-const statistics_key = 0//关键件数
-provide('statistics_key', statistics_key)
+const groupByKey = reactive({
+  unkey: 0,
+  key: 0,
+})
+provide('groupByKey', groupByKey)
 //物料类别占比
-const statistics_category0 = 0
-provide('statistics_category0', statistics_category0)
-const statistics_category1 = 0
-provide('statistics_category1', statistics_category1)
+const groupByCategory = reactive({
+  category0: 0,
+  category1: 0,
+})
+provide('groupByCategory', groupByCategory)
 
 const queryParams = ref({
   pageNum: 1,
@@ -337,6 +353,87 @@ function getList() {
     }
   })
 }
+function getStatistics() {
+  GetQaCount().then((response) => {
+    if (response.code == 200) {
+      // console.log(response.data)
+      for (var i = 0; i < response.data.length; i++) {
+        if (response.data[i].keyFlag) {
+          DailyStatistics.qa_key = response.data[i]["sumQty"]
+        }
+        else {
+          DailyStatistics.qa = response.data[i]["sumQty"]
+        }
+      }
+    }
+  })
+  GetInCount().then((response) => {
+    if (response.code == 200) {
+      // console.log(response.data)
+      for (var i = 0; i < response.data.length; i++) {
+        if (response.data[i].keyFlag) {
+          DailyStatistics.in_key = response.data[i]["sumQty"]
+        }
+        else {
+          DailyStatistics.in = response.data[i]["sumQty"]
+        }
+      }
+    }
+  })
+  GetOutCount().then((response) => {
+    if (response.code == 200) {
+      // console.log(response.data)
+      for (var i = 0; i < response.data.length; i++) {
+        if (response.data[i].keyFlag) {
+          DailyStatistics.out_key = response.data[i]["sumQty"]
+        }
+        else {
+          DailyStatistics.out = response.data[i]["sumQty"]
+        }
+      }
+    }
+  })
+  GetAssCount().then((response) => {
+    if (response.code == 200) {
+      // console.log(response.data)
+      for (var i = 0; i < response.data.length; i++) {
+        if (response.data[i].keyFlag) {
+          DailyStatistics.ass_key = response.data[i]["sumQty"]
+        }
+        else {
+          DailyStatistics.ass = response.data[i]["sumQty"]
+        }
+      }
+    }
+  })
+  GetKeyProportion().then((response) => {
+    if (response.code == 200) {
+      // console.log(response.data)
+      for (var i = 0; i < response.data.length; i++) {
+        if (response.data[i].keyFlag) {
+          groupByKey.key = response.data[i]["sumQty"]
+        }
+        else {
+          groupByKey.unkey = response.data[i]["sumQty"]
+        }
+      }
+    }
+  })
+  GetCategoryProportion().then((response) => {
+    if (response.code == 200) {
+      console.log(response.data)
+      for (var i = 0; i < response.data.length; i++) {
+        if (response.data[i].category == "外协件") {
+          groupByCategory.category0 = response.data[i]["sumQty"]
+        }
+        else if (response.data[i].category == "外购件") {
+          groupByCategory.category1 = response.data[i]["sumQty"]
+        }
+      }
+    }
+  })
+}
+getStatistics()
 let lineChartData = reactive([])
 const dataType = ref(null)
 function handleSetLineChartData(type) {
@@ -527,8 +624,13 @@ getList()
 }
 
 .than-yesterday {
-  font-size: 16px;
-  margin-left: 12px;
+  font-size: 18px;
+  margin-left: 10px;
+}
+
+.than-yesterday-label {
+  font-size: 12px;
+  margin-left: 15px;
 }
 
 .green {