From ddbb2bd2691629336faa4491a59fdc3dc3c5934e Mon Sep 17 00:00:00 2001
From: gaoshp <291585735@qq.com>
Date: 星期一, 17 六月 2024 23:44:23 +0800
Subject: [PATCH] update

---
 src/views/mdc/components/Time.vue |  164 ++++++++++++++++++++++++++++++++++++------------------
 1 files changed, 109 insertions(+), 55 deletions(-)

diff --git a/src/views/mdc/components/Time.vue b/src/views/mdc/components/Time.vue
index 607b5e9..5bb8fcd 100644
--- a/src/views/mdc/components/Time.vue
+++ b/src/views/mdc/components/Time.vue
@@ -1,20 +1,22 @@
 <!--
  * @Date: 2024-04-18 21:52:18
  * @LastEditors: Sneed
- * @LastEditTime: 2024-04-20 19:43:36
+ * @LastEditTime: 2024-06-17 23:37:51
  * @FilePath: /belleson-frontend/Users/mache/Documents/demo/cps-web/src/views/mdc/components/Time.vue
 -->
 <template>
     <el-row>
         <el-col>
             <el-button-group>
-                <el-button :type="btnListActive == item.id ? 'primary' : ''" v-for="item in btnList" :key="item.id">{{
-                    item.title }}</el-button>
+                <el-button size="small" @click="statisticalMethod = item.value"
+                    :type="statisticalMethod == item.value ? 'primary' : ''" v-for="item in btnList"
+                    :key="item.value">{{
+                        item.label }}</el-button>
             </el-button-group>
         </el-col>
         <el-col style="margin-top: 12px;">
             <el-card shadow="never">
-                <scEcharts height="300px" :option="option2"></scEcharts>
+                <scEcharts height="300px" :option="option2" v-if="option2.title" />
             </el-card>
         </el-col>
         <el-col>
@@ -24,26 +26,12 @@
             <scTable ref="table" row-key="id" border :params="params" :apiObj="apiObj" stripe>
                 <el-table-column prop="workstationCode" label="宸ヤ綅缂栫爜" />
                 <el-table-column prop="workstationName" label="宸ヤ綅鍚嶇О" />
-                <el-table-column prop="" label="鐝1">
+                <el-table-column prop="" :label="item" v-for="item in cols" :key="item">
                     <template #default="scope">
-                        <span>{{ scope.row.nameData['1'] }}</span>
+                        <span>{{ colnameFn(scope.row.data[item]) }}</span>
                     </template>
                 </el-table-column>
-                <el-table-column prop="" label="鏁堢巼">
-                    <template #default="scope">
-                        <span>{{ scope.row.data['1'] }}</span>
-                    </template>
-                </el-table-column>
-                <el-table-column prop="" label="鐝2">
-                    <template #default="scope">
-                        <span>{{ scope.row.nameData['2'] }}</span>
-                    </template>
-                </el-table-column>
-                <el-table-column prop="" label="鏁堢巼">
-                    <template #default="scope">
-                        <span>{{ scope.row.data['2'] }}</span>
-                    </template>
-                </el-table-column>
+
             </scTable>
         </el-col>
     </el-row>
