projects/mescc/zhp #80
@ -55,13 +55,35 @@ export default {
|
||||
options: {
|
||||
color: ["#FFD160", "#2760FF", "#12FFF5"],
|
||||
grid: {
|
||||
left: "7%",
|
||||
right: "7%",
|
||||
left: "6%",
|
||||
right: "3%",
|
||||
bottom: "15%",
|
||||
top: "15%",
|
||||
},
|
||||
tooltip: {
|
||||
trigger: "axis",
|
||||
axisPointer: {
|
||||
// type: "cross",
|
||||
crossStyle: {
|
||||
color: "rgba(237,237,237,0.5)",
|
||||
},
|
||||
},
|
||||
extraCssText: 'box-shadow: 0px 4px 8px 0px rgba(0, 0, 0, 0.38); border- radius: 4px;opacity: 0.6;backdrop- filter: blur(6px);',
|
||||
backgroundColor: '#001829',
|
||||
borderColor: '#001829',
|
||||
formatter: params => {
|
||||
console.log('params', params)
|
||||
var res = ``;
|
||||
for (var i = 0, l = params.length; i < l; i++) {
|
||||
let color = Object.prototype.toString.call(params[i].color) == "[object String]" ? params[i].color : params[i].color.colorStops ? params[i].color.colorStops[0].color : ''
|
||||
// console.log(item.color, color);
|
||||
res +=
|
||||
`<span style='display:inline-block;margin-right:4px;width:10px;height:10px;background-color:${color}'></span>` +
|
||||
`<span style='display:inline-block;width:150px;color:rgba(255,255,255,0855);font-size:14px;'>${params[0].axisValueLabel}</span>` +
|
||||
`<span style='color:rgba(255,255,255,0.65);font-size:14px;'>${params[i].value + '片'}</span>`;
|
||||
}
|
||||
return res;
|
||||
},
|
||||
},
|
||||
xAxis: {
|
||||
axisTick: {
|
||||
@ -396,11 +418,11 @@ export default {
|
||||
this.chart.dispose();
|
||||
}
|
||||
this.chart = echarts.init(document.getElementById("factoryEnergyChart"));
|
||||
const actualOptions = JSON.parse(JSON.stringify(this.options));
|
||||
actualOptions.xAxis.data = this.orderXAxis;
|
||||
actualOptions.series[0].data = this.data;
|
||||
this.actualOptions = actualOptions;
|
||||
this.chart.setOption(actualOptions);
|
||||
// const actualOptions = JSON.parse(JSON.stringify(this.options));
|
||||
this.options.xAxis.data = this.orderXAxis;
|
||||
this.options.series[0].data = this.data;
|
||||
// this.actualOptions = actualOptions;
|
||||
this.chart.setOption(this.options);
|
||||
},
|
||||
},
|
||||
};
|
||||
|
@ -1,7 +1,7 @@
|
||||
<!--
|
||||
* @Author: zhp
|
||||
* @Date: 2024-05-30 08:58:39
|
||||
* @LastEditTime: 2024-06-07 09:29:45
|
||||
* @LastEditTime: 2024-07-02 10:53:34
|
||||
* @LastEditors: zhp
|
||||
* @Description:
|
||||
-->
|
||||
@ -62,7 +62,59 @@ export default {
|
||||
top: "15%",
|
||||
containLabel: true,
|
||||
},
|
||||
tooltip: {},
|
||||
// tooltip: {
|
||||
// trigger: "axis",
|
||||
// axisPointer: {
|
||||
// // type: "cross",
|
||||
// crossStyle: {
|
||||
// color: "rgba(237,237,237,0.5)",
|
||||
// },
|
||||
// },
|
||||
// extraCssText: 'box-shadow: 0px 4px 8px 0px rgba(0, 0, 0, 0.38); border- radius: 4px;opacity: 0.6;backdrop- filter: blur(6px);',
|
||||
// backgroundColor: '#001829',
|
||||
// borderColor: '#001829',
|
||||
// // textStyle: {
|
||||
// // color:'rgba(255, 255, 255, 0.85)'
|
||||
// // },
|
||||
// formatter: params => {
|
||||
// console.log('params', params)
|
||||
// var res = `<span style='color:rgba(255,255,255,0.85)'>${params[0].axisValueLabel}</span>`;
|
||||
// for (var i = 0, l = params.length; i < l; i++) {
|
||||
// res +=
|
||||
// "<br/>" +
|
||||
// `<span style='display:inline-block;margin-right:4px;width:10px;height:10px;background-color:${params[i].color}'></span>` +
|
||||
// `<span style='display:inline-block;width:150px;color:rgba(255,255,255,0.65);font-size:14px;'>${params[i].seriesName}</span>` +
|
||||
// `<span style='color:rgba(255,255,255,0.65);font-size:14px;'>${params[i].value}</span>`;
|
||||
// }
|
||||
// return res;
|
||||
// },
|
||||
// },
|
||||
tooltip: {
|
||||
trigger: "axis",
|
||||
axisPointer: {
|
||||
// type: "cross",
|
||||
crossStyle: {
|
||||
color: "rgba(237,237,237,0.5)",
|
||||
},
|
||||
},
|
||||
extraCssText: 'box-shadow: 0px 4px 8px 0px rgba(0, 0, 0, 0.38); border- radius: 4px;opacity: 0.6;backdrop- filter: blur(6px);',
|
||||
backgroundColor: '#001829',
|
||||
borderColor: '#001829',
|
||||
formatter: params => {
|
||||
console.log('params', params)
|
||||
var res = `<span style='color:rgba(255,255,255,0.85)'>${params[0].axisValueLabel}</span>`;
|
||||
for (var i = 0, l = params.length; i < l; i++) {
|
||||
let color = Object.prototype.toString.call(params[i].color) == "[object String]" ? params[i].color : params[i].color.colorStops ? params[i].color.colorStops[0].color : ''
|
||||
// console.log(item.color, color);
|
||||
res +=
|
||||
"<br/>" +
|
||||
`<span style='display:inline-block;margin-right:4px;width:10px;height:10px;background-color:${color}'></span>` +
|
||||
`<span style='display:inline-block;width:150px;color:rgba(255,255,255,.85);font-size:14px;'>${params[i].seriesName}</span>` +
|
||||
`<span style='color:rgba(255,255,255,0.65);font-size:14px;'>${params[i].value + '片'}</span>`;
|
||||
}
|
||||
return res;
|
||||
},
|
||||
},
|
||||
xAxis: {
|
||||
axisTick: {
|
||||
show: false,
|
||||
@ -201,12 +253,12 @@ export default {
|
||||
},
|
||||
/** 全屏状态切换时,对柱子粗细和字体大小进行相应调整 */
|
||||
isFullscreen(val) {
|
||||
this.actualOptions.series.map((item) => {
|
||||
this.options.series.map((item) => {
|
||||
item.barWidth = val ? 18 : 12;
|
||||
});
|
||||
this.actualOptions.xAxis.axisLabel.fontSize = val ? 18 : 12;
|
||||
this.actualOptions.yAxis.axisLabel.fontSize = val ? 18 : 12;
|
||||
this.actualOptions.yAxis.nameTextStyle.fontSize = val ? 18 : 12;
|
||||
this.options.xAxis.axisLabel.fontSize = val ? 18 : 12;
|
||||
this.options.yAxis.axisLabel.fontSize = val ? 18 : 12;
|
||||
this.options.yAxis.nameTextStyle.fontSize = val ? 18 : 12;
|
||||
// if (val === false && this.isOpen === true) {
|
||||
// console.log(val)
|
||||
// this.width = 97 + '%'
|
||||
@ -221,7 +273,7 @@ export default {
|
||||
// this.actualOptions.xAxis.axisLabel.fontSize = val ? 18 : 12;
|
||||
// this.actualOptions.yAxis.axisLabel.fontSize = val ? 18 : 12;
|
||||
// this.actualOptions.yAxis.nameTextStyle.fontSize = val ? 18 : 12;
|
||||
this.initChart(this.actualOptions)
|
||||
this.initChart(this.options)
|
||||
this.canvasReset()
|
||||
},
|
||||
series(val) {
|
||||
@ -231,16 +283,17 @@ export default {
|
||||
}
|
||||
// console.log('val', val)
|
||||
const actualOptions = JSON.parse(JSON.stringify(this.options))
|
||||
console.log(actualOptions);
|
||||
// actualOptions.xAxis.data = val
|
||||
console.log(actualOptions)
|
||||
actualOptions.series[0].data = val[0].data;
|
||||
actualOptions.series[0].name = val[0].name;
|
||||
actualOptions.series[1].data = val?.[1]?.data;
|
||||
actualOptions.series[1].name = val?.[1]?.name;
|
||||
actualOptions.series[2].data = val?.[2]?.data || [];
|
||||
actualOptions.series[2].name = val?.[2]?.name || "";
|
||||
this.options.series[0].data = val[0].data;
|
||||
this.options.series[0].name = val[0].name;
|
||||
this.options.series[1].data = val?.[1]?.data;
|
||||
this.options.series[1].name = val?.[1]?.name;
|
||||
this.options.series[2].data = val?.[2]?.data || [];
|
||||
this.options.series[2].name = val?.[2]?.name || "";
|
||||
this.actualOptions = actualOptions;
|
||||
this.initChart(actualOptions);
|
||||
this.initChart(this.options);
|
||||
},
|
||||
},
|
||||
mounted() {
|
||||
@ -277,7 +330,7 @@ export default {
|
||||
this.chart.dispose();
|
||||
}
|
||||
this.chart = echarts.init(this.$refs.oeeChart);
|
||||
this.chart.setOption(this.actualOptions);
|
||||
this.chart.setOption(this.options);
|
||||
},
|
||||
},
|
||||
};
|
||||
@ -289,8 +342,8 @@ export default {
|
||||
|
||||
.legend {
|
||||
position: absolute;
|
||||
top: 5.2vh;
|
||||
right: 1vw;
|
||||
top: 3vh;
|
||||
right: 13vw;
|
||||
}
|
||||
|
||||
.legend-item {
|
||||
@ -347,4 +400,8 @@ export default {
|
||||
transform: translateY(-50%) translateX(50%);
|
||||
}
|
||||
}
|
||||
.echarts-tooltip-dark {
|
||||
background: #001829;
|
||||
|
||||
}
|
||||
</style>
|
||||
|
@ -8,7 +8,7 @@
|
||||
<span class="title">工单情况</span>
|
||||
<span class="line"></span>
|
||||
</div>
|
||||
<div class="button-type" style="margin-left: auto;position: absolute;right: 1%;top: 57%;z-index: 999;">
|
||||
<div class="button-type" style="margin-left: auto;position: absolute;right: 3%;top: 57%;z-index: 999;">
|
||||
<CopilotButton v-for="i in ['目标产量', '计划投入', '实际投入', '实际产出', '废品数量', '待再加工']" :key="i" :label="i"
|
||||
:active="i === type" @click="() => $emit('update:type', i)" />
|
||||
</div>
|
||||
@ -188,7 +188,7 @@ export default {
|
||||
height: 1px; // display: inline-block;
|
||||
border: 1px solid;
|
||||
// display: inline-block;
|
||||
border-image: linear-gradient(90deg, rgba(25, 146, 255, 0) 10%, rgba(95, 190, 249, 1), rgba(0, 120, 228, 0) 90%, ) 2 2;
|
||||
border-image: linear-gradient(90deg, rgba(25, 146, 255, 0) 0%, rgba(95, 190, 249, 1), rgba(0, 120, 228, 0) 90%, ) 2 2;
|
||||
backdrop-filter: blur(3px);
|
||||
}
|
||||
}
|
||||
|
@ -28,8 +28,8 @@
|
||||
<div>
|
||||
<span class="type">良品数量</span>
|
||||
<span class="type-name">{{
|
||||
msgObj.stand.goodNumber ? msgObj.stand.goodNumber.toLocaleString() : 0
|
||||
}}</span>
|
||||
msgObj.stand.goodNumber ? msgObj.stand.goodNumber.toLocaleString() : 0
|
||||
}}</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@ -38,8 +38,8 @@
|
||||
<div>
|
||||
<span class="type">生产数量</span>
|
||||
<span class="num">{{
|
||||
msgObj.stand.outputNumber ? msgObj.stand.outputNumber.toLocaleString() : 0
|
||||
}}</span>
|
||||
msgObj.stand.outputNumber ? msgObj.stand.outputNumber.toLocaleString() : 0
|
||||
}}</span>
|
||||
</div>
|
||||
<div>
|
||||
<span class="type1">良品率</span>
|
||||
@ -61,8 +61,8 @@
|
||||
<div>
|
||||
<span class="type">良品数量</span>
|
||||
<span class="type-name">{{
|
||||
msgObj.chip.goodNumber ? msgObj.chip.goodNumber.toLocaleString() : 0
|
||||
}}</span>
|
||||
msgObj.chip.goodNumber ? msgObj.chip.goodNumber.toLocaleString() : 0
|
||||
}}</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@ -71,8 +71,8 @@
|
||||
<div>
|
||||
<span class="type">生产数量</span>
|
||||
<span class="num">{{
|
||||
msgObj.chip.outputNumber ? msgObj.chip.outputNumber.toLocaleString() : 0
|
||||
}}</span>
|
||||
msgObj.chip.outputNumber ? msgObj.chip.outputNumber.toLocaleString() : 0
|
||||
}}</span>
|
||||
</div>
|
||||
<div>
|
||||
<span class="type1">良品率</span>
|
||||
@ -94,8 +94,8 @@
|
||||
<div>
|
||||
<span class="type">良品数量</span>
|
||||
<span class="type-name">{{
|
||||
msgObj.bipv.goodNumber ? msgObj.bipv.goodNumber.toLocaleString() : 0
|
||||
}}</span>
|
||||
msgObj.bipv.goodNumber ? msgObj.bipv.goodNumber.toLocaleString() : 0
|
||||
}}</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@ -104,8 +104,8 @@
|
||||
<div>
|
||||
<span class="type">生产数量</span>
|
||||
<span class="num">{{
|
||||
msgObj.bipv.outputNumber ? msgObj.bipv.outputNumber.toLocaleString() : 0
|
||||
}}</span>
|
||||
msgObj.bipv.outputNumber ? msgObj.bipv.outputNumber.toLocaleString() : 0
|
||||
}}</span>
|
||||
</div>
|
||||
<div>
|
||||
<span class="type1">良品率</span>
|
||||
@ -118,7 +118,11 @@
|
||||
<div class="chart">
|
||||
<div class="chart-title">
|
||||
<span class="title">生产情况</span>
|
||||
<span class="line"></span>
|
||||
<div class="button-than" style="position: absolute;right: 3%;">
|
||||
<CopilotButton v-for="i in ['同比', '环比']" :key="i" :label="i" :active="i === than"
|
||||
@click="() => $emit('update:than', i)" />
|
||||
</div>
|
||||
<!-- <span class="line"></span> -->
|
||||
</div>
|
||||
<barChartBase :companyId="companyId" :than="than" :period="period" :data="factoryData" ref="barChart"
|
||||
style="height: 0;flex:1">
|
||||
@ -129,10 +133,12 @@
|
||||
<script>
|
||||
import { number } from 'echarts';
|
||||
import barChartBase from './ChipOee'
|
||||
import CopilotButton from "./button.vue"
|
||||
export default {
|
||||
name: "ProdMonitor",
|
||||
components: {
|
||||
barChartBase,
|
||||
CopilotButton
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
@ -153,6 +159,9 @@ export default {
|
||||
type: Number,
|
||||
default:0
|
||||
},
|
||||
than: {
|
||||
type: String,
|
||||
},
|
||||
than: {
|
||||
type: String,
|
||||
default: '同比',
|
||||
@ -181,6 +190,13 @@ export default {
|
||||
},
|
||||
mounted() {
|
||||
this.makeData();
|
||||
this.$nextTick(() => {
|
||||
let button = document.getElementsByClassName('button-than')
|
||||
console.log(button);
|
||||
button[0].children[0].style.borderRadius = '4px 0 0 4px'
|
||||
button[0].children[1].style.borderRadius = '0px 4px 4px 0'
|
||||
console.log(button[0].children[0].style);
|
||||
})
|
||||
},
|
||||
methods: {
|
||||
makeData() {
|
||||
@ -237,15 +253,15 @@ export default {
|
||||
font-style: normal;
|
||||
display: inline-block;
|
||||
}
|
||||
.line{
|
||||
flex: 1;
|
||||
// width: 80%;
|
||||
height: 1px; // display: inline-block;
|
||||
border: 1px solid;
|
||||
// display: inline-block;
|
||||
border-image: linear-gradient(90deg, rgba(25, 146, 255, 0) 10%, rgba(95, 190, 249, 1), rgba(0, 120, 228, 0) 90%,) 2 2;
|
||||
backdrop-filter: blur(3px);
|
||||
}
|
||||
// .line{
|
||||
// flex: 1;
|
||||
// // width: 80%;
|
||||
// height: 1px; // display: inline-block;
|
||||
// border: 1px solid;
|
||||
// // display: inline-block;
|
||||
// border-image: linear-gradient(90deg, rgba(25, 146, 255, 0) 10%, rgba(95, 190, 249, 1), rgba(0, 120, 228, 0) 90%,) 2 2;
|
||||
// backdrop-filter: blur(3px);
|
||||
// }
|
||||
}
|
||||
}
|
||||
.data{
|
||||
|
@ -35,10 +35,6 @@
|
||||
:class="[side == 'left' ? 'gradient-to-right' : 'gradient-to-left']">
|
||||
<Icon :icon="icon"></Icon>
|
||||
<h2 class="container-title">{{ title }}</h2>
|
||||
<div class="button-than" style="margin-left: auto;">
|
||||
<CopilotButton v-for="i in ['同比', '环比']" :key="i" :label="i" :active="i === than"
|
||||
@click="() => $emit('update:than', i)" />
|
||||
</div>
|
||||
</div>
|
||||
<div class="container-body" :class="[
|
||||
side == 'left' ? 'body-gradient-to-right' : 'body-gradient-to-left',
|
||||
@ -50,12 +46,10 @@
|
||||
|
||||
<script>
|
||||
import ContainerIconVue from "./ContainerIcon.vue"
|
||||
import CopilotButton from "./button.vue"
|
||||
export default {
|
||||
name: "DashboardContainer",
|
||||
components: {
|
||||
Icon: ContainerIconVue,
|
||||
CopilotButton
|
||||
},
|
||||
props: {
|
||||
side: {
|
||||
@ -66,9 +60,6 @@ export default {
|
||||
type: String,
|
||||
default: "cube",
|
||||
},
|
||||
than: {
|
||||
type: String,
|
||||
},
|
||||
title: {
|
||||
type: String,
|
||||
default: "Default Title",
|
||||
@ -80,13 +71,7 @@ export default {
|
||||
},
|
||||
computed: {},
|
||||
mounted() {
|
||||
this.$nextTick(() => {
|
||||
let button = document.getElementsByClassName('button-than')
|
||||
console.log(button);
|
||||
button[0].children[0].style.borderRadius = '4px 0 0 4px'
|
||||
button[0].children[1].style.borderRadius = '0px 4px 4px 0'
|
||||
console.log(button[0].children[0].style);
|
||||
})
|
||||
|
||||
},
|
||||
methods: {},
|
||||
};
|
||||
|
@ -4,9 +4,9 @@
|
||||
@update:than="updateThan" @update:period="updatePeriod" />
|
||||
<div class="factory-section">
|
||||
<section class="top flex">
|
||||
<db-container title="生产监控" icon="prod" @update:than="updateThan" :than="than">
|
||||
<prod-monitor :companyId="companyId" :factoryData="factoryData" :than="than" :period="period" :data="data"
|
||||
:prodOutPut="prodOutPut" :prodFto="prodFto" :showBipv="show" />
|
||||
<db-container title="生产监控" icon="prod">
|
||||
<prod-monitor @update:than="updateThan" :companyId="companyId" :factoryData="factoryData" :than="than"
|
||||
:period="period" :data="data" :prodOutPut="prodOutPut" :prodFto="prodFto" :showBipv="show" />
|
||||
</db-container>
|
||||
<left-container title="工单监控" icon="order">
|
||||
<order @update:type="updateType" :type="type" :prodOrder="prodOrder" />
|
||||
|
@ -4,9 +4,9 @@
|
||||
@update:period="updatePeriod" />
|
||||
<div class="factory-section">
|
||||
<section class="top flex">
|
||||
<db-container title="生产监控" icon="prod" @update:than="updateThan" :than="than">
|
||||
<prod-monitor :companyId="companyId" :factoryData="factoryData" :than="than" :period="period" :data="data"
|
||||
:prodOutPut="prodOutPut" :prodFto="prodFto" :showBipv="show" />
|
||||
<db-container title="生产监控" icon="prod">
|
||||
<prod-monitor @update:than="updateThan" :than="than" :companyId="companyId" :factoryData="factoryData"
|
||||
:period="period" :data="data" :prodOutPut="prodOutPut" :prodFto="prodFto" :showBipv="show" />
|
||||
</db-container>
|
||||
<left-container title="工单监控" icon="order">
|
||||
<order @update:type="updateType" :type="type" :prodOrder="prodOrder" />
|
||||
@ -196,7 +196,7 @@ export default {
|
||||
gap: 16px;
|
||||
.flex {
|
||||
display: flex;
|
||||
gap: 16px;
|
||||
gap: 20px;
|
||||
flex: 1;
|
||||
}
|
||||
.top > div,
|
||||
|
@ -1,7 +1,7 @@
|
||||
<!--
|
||||
* @Author: zhp
|
||||
* @Date: 2024-06-19 15:28:34
|
||||
* @LastEditTime: 2024-06-27 10:40:57
|
||||
* @LastEditTime: 2024-07-02 08:41:11
|
||||
* @LastEditors: zhp
|
||||
* @Description:
|
||||
-->
|
||||
@ -56,7 +56,7 @@ export default {
|
||||
for (var i = 0, l = params.length; i < l; i++) {
|
||||
res +=
|
||||
"<br/>" +
|
||||
`<span style='display:inline-block;margin-right:4px;border-radius:10px;width:10px;height:10px;background-color:${params[i].color}'></span>` +
|
||||
`<span style='display:inline-block;margin-right:4px;width:10px;height:10px;background-color:${params[i].color}'></span>` +
|
||||
`<span style='display:inline-block;width:150px;color:rgba(0,0,0,0.8);font-size:14px;'>${params[i].seriesName}</span>` +
|
||||
`<span style='color:rgba(0,0,0,0.48);font-size:14px;'>${params[i].seriesName === "综合良率"
|
||||
? (params[i].value ? params[i].value.toFixed(2) : 0.0) + "%"
|
||||
@ -229,12 +229,12 @@ export default {
|
||||
},
|
||||
};
|
||||
</script>
|
||||
<style lang="scss">
|
||||
<style lang="scss" scoped>
|
||||
.legendData {
|
||||
text-align: right;
|
||||
position: relative;
|
||||
// right: 30;
|
||||
// top: 10px;
|
||||
top: -10px;
|
||||
.itemData {
|
||||
display: inline-block;
|
||||
margin-right: 10px;
|
||||
|
@ -1,7 +1,7 @@
|
||||
<!--
|
||||
* @Author: zhp
|
||||
* @Date: 2024-06-20 16:13:36
|
||||
* @LastEditTime: 2024-06-28 14:54:33
|
||||
* @LastEditTime: 2024-07-02 08:40:56
|
||||
* @LastEditors: zhp
|
||||
* @Description:
|
||||
-->
|
||||
@ -56,7 +56,7 @@ export default {
|
||||
for (var i = 0, l = params.length; i < l; i++) {
|
||||
res +=
|
||||
"<br/>" +
|
||||
`<span style='display:inline-block;margin-right:4px;border-radius:10px;width:10px;height:10px;background-color:${params[i].color}'></span>` +
|
||||
`<span style='display:inline-block;margin-right:4px;width:10px;height:10px;background-color:${params[i].color}'></span>` +
|
||||
`<span style='display:inline-block;width:150px;color:rgba(0,0,0,0.8);font-size:14px;'>${params[i].seriesName}</span>` +
|
||||
`<span style='color:rgba(0,0,0,0.48);font-size:14px;'>${params[i].seriesName === "综合良率"
|
||||
? (params[i].data.titleValue ? params[i].data.titleValue.toFixed(2) : 0.0) + "%"
|
||||
@ -229,12 +229,14 @@ export default {
|
||||
},
|
||||
};
|
||||
</script>
|
||||
<style lang="scss">
|
||||
<style lang="scss" >
|
||||
|
||||
.legendData {
|
||||
text-align: right;
|
||||
position: relative;
|
||||
// right: 30;
|
||||
// top: 10px;
|
||||
top: -10px;
|
||||
.itemData {
|
||||
display: inline-block;
|
||||
margin-right: 10px;
|
||||
|
@ -1,7 +1,7 @@
|
||||
<!--
|
||||
* @Author: zhp
|
||||
* @Date: 2024-06-20 16:13:52
|
||||
* @LastEditTime: 2024-06-28 13:45:53
|
||||
* @LastEditTime: 2024-07-02 08:41:23
|
||||
* @LastEditors: zhp
|
||||
* @Description:
|
||||
-->
|
||||
@ -56,7 +56,7 @@ export default {
|
||||
for (var i = 0, l = params.length; i < l; i++) {
|
||||
res +=
|
||||
"<br/>" +
|
||||
`<span style='display:inline-block;margin-right:4px;border-radius:10px;width:10px;height:10px;background-color:${params[i].color}'></span>` +
|
||||
`<span style='display:inline-block;margin-right:4px;width:10px;height:10px;background-color:${params[i].color}'></span>` +
|
||||
`<span style='display:inline-block;width:150px;color:rgba(0,0,0,0.8);font-size:14px;'>${params[i].seriesName}</span>` +
|
||||
`<span style='color:rgba(0,0,0,0.48);font-size:14px;'>${params[i].seriesName === "综合良率"
|
||||
? (params[i].value ? params[i].value.toFixed(2) : 0.0) + "%"
|
||||
@ -208,12 +208,14 @@ export default {
|
||||
},
|
||||
};
|
||||
</script>
|
||||
<style lang="scss">
|
||||
<style lang="scss" scoped>
|
||||
|
||||
.legendData {
|
||||
text-align: right;
|
||||
position: relative;
|
||||
// right: 30;
|
||||
// top: 10px;
|
||||
top: -10px;
|
||||
// top: -10px;
|
||||
.itemData {
|
||||
display: inline-block;
|
||||
margin-right: 10px;
|
||||
|
@ -1,7 +1,7 @@
|
||||
<!--
|
||||
* @Author: zhp
|
||||
* @Date: 2024-06-21 09:05:14
|
||||
* @LastEditTime: 2024-06-28 15:53:14
|
||||
* @LastEditTime: 2024-07-02 08:33:22
|
||||
* @LastEditors: zhp
|
||||
* @Description:
|
||||
-->
|
||||
@ -223,10 +223,11 @@ export default {
|
||||
},
|
||||
};
|
||||
</script>
|
||||
<style lang="scss">
|
||||
<style lang="scss" scoped>
|
||||
.legendData {
|
||||
text-align: right;
|
||||
position: relative;
|
||||
top: -10px;
|
||||
// right: 30;
|
||||
// top: 10px;
|
||||
.itemData {
|
||||
|
@ -561,7 +561,7 @@ export default {
|
||||
}
|
||||
]
|
||||
res.data.forEach(element => {
|
||||
element.list.reverse().forEach((ele, index) => {
|
||||
element.list.forEach((ele, index) => {
|
||||
let i = index + 1
|
||||
this.chartMsg.xData.push(ele.reportTimep)
|
||||
this.otherProps.push({
|
||||
@ -571,10 +571,10 @@ export default {
|
||||
})
|
||||
})
|
||||
if (res.data[0].list.length != 0) {
|
||||
this.chartMsg.xData.push(res.data[0].list[res.data[0].list.length - 1].reportTimep + '目标')
|
||||
this.chartMsg.xData.push(res.data[0].list[res.data[0].list.length - 1].reportTimep.slice(0, res.data[0].list[res.data[0].list.length - 1].reportTimep.length - 3) + '目标值')
|
||||
if (this.listQuery.date === 0 || this.listQuery.date === 1 || this.listQuery.date === 2) {
|
||||
this.otherProps.push({
|
||||
label: res.data[0].list[res.data[0].list.length - 1].reportTimep + '目标',
|
||||
label: res.data[0].list[res.data[0].list.length - 1].reportTimep.slice(0, res.data[0].list[res.data[0].list.length - 1].reportTimep.length-3) + '目标值',
|
||||
prop: 'dayData'
|
||||
})
|
||||
dataArr[0]['dayData'] = res.data[0].list[res.data[0].list.length - 1].chipTarget
|
||||
@ -583,7 +583,7 @@ export default {
|
||||
}
|
||||
if (this.listQuery.date === 2 || this.listQuery.date === 3) {
|
||||
this.otherProps.push({
|
||||
label: res.data[0].yearTarget.targetTime + '年目标',
|
||||
label: res.data[0].yearTarget.targetTime + '年目标值',
|
||||
prop: 'yearData'
|
||||
})
|
||||
dataArr[0]['yearData'] = res.data[0].yearTarget.chipTotalPower
|
||||
|
@ -456,7 +456,7 @@ export default {
|
||||
{ id: 3, name: "标准组件产量", type: 1, color: "#64BDFF" },
|
||||
]
|
||||
} else {
|
||||
[
|
||||
this.legendList = [
|
||||
{ id: 1, name: "FTO投入", type: 1, color: "#8EF0AB" },
|
||||
{ id: 2, name: "芯片产量", type: 1, color: "#288AFF" },
|
||||
{ id: 3, name: "标准组件产量", type: 1, color: "#64BDFF" },
|
||||
|
Loading…
Reference in New Issue
Block a user