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