@@ -52,6 +40,31 @@
 <script>
 import scEcharts from '@/components/scEcharts';
 export default {
+    props: {
+        url: {
+            default: '/api/blade-mdc/efficiency-analysis',
+            type: String,
+        },
+        options: {
+            default() {
+                return {}
+            },
+        },
+        colnameFn: {
+            type: Function,
+            default: val => {
+                if (isNaN(val)) return '-'
+                return `${(val ? val * 100 : 0).toFixed(2)}%`
+            }
+        },
+        resFn: {
+            type: Function,
+            default: val => {
+                if (isNaN(val)) return 0
+                return (val - 0) * 100
+            }
+        }
+    },
     components: {
         scEcharts
     },
@@ -59,15 +72,39 @@
         return {
             apiObj: '',
             params: {},
-            statisticalMethod: 'SHIFT',
-            btnList: [],
-            btnListActive: '',
+            statisticalMethod: 'DAY',
+            btnList: [
+                {
+                    label: '鎸夋棩鏌ョ湅',
+                    value: 'DAY',
+                },
+                {
+                    label: '鎸夊懆鏌ョ湅',
+                    value: 'WEEK',
+                },
+                {
+                    label: '鎸夋湀鏌ョ湅',
+                    value: 'MONTH',
+                },
+            ],
+            cols: [],
             chartsData: [],
-            option2: null,
+            option2: {},
+        }
+    },
+    watch: {
+        statisticalMethod(val) {
+            this.query({
+                ...this.params,
+            })
+            this.queryChart({
+                ...this.params,
+            })
         }
     },
     methods: {
         init(params) {
+            this.params = params
             this.getTime({
                 endDate: params.endDate,
                 startDate: params.startDate,
@@ -75,26 +112,24 @@
             }).then(res => {
                 this.query({
                     ...params,
-                    startDate: this.btnListActive,
-                    endDate: this.btnListActive
+                    statisticalMethod: this.statisticalMethod
                 })
                 this.queryChart({
                     ...params,
-                    startDate: this.btnListActive,
-                    endDate: this.btnListActive
+                    statisticalMethod: this.statisticalMethod
                 })
             })
 
         },
         getTime(data) {
-            return this.$HTTP.post('/api/blade-mdc/efficiency-analysis/interval', {
-                ...data
-            }).then(res => {
-                if (res.code === 200) {
-                    this.btnList = res.data
-                    this.btnListActive = res?.data?.[0]?.id
-                }
-            })
+            return Promise.resolve()
+            // return this.$HTTP.post('/api/blade-mdc/efficiency-analysis/interval', {
+            //     ...data
+            // }).then(res => {
+            //     if (res.code === 200) {
+            //         this.btnList = res.data
+            //     }
+            // })
         },
         queryChart(data) {
             let params = {
@@ -105,12 +140,13 @@
                 queryType: 0,
                 statisticalMethod: this.statisticalMethod
             }
-            return this.$HTTP.post('/api/blade-mdc/efficiency-analysis', dataSend, { params }).then(res => {
+            this.option2 = {}
+            return this.$HTTP.post(this.url, dataSend, { params }).then(res => {
                 this.chartsData = res.data.items.records
                 let option2 = {
-                    legend: {
-                        type: 'plain',
-                    },
+                    // legend: {
+                    //     type: 'plain',
+                    // },
                     title: {
                         text: '缁熻鍥捐〃',
                         subtext: '',
@@ -123,31 +159,46 @@
                     },
                     xAxis: {
                         type: 'category',
+                        axisLabel: {
+                            interval: 'auto',
+                        }
                     },
                     yAxis: {
-                        type: 'value'
+                        type: 'value',
+                        axisLabel: {
+                            formatter: (value) => {
+                                return value + '%'
+                            }
+                        },
                     },
                     dataZoom: [
                         { type: 'slider' }
                     ],
                     dataset: {
-                        source: [
-                            ['product', '鐝1', '鐝2'],
-
-                        ]
+                        source: []
                     },
-                    series: [{
-                        type: 'bar',
-                    },
-                    {
-                        type: 'bar',
-                    }]
+                    ...this.options,
+                    series: [],
                 }
-                option2.dataset.source = [['product', '鐝1', '鐝2']]
+                let source1 = ['product']
+                let row = res.data.items.records[0]
+                Object.values(row.nameData).forEach(v => {
+                    option2.series.push({
+                        type: 'bar',
+                    })
+                    source1.push(v)
+                })
+                option2.dataset.source = [source1]
                 res.data.items.records.forEach(v => {
-                    option2.dataset.source.push([v.workstationName, v.data[1] === '-' ? 0 : v.data[1], v.data[2] === '-' ? 0 : v.data[1]])
+                    let current = [v.id]
+                    Object.keys(v.nameData).forEach(key => {
+                        current.push(this.resFn(v.data[key]))
+                        // current.push((v.data[key] - 0) * 100)
+                    })
+                    option2.dataset.source.push(current)
                 });
                 this.option2 = option2
+                console.log(option2)
             })
         },
         query(params) {
@@ -167,7 +218,10 @@
                     delete dataSend.size
                     delete dataSend.order
                     delete dataSend.prop
-                    return await this.$HTTP.post('/api/blade-mdc/efficiency-analysis', dataSend, { params }).then(res => {
+                    return await this.$HTTP.post(this.url, dataSend, { params }).then(res => {
+                        let row = res.data.items?.records[0]?.data || {}
+                        this.cols = Object.keys(row)
+                        console.log(this.cols)
                         return {
                             ...res,
                             data: res.data.items

--
Gitblit v1.9.3