xutao
/
lx-MOM-front
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

first

Browse Source
master
吴普建 11 months ago
parent 3d628bd344
commit 5c0c055ba8
3 changed files with 209 additions and 18 deletions
Show Stats Download Patch File Download Diff File

20
src/views/board/kanBan/compents/midMidFirst.vue
Unescape Escape View File

@ -4,13 +4,20 @@
<script> <script>
import * as echarts from 'echarts'; import * as echarts from 'echarts';
import { defineComponent } from 'vue';
import { defineComponent } from 'vue';
import resize from './dashboard/mixins/resize'; import resize from './dashboard/mixins/resize';
import {option} from './options/mid_mid_left_1_options'; import {option} from './options/mid_mid_left_2_options';
export default defineComponent({ export default defineComponent({
mixins: [resize], mixins: [resize],
props: { props: {
year: null, year: null,
productionData : {
type : Object,
default () {
return {}
}
},
className: { className: {
type: String, type: String,
default: 'chart' default: 'chart'
@ -29,10 +36,15 @@ export default defineComponent({
// myChart: null, // myChart: null,
loading: true, loading: true,
dataForCount: [], dataForCount: [],
dataForWeight: [] dataForWeight: [],
chartOptions: {}
}; };
}, },
async mounted() { async mounted() {
this.chartOptions = JSON.parse(JSON.stringify(option));
let newValue = this.productionData
let seriesData = [newValue.schedulingWorkorder, newValue.productionWorkorder, newValue.completeWorkorder]
option.series[0].data = seriesData
// await this.getTypeData() // await this.getTypeData()
this.initChart() this.initChart()
}, },
@ -43,6 +55,8 @@ export default defineComponent({
// this.myChart.dispose(); // this.myChart.dispose();
// this.myChart = null; // this.myChart = null;
}, },
methods: { methods: {
initChart() { initChart() {
let myChart = echarts.init(this.$el); let myChart = echarts.init(this.$el);

173
src/views/board/kanBan/compents/options/mid_mid_left_2_options.js
Unescape Escape View File

@ -0,0 +1,173 @@
import * as echarts from 'echarts';
let xAxisData = ["排产单量", "生产单量", "完工单量"]
let seriesData = [100, 200, 300]
let colors = ['#2fa3f8', '#f4b069', '#2fa3f8']
export let option = {
// backgroundColor: '#09224e',
grid: {
left: '2%',
right: '8%',
top: '16%',
bottom: '5%',
containLabel: true,
},
tooltip: {
trigger: 'axis',
axisPointer: {
type: 'none'
},
formatter: function (params) {
return params[0].name + ': ' + params[0].value;
}
},
xAxis: {
data: xAxisData,
axisTick: {
show: false,
},
axisLine: {
show: true,
lineStyle: {
color: '#37B6F2',
opacity: 0.5,
}
},
axisLabel: {
textStyle: {
color: '#ffffff',
},
// interval: 0,
fontSize: 8,
//函数模板
formatter(val, i) {
if (i == 0) {
return `{start| ${val}}`
} else if (i == 1) {
return `{two| ${val}}`
}
else if (i == 2) {
return `{three| ${val}}`
}
else if (i == 3) {
return `{end| ${val}}`
}
},
rich: {
start: {
color: '#fff',
padding: [5, 4, 4, 4],
align: 'center'
},
two: {
color: '#fff',
padding: [5, 4, 4, 4],
align: 'center'
},
three: {
color: '#fff',
padding: [5, 4, 4, 4],
align: 'center'
},
}
},
},
yAxis: {
name:'（个） ',
type: "value",
splitLine: {
show: true, lineStyle: {
color: '#37B6F2',
opacity: 0.1,
}
},
axisTick: { show: false },
axisLine: { show: false },
axisLabel: {
show: true,
textStyle: {
color: '#ffffff',
},
}
},
series: [{
name: 'hill',
type: 'pictorialBar',
barCategoryGap: '10%',
symbolClip: true,
symbol: 'path://M0,10 L10,10 C5.5,10 5.5,5 5,0 C4.5,5 4.5,10 0,10 z',
itemStyle: {
normal: {
color: function (params) {
return {
type: 'linear',
x: 0,
y: 0,
x2: 0,
y2: 1,
colorStops: [{
offset: 0,
color: colors[params.dataIndex]
},
{
offset: 0.3,
color: colors[params.dataIndex]
},
{
offset: 1,
color: 'rgba(13,8,16,0)'
}
],
global: false // 缺省为 false
}
}
},
emphasis: {
opacity: 1
},
},
// 图形上方描述文字
label: {
show: false,
position: 'top',
offset: [0, 0],
fontSize: 12,
formatter: function (params) {
let index = params.dataIndex
let str = "{a" + index + "|" + params.value + "万人}";
return str;
},
rich: {
a0: {
color: colors[0],
align: "center",
},
a1: {
color: colors[1],
align: "center",
},
a2: {
color: colors[2],
align: "center",
},
a3: {
color: colors[3],
align: "center",
},
}
},
emphasis: {
itemStyle: {
opacity: 1
}
},
data: seriesData,
z: 2
}]
};

34
src/views/board/kanBan/index.vue
Unescape Escape View File

@ -159,7 +159,7 @@
<div class="left-side"></div> <div class="left-side"></div>
<div class="right-side"> <div class="right-side">
<div class="upper-content"> <div class="upper-content">
<span style="font-size: 12px">排产数量</span> <span style="font-size: 12px">排产单量</span>
</div> </div>
<div class="upper-content"> <div class="upper-content">
<span style="font-size: 16px; margin-left: 3px; color: #00a2cb; font-weight: 400"> <span style="font-size: 16px; margin-left: 3px; color: #00a2cb; font-weight: 400">
@ -168,17 +168,17 @@
</div> </div>
</div> </div>
</div> </div>
<div class="bar_area"> <!-- <div class="bar_area">-->
<dv-loading v-show="loading10">Loading...</dv-loading> <!-- <dv-loading v-show="loading10">Loading...</dv-loading>-->
<mid-mid-first v-show="!loading10" :year="year" width="375px" height="70px" @endLoading="endLoading" /> <!-- <mid-mid-first v-show="!loading10" :year="year" width="375px" height="250px" @endLoading="endLoading" />-->
</div> <!-- </div>-->
</div> </div>
<div class="content_area"> <div class="content_area">
<div class="ls_content"> <div class="ls_content">
<div class="left-side"></div> <div class="left-side"></div>
<div class="right-side"> <div class="right-side">
<div class="upper-content"> <div class="upper-content">
<span style="font-size: 12px">生产数量</span> <span style="font-size: 12px">生产单量</span>
</div> </div>
<div class="upper-content"> <div class="upper-content">
<span style="font-size: 16px; margin-left: 3px; color: #d6b514; font-weight: 400"> <span style="font-size: 16px; margin-left: 3px; color: #d6b514; font-weight: 400">
@ -187,17 +187,17 @@
</div> </div>
</div> </div>
</div> </div>
<div class="bar_area"> <!-- <div class="bar_area">-->
<dv-loading v-show="loading10">Loading...</dv-loading> <!-- <dv-loading v-show="loading10">Loading...</dv-loading>-->
<mid-mid-first v-show="!loading10" :year="year" width="375px" height="70px" @endLoading="endLoading" /> <!-- <mid-mid-first v-show="!loading10" :year="year" width="375px" height="70px" @endLoading="endLoading" />-->
</div> <!-- </div>-->
</div> </div>
<div class="content_area"> <div class="content_area">
<div class="ls_content"> <div class="ls_content">
<div class="left-side"></div> <div class="left-side"></div>
<div class="right-side"> <div class="right-side">
<div class="upper-content"> <div class="upper-content">
<span style="font-size: 12px">完工数量</span> <span style="font-size: 12px">完工单量</span>
</div> </div>
<div class="upper-content"> <div class="upper-content">
<span style="font-size: 16px; margin-left: 3px; color: #00a2cb; font-weight: 400"> <span style="font-size: 16px; margin-left: 3px; color: #00a2cb; font-weight: 400">
@ -206,10 +206,14 @@
</div> </div>
</div> </div>
</div> </div>
<div class="bar_area"> <!-- <div class="bar_area">-->
<dv-loading v-show="loading10">Loading...</dv-loading> <!-- <dv-loading v-show="loading10">Loading...</dv-loading>-->
<mid-mid-first v-show="!loading10" :year="year" width="375px" height="70px" @endLoading="endLoading" /> <!-- <mid-mid-first v-show="!loading10" :year="year" width="375px" height="70px" @endLoading="endLoading" />-->
</div> <!-- </div>-->
</div>
<div class="midd_area" style=" width: 372px;height: 207px;position: absolute;right: 30px;">
<dv-loading v-show="loading10">Loading...</dv-loading>
<mid-mid-first v-show="!loading10" :productionData="productionData" :year="year" width="370px" height="200px" @endLoading="endLoading" />
</div> </div>
</div> </div>

Write Preview
Loading…
Cancel
Save