【堡座】【恒通达BI】恒通达数字化智能工厂质量看板 需要接入数据 q=6
This commit is contained in:
parent
e08955ad09
commit
3d74a46342
19
src/App.vue
19
src/App.vue
|
|
@ -29,26 +29,23 @@ export default {
|
|||
created() {
|
||||
this.dataType = dataTypeParam;
|
||||
|
||||
|
||||
if (this.dataType == '6') {
|
||||
api.post2('/api/web/getBiData', ["yx_v_llzj", "yx_v_cpzj", "yx_v_zlkb", "yx_v_cpzj", "yx_v_byblv", "yx_v_byblzb"]).then(res => {
|
||||
console.log(res);
|
||||
|
||||
});
|
||||
}
|
||||
|
||||
|
||||
if (this.dataType == '3') {
|
||||
this.init();
|
||||
} else {
|
||||
window.htd_bidata = testRes;
|
||||
if (this.dataType == '4') {
|
||||
window.htd_bidata = testRes;
|
||||
this.currentComponent = 'datav2';
|
||||
} else if (this.dataType == '5') {
|
||||
window.htd_bidata = testRes;
|
||||
this.currentComponent = 'datav3';
|
||||
} else if (this.dataType == '6') {
|
||||
this.currentComponent = 'datav2';
|
||||
api.post2('/api/web/getBiData', ["yx_v_llzj", "yx_v_cpzj", "yx_v_zlkb", "yx_v_cpzj", "yx_v_byblv", "yx_v_byblzb"]).then(res => {
|
||||
console.log(res)
|
||||
window.htd_bidata = res;
|
||||
this.currentComponent = 'datav2';
|
||||
});
|
||||
} else {
|
||||
window.htd_bidata = testRes;
|
||||
this.currentComponent = 'datav';
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -8,7 +8,7 @@ const api = {
|
|||
|
||||
baseURL3: 'http://36.139.158.169:9261',
|
||||
|
||||
baseURL: 'http://xynzix.demo.natool.cn',
|
||||
baseURL: 'http://pxozlw.demo.natool.cn',
|
||||
|
||||
//堡座
|
||||
baseURL4: 'http://39.101.165.228:9009',
|
||||
|
|
|
|||
|
|
@ -11,13 +11,13 @@
|
|||
</div>
|
||||
<div id="left-rankchart">
|
||||
<div class="rank-item" v-for="(item, index) in rankData" :key="index">
|
||||
<span class="rank-name">{{ item.name }}</span>
|
||||
<span class="rank-name">{{ item['类型'] }}</span>
|
||||
<div class="rank-progress">
|
||||
<div
|
||||
class="rank-bar"
|
||||
:style="{ width: item.value + '%' }"
|
||||
:style="{ width: item['合格率'] + '%' }"
|
||||
></div>
|
||||
<span class="rank-value">{{ item.value }}%</span>
|
||||
<span class="rank-value">{{ item['合格率'] }}%</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
|
@ -30,28 +30,28 @@
|
|||
<!-- 当日检验量 -->
|
||||
<div class="inspection-box">
|
||||
<div class="inspection-title">当日检验量</div>
|
||||
<div class="inspection-value">{{ dataType == '6'?middleTopData2.inspection:middleTopData.inspection }}</div>
|
||||
<div class="inspection-value">{{ dataType == '6'?middleTopData2[3]['数量']:middleTopData.inspection }}</div>
|
||||
</div>
|
||||
|
||||
<!-- 机芯直通率 -->
|
||||
<div class="pass-rate-box">
|
||||
<div class="gauge-chart" style="height:200px" :id="'gauge-chart-1'"></div>
|
||||
<div class="pass-rate-title">{{dataType=='6'?'进水直通率': '机芯直通率'}}</div>
|
||||
<div class="pass-rate-value">{{dataType=='6'?'进水检验量': '机芯检验量'}}：<span style="color:#08e5ff;">250</span></div>
|
||||
<div class="pass-rate-value">{{dataType=='6'?'进水检验量': '机芯检验量'}}：<span style="color:#08e5ff;">{{ middleTopData2[0]['数量'] }}</span></div>
|
||||
</div>
|
||||
|
||||
<!-- 盖板直通率 -->
|
||||
<div class="pass-rate-box">
|
||||
<div class="gauge-chart" style="height:200px" :id="'gauge-chart-2'"></div>
|
||||
<div class="pass-rate-title">{{dataType=='6'?'排水直通率': '盖板直通率'}}</div>
|
||||
<div class="pass-rate-value">{{dataType=='6'?'排水检验量': '盖板检验量'}}：<span style="color:#08e5ff;">580</span></div>
|
||||
<div class="pass-rate-value">{{dataType=='6'?'排水检验量': '盖板检验量'}}：<span style="color:#08e5ff;">{{ middleTopData2[1]['数量'] }}</span></div>
|
||||
</div>
|
||||
|
||||
<!-- 整机直通率 -->
|
||||
<div class="pass-rate-box">
|
||||
<div class="gauge-chart" style="height:200px" :id="'gauge-chart-3'"></div>
|
||||
<div class="pass-rate-title">{{dataType=='6'?'按钮直通率': '整机直通率'}}</div>
|
||||
<div class="pass-rate-value">{{dataType=='6'?'按钮检测量': '整机检测量'}}：<span style="color:#08e5ff;">420</span></div>
|
||||
<div class="pass-rate-value">{{dataType=='6'?'按钮检测量': '整机检测量'}}：<span style="color:#08e5ff;">{{ middleTopData2[2]['数量'] }}</span></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
|
@ -76,9 +76,9 @@
|
|||
import LabelTag from './LabelTag'
|
||||
import PieChart from './pieChart.vue'
|
||||
import * as echarts from 'echarts';
|
||||
import testRes from './test'
|
||||
|
||||
console.log(testRes)
|
||||
// import testRes from './test'
|
||||
let testRes = window.htd_bidata;
|
||||
console.log('1111',testRes)
|
||||
export default {
|
||||
name: 'CenterCmp',
|
||||
components: {
|
||||
|
|
@ -91,35 +91,6 @@ export default {
|
|||
}
|
||||
},
|
||||
data () {
|
||||
// 定义原始数据
|
||||
const originalLeftData = [
|
||||
|
||||
{ icon: require(`@/img/icons/12.png`), name: '本月订单数', value: '3500' },
|
||||
{ icon: require(`@/img/icons/12.png`), name: '本月派工数', value: '12500' },
|
||||
{ icon: require(`@/img/icons/12.png`), name: '派工未完成数', value: '2500' },
|
||||
{ icon: require(`@/img/icons/12.png`), name: '派工完成率', value: '92.6%' }
|
||||
];
|
||||
const originalLeftData2 = [
|
||||
{ icon: require(`@/img/icons/12.png`), name: '派工数量', value: testRes.data.yx_v_scgdgk[0]["派工数量"] },
|
||||
{ icon: require(`@/img/icons/12.png`), name: '未完工数量', value: testRes.data.yx_v_scgdgk[0]["未完成数量"] },
|
||||
{ icon: require(`@/img/icons/12.png`), name: '工单完成率', value: (testRes.data.yx_v_scgdgk[0]["未完成数量"]/testRes.data.yx_v_scgdgk[0]["派工数量"]).toFixed(2)*100+'%' }
|
||||
];
|
||||
|
||||
const originalRightData = [
|
||||
{ icon: require(`@/img/icons/12.png`), name: '保养率', value: 20 },
|
||||
{ icon: require(`@/img/icons/12.png`), name: '直通率', value: 100 },
|
||||
{ icon: require(`@/img/icons/12.png`), name: '整机备料率', value: 90 },
|
||||
{ icon: require(`@/img/icons/12.png`), name: '盖板备料率', value: 85 },
|
||||
{ icon: require(`@/img/icons/12.png`), name: '机芯备料率', value: 90 },
|
||||
];
|
||||
const originalRightData2 = [
|
||||
{ icon: require(`@/img/icons/12.png`), name: '水件', value: testRes.data.yx_v_wwcscdd[0]["水件"] },
|
||||
{ icon: require(`@/img/icons/12.png`), name: '排水阀', value: testRes.data.yx_v_wwcscdd[0]["排水阀"] },
|
||||
{ icon: require(`@/img/icons/12.png`), name: '进水阀', value: testRes.data.yx_v_wwcscdd[0]["进水阀"] },
|
||||
{ icon: require(`@/img/icons/12.png`), name: '按钮', value: testRes.data.yx_v_wwcscdd[0]["按钮"] }
|
||||
];
|
||||
|
||||
|
||||
return {
|
||||
config: {
|
||||
data: [
|
||||
|
|
@ -225,11 +196,16 @@ export default {
|
|||
{ name: '组件', value: 99 },
|
||||
{ name: '陶瓷', value: 99 }
|
||||
],
|
||||
|
||||
leftData: this.dataType == '3'?originalLeftData2:originalLeftData,
|
||||
rightData: this.dataType == '3'?originalRightData2:originalRightData
|
||||
}
|
||||
},
|
||||
created(){
|
||||
if(this.dataType == '6'){
|
||||
this.rankData = testRes.data.yx_v_cpzj;
|
||||
this.middleTopData2 = testRes.data.yx_v_zlkb;
|
||||
this.rightChartData2 = testRes.data.yx_v_llzj;
|
||||
}
|
||||
|
||||
},
|
||||
// 在mounted()中调用
|
||||
mounted() {
|
||||
this.initRightChart();
|
||||
|
|
@ -263,7 +239,7 @@ export default {
|
|||
},
|
||||
xAxis: {
|
||||
type: 'category',
|
||||
data: chartData.map(item => item.name),
|
||||
data: chartData.map(item => item['类型']),
|
||||
axisLabel: {
|
||||
color: '#fff',
|
||||
fontSize: 20,
|
||||
|
|
@ -297,7 +273,7 @@ export default {
|
|||
},
|
||||
series: [{
|
||||
type: 'bar',
|
||||
data: chartData.map(item => item.value),
|
||||
data: chartData.map(item => item['合格率']),
|
||||
barWidth: '40%',
|
||||
itemStyle: {
|
||||
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
|
||||
|
|
@ -333,11 +309,11 @@ export default {
|
|||
},
|
||||
initGaugeCharts() {
|
||||
// 机芯直通率
|
||||
this.initGaugeChart('gauge-chart-1', this.dataType == '6'?this.middleTopData2.corePassRate: this.middleTopData.corePassRate);
|
||||
this.initGaugeChart('gauge-chart-1', this.dataType == '6'?99.5: this.middleTopData.corePassRate);
|
||||
// 盖板直通率
|
||||
this.initGaugeChart('gauge-chart-2', this.dataType == '6'?this.middleTopData2.coverPassRate: this.middleTopData.coverPassRate);
|
||||
this.initGaugeChart('gauge-chart-2', this.dataType == '6'?99.5: this.middleTopData.coverPassRate);
|
||||
// 整机直通率
|
||||
this.initGaugeChart('gauge-chart-3', this.dataType == '6'?this.middleTopData2.coverPassRate:this.middleTopData.wholePassRate);
|
||||
this.initGaugeChart('gauge-chart-3', this.dataType == '6'?99.5:this.middleTopData.wholePassRate);
|
||||
},
|
||||
// 修改仪表盘样式部分
|
||||
// 修改initGaugeChart方法
|
||||
|
|
|
|||
|
|
@ -9,7 +9,8 @@
|
|||
|
||||
<script>
|
||||
import * as echarts from 'echarts';
|
||||
import testRes from './test';
|
||||
// import testRes from './test';
|
||||
let testRes = window.htd_bidata;
|
||||
function getCurrentMonthDates() {
|
||||
const dates = [];
|
||||
const today = new Date();
|
||||
|
|
@ -48,14 +49,16 @@ export default {
|
|||
const currentDay = today.getDate();
|
||||
|
||||
// 生成模拟数据，未到日期的值为0
|
||||
const generateData = () => {
|
||||
return dates.map((date, index) => {
|
||||
const day = parseInt(date.split('-')[1]);
|
||||
let step = this.dataType == '6'? 6 : 10;
|
||||
return day <= currentDay ? (Math.random() * step).toFixed(2) : 0;
|
||||
});
|
||||
};
|
||||
|
||||
// const generateData = () => {
|
||||
// return dates.map((date, index) => {
|
||||
// const day = parseInt(date.split('-')[1]);
|
||||
// let step = this.dataType == '6'? 6 : 10;
|
||||
// return day <= currentDay ? (Math.random() * step).toFixed(2) : 0;
|
||||
// });
|
||||
// };
|
||||
const generateData = ()=>{
|
||||
return testRes.data.yx_v_byblv.map(item => item['S2']);
|
||||
}
|
||||
var myChart = echarts.init(document.getElementById(this.pieId));
|
||||
this.option = {
|
||||
title: {
|
||||
|
|
|
|||
|
|
@ -9,7 +9,8 @@
|
|||
|
||||
<script>
|
||||
import * as echarts from 'echarts';
|
||||
import testRes from './test';
|
||||
// import testRes from './test';
|
||||
let testRes = window.htd_bidata;
|
||||
export default {
|
||||
name: 'RoseChart',
|
||||
props: {
|
||||
|
|
|
|||
|
|
@ -6,6 +6,7 @@
|
|||
|
||||
<script>
|
||||
import * as echarts from 'echarts';
|
||||
let testRes = window.htd_bidata;
|
||||
export default {
|
||||
name: 'RoseChart',
|
||||
props: {
|
||||
|
|
@ -89,6 +90,16 @@
|
|||
name: "其他不良",
|
||||
},
|
||||
];
|
||||
arr2 = testRes.data.yx_v_byblzb.map(item => {
|
||||
return {
|
||||
value: item['数量'],
|
||||
name: item['指标']
|
||||
}
|
||||
})
|
||||
let num = testRes.data.yx_v_byblzb.map(item => {
|
||||
return item['数量']
|
||||
})
|
||||
let maxNum = this.dataType == '6'? Math.max(...num) : 100;
|
||||
let chartData = this.dataType == '6'?arr2 : arr;
|
||||
console.log(this.dataType,chartData)
|
||||
|
||||
|
|
@ -105,7 +116,7 @@
|
|||
},
|
||||
radar: {
|
||||
indicator: chartData.map(item => {
|
||||
return { name: item.name, max: 100 };
|
||||
return { name: item.name, max: maxNum };
|
||||
}),
|
||||
radius: '70%',
|
||||
splitNumber: 4,
|
||||
|
|
|
|||
Loading…
Reference in New Issue