From 74a135c4f8b46d48a4997ac0e40ac86055b4a1a4 Mon Sep 17 00:00:00 2001 From: licp <lichunping@guanfang.com.cn> Date: 星期三, 17 四月 2024 16:57:25 +0800 Subject: [PATCH] 优化标准库 --- src/components/view/b2-standard.vue | 21 ++++-- src/components/view/b4-daily-business-statistics.vue | 79 +++++++++++++++++--------- src/util/echarts.js | 6 + src/components/view/index-index.vue | 67 ++++++++++++++++++++++ 4 files changed, 135 insertions(+), 38 deletions(-) diff --git a/src/components/view/b2-standard.vue b/src/components/view/b2-standard.vue index d2ffaff..6271490 100644 --- a/src/components/view/b2-standard.vue +++ b/src/components/view/b2-standard.vue @@ -109,7 +109,8 @@ <el-tree :data="list" ref="tree" :props="{ children: 'children', label: 'label' }" node-key="label" :filter-node-method="filterNode" @node-click="handleNodeClick" highlight-current @node-expand="nodeOpen" @node-collapse="nodeClose" v-loading="treeLoad" :expand-on-click-node="false" - :default-expanded-keys="expandedKeys"> + :default-expanded-keys="expandedKeys" + style="max-height: 500px;overflow-y: scroll;scrollbar-width: none;"> <div class="custom-tree-node" slot-scope="{ node, data }"> <el-row style="width: 100%;"> <el-col :span="21" :class="{sort:node.level>3}"> @@ -128,20 +129,20 @@ </div> <div class="right"> <el-row class="title"> - <el-col :span="10" style="font-size: 14px;color: #999;">{{selectTree}}</el-col> - <el-col :span="selectTree==''?24:14" style="text-align: right;" v-if="selectTree!=''"> - <!-- <el-button size="small" type="primary" @click="addStandardDia = true" + <el-col :span="24" style="font-size: 14px;color: #999;">{{selectTree}}</el-col> + <!-- <el-col :span="selectTree==''?24:14" style="text-align: right;" v-if="selectTree!=''"> + <el-button size="small" type="primary" @click="addStandardDia = true" v-if="addStandardMethod">鏂板鏍囧噯</el-button> <el-button size="small" type="primary" @click="addProductDia = true" v-if="addStandardProduct">鏂板椤圭洰</el-button> <el-button size="small" @click="delStandardProductByIds" v-if="delStandardProduct"> <i class="el-icon-delete" style="color: #3A7BFA;"></i> <span style="color: #3A7BFA;">鍒犻櫎</span> - </el-button> --> - </el-col> + </el-button> + </el-col> --> </el-row> <el-row class="standard_table" v-loading="tableLoad"> <el-table class="el-table" :data="standardList" style="width: 100%;" height="220px" tooltip-effect="dark" - highlight-current-row @row-click="rowClick"> + highlight-current-row @row-click="rowClick" ref="standard"> <el-table-column prop="code" label="鏍囧噯缂栧彿" show-overflow-tooltip> <template slot-scope="scope"> <span style="color: red;font-size: 14px;">{{scope.row['code']}}</span> @@ -596,6 +597,12 @@ }).then(res => { this.tableLoad = false this.standardList = res.data.standardMethodList + if(this.standardList&&this.standardList.length>0){ + this.$refs.standard.setCurrentRow(this.standardList[0]) + this.rowClick(this.standardList[0]) + }else{ + this.productList = []; + } }) }, getPower() { diff --git a/src/components/view/b4-daily-business-statistics.vue b/src/components/view/b4-daily-business-statistics.vue index 6155c2b..743edf6 100644 --- a/src/components/view/b4-daily-business-statistics.vue +++ b/src/components/view/b4-daily-business-statistics.vue @@ -1,5 +1,5 @@ <template> -<div class="daily-main"> +<div class="daily-main" v-loading="loading"> <div class="daily-content" style="height:100%"> <p style="font-size: 16px;padding:19.5px 0px">姣忔棩涓氬姟缁熻</p> <el-row :gutter="20"> @@ -7,10 +7,10 @@ <div class="daily-card daily-head"> <div class="daily-head-left"> <h4>浠婃棩浠诲姟鎺ユ敹</h4> - <span >2453</span> + <span>{{ pageData.RECEIVE }}</span> <div class="daily-head-left-info"> - <img src="../../../static/img/daliy-up.svg" alt=""> - <span :class="{active:false}" class="num"> 8.5% </span> + <img :src="`../../../static/img/daliy-${pageData.RECEIVE_RATIO<0?'down':'up'}.svg`" alt=""> + <span :class="{active:pageData.RECEIVE_RATIO<0}" class="num" v-html="` ${handleData(pageData.RECEIVE_RATIO)}% `"></span> <span style="font-size: 12px;">杈冩槰澶�</span> </div> </div> @@ -21,10 +21,10 @@ <div class="daily-card daily-head"> <div class="daily-head-left"> <h4>浠婃棩浠诲姟瀹屾垚</h4> - <span >1687</span> + <span >{{ pageData.FINISHE }}</span> <div class="daily-head-left-info"> - <img src="../../../static/img/daliy-up.svg" alt=""> - <span :class="{active:false}" class="num"> 8.5% </span> + <img :src="`../../../static/img/daliy-${pageData.FINISHE_RATIO<0?'down':'up'}.svg`" alt=""> + <span :class="{active:pageData.FINISHE_RATIO<0}" class="num" v-html="` ${handleData(pageData.FINISHE_RATIO)}% `"></span> <span style="font-size: 12px;">杈冩槰澶�</span> </div> </div> @@ -35,10 +35,10 @@ <div class="daily-card daily-head"> <div class="daily-head-left"> <h4>浠婃棩浠诲姟鍓╀綑</h4> - <span >766</span> + <span >{{ pageData.SURPLUS }}</span> <div class="daily-head-left-info"> - <img src="../../../static/img/daliy-up.svg" alt=""> - <span :class="{active:false}" class="num"> 8.5% </span> + <img :src="`../../../static/img/daliy-${pageData.SURPLUS_RATIO<0?'down':'up'}.svg`" alt=""> + <span :class="{active:pageData.SURPLUS_RATIO<0}" class="num" v-html="` ${handleData(pageData.SURPLUS_RATIO)}% `"></span> <span style="font-size: 12px;">杈冩槰澶�</span> </div> </div> @@ -49,10 +49,10 @@ <div class="daily-card daily-head"> <div class="daily-head-left"> <h4>浠婃棩妫�娴嬭垂鐢�</h4> - <span >锟�7359</span> + <span>锟{ pageData.PRICE }}</span> <div class="daily-head-left-info"> - <img src="../../../static/img/daliy-up.svg" alt=""> - <span :class="{active:false}" class="num"> 8.5% </span> + <img :src="`../../../static/img/daliy-${pageData.PRICE_RATIO<0?'down':'up'}.svg`" alt=""> + <span :class="{active:pageData.PRICE_RATIO}" class="num" v-html="` ${handleData(pageData.PRICE_RATIO)}% `"></span> <span style="font-size: 12px;">杈冩槰澶�</span> </div> </div> @@ -63,10 +63,10 @@ <div class="daily-card daily-head"> <div class="daily-head-left"> <h4>浠婃棩妫�娴嬪伐鏃�</h4> - <span >306</span> + <span>{{pageData.COST}}</span> <div class="daily-head-left-info"> - <img src="../../../static/img/daliy-down.svg" alt=""> - <span :class="{active:true}" class="num"> 8.5% </span> + <img :src="`../../../static/img/daliy-${pageData.COST_RATIO<0?'down':'up'}.svg`" alt=""> + <span :class="{active:pageData.COST_RATIO<0}" class="num" v-html="` ${handleData(pageData.COST_RATIO)}% `"></span> <span style="font-size: 12px;">杈冩槰澶�</span> </div> </div> @@ -77,10 +77,10 @@ <div class="daily-card daily-head"> <div class="daily-head-left"> <h4>浠婃棩妫�娴嬩汉鍛�</h4> - <span >109</span> + <span >{{ pageData.PERSON }}</span> <div class="daily-head-left-info"> - <img src="../../../static/img/daliy-up.svg" alt=""> - <span :class="{active:false}" class="num"> 8.5% </span> + <img :src="`../../../static/img/daliy-${pageData.PERSON_RATIO<0?'down':'up'}.svg`" alt=""> + <span :class="{active:pageData.PERSON_RATIO<0}" class="num" v-html="` ${handleData(pageData.PERSON_RATIO)}% `"></span> <span style="font-size: 12px;">杈冩槰澶�</span> </div> </div> @@ -115,36 +115,38 @@ return{ chartConfig0:{ height: '435px', - isLoading:true, + isLoading:false, type:'line' }, chartData0:{ - xData:['4-11','4-12','4-13','4-14','4-15','4-16','4-17','4-18','4-19','4-20'], + xData:[], yData:[ { title:'浠诲姟鎺ユ敹閲�', - data:[10,20,10,40,50,20,70,40,90,50] + data:[] } ] }, chartConfig1:{ height: '435px', - isLoading:true, + isLoading:false, type:'bar' }, chartData1:{ - xData:['4-11','4-12','4-13','4-14','4-15','4-16','4-17','4-18','4-19','4-20'], + xData:[], yData:[ { title:'浠婃棩鎺ユ敹', - data:[10,20,10,40,50,20,70,40,90,50] + data:[] }, { title:'浠婃棩瀹屾垚', - data:[15,10,6,33,66,44,56,77,44,55] + data:[] }, ] - } + }, + pageData:{}, + loading:false, } }, mounted(){ @@ -152,10 +154,31 @@ }, methods:{ init(){ + this.chartConfig0.isLoading = false + this.chartConfig1.isLoading = false + this.loading = true; this.$axios.get(this.$api.report.businessStatisticsByDay).then(res => { if (res.code == 201) return - console.log(res) + this.pageData = this.HaveJson(res.data) + let xData = res.data.DAYS.map(m=>{ + return `${m[1]}-${m[2]}` + }) + this.chartData0.xData = xData + this.chartData1.xData = xData + this.chartData0.yData[0].data = this.pageData.RECETENDAYS + this.chartData1.yData[0].data = this.pageData.RECETENDAYS + this.chartData1.yData[1].data = this.pageData.FINISHTENDAYS + this.loading = false; + this.chartConfig0.isLoading = true + this.chartConfig1.isLoading = true }) + }, + handleData(val){ + if(val){ + return Math.abs(val)*100; + }else{ + return '0' + } } } } diff --git a/src/components/view/index-index.vue b/src/components/view/index-index.vue index 57b55ee..4743c4e 100644 --- a/src/components/view/index-index.vue +++ b/src/components/view/index-index.vue @@ -220,6 +220,18 @@ display: flex; flex-direction: column; } + .search_thing { + height: 50px; + margin-bottom: 26px; + } + + .search_label { + width: 120px; + font-size: 14px; + text-align: left; + margin-bottom: 10px; + } + </style> <template> @@ -298,7 +310,7 @@ <div class="right-2-title"> <span style="color: #333333;font-size: 16px;">鎴戠殑鏃ョ▼</span> <span style="cursor: pointer;font-size: 12px; -color: #3A7BFA;">娣诲姞鎴戠殑鏃ョ▼</span> +color: #3A7BFA;" @click="dialogVisible=true">娣诲姞鎴戠殑鏃ョ▼</span> </div> <div class="right-2-body"> <div class="calendar" style="width: 49%;"> @@ -349,6 +361,36 @@ </div> </el-col> </el-row> + <el-dialog title="鏃ョ▼娣诲姞" :visible.sync="dialogVisible" width="400px"> + <div class="body" style="max-height: 60vh;"> + <el-row> + <el-col class="search_thing" :span="22"> + <div class="search_label">鏃堕棿锛�</div> + <div class="search_input"> + <el-date-picker + v-model="query.time" + type="datetime" + placeholder="閫夋嫨鏃ユ湡鏃堕棿" + size="small" + style="width:100%"> + </el-date-picker> + </div> + </el-col> + <el-col class="search_thing" :span="22"> + <div class="search_label">鍐呭锛�</div> + <div class="search_input"> + <el-input v-model="query.content" size="small" placeholder="璇疯緭鍏ュ唴瀹�"></el-input> + </div> + </el-col> + </el-row> + </div> + <span slot="footer" class="dialog-footer"> + <el-row> + <el-button @click="handleCancel">鍙� 娑�</el-button> + <el-button type="primary" @click="submit" :loading="loading">纭� 瀹�</el-button> + </el-row> + </span> + </el-dialog> </div> </template> @@ -360,6 +402,12 @@ now: null, calendarValue: new Date(), currentIndex:0, + dialogVisible:false, + query:{ + time:'', + content:'' + }, + loading:false } }, mounted() { @@ -458,6 +506,23 @@ // 灏嗗緱鍒扮殑骞存湀鏃ユ牸寮忚浆鎹负鏍囧噯鏃堕棿锛屼笌楗夸簡涔堟椂闂存牸寮忕浉鍚屾墠鑳借仈鍔� this.calendarValue = new Date(prevtime); }, + handleCancel(){ + this.dialogVisible = false; + this.query = { + time:'', + content:'' + } + }, + submit(){ + if(!this.query.time){ + this.$message.error('鏃堕棿鏈~鍐�') + return + } + if(!this.query.content){ + this.$message.error('鍐呭鏈~鍐�') + return + } + } } } </script> diff --git a/src/util/echarts.js b/src/util/echarts.js index 0842962..b653849 100644 --- a/src/util/echarts.js +++ b/src/util/echarts.js @@ -69,6 +69,7 @@ }], yAxis: [{ + minInterval:1, type: 'value', min: 0, splitNumber: 4, @@ -83,7 +84,7 @@ }, axisLabel: { color: 'rgba(43,48,52, 0.4)', - margin: 30 + margin: 30, }, axisTick: { show: false, @@ -164,6 +165,7 @@ }], yAxis: [{ + minInterval:1, type: 'value', min: 0, splitNumber: 4, @@ -178,7 +180,7 @@ }, axisLabel: { color: 'rgba(43,48,52, 0.4)', - margin: 30 + margin: 30, }, axisTick: { show: false, -- Gitblit v1.9.3