From 09ff6c03b1d1b89fe08b7354ac936b7c81e5a3aa Mon Sep 17 00:00:00 2001
From: futian.liu <liufutianyoo@163.com>
Date: 星期六, 09 十二月 2023 18:28:06 +0800
Subject: [PATCH] 调拨详情显示金额
---
admin-web/src/views/dashboard/components/XYZC.vue | 216 +++++++++++++++++------------------------------------
1 files changed, 70 insertions(+), 146 deletions(-)
diff --git a/admin-web/src/views/dashboard/components/XYZC.vue b/admin-web/src/views/dashboard/components/XYZC.vue
index 5066119..08bbf4f 100644
--- a/admin-web/src/views/dashboard/components/XYZC.vue
+++ b/admin-web/src/views/dashboard/components/XYZC.vue
@@ -2,30 +2,14 @@
<div style="width: 100%">
<el-card class="box-card">
<div slot="header" class="clearfix">
- <span style="font-weight: 600; font-size: 20px">鍝嶅簲鏀寔绫荤粺璁�</span>
- <div class="card-title-right">
- <div :style="{ color: weekFlag ? '#378cff' : '' }" @click="changeDate(1)">杩�7澶�</div>
- <div :style="{ color: monthFlag ? '#378cff' : '' }" style="margin: 0 30px 0 10px" @click="changeDate(2)">
- 杩�30澶�
- </div>
- <el-date-picker
- v-model="value2"
- type="daterange"
- :picker-options="pickerOptions"
- range-separator="鑷�"
- start-placeholder="寮�濮嬫棩鏈�"
- end-placeholder="缁撴潫鏃ユ湡"
- align="right"
- value-format="yyyyMMdd"
- />
- <el-button type="primary" style="margin-left: 10px" @click="getCenterLine">鎼滅储</el-button>
- </div>
+ <span class="font-18 font-bold">璧勪骇澧為暱/鎶ュ簾缁熻鍥撅紙鏁伴噺锛�</span>
</div>
- <div id="main1" />
+ <div id="ZCZZ" />
</el-card>
</div>
</template>
<script>
+import {getGoodsNumByMonth} from '@/api/dashboard'
import * as echarts from 'echarts';
export default {
@@ -38,93 +22,22 @@
},
data() {
return {
- pickerOptions: {
- shortcuts: [
- {
- text: '鏈�杩戜竴鍛�',
- onClick(picker) {
- const end = new Date();
- const start = new Date();
- start.setTime(start.getTime() - 3600 * 1000 * 24 * 7);
- picker.$emit('pick', [start, end]);
- },
- },
- {
- text: '鏈�杩戜竴涓湀',
- onClick(picker) {
- const end = new Date();
- const start = new Date();
- start.setTime(start.getTime() - 3600 * 1000 * 24 * 30);
- picker.$emit('pick', [start, end]);
- },
- },
- {
- text: '鏈�杩戜笁涓湀',
- onClick(picker) {
- const end = new Date();
- const start = new Date();
- start.setTime(start.getTime() - 3600 * 1000 * 24 * 90);
- picker.$emit('pick', [start, end]);
- },
- },
- ],
- },
- value2: '',
myChart: null,
- weekFlag: 1, // 杩戜竷澶�
- monthFlag: null, // 杩�30澶�
options: {},
};
},
mounted() {
this.getCenterLine();
- // 鐩戝惉灞忓箷瀹藉害鍙樺寲锛氬綋娴忚鍣ㄥ彂鐢焤esize浜嬩欢鐨勬椂鍊欙紝瑙﹀彂echart鐨剅esize浜嬩欢锛岄噸缁榗anvas
- window.addEventListener('resize', () => {
- this.changeWidth();
- });
},
methods: {
- changeDate(type) {
- if (type == 1) {
- this.monthFlag = null;
- if (this.weekFlag) {
- this.weekFlag = null;
- } else {
- this.weekFlag = 1;
- }
- if (this.weekFlag) {
- this.monthFlag = null;
- this.value2 = [];
- }
- this.getCenterLine();
- }
- if (type == 2) {
- this.weekFlag = null;
- if (this.monthFlag) {
- this.monthFlag = null;
- } else {
- this.monthFlag = 1;
- }
- if (this.monthFlag) {
- this.weekFlag = null;
- this.value2 = [];
- }
- this.getCenterLine();
- }
- },
getCenterLine() {
- // getCenterLine({
- // id: this.activeId,
- // weekFlag: this.weekFlag,
- // monthFlag: this.monthFlag,
- // startDay: this.value2 ? this.value2[0] : null,
- // endDay: this.value2 ? this.value2[1] : null
- // }).then(res => {
- // const data = res.data
- var chartDom = document.getElementById('main1');
+ var chartDom = document.getElementById('ZCZZ');
this.myChart = echarts.init(chartDom);
+ window.addEventListener('resize', () => {
+ this.changeWidth();
+ });
this.options = {
- color: ['#ED653B', '#1877FF'],
+ color: ['#5BE1FD', '#FFD15C'],
tooltip: {
trigger: 'axis',
axisPointer: {
@@ -132,39 +45,21 @@
},
},
legend: {
- data: ['鍝嶅簲閫熷害', '澶勭悊閫熷害'],
+ data: ['璧勪骇澧為暱', '璧勪骇鎶ュ簾'],
},
toolbox: {
- show: true,
- orient: 'vertical',
- left: 'right',
- top: 'center',
- feature: {
- mark: { show: true },
- dataView: { show: true, readOnly: false },
- magicType: { show: true, type: ['line', 'bar', 'stack'] },
- restore: { show: true },
- saveAsImage: { show: true },
- },
+ show: false
+ },
+ grid: {
+ left: '30',
+ right: '30',
+ bottom: '30px'
},
xAxis: [
{
type: 'category',
axisTick: { show: false },
- data: [
- '12-01',
- '12-02',
- '12-03',
- '12-04',
- '12-05',
- '12-06',
- '12-07',
- '12-08',
- '12-09',
- '12-10',
- '12-11',
- '12-12',
- ],
+ data: ['1鏈�','2鏈�','3鏈�','4鏈�','5鏈�','6鏈�','7鏈�','8鏈�','9鏈�','10鏈�','11鏈�','12鏈�'],
},
],
yAxis: [
@@ -172,49 +67,78 @@
type: 'value',
},
],
- dataZoom: [
- {
- orient: 'horizontal',
-
- show: true, //鎺у埗婊氬姩鏉℃樉绀洪殣钘�
-
- realtime: true, //鎷栧姩婊氬姩鏉℃椂鏄惁鍔ㄦ�佺殑鏇存柊鍥捐〃鏁版嵁
-
- height: 15, //婊氬姩鏉￠珮搴�
-
- start: 0, //婊氬姩鏉″紑濮嬩綅缃紙鍏�100绛変唤锛�
- //
- // end: 30, //婊氬姩鏉＄粨鏉熶綅缃�
- bottom: '4%',
- zoomLock: true, //鎺у埗闈㈡澘鏄惁杩涜缂╂斁
- }
- ],
-
series: [
{
- name: '鍝嶅簲閫熷害',
+ name: '璧勪骇澧為暱',
type: 'line',
barGap: 0,
smooth: true,
emphasis: {
focus: 'series',
},
- data: [320, 332, 301, 334, 320, 332, 301, 334, 320, 332, 301, 334],
+ data: [],
+ lineStyle: {
+ width: 2, // 澶栬竟绾垮搴�
+ color: '#5BE1FD'// 澶栬竟绾块鑹�
+ },
+ areaStyle: {// 鍖哄煙濉厖娓愬彉棰滆壊
+ color: {
+ type: 'linear',
+ x: 0,
+ y: 0,
+ x2: 0,
+ y2: 1,
+ colorStops: [{
+ offset: 0, color: 'rgba(91, 225, 253, .6)' // 0% 澶勭殑棰滆壊
+ }, {
+ offset: 1, color: 'rgba(91, 225, 253, 0)' // 100% 澶勭殑棰滆壊
+ }],
+ global: false // 缂虹渷涓� false
+ }
+ }
},
{
- name: '澶勭悊閫熷害',
+ name: '璧勪骇鎶ュ簾',
type: 'line',
smooth: true,
emphasis: {
focus: 'series',
},
- data: [220, 182, 191, 234, 220, 182, 191, 234, 220, 182, 191, 234],
+ data: [],
+ lineStyle: {
+ width: 2, // 澶栬竟绾垮搴�
+ color: '#FFD15C'// 澶栬竟绾块鑹�
+ },
+ areaStyle: {// 鍖哄煙濉厖娓愬彉棰滆壊
+ color: {
+ type: 'linear',
+ x: 0,
+ y: 0,
+ x2: 0,
+ y2: 1,
+ colorStops: [{
+ offset: 0, color: 'rgba(255, 209, 92, .6)' // 0% 澶勭殑棰滆壊
+ }, {
+ offset: 1, color: 'rgba(255, 209, 92, 0)' // 100% 澶勭殑棰滆壊
+ }],
+ global: false // 缂虹渷涓� false
+ }
+ }
},
],
};
-
this.options && this.myChart.setOption(this.options);
- // });
+ getGoodsNumByMonth().then(res=>{
+ let xAxis0 = []
+ let xAxis1 = []
+ res.map(item=>{
+ xAxis0.push(item.addTotalNum)
+ xAxis1.push(item.reduceTotalNum)
+ })
+ this.options.series[0].data = xAxis0
+ this.options.series[1].data = xAxis1
+ this.myChart.setOption(this.options);
+ })
},
changeWidth() {
this.myChart.resize();
@@ -223,7 +147,7 @@
};
</script>
<style lang="scss" scoped>
-#main1 {
+#ZCZZ {
width: 100%;
height: 400px;
}
--
Gitblit v1.9.1