projects/mescc/zhp #80

Merged
juzi merged 2 commits from projects/mescc/zhp into projects/mescc/develop 2024-07-02 13:42:35 +08:00
13 changed files with 174 additions and 89 deletions

View File

@ -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);
}, },
}, },
}; };

View File

@ -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 {
@ -347,4 +400,8 @@ export default {
transform: translateY(-50%) translateX(50%); transform: translateY(-50%) translateX(50%);
} }
} }
.echarts-tooltip-dark {
background: #001829;
}
</style> </style>

View File

@ -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);
} }
} }

View File

@ -28,8 +28,8 @@
<div> <div>
<span class="type">良品数量</span> <span class="type">良品数量</span>
<span class="type-name">{{ <span class="type-name">{{
msgObj.stand.goodNumber ? msgObj.stand.goodNumber.toLocaleString() : 0 msgObj.stand.goodNumber ? msgObj.stand.goodNumber.toLocaleString() : 0
}}</span> }}</span>
</div> </div>
</div> </div>
</div> </div>
@ -38,8 +38,8 @@
<div> <div>
<span class="type">生产数量</span> <span class="type">生产数量</span>
<span class="num">{{ <span class="num">{{
msgObj.stand.outputNumber ? msgObj.stand.outputNumber.toLocaleString() : 0 msgObj.stand.outputNumber ? msgObj.stand.outputNumber.toLocaleString() : 0
}}</span> }}</span>
</div> </div>
<div> <div>
<span class="type1">良品率</span> <span class="type1">良品率</span>
@ -61,8 +61,8 @@
<div> <div>
<span class="type">良品数量</span> <span class="type">良品数量</span>
<span class="type-name">{{ <span class="type-name">{{
msgObj.chip.goodNumber ? msgObj.chip.goodNumber.toLocaleString() : 0 msgObj.chip.goodNumber ? msgObj.chip.goodNumber.toLocaleString() : 0
}}</span> }}</span>
</div> </div>
</div> </div>
</div> </div>
@ -71,8 +71,8 @@
<div> <div>
<span class="type">生产数量</span> <span class="type">生产数量</span>
<span class="num">{{ <span class="num">{{
msgObj.chip.outputNumber ? msgObj.chip.outputNumber.toLocaleString() : 0 msgObj.chip.outputNumber ? msgObj.chip.outputNumber.toLocaleString() : 0
}}</span> }}</span>
</div> </div>
<div> <div>
<span class="type1">良品率</span> <span class="type1">良品率</span>
@ -94,8 +94,8 @@
<div> <div>
<span class="type">良品数量</span> <span class="type">良品数量</span>
<span class="type-name">{{ <span class="type-name">{{
msgObj.bipv.goodNumber ? msgObj.bipv.goodNumber.toLocaleString() : 0 msgObj.bipv.goodNumber ? msgObj.bipv.goodNumber.toLocaleString() : 0
}}</span> }}</span>
</div> </div>
</div> </div>
</div> </div>
@ -104,8 +104,8 @@
<div> <div>
<span class="type">生产数量</span> <span class="type">生产数量</span>
<span class="num">{{ <span class="num">{{
msgObj.bipv.outputNumber ? msgObj.bipv.outputNumber.toLocaleString() : 0 msgObj.bipv.outputNumber ? msgObj.bipv.outputNumber.toLocaleString() : 0
}}</span> }}</span>
</div> </div>
<div> <div>
<span class="type1">良品率</span> <span class="type1">良品率</span>
@ -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{

View File

@ -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: {},
}; };

View File

@ -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" />

View File

@ -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,

View File

@ -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;

View File

@ -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) + "%"
@ -229,12 +229,14 @@ 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;

View File

@ -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;

View File

@ -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 {

View File

@ -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

View File

@ -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" },