恒通达数据导入
This commit is contained in:
parent
ab90362530
commit
1dd7992de1
|
|
@ -5,9 +5,9 @@
|
|||
</template>
|
||||
|
||||
<script>
|
||||
// import datav from './components/baozuo-demo/index.vue'
|
||||
import datav from './components/baozuo-demo/index.vue'
|
||||
// import datav from './components/datav/index.vue'
|
||||
import datav from './components/zidingyi/index.vue'
|
||||
// import datav from './components/zidingyi/index.vue'
|
||||
|
||||
export default {
|
||||
name: 'app',
|
||||
|
|
|
|||
|
|
@ -29,6 +29,7 @@
|
|||
|
||||
<script>
|
||||
import LabelTag from './LabelTag'
|
||||
import testRes from './test'
|
||||
let timer = null;
|
||||
export default {
|
||||
name: 'BottomCharts',
|
||||
|
|
@ -228,10 +229,64 @@ export default {
|
|||
},
|
||||
created() {
|
||||
let that = this;
|
||||
this.checkData();
|
||||
timer = setInterval(() => {
|
||||
that.isChange = !that.isChange
|
||||
}, 60000)
|
||||
},
|
||||
methods:{
|
||||
checkData(){
|
||||
console.log(testRes)
|
||||
function createProgressCircle(percentage) {
|
||||
let color, content;
|
||||
if (percentage === 0) {
|
||||
color = 'gray';
|
||||
content = '0%';
|
||||
return `
|
||||
<div class="circle-progress" style="border-color: ${color}; ">
|
||||
<div class="circle-content" style="color: ${color}; ">${content}</div>
|
||||
</div>
|
||||
`;
|
||||
} else if (percentage === 100) {
|
||||
color = '#1afa29';
|
||||
content = '√';
|
||||
return `
|
||||
<div class="circle-progress" style="border-color: ${color}; ">
|
||||
<div class="circle-img"></div>
|
||||
</div>
|
||||
`;
|
||||
} else {
|
||||
color = '#08e5ff';
|
||||
content = `${percentage}%`;
|
||||
return `
|
||||
<div class="circle-progress" style="border-color: ${color}; ">
|
||||
<div class="circle-content" style="color: ${color}; ">${content}</div>
|
||||
</div>
|
||||
`;
|
||||
}
|
||||
|
||||
|
||||
|
||||
}
|
||||
|
||||
let data = testRes.data.yx_v_pgjd.map(item=>{
|
||||
return [
|
||||
item["工单号"],
|
||||
item["产品名称"],
|
||||
item["派工日期"],
|
||||
item["派工数量"],
|
||||
createProgressCircle(item["工序进度"]*100),
|
||||
createProgressCircle(item["进水调节"]*100),
|
||||
createProgressCircle(item["按钮调解"]*100),
|
||||
createProgressCircle(item["桶身调节"]*100),
|
||||
createProgressCircle(item["桶身装底座"]*100),
|
||||
createProgressCircle(item["包装"]*100),
|
||||
item["剩余数量"],
|
||||
]
|
||||
})
|
||||
this.config4.data = data
|
||||
}
|
||||
},
|
||||
beforeDestroy() {
|
||||
clearInterval(timer)
|
||||
}
|
||||
|
|
|
|||
|
|
@ -6,12 +6,11 @@
|
|||
|
||||
<div class="cc-details" v-if="dataType == '3'">
|
||||
<div style="font-weight: bold;font-size: 40px;">本月总产量</div>
|
||||
<div class="card">1</div>
|
||||
<div class="card">1</div>
|
||||
<div class="card">3</div>
|
||||
<div class="card">3</div>
|
||||
<div class="card">7</div>
|
||||
<div class="card">7</div>
|
||||
<div class="card">4</div>
|
||||
<div class="card">8</div>
|
||||
<div class="card">4</div>
|
||||
<div class="card">5</div>
|
||||
<div class="card">4</div>
|
||||
</div>
|
||||
<div class="cc-details" v-else>
|
||||
<div style="font-weight: bold;font-size: 40px;">本月总产量</div>
|
||||
|
|
@ -117,6 +116,9 @@
|
|||
import LabelTag from './LabelTag'
|
||||
import PieChart from './pieChart.vue'
|
||||
import * as echarts from 'echarts';
|
||||
import testRes from './test'
|
||||
|
||||
console.log(testRes)
|
||||
export default {
|
||||
name: 'CenterCmp',
|
||||
components: {
|
||||
|
|
@ -138,9 +140,9 @@ export default {
|
|||
{ icon: require(`@/img/icons/12.png`), name: '派工完成率', value: '92.6%' }
|
||||
];
|
||||
const originalLeftData2 = [
|
||||
{ icon: require(`@/img/icons/12.png`), name: '派工数量', value: '1120' },
|
||||
{ icon: require(`@/img/icons/12.png`), name: '未完工数量', value: '600' },
|
||||
{ icon: require(`@/img/icons/12.png`), name: '工单订成率', value: '100%' }
|
||||
{ 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]["工单完成率"] }
|
||||
];
|
||||
|
||||
const originalRightData = [
|
||||
|
|
@ -151,10 +153,10 @@ export default {
|
|||
{ icon: require(`@/img/icons/12.png`), name: '机芯备料率', value: 90 },
|
||||
];
|
||||
const originalRightData2 = [
|
||||
{ icon: require(`@/img/icons/12.png`), name: '水件', value: '12000' },
|
||||
{ icon: require(`@/img/icons/12.png`), name: '排水阀', value: '8000' },
|
||||
{ icon: require(`@/img/icons/12.png`), name: '进水阀', value: '6200' },
|
||||
{ icon: require(`@/img/icons/12.png`), name: '按钮', value: '3300' }
|
||||
{ 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]["按钮"] }
|
||||
];
|
||||
|
||||
|
||||
|
|
@ -199,7 +201,7 @@ export default {
|
|||
series: [
|
||||
{
|
||||
type: 'gauge',
|
||||
data: [ { name: 'itemA', value: 100 } ],
|
||||
data: [ { name: 'itemA', value: testRes.data.yx_v_scgdgk[0]["工单完成率"] } ],
|
||||
center: ['50%', '55%'],
|
||||
axisLabel: {
|
||||
formatter: '{value}%',
|
||||
|
|
|
|||
|
|
@ -26,6 +26,8 @@ function getRecentWeekDates() {
|
|||
}
|
||||
|
||||
import * as echarts from 'echarts';
|
||||
import testRes from './test';
|
||||
console.log(testRes)
|
||||
export default {
|
||||
name: 'RoseChart',
|
||||
props: {
|
||||
|
|
@ -178,18 +180,145 @@ export default {
|
|||
};
|
||||
myChart.setOption(this.option);
|
||||
},
|
||||
// randomExtend (minNum, maxNum) {
|
||||
// if (arguments.length === 1) {
|
||||
// return parseInt(Math.random() * minNum + 1, 10)
|
||||
// } else {
|
||||
// return parseInt(Math.random() * (maxNum - minNum + 1) + minNum, 10)
|
||||
// }
|
||||
// }
|
||||
createData2() {
|
||||
var myChart = echarts.init(document.getElementById(this.pieId));
|
||||
console.log(myChart)
|
||||
this.option = {
|
||||
title: {
|
||||
text: '近一周产量趋势',
|
||||
textStyle: {
|
||||
fontSize:30,
|
||||
fontWight:'bold',
|
||||
color: '#fff'
|
||||
}
|
||||
},
|
||||
tooltip: {
|
||||
trigger: 'axis'
|
||||
},
|
||||
legend: {
|
||||
icon: 'rect',
|
||||
itemWidth: 20, // 色块宽度
|
||||
itemHeight: 20, // 色块高度
|
||||
itemGap: 40, // 图例之间的间距
|
||||
data:['水件', '进水阀', '排水阀','按钮'],
|
||||
textStyle: {
|
||||
color: '#fff',
|
||||
fontSize:30,
|
||||
fontWight:'bold'
|
||||
}
|
||||
},
|
||||
grid: {
|
||||
left: '3%',
|
||||
right: '4%',
|
||||
bottom: '3%',
|
||||
containLabel: true
|
||||
},
|
||||
xAxis: {
|
||||
type: 'category',
|
||||
boundaryGap: true,
|
||||
axisLine: {
|
||||
lineStyle: {
|
||||
color: '#fff'
|
||||
}
|
||||
},
|
||||
|
||||
axisLabel: {
|
||||
fontSize: 35, // 设置 Y 轴字体大小
|
||||
color: '#fff', // 可选：设置字体颜色
|
||||
onZero: false ,// 确保 y 轴不与第一个数据点对齐
|
||||
// 只显示奇数索引的 x 轴标签
|
||||
// formatter: function (value, index) {
|
||||
// return index % 2 === 1 ? value : ''; // 奇数索引显示，偶数索引隐藏
|
||||
// }
|
||||
},
|
||||
|
||||
data: testRes.data.yx_v_bzcl1w.map(item=>{return item["日期"]})
|
||||
},
|
||||
yAxis: {
|
||||
type: 'value',
|
||||
axisLine: {
|
||||
lineStyle: {
|
||||
color: '#fff'
|
||||
}
|
||||
},
|
||||
splitLine: {
|
||||
show: true, // 显示 y 轴辅助线
|
||||
lineStyle: {
|
||||
type: 'dashed', // 设置为虚线
|
||||
color: '#999', // 虚线颜色
|
||||
width: 2, // 虚线宽度
|
||||
height:1,
|
||||
dashArray: [15, 5]
|
||||
}
|
||||
},
|
||||
axisLabel: {
|
||||
fontSize: 35, // 设置 Y 轴字体大小
|
||||
color: '#fff', // 可选：设置字体颜色
|
||||
// 只显示偶数的 y 轴标签
|
||||
formatter: function (value) {
|
||||
return value % 200 === 0 ? value : ''; // 偶数显示，奇数隐藏
|
||||
}
|
||||
},
|
||||
},
|
||||
series:
|
||||
[
|
||||
{
|
||||
name: '水件',
|
||||
type: 'line',
|
||||
// stack: 'null',
|
||||
smooth: true,
|
||||
data: testRes.data.yx_v_bzcl1w.map(item=>{return item["水件"]}),
|
||||
lineStyle: {
|
||||
width: 4, // 数据线加粗
|
||||
},
|
||||
symbolSize: 12, // 数据点大小
|
||||
},
|
||||
{
|
||||
name: '进水阀',
|
||||
type: 'line',
|
||||
// stack: 'null',
|
||||
smooth: true,
|
||||
data: testRes.data.yx_v_bzcl1w.map(item=>{return item["进水阀"]}),
|
||||
lineStyle: {
|
||||
width: 4, // 数据线加粗
|
||||
},
|
||||
symbolSize: 12, // 数据点大小
|
||||
},
|
||||
{
|
||||
name: '排水阀',
|
||||
type: 'line',
|
||||
// stack: 'null',
|
||||
smooth: true,
|
||||
data: testRes.data.yx_v_bzcl1w.map(item=>{return item["排水阀"]}),
|
||||
lineStyle: {
|
||||
width: 4, // 数据线加粗
|
||||
},
|
||||
symbolSize: 12, // 数据点大小
|
||||
},
|
||||
{
|
||||
name: '按钮',
|
||||
type: 'line',
|
||||
// stack: 'null',
|
||||
smooth: true,
|
||||
data: testRes.data.yx_v_bzcl1w.map(item=>{return item["按钮"]}),
|
||||
lineStyle: {
|
||||
width: 4, // 数据线加粗
|
||||
},
|
||||
symbolSize: 12, // 数据点大小
|
||||
},
|
||||
|
||||
]
|
||||
};
|
||||
myChart.setOption(this.option);
|
||||
},
|
||||
},
|
||||
mounted() {
|
||||
const { createData } = this
|
||||
|
||||
createData()
|
||||
const { createData,createData2 } = this
|
||||
if(this.dataType == 3){
|
||||
createData2()
|
||||
}else{
|
||||
createData()
|
||||
}
|
||||
|
||||
// setInterval(createData, 100000)
|
||||
}
|
||||
|
|
|
|||
|
|
@ -23,6 +23,8 @@ function getRecentSixMonths() {
|
|||
|
||||
return months;
|
||||
}
|
||||
import testRes from './test';
|
||||
console.log(testRes)
|
||||
export default {
|
||||
name: 'RoseChart',
|
||||
props: {
|
||||
|
|
@ -187,6 +189,141 @@ export default {
|
|||
};
|
||||
myChart.setOption(this.option);
|
||||
},
|
||||
createData2() {
|
||||
|
||||
var myChart = echarts.init(document.getElementById(this.pieId));
|
||||
console.log(myChart)
|
||||
this.option = {
|
||||
title: {
|
||||
text: '近半年产量情况',
|
||||
// subtext: '完成率',
|
||||
// subtextStyle:{
|
||||
// fontSize:20,
|
||||
// fontWight:'bold',
|
||||
// color:'#fff'
|
||||
// },
|
||||
|
||||
textStyle:{
|
||||
fontSize:30,
|
||||
fontWight:'bold',
|
||||
color:'#fff'
|
||||
}
|
||||
},
|
||||
legend: {
|
||||
icon: 'rect',
|
||||
itemWidth: 20, // 色块宽度
|
||||
itemHeight: 20, // 色块高度
|
||||
itemGap: 40, // 图例之间的间距
|
||||
data:['水件', '进水阀', '排水阀','按钮'],
|
||||
textStyle: {
|
||||
color: '#fff',
|
||||
fontSize:30,
|
||||
fontWight:'bold'
|
||||
}
|
||||
},
|
||||
tooltip: {
|
||||
trigger: 'axis',
|
||||
},
|
||||
toolbox: {
|
||||
},
|
||||
calculable: true,
|
||||
xAxis:[
|
||||
{
|
||||
type: 'category',
|
||||
axisLine:{
|
||||
lineStyle:{
|
||||
color:'#fff'
|
||||
}
|
||||
},
|
||||
axisLabel: {
|
||||
fontSize: 30, // 设置 Y 轴字体大小
|
||||
color: '#fff' // 可选：设置字体颜色
|
||||
},
|
||||
// prettier-ignore
|
||||
data:getRecentSixMonths(),
|
||||
},
|
||||
],
|
||||
yAxis: [
|
||||
{
|
||||
type: 'value',
|
||||
axisLine:{
|
||||
lineStyle:{
|
||||
color:'#fff'
|
||||
}
|
||||
},
|
||||
axisLabel: {
|
||||
fontSize: 30, // 设置 Y 轴字体大小
|
||||
color: '#fff' // 可选：设置字体颜色
|
||||
},
|
||||
}
|
||||
],
|
||||
grid: {
|
||||
left: '3%',
|
||||
right: '7%',
|
||||
bottom: '3%',
|
||||
containLabel: true
|
||||
},
|
||||
series:[
|
||||
{
|
||||
name: '水件',
|
||||
type: 'bar',
|
||||
data: testRes.data.yx_v_bzcl6m.map(item=>{return item["水件"]}),
|
||||
markPoint: {
|
||||
data: [
|
||||
{ type: 'max', name: 'Max' },
|
||||
{ type: 'min', name: 'Min' }
|
||||
]
|
||||
},
|
||||
// markLine: {
|
||||
// data: [{ type: 'average', name: 'Avg' }]
|
||||
// }
|
||||
},
|
||||
{
|
||||
name: '进水阀',
|
||||
type: 'bar',
|
||||
data: testRes.data.yx_v_bzcl6m.map(item=>{return item["进水阀"]}),
|
||||
markPoint: {
|
||||
data: [
|
||||
{ type: 'max', name: 'Max' },
|
||||
{ type: 'min', name: 'Min' }
|
||||
]
|
||||
},
|
||||
// markLine: {
|
||||
// data: [{ type: 'average', name: 'Avg' }]
|
||||
// }
|
||||
},
|
||||
{
|
||||
name: '排水阀',
|
||||
type: 'bar',
|
||||
data: testRes.data.yx_v_bzcl6m.map(item=>{return item["排水阀"]}),
|
||||
markPoint: {
|
||||
data: [
|
||||
{ type: 'max', name: 'Max' },
|
||||
{ type: 'min', name: 'Min' }
|
||||
]
|
||||
},
|
||||
// markLine: {
|
||||
// data: [{ type: 'average', name: 'Avg' }]
|
||||
// }
|
||||
},
|
||||
{
|
||||
name: '按钮',
|
||||
type: 'bar',
|
||||
data: testRes.data.yx_v_bzcl6m.map(item=>{return item["按钮"]}),
|
||||
markPoint: {
|
||||
data: [
|
||||
{ type: 'max', name: 'Max' },
|
||||
{ type: 'min', name: 'Min' }
|
||||
]
|
||||
},
|
||||
// markLine: {
|
||||
// data: [{ type: 'average', name: 'Avg' }]
|
||||
// }
|
||||
}
|
||||
],
|
||||
};
|
||||
myChart.setOption(this.option);
|
||||
},
|
||||
// randomExtend (minNum, maxNum) {
|
||||
// if (arguments.length === 1) {
|
||||
// return parseInt(Math.random() * minNum + 1, 10)
|
||||
|
|
@ -196,10 +333,12 @@ export default {
|
|||
// }
|
||||
},
|
||||
mounted() {
|
||||
const { createData } = this
|
||||
|
||||
createData()
|
||||
|
||||
const { createData,createData2 } = this
|
||||
if(this.dataType == 3){
|
||||
createData2()
|
||||
}else{
|
||||
createData()
|
||||
}
|
||||
// setInterval(createData, 100000)
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -36,6 +36,8 @@
|
|||
|
||||
<script>
|
||||
import * as echarts from 'echarts';
|
||||
import testRes from './test'
|
||||
console.log(testRes)
|
||||
export default {
|
||||
name: 'RoseChart',
|
||||
props: {
|
||||
|
|
@ -108,37 +110,37 @@
|
|||
if(dataTypeParam == '3'){
|
||||
this.config.data = [
|
||||
{
|
||||
value: 520,
|
||||
value:testRes.data.yx_v_byzcl[0]["水件"],
|
||||
name: "水件",
|
||||
},
|
||||
{
|
||||
value: 280,
|
||||
value: testRes.data.yx_v_byzcl[0]["排水阀"],
|
||||
name: "排水阀",
|
||||
},
|
||||
{
|
||||
value: 100,
|
||||
value: testRes.data.yx_v_byzcl[0]["进水阀"],
|
||||
name: "进水阀",
|
||||
},
|
||||
{
|
||||
value: 100,
|
||||
value: testRes.data.yx_v_byzcl[0]["按钮"],
|
||||
name: "按钮",
|
||||
},
|
||||
];
|
||||
this.testchartData = [
|
||||
{
|
||||
value: 520,
|
||||
{
|
||||
value:testRes.data.yx_v_byzcl[0]["水件"],
|
||||
name: "水件",
|
||||
},
|
||||
{
|
||||
value: 280,
|
||||
value: testRes.data.yx_v_byzcl[0]["排水阀"],
|
||||
name: "排水阀",
|
||||
},
|
||||
{
|
||||
value: 100,
|
||||
value: testRes.data.yx_v_byzcl[0]["进水阀"],
|
||||
name: "进水阀",
|
||||
},
|
||||
{
|
||||
value: 100,
|
||||
value: testRes.data.yx_v_byzcl[0]["按钮"],
|
||||
name: "按钮",
|
||||
},
|
||||
];
|
||||
|
|
|
|||
File diff suppressed because it is too large
Load Diff
Loading…
Reference in New Issue