mt-fe-group/yudao-init
8
0
Fork 0
Code Issues Pull Requests Releases Wiki Activity

修改bui

Browse Source
This commit is contained in:
‘937886381’ 2024-07-02 13:15:50 +08:00
parent 53ba98b01a
commit eee121e5ab
13 changed files with 174 additions and 89 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

36
src/views/copilot/factoryData/components/BarChartBase.vue
View File

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

91
src/views/copilot/factoryData/components/BarChartChipOEE.vue
View File

@ -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 {
@ -346,5 +399,9 @@ export default {
// left: -16px;
transform: translateY(-50%) translateX(50%);
}
}
.echarts-tooltip-dark {
background: #001829;
}
</style>

4
src/views/copilot/factoryData/components/Order.vue
View File

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

36
src/views/copilot/factoryData/components/ProdMonitor.vue
View File

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

17
src/views/copilot/factoryData/components/rightContainer.vue
View File

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

6
src/views/copilot/factoryData/hdIndex.vue
View File

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

8
src/views/copilot/factoryData/index.vue
View File

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

8
src/views/report/components/produceLineBar.vue
View File

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

6
src/views/report/components/produceLineBarTarget.vue
View File

@ -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) + "%"
@ -230,11 +230,13 @@ export default {
};
</script>
<style lang="scss" >
.legendData {
text-align: right;
position: relative;
// right: 30;
// top: 10px;
top: -10px;
.itemData {
display: inline-block;
margin-right: 10px;

10
src/views/report/components/produceLineBarYearTarget.vue
View File

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

5
src/views/report/components/produceLineYieldBarTarget.vue
View File

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

8
src/views/report/produceConversion.vue
View File

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

2
src/views/report/productionSituationTablets.vue
View File

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