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

projects/mescc/zhp #15

Merged
juzi merged 3 commits from projects/mescc/zhp into projects/mescc/develop 2024-05-11 16:47:53 +08:00
Conversation 0 Commits 3 Files Changed 15 +1100 -283
15 changed files with 1100 additions and 283 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
.env.dev
View File

@ -1,7 +1,7 @@
### ###
# @Author: zhp # @Author: zhp
# @Date: 2024-04-28 13:42:51 # @Date: 2024-04-28 13:42:51
# @LastEditTime: 2024-05-10 08:42:44 # @LastEditTime: 2024-05-11 08:52:30
# @LastEditors: zhp # @LastEditors: zhp
# @Description: # @Description:
### ###

21
src/mixins/chart.js
View File

@ -1,20 +1,19 @@
import * as echarts from "echarts"; import * as echarts from "echarts";
function __resizeHandler(entries) { function __resizeHandler(entries) {
console.log(entries);
for (const entry of entries) { for (const entry of entries) {
if (entry.contentBoxSize) { if (entry.contentBoxSize) {
// manipulate contentBoxSize // manipulate contentBoxSize
const contentBoxSize = Array.isArray(entry.contentBoxSize) // const contentBoxSize = Array.isArray(entry.contentBoxSize)
? entry.contentBoxSize[0] // ? entry.contentBoxSize[0]
: entry.contentBoxSize; // : entry.contentBoxSize;
this.chart_mixin_chartInstance.resize({ // this.chart_mixin_chartInstance.resize({
width: // width:
contentBoxSize.inlineSize < this.MIN_WIDTH // contentBoxSize.inlineSize < this.MIN_WIDTH
? this.MIN_WIDTH // ? this.MIN_WIDTH
: contentBoxSize.inlineSize, // : contentBoxSize.inlineSize,
height: contentBoxSize.blockSize, // height: contentBoxSize.blockSize,
}); // });
} else { } else {
// manipulate contentRect // manipulate contentRect
this.chart_mixin_chartInstance.resize({ this.chart_mixin_chartInstance.resize({

40
src/store/modules/home.js
View File

@ -29,10 +29,12 @@ const state = {
target: [], target: [],
current: [], current: [],
previous: [], previous: [],
outputNumber:[],
}, },
stdRate: { stdRate: {
target: [], target: [],
current: [], current: [],
outputNumber:[]
}, },
}, },
}, },
@ -112,11 +114,8 @@ const actions = {
targetList = data targetList = data
} }
let factoryData = factoryList.prodOutputResultDO ? factoryList.prodOutputResultDO : factoryList.prodOutputRateDO let factoryData = factoryList.prodOutputResultDO ? factoryList.prodOutputResultDO : factoryList.prodOutputRateDO
let targetData = targetList.ProdTargetDO ? targetList.ProdTargetDO : targetList.ProdTargetDO let targetData = targetList.prodTargetDO ? targetList.prodTargetDO : targetList.prodTargetDO
console.log(factoryList.ProdOutputDO)
console.log('ryf',factoryList)
const payload = handler(factoryData, targetData) const payload = handler(factoryData, targetData)
console.log(payload)
commit("SET_COPILOT_INFO", { type, payload }); commit("SET_COPILOT_INFO", { type, payload });
}, },
}; };
@ -129,7 +128,7 @@ export default {
}; };
function splitCurrentAndPreviousA(factoryListResponse, targetListResponse) { function splitCurrentAndPreviousA(factoryListResponse, targetListResponse) {
console.log('工厂',factoryListResponse); console.log('工厂',targetListResponse);
// console.log('工厂',factoryListResponse); // console.log('工厂',factoryListResponse);
// 初始数据 // 初始数据
@ -186,9 +185,6 @@ function splitCurrentAndPreviousA(factoryListResponse, targetListResponse) {
// ]; // ];
if (factoryListResponse) { if (factoryListResponse) {
for (const factory of factoryListResponse) { for (const factory of factoryListResponse) {
if (factory.glassType === 1) {
console.log(factory.yieldRate)
}
const fId = getFactoryId(factory); const fId = getFactoryId(factory);
// 获取目标值 // 获取目标值
if (targetListResponse) { if (targetListResponse) {
@ -197,23 +193,25 @@ function splitCurrentAndPreviousA(factoryListResponse, targetListResponse) {
componentYieldRate, componentYieldRate,
chipOee, chipOee,
componentConversionEfficiency, componentConversionEfficiency,
componentYield
} = getFactoryTargetValueA(targetListResponse, fId); } = getFactoryTargetValueA(targetListResponse, fId);
stdRate.target[fId] = chipYieldRate; stdRate.target[fId] = componentYieldRate
chipRate.target[fId] = componentYieldRate; chipRate.target[fId] = chipYieldRate
} }
// 芯片OEE // 芯片OEE
chipOee.current[fId] = factory.oee * 100 || random_default(); chipOee.current[fId] = factory.oee * 100 ;
chipOee.previous[fId] = factory.previousYearOee * 100 || random_default(); chipOee.previous[fId] = factory.previousYearOee * 100 ;
// 转化效率 // 转化效率
transformRate.current[fId] = transformRate.current[fId] =
factory.componentConversionEfficiency * 100 || random_default(); factory.componentConversionEfficiency * 100 ;
transformRate.previous[fId] = transformRate.previous[fId] =
factory.previousYearComponentConversionEfficiency * 100 || random_default(); factory.previousYearComponentConversionEfficiency * 100 ;
// 芯片良率 与 标准组件良率 // 芯片良率 与 标准组件良率
if (![0, 1].includes(factory.glassType)) continue; if (![0, 1].includes(factory.glassType)) continue;
const _t = [chipRate, stdRate][factory.glassType]; const _t = [chipRate, stdRate][factory.glassType]
_t.current[fId] = factory.yieldRate || random_default(); console.log('_t',_t);
_t.previous[fId] = factory.previousYearYieldRate || random_default(); _t.current[fId] = factory.yieldRate ;
_t.previous[fId] = factory.previousYearYieldRate ;
} }
return { return {
@ -295,16 +293,18 @@ function getFactoryTargetValue(targetList, factoryId) {
* @returns * @returns
*/ */
function getFactoryTargetValueA(targetList, factoryId) { function getFactoryTargetValueA(targetList, factoryId) {
const target = targetList.find((item) => item.factory === factoryId); const target = targetList.find((item) => item.factory === factoryId)
if (target) { if (target) {
return { return {
chipYieldRate: target.chipYieldRate ?? random_default(), chipYieldRate: target.chipYieldRate ?? random_default(),
componentYieldRate: target.componentYieldRate ?? random_default(), componentYieldRate: target.componentYieldRate ?? random_default(),
componentYield: target.componentYield ?? random_default(),
}; };
} }
return { return {
chipYieldRate: random_default(), chipYieldRate:0,
componentYieldRate: random_default(), componentYieldRate:0,
componentYield:0 ,
}; };
} }

356
src/views/copilot/components/LineChartBase.vue
View File

@ -28,7 +28,7 @@
import screenfull from "screenfull"; import screenfull from "screenfull";
import ChartContainer from "./ChartContainer.vue"; import ChartContainer from "./ChartContainer.vue";
import chartMixin from "@/mixins/chart.js"; import chartMixin from "@/mixins/chart.js";
import * as echarts from "echarts";
export default { export default {
name: "LineChartBase", name: "LineChartBase",
components: { components: {
@ -38,7 +38,7 @@ export default {
props: { props: {
vHeight: { vHeight: {
type: Number, type: Number,
default: 34, default: 38,
}, },
legend: { legend: {
type: Array, type: Array,
@ -69,116 +69,300 @@ export default {
top: "15%", top: "15%",
containLabel: true, containLabel: true,
}, },
tooltip: {}, // title: {
xAxis: { // text: 'Stacked Area Chart'
axisTick: { // },
show: false, tooltip: {
trigger: 'axis',
axisPointer: {
type: 'cross',
label: {
backgroundColor: '#6a7985'
}
}
}, },
axisLine: { // legend: {
lineStyle: { // data: ['Email', 'Union Ads', 'Video Ads', 'Direct', 'Search Engine']
color: "#4561AE", // },
toolbox: {
feature: {
saveAsImage: {}
}
}, },
grid: {
left: '3%',
right: '4%',
bottom: '3%',
containLabel: true
}, },
axisLabel: { xAxis: [
color: "#fff", {
fontSize: 12, type: 'category',
boundaryGap: false,
data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
}
],
yAxis: [
{
min: function () { // 取最小值向下取整为最小刻度
return 0
}, },
data: this.xAxis, max: function (value) { // 取最大值向上取整为最大刻度
}, },
yAxis: { scale: true,
name: "单位/片", type: 'value',
nameTextStyle: { name: 'kw/h',
color: "#fff", // max: 100,//最大值
fontSize: 12, // min: 0,//最小值
}, // interval: 20,//间隔
axisTick: { nameTextStyle: {// y轴上方单位的颜色
show: false, color: 'rgba(255,255,255,0.5)', // 坐标值得具体的颜色
}, align: "right",
axisLabel: { padding: [0, 0, 0, 2]
color: "#fff",
fontSize: 12,
}, },
// position: 'left',
alignTicks: true,
axisLine: { axisLine: {
show: true, show: true,
lineStyle: { lineStyle: {
color: "#4561AE", // type: 'solid',
color: '#25528f',
// width: '1' // 坐标线的宽度
}
}, },
axisLabel: {
color: 'rgba(255,255,255,0.5)', // 坐标值得具体的颜色
fontSize: 12,
// formatter: '{value}'
formatter: '{value}'
// }
}, },
splitLine: { splitLine: {
lineStyle: { lineStyle: {
color: "#4561AE", color: '#25528f'
}, }
}, }
// type: 'value'
// axisLine: {
// show: true,
// lineStyle: {
// color: colors[0]
// }
// },
}, },
],
series: [ series: [
{ {
name: "", // this.series[0].name, name: '瑞昌',
type: "bar", type: 'line',
barWidth: 12, stack: 'Total',
itemStyle: { areaStyle: {
borderRadius: [10, 10, 0, 0], opacity: 0.8,
color: { color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
type: "linear",
x: 0,
y: 0,
x2: 0,
y2: 1,
colorStops: [
{ {
offset: 0, offset: 0,
color: "#12f7f1", // 0% 处的颜色 color: '#8167F6'
},
{
offset: 0.35,
color: "#12f7f177", // 100% 处的颜色
},
{
offset: 0.75,
color: "#12f7f133", // 100% 处的颜色
}, },
{ {
offset: 1, offset: 1,
color: "transparent", // 100% 处的颜色 color: 'rgba(255, 234, 153, 0)'
}
])
}, },
], itemStyle: {
global: false, // 缺省为 false normal: {
color: '#8167F6', //改变折线点的颜色
lineStyle: {
color: '#8167F6' //改变折线颜色
}
}
}, },
}, // emphasis: {
data: [], // this.series[0].data, // focus: 'series'
// },
data: [120, 132, 101, 134, 90, 230, 210]
}, },
{ {
name: "", // this.series[1].name, name: '邯郸',
type: "bar", type: 'line',
barWidth: 12, stack: 'Total',
// tooltip: { areaStyle: {
// valueFormatter: function (value) { opacity: 0.8,
// return value + " ml"; color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
// },
// },
itemStyle: {
borderRadius: [10, 10, 0, 0],
color: {
type: "linear",
x: 0,
y: 0,
x2: 0,
y2: 1,
colorStops: [
{ {
offset: 0, offset: 0,
color: "#57abf8", // 0% 处的颜色 color: '#2760FF'
}, },
{ {
offset: 1, offset: 1,
color: "#364BFE66", // 100% 处的颜色 color: 'rgba(255, 234, 153, 0)'
}
])
}, },
], itemStyle: {
global: false, // 缺省为 false normal: {
color: '#2760FF', //改变折线点的颜色
lineStyle: {
color: '#2760FF' //改变折线颜色
}
}
}, },
// emphasis: {
// focus: 'series'
// },
data: [120, 132, 101, 134, 90, 230, 210]
}, },
data: [], // this.series[1].data, {
name: '株洲',
type: 'line',
stack: 'Total',
areaStyle: {
opacity: 0.8,
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
{
offset: 0,
color: '#5996F7'
}, },
], {
offset: 1,
color: 'rgba(255, 234, 153, 0)'
}
])
},
itemStyle: {
normal: {
color: '#5996F7', //改变折线点的颜色
lineStyle: {
color: '#5996F7' //改变折线颜色
}
}
},
// emphasis: {
// focus: 'series'
// },
data: [120, 132, 101, 134, 90, 230, 210]
},
{
name: '佳木斯',
type: 'line',
stack: 'Total',
areaStyle: {
opacity: 0.8,
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
{
offset: 0,
color: '#8BC566'
},
{
offset: 1,
color: 'rgba(255, 234, 153, 0)'
}
])
},
itemStyle: {
normal: {
color: '#8BC566', //改变折线点的颜色
lineStyle: {
color: '#8BC566' //改变折线颜色
}
}
},
// emphasis: {
// focus: 'series'
// },
data: [120, 132, 101, 134, 90, 230, 210]
},
{
name: '成都',
type: 'line',
stack: 'Total',
areaStyle: {
opacity: 0.8,
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
{
offset: 0,
color: '#11FAF0'
},
{
offset: 1,
color: 'rgba(255, 234, 153, 0)'
}
])
},
itemStyle: {
normal: {
color: '#11FAF0', //改变折线点的颜色
lineStyle: {
color: '#11FAF0' //改变折线颜色
}
}
},
// emphasis: {
// focus: 'series'
// },
data: [120, 132, 101, 134, 90, 230, 210]
},
{
name: '凯盛',
type: 'line',
stack: 'Total',
areaStyle: {
opacity: 0.8,
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
{
offset: 0,
color: '#F3C000'
},
{
offset: 1,
color: 'rgba(255, 234, 153, 0)'
}
])
},
itemStyle: {
normal: {
color: '#F3C000', //改变折线点的颜色
lineStyle: {
color: '#F3C000' //改变折线颜色
}
}
},
// emphasis: {
// focus: 'series'
// },
data: [120, 132, 101, 134, 90, 230, 210]
},
{
name: '蚌埠',
type: 'line',
stack: 'Total',
areaStyle: {
opacity: 0.8,
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
{
offset: 0,
color: '#F38600'
},
{
offset: 1,
color: 'rgba(255, 234, 153, 0)'
}
])
},
itemStyle: {
normal: {
color: '#F38600', //改变折线点的颜色
lineStyle: {
color: '#F38600' //改变折线颜色
}
}
},
// emphasis: {
// focus: 'series'
// },
data: [120, 132, 101, 134, 90, 230, 210]
},
]
}, },
}; };
}, },
@ -233,7 +417,7 @@ export default {
.legend-item { .legend-item {
position: relative; position: relative;
// font-size: 12px; // font-size: 12px;
margin-right: 0.67vw; margin-right: 2vw;
&::before { &::before {
content: ""; content: "";
@ -260,37 +444,37 @@ export default {
.legend-item:nth-child(1):after, .legend-item:nth-child(1):after,
.legend-item:nth-child(1):before { .legend-item:nth-child(1):before {
background-color: #fad162; background-color: #8167F6;
} }
.legend-item:nth-child(2):after, .legend-item:nth-child(2):after,
.legend-item:nth-child(2):before { .legend-item:nth-child(2):before {
background-color: #2160f3; background-color: #2760FF;
} }
.legend-item:nth-child(3):after, .legend-item:nth-child(3):after,
.legend-item:nth-child(3):before { .legend-item:nth-child(3):before {
background-color: #13dbf3; background-color: #5996F7;
} }
.legend-item:nth-child(4):after, .legend-item:nth-child(4):after,
.legend-item:nth-child(4):before { .legend-item:nth-child(4):before {
background-color: #88ca67; background-color: #8BC566;
} }
.legend-item:nth-child(5):after, .legend-item:nth-child(5):after,
.legend-item:nth-child(5):before { .legend-item:nth-child(5):before {
background-color: #5c97fc; background-color: #11FAF0;
} }
.legend-item:nth-child(6):after, .legend-item:nth-child(6):after,
.legend-item:nth-child(6):before { .legend-item:nth-child(6):before {
background-color: #f48900; background-color: #F3C000;
} }
.legend-item:nth-child(7):after, .legend-item:nth-child(7):after,
.legend-item:nth-child(7):before { .legend-item:nth-child(7):before {
background-color: #776bf0; background-color: #F38600;
} }
} }
</style> </style>

481
src/views/copilot/components/LineChartWater.vue Normal file
View File

@ -0,0 +1,481 @@
<!--
filename: LineChartBase.vue
author: liubin
date: 2024-04-30 08:59:28
description:
-->
<template>
<chart-container class="line-chart-base">
<div class="legend">
<span
v-for="item in legend"
:key="item.label"
class="legend-item"
:style="{ fontSize: isFullscreen ? '0.58vw' : '0.54vw' }"
>{{ item.label }}</span
>
</div>
<div
ref="chart"
style="max-width: 50vw"
:style="{ height: vHeight + 'vh' }"
></div>
</chart-container>
</template>
<script>
import screenfull from "screenfull";
import ChartContainer from "./ChartContainer.vue";
import chartMixin from "@/mixins/chart.js";
import * as echarts from "echarts";
export default {
name: "LineChartBase",
components: {
ChartContainer,
},
mixins: [chartMixin],
props: {
vHeight: {
type: Number,
default: 38,
},
legend: {
type: Array,
required: true,
},
xAxis: {
type: Array,
required: true,
},
series: {
type: Array,
required: true,
},
in: {
type: String,
default: "",
},
},
data() {
return {
isFullscreen: false,
actualOptions: null,
options: {
grid: {
left: "5%",
right: "4%",
bottom: "3%",
top: "15%",
containLabel: true,
},
// title: {
// text: 'Stacked Area Chart'
// },
tooltip: {
trigger: 'axis',
axisPointer: {
type: 'cross',
label: {
backgroundColor: '#6a7985'
}
}
},
// legend: {
// data: ['Email', 'Union Ads', 'Video Ads', 'Direct', 'Search Engine']
// },
toolbox: {
feature: {
saveAsImage: {}
}
},
grid: {
left: '3%',
right: '4%',
bottom: '3%',
containLabel: true
},
xAxis: [
{
type: 'category',
boundaryGap: false,
data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
}
],
yAxis: [
{
min: function () { // 取最小值向下取整为最小刻度
return 0
},
max: function (value) { // 取最大值向上取整为最大刻度
},
scale: true,
type: 'value',
name: 'kw/h',
// max: 100,//最大值
// min: 0,//最小值
// interval: 20,//间隔
nameTextStyle: {// y轴上方单位的颜色
color: 'rgba(255,255,255,0.5)', // 坐标值得具体的颜色
align: "right",
padding: [0, 0, 0, 2]
},
// position: 'left',
alignTicks: true,
axisLine: {
show: true,
lineStyle: {
// type: 'solid',
color: '#25528f',
// width: '1' // 坐标线的宽度
}
},
axisLabel: {
color: 'rgba(255,255,255,0.5)', // 坐标值得具体的颜色
fontSize: 12,
// formatter: '{value}'
formatter: '{value}'
// }
},
splitLine: {
lineStyle: {
color: '#25528f'
}
}
// type: 'value'
// axisLine: {
// show: true,
// lineStyle: {
// color: colors[0]
// }
// },
},
],
series: [
{
name: '瑞昌',
type: 'line',
stack: 'Total',
areaStyle: {
opacity: 0.8,
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
{
offset: 0,
color: '#8167F6'
},
{
offset: 1,
color: 'rgba(255, 234, 153, 0)'
}
])
},
itemStyle: {
normal: {
color: '#8167F6', //改变折线点的颜色
lineStyle: {
color: '#8167F6' //改变折线颜色
}
}
},
// emphasis: {
// focus: 'series'
// },
data: [120, 132, 101, 134, 90, 230, 210]
},
{
name: '邯郸',
type: 'line',
stack: 'Total',
areaStyle: {
opacity: 0.8,
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
{
offset: 0,
color: '#2760FF'
},
{
offset: 1,
color: 'rgba(255, 234, 153, 0)'
}
])
},
itemStyle: {
normal: {
color: '#2760FF', //改变折线点的颜色
lineStyle: {
color: '#2760FF' //改变折线颜色
}
}
},
// emphasis: {
// focus: 'series'
// },
data: [120, 132, 101, 134, 90, 230, 210]
},
{
name: '株洲',
type: 'line',
stack: 'Total',
areaStyle: {
opacity: 0.8,
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
{
offset: 0,
color: '#5996F7'
},
{
offset: 1,
color: 'rgba(255, 234, 153, 0)'
}
])
},
itemStyle: {
normal: {
color: '#5996F7', //改变折线点的颜色
lineStyle: {
color: '#5996F7' //改变折线颜色
}
}
},
// emphasis: {
// focus: 'series'
// },
data: [120, 132, 101, 134, 90, 230, 210]
},
{
name: '佳木斯',
type: 'line',
stack: 'Total',
areaStyle: {
opacity: 0.8,
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
{
offset: 0,
color: '#8BC566'
},
{
offset: 1,
color: 'rgba(255, 234, 153, 0)'
}
])
},
itemStyle: {
normal: {
color: '#8BC566', //改变折线点的颜色
lineStyle: {
color: '#8BC566' //改变折线颜色
}
}
},
// emphasis: {
// focus: 'series'
// },
data: [120, 132, 101, 134, 90, 230, 210]
},
{
name: '成都',
type: 'line',
stack: 'Total',
areaStyle: {
opacity: 0.8,
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
{
offset: 0,
color: '#11FAF0'
},
{
offset: 1,
color: 'rgba(255, 234, 153, 0)'
}
])
},
itemStyle: {
normal: {
color: '#11FAF0', //改变折线点的颜色
lineStyle: {
color: '#11FAF0' //改变折线颜色
}
}
},
// emphasis: {
// focus: 'series'
// },
data: [120, 132, 101, 134, 90, 230, 210]
},
{
name: '凯盛',
type: 'line',
stack: 'Total',
areaStyle: {
opacity: 0.8,
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
{
offset: 0,
color: '#F3C000'
},
{
offset: 1,
color: 'rgba(255, 234, 153, 0)'
}
])
},
itemStyle: {
normal: {
color: '#F3C000', //改变折线点的颜色
lineStyle: {
color: '#F3C000' //改变折线颜色
}
}
},
// emphasis: {
// focus: 'series'
// },
data: [120, 132, 101, 134, 90, 230, 210]
},
{
name: '蚌埠',
type: 'line',
stack: 'Total',
areaStyle: {
opacity: 0.8,
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
{
offset: 0,
color: '#F38600'
},
{
offset: 1,
color: 'rgba(255, 234, 153, 0)'
}
])
},
itemStyle: {
normal: {
color: '#F38600', //改变折线点的颜色
lineStyle: {
color: '#F38600' //改变折线颜色
}
}
},
// emphasis: {
// focus: 'series'
// },
data: [120, 132, 101, 134, 90, 230, 210]
},
]
},
};
},
watch: {
/** 全屏状态切换时，对柱子粗细和字体大小进行相应调整 */
isFullscreen(val) {
this.actualOptions.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.initOptions(this.actualOptions);
},
series(val) {
if (!val) {
this.initOptions(this.options);
return;
}
const actualOptions = JSON.parse(JSON.stringify(this.options));
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 || "";
this.actualOptions = actualOptions;
this.initOptions(actualOptions);
},
},
mounted() {
this.actualOptions = this.options;
this.initOptions(this.options);
if (screenfull.isEnabled) {
screenfull.on("change", () => {
this.isFullscreen = screenfull.isFullscreen;
});
}
},
};
</script>
<style scoped lang="scss">
.line-chart-base {
// position: relative;
.legend {
position: absolute;
top: 5.2vh;
right: 1vw;
}
.legend-item {
position: relative;
// font-size: 12px;
margin-right: 2vw;
&::before {
content: "";
display: inline-block;
width: 0.432vw;
height: 0.432vw;
border-radius: 100%;
margin-right: 0.4vw;
}
&::after {
content: "";
display: inline-block;
width: 1vw;
height: 0.125vw;
position: absolute;
top: 54%;
left: -15%;
transform: translateY(-50%);
border-radius: 100;
margin-right: 0.22vw;
}
}
.legend-item:nth-child(1):after,
.legend-item:nth-child(1):before {
background-color: #8167F6;
}
.legend-item:nth-child(2):after,
.legend-item:nth-child(2):before {
background-color: #2760FF;
}
.legend-item:nth-child(3):after,
.legend-item:nth-child(3):before {
background-color: #5996F7;
}
.legend-item:nth-child(4):after,
.legend-item:nth-child(4):before {
background-color: #8BC566;
}
.legend-item:nth-child(5):after,
.legend-item:nth-child(5):before {
background-color: #11FAF0;
}
.legend-item:nth-child(6):after,
.legend-item:nth-child(6):before {
background-color: #F3C000;
}
.legend-item:nth-child(7):after,
.legend-item:nth-child(7):before {
background-color: #F38600;
}
}
</style>

73
src/views/copilot/efficiency/components/StdRate.vue
View File

@ -1,7 +1,7 @@
<!-- <!--
* @Author: zhp * @Author: zhp
* @Date: 2024-05-07 10:25:10 * @Date: 2024-05-07 10:25:10
* @LastEditTime: 2024-05-09 08:44:21 * @LastEditTime: 2024-05-11 14:51:07
* @LastEditors: zhp * @LastEditors: zhp
* @Description: * @Description:
--> -->
@ -28,21 +28,68 @@ export default {
default: "日", default: "日",
}, },
}, },
computed: {
cities() {
console.log('ztl', this.$store.getters.copilot.efficiency.stdRate)
// let getterName = "";
// switch (this.dataSource) {
// case "标准组件产出":
// getterName = "stdOutput";
// break;
// case "芯片产出":
// getterName = "chipOutput";
// break;
// case "BIPV产出":
// getterName = "bipvOutput";
// break;
// }
const _cities = [
{ name: "瑞昌", target: 0, total: 0, current: 0, componentYield: 0, goodNumber:0,},
{ name: "邯郸", target: 0, total: 0, current: 0, componentYield: 0, goodNumber: 0, },
{ name: "株洲", target: 0, previous: 0, current: 0, componentYield: 0, goodNumber: 0, },
{ name: "佳木斯", target: 0, previous: 0, current: 0, componentYield: 0, goodNumber: 0, },
{ name: "成都", target: 0, previous: 0, current: 0, componentYield: 0, goodNumber: 0, },
{ name: "凯盛光伏", target: 0, previous: 0, current: 0, componentYield: 0, goodNumber: 0, },
{ name: "蚌埠", target: 0, previous: 0, current: 0, componentYield: 0, goodNumber: 0, },
]
if (this.$store.getters.copilot?.efficiency.stdRate?.previous) {
this.$store.getters.copilot?.efficiency.stdRate?.previous.forEach(
(v, idx) => {
_cities[idx].previous = v ?? 0;
}
);
}
if (this.$store.getters.copilot?.efficiency.stdRate?.target) {
this.$store.getters.copilot?.efficiency.stdRate?.target.forEach(
(v, idx) => {
_cities[idx].target = v ?? 0;
}
)
}
if (this.$store.getters.copilot?.efficiency.stdRate?.current) {
this.$store.getters.copilot?.efficiency.stdRate?.current.forEach(
(v, idx) => {
_cities[idx].current = v ?? 0;
}
);
}
// 删掉凯盛光伏
// _cities.splice(4, 1);
return _cities;
},
},
data() { data() {
return { return {
cities: [ // cities: [
{ name: "瑞昌", target: 100, total: 200, thisYear: 20 }, // { name: "瑞昌", target: 100, total: 200, current: 20 },
{ name: "邯郸", target: 200, total: 300, thisYear: 20 }, // { name: "邯郸", target: 200, total: 300, current: 20 },
{ name: "株洲", target: 300, total: 400, thisYear: 20 }, // { name: "株洲", target: 300, total: 400, current: 20 },
{ name: "佳木斯", target: 400, total: 500, thisYear: 20 }, // { name: "佳木斯", target: 400, total: 500, current: 20 },
{ name: "成都", target: 500, total: 600, thisYear: 20 }, // { name: "成都", target: 500, total: 600, current: 20 },
{ name: "凯盛光伏", target: 400, total: 500, thisYear: 20 }, // { name: "凯盛光伏", target: 400, total: 500, current: 20 },
{ name: "蚌埠", target: 500, total: 600, thisYear: 20 }, // { name: "蚌埠", target: 500, total: 600, current: 20 },
], // ],
}; };
},
computed: {
}, },
methods: {}, methods: {},
}; };

6
src/views/copilot/efficiency/components/sub/chip/ChipRateItem.vue
View File

@ -59,7 +59,7 @@ export default {
}, },
valueTuple() { valueTuple() {
const getter = this.chipRate; const getter = this.chipRate;
console.log(getter) // console.log(getter)
if (this.period === "日" || this.period === "周") { if (this.period === "日" || this.period === "周") {
return [ return [
getter.previous[this.factoryId], getter.previous[this.factoryId],
@ -111,11 +111,11 @@ export default {
this.period == "月" this.period == "月"
? `${year - 1}年${month}月良率` ? `${year - 1}年${month}月良率`
: `${year - 1}年良率`, : `${year - 1}年良率`,
value: (this.valueTuple[0] * 100).toFixed(0) + "%", value: isNaN((this.valueTuple[0] * 100).toFixed(0)) ? 0 + "%" : (this.valueTuple[0] * 100).toFixed(0) + "%"
}, },
{ {
label: this.period == "月" ? `${month}月良率` : `${year}年良率`, label: this.period == "月" ? `${month}月良率` : `${year}年良率`,
value: (this.valueTuple[1] * 100).toFixed(0) + "%", value: isNaN((this.valueTuple[1] * 100).toFixed(0)) ? 0 + "%" : (this.valueTuple[1] * 100).toFixed(0) + "%"
}, },
]; ];
}, },

46
src/views/copilot/efficiency/components/sub/std/ProgressBar.vue
View File

@ -6,11 +6,8 @@
--> -->
<template> <template>
<div class="progress-bar" :data-title="title" :data-rate="dataRate"> <div class="progress-bar" :data-title="titleYear" :data-rate="number">
<div <div class="progress-bar__rate" :style="{ width: dataRate == '-' ? 0 : dataRate }"></div>
class="progress-bar__rate"
:style="{ width: dataRate == '-' ? 0 : dataRate }"
></div>
</div> </div>
</template> </template>
@ -23,23 +20,52 @@ export default {
type: Number, type: Number,
default: 0, default: 0,
}, },
total: { target: {
type: Number, type: Number,
default: 0, default: 0,
}, },
goodNumber: {
type: Number,
default:0
},
componentYield: {
type: Number,
default:0
},
period: {
type: String,
default:'日',
},
title: { title: {
type: String, type: String,
default: "", default: "",
}, },
city: {
type: String,
default:""
}
}, },
data() { data() {
return {}; return {
number: 0,
titleYear:'',
};
}, },
computed: { computed: {
dataRate() { dataRate() {
return this.total == 0 if ((this.period === '年' || this.period === '月') && this.target != 0) {
// console.log(this.componentYield)
this.titleYear = this.title + ' ' + `${(this.target * 100).toFixed(0)}%`
} else {
this.titleYear = this.title
}
this.number = this.value == 0
? "-" ? "-"
: `${(parseFloat(this.value / this.total) * 100).toFixed(0)}%`; : `${(this.value * 100).toFixed(0)}%`
// console.log(this.period)
return this.value == 0
? "-"
: this.value >1 ? 100 + '%' :`${(this.value * 100).toFixed(0)}%`
}, },
}, },
methods: {}, methods: {},
@ -69,7 +95,7 @@ export default {
color: #fff; color: #fff;
position: absolute; position: absolute;
bottom: -200%; bottom: -200%;
right: 0; right: 10px;
font-size: 12px; font-size: 12px;
} }

14
src/views/copilot/efficiency/components/sub/std/StdRateItem.vue
View File

@ -1,7 +1,7 @@
<!-- <!--
* @Author: zhp * @Author: zhp
* @Date: 2024-05-07 10:25:10 * @Date: 2024-05-07 10:25:10
* @LastEditTime: 2024-05-09 09:04:07 * @LastEditTime: 2024-05-11 15:05:17
* @LastEditors: zhp * @LastEditors: zhp
* @Description: * @Description:
--> -->
@ -10,29 +10,29 @@
<div v-if="period == '日'" class="std-rate-item"> <div v-if="period == '日'" class="std-rate-item">
<CityName :value="city.name" /> <CityName :value="city.name" />
<div class="std-rate-item__value"> <div class="std-rate-item__value">
<ProgressBar :title="title" :total="city.target" :value="city.target" /> <ProgressBar :period="period" :title="title" :value="city.current" />
<!-- <ProgressBar title="24年累计" :total="city.target" :value="city.thisYear" /> --> <!-- <ProgressBar title="24年累计" :total="city.target" :value="city.thisYear" /> -->
</div> </div>
</div> </div>
<div v-else-if="period == '周'" class="std-rate-item"> <div v-else-if="period == '周'" class="std-rate-item">
<CityName :value="city.name" /> <CityName :value="city.name" />
<div class="std-rate-item__value"> <div class="std-rate-item__value">
<ProgressBar :title="title" :total="city.target" :value="city.target" /> <ProgressBar :period="period" :title="title" :value="city.current" />
<!-- <ProgressBar title="24年累计" :total="city.target" :value="city.thisYear" /> --> <!-- <ProgressBar title="24年累计" :total="city.target" :value="city.thisYear" /> -->
</div> </div>
</div> </div>
<div v-else-if="period == '月'" class="std-rate-item"> <div v-else-if="period == '月'" class="std-rate-item">
<CityName :value="city.name" /> <CityName :value="city.name" />
<div class="std-rate-item__value"> <div class="std-rate-item__value">
<ProgressBar :title="titleEnd" :total="city.target" :value="city.target" /> <ProgressBar :period="period" :title="titleEnd" :target="city.target" :value="city.current" />
<ProgressBar :title="title" :total="city.target" :value="city.thisYear" /> <ProgressBar :period="period" :title="title" :value="city.previous" />
</div> </div>
</div> </div>
<div v-else="period == '年'" class="std-rate-item"> <div v-else="period == '年'" class="std-rate-item">
<CityName :value="city.name" /> <CityName :value="city.name" />
<div class="std-rate-item__value"> <div class="std-rate-item__value">
<ProgressBar :title="titleEnd" :total="city.target" :value="city.target" /> <ProgressBar :period="period" :title="titleEnd" :target="city.target" :value="city.current" />
<ProgressBar :title="title" :total="city.target" :value="city.thisYear" /> <ProgressBar :period="period" :title="title" :value="city.previous" />
</div> </div>
</div> </div>
</template> </template>

65
src/views/copilot/energy/components/ElecCost.vue
View File

@ -44,38 +44,47 @@ export default {
// 城市数组的顺序必须是固定的 // 城市数组的顺序必须是固定的
const cities = ["瑞昌", "邯郸", "株洲", "佳木斯", "成都", "凯盛", "蚌埠"]; const cities = ["瑞昌", "邯郸", "株洲", "佳木斯", "成都", "凯盛", "蚌埠"];
return { return {
legend: [
{ label: '瑞昌', color: "#8167F6" },
{ label: '邯郸', color: "#2760FF" },
{ label: '株洲', color: "#5996F7" },
{ label: '佳木斯', color: "#8BC566" },
{ label: '成都', color: "#11FAF0" },
{ label: '凯盛', color: "#F3C000" },
{ label: '蚌埠', color: "#F38600" },
],
xAxis: cities, xAxis: cities,
}; };
}, },
computed: { computed: {
legend() { // legend() {
switch (this.period) { // switch (this.period) {
case "日": // case "日":
return [{ label: "昨日", color: "#12f7f1" }]; // return [{ label: "昨日", color: "#12f7f1" }];
case "周": // case "周":
return [{ label: "本周", color: "#12f7f1" }]; // return [{ label: "本周", color: "#12f7f1" }];
case "月": { // case "月": {
const year = new Date().getFullYear(); // const year = new Date().getFullYear();
const month = new Date().getMonth() + 1; // const month = new Date().getMonth() + 1;
return [ // return [
{ label: `${year - 1}年${month}月`, color: "#12f7f1" }, // { label: `${year - 1}年${month}月`, color: "#12f7f1" },
{ label: `${year}年${month}月`, color: "#58adfa" }, // { label: `${year}年${month}月`, color: "#58adfa" },
]; // ];
} // }
case "年": { // case "年": {
const year = new Date().getFullYear(); // const year = new Date().getFullYear();
return [ // return [
{ label: `${year - 1}年`, color: "#12f7f1" }, // { label: `${year - 1}年`, color: "#12f7f1" },
{ label: `${year}年`, color: "#58adfa" }, // { label: `${year}年`, color: "#58adfa" },
]; // ];
} // }
default: // default:
return [ // return [
{ label: `${year - 1}年`, color: "#12f7f1" }, // { label: `${year - 1}年`, color: "#12f7f1" },
{ label: `${year}年`, color: "#58adfa" }, // { label: `${year}年`, color: "#58adfa" },
]; // ];
} // }
}, // },
series() { series() {
const { ftoInvest } = this.$store.getters.copilot.yield; const { ftoInvest } = this.$store.getters.copilot.yield;
let dataList = null; let dataList = null;

57
src/views/copilot/energy/components/NatGas.vue
View File

@ -7,7 +7,6 @@
<template> <template>
<BarChartBase <BarChartBase
:legend="legend"
:series="series" :series="series"
:xAxis="xAxis" :xAxis="xAxis"
in="nat-gas" in="nat-gas"
@ -35,34 +34,34 @@ export default {
}; };
}, },
computed: { computed: {
legend() { // legend() {
switch (this.period) { // switch (this.period) {
case "日": // case "日":
return [{ label: "昨日", color: "#12f7f1" }]; // return [{ label: "昨日", color: "#12f7f1" }];
case "周": // case "周":
return [{ label: "本周", color: "#12f7f1" }]; // return [{ label: "本周", color: "#12f7f1" }];
case "月": { // case "月": {
const year = new Date().getFullYear(); // const year = new Date().getFullYear();
const month = new Date().getMonth() + 1; // const month = new Date().getMonth() + 1;
return [ // return [
{ label: `${year - 1}年${month}月`, color: "#12f7f1" }, // { label: `${year - 1}年${month}月`, color: "#12f7f1" },
{ label: `${year}年${month}月`, color: "#58adfa" }, // { label: `${year}年${month}月`, color: "#58adfa" },
]; // ];
} // }
case "年": { // case "年": {
const year = new Date().getFullYear(); // const year = new Date().getFullYear();
return [ // return [
{ label: `${year - 1}年`, color: "#12f7f1" }, // { label: `${year - 1}年`, color: "#12f7f1" },
{ label: `${year}年`, color: "#58adfa" }, // { label: `${year}年`, color: "#58adfa" },
]; // ];
} // }
default: // default:
return [ // return [
{ label: `${year - 1}年`, color: "#12f7f1" }, // { label: `${year - 1}年`, color: "#12f7f1" },
{ label: `${year}年`, color: "#58adfa" }, // { label: `${year}年`, color: "#58adfa" },
]; // ];
} // }
}, // },
series() { series() {
const { ftoInvest } = this.$store.getters.copilot.yield; const { ftoInvest } = this.$store.getters.copilot.yield;
let dataList = null; let dataList = null;

76
src/views/copilot/energy/components/WaterCost.vue
View File

@ -7,31 +7,30 @@
<template> <template>
<LineChartBase <LineChartBase
v-if="0"
:legend="legend" :legend="legend"
:series="series" :series="series"
:xAxis="xAxis" :xAxis="xAxis"
in="waterCost" in="waterCost"
class="water-cost" class="water-cost"
/> />
<BarChartBase <!-- <BarChartBase
v-else v-else
:legend="legend" :legend="legend"
:series="series" :series="series"
:xAxis="xAxis" :xAxis="xAxis"
in="waterCost" in="waterCost"
class="water-cost" class="water-cost"
/> /> -->
</template> </template>
<script> <script>
import BarChartBaseVue from "@/views/copilot/components/BarChartBase.vue"; // import BarChartBaseVue from "@/views/copilot/components/BarChartBase.vue";
import LineChartBaseVue from "@/views/copilot/components/LineChartBase.vue"; import LineChartBaseVue from "@/views/copilot/components/LineChartWater.vue";
export default { export default {
name: "WaterCost", name: "WaterCost",
components: { components: {
BarChartBase: BarChartBaseVue, // BarChartBase: BarChartBaseVue,
LineChartBase: LineChartBaseVue, LineChartBase: LineChartBaseVue,
}, },
props: { props: {
@ -45,37 +44,46 @@ export default {
const cities = ["瑞昌", "邯郸", "株洲", "佳木斯", "成都", "凯盛", "蚌埠"]; const cities = ["瑞昌", "邯郸", "株洲", "佳木斯", "成都", "凯盛", "蚌埠"];
return { return {
xAxis: cities, xAxis: cities,
legend: [
{ label: '瑞昌', color: "#8167F6" },
{ label: '邯郸', color: "#2760FF" },
{ label: '株洲', color: "#5996F7" },
{ label: '佳木斯', color: "#8BC566" },
{ label: '成都', color: "#11FAF0" },
{ label: '凯盛', color: "#F3C000" },
{ label: '蚌埠', color: "#F38600" },
],
}; };
}, },
computed: { computed: {
legend() { // legend() {
switch (this.period) { // switch (this.period) {
case "日": // case "日":
return [{ label: "昨日", color: "#12f7f1" }]; // return [{ label: "昨日", color: "#12f7f1" }];
case "周": // case "周":
return [{ label: "本周", color: "#12f7f1" }]; // return [{ label: "本周", color: "#12f7f1" }];
case "月": { // case "月": {
const year = new Date().getFullYear(); // const year = new Date().getFullYear();
const month = new Date().getMonth() + 1; // const month = new Date().getMonth() + 1;
return [ // return [
{ label: `${year - 1}年${month}月`, color: "#12f7f1" }, // { label: `${year - 1}年${month}月`, color: "#12f7f1" },
{ label: `${year}年${month}月`, color: "#58adfa" }, // { label: `${year}年${month}月`, color: "#58adfa" },
]; // ];
} // }
case "年": { // case "年": {
const year = new Date().getFullYear(); // const year = new Date().getFullYear();
return [ // return [
{ label: `${year - 1}年`, color: "#12f7f1" }, // { label: `${year - 1}年`, color: "#12f7f1" },
{ label: `${year}年`, color: "#58adfa" }, // { label: `${year}年`, color: "#58adfa" },
]; // ];
} // }
default: // default:
return [ // return [
{ label: `${year - 1}年`, color: "#12f7f1" }, // { label: `${year - 1}年`, color: "#12f7f1" },
{ label: `${year}年`, color: "#58adfa" }, // { label: `${year}年`, color: "#58adfa" },
]; // ];
} // }
}, // },
series() { series() {
const { ftoInvest } = this.$store.getters.copilot.yield; const { ftoInvest } = this.$store.getters.copilot.yield;
let dataList = null; let dataList = null;

4
src/views/copilot/energy/options/monitorOptions.js
View File

@ -1,7 +1,7 @@
/* /*
* @Author: zhp * @Author: zhp
* @Date: 2024-05-07 10:25:10 * @Date: 2024-05-07 10:25:10
* @LastEditTime: 2024-05-08 10:30:06 * @LastEditTime: 2024-05-10 16:10:49
* @LastEditors: zhp * @LastEditors: zhp
* @Description: * @Description:
*/ */
@ -51,7 +51,7 @@ export default function ({
name: 'Access From', name: 'Access From',
type: 'pie', type: 'pie',
// center: ['50%', '40%'], // center: ['50%', '40%'],
radius: ['60%', '90%'], radius: ['50%', '80%'],
avoidLabelOverlap: false, avoidLabelOverlap: false,
labelLine: { labelLine: {
show: false show: false

1
src/views/copilot/yield/components/sub/city/CityData.vue
View File

@ -72,6 +72,7 @@ export default {
); );
}, },
cities() { cities() {
// console.log('ztl')
let getterName = ""; let getterName = "";
switch (this.dataSource) { switch (this.dataSource) {
case "标准组件产出": case "标准组件产出":

67
src/views/dashboard/components/Header.vue
View File

@ -9,8 +9,8 @@
<header class="dashboard-header"> <header class="dashboard-header">
<div class="btn" :style="btnStyle" @click="toggleFullscreen"></div> <div class="btn" :style="btnStyle" @click="toggleFullscreen"></div>
<h1>发电玻璃智能管控平台地图总览</h1> <h1>发电玻璃智能管控平台地图总览</h1>
<span class="side left">晴转多云 14℃</span> <span class="side left">{{ this.weather }}</span>
<span class="side right">23:12|星期一|2023.12.13</span> <span class="side right"> {{ times }} </span>
</header> </header>
</template> </template>
@ -26,6 +26,8 @@ export default {
data() { data() {
return { return {
isFullscreen: false, isFullscreen: false,
times: null,
weather:'',
}; };
}, },
computed: { computed: {
@ -37,7 +39,68 @@ export default {
}; };
}, },
}, },
mounted () {
;this.getTimes()
this.getWeather()
},
methods: { methods: {
getTimes() {
setInterval(this.getTimesInterval, 1000);
},
getTimesInterval: function () {
var now = new Date();
var weekDay = now.getDay();
var weeks = new Array("星期日", "星期一", "星期二", "星期三", "星期四", "星期五", "星期六");
var week = weeks[weekDay]
let _this = this;
let year = new Date().getFullYear(); //获取当前时间的年份
let month = new Date().getMonth() + 1; //获取当前时间的月份
let day = new Date().getDate(); //获取当前时间的天数
let hours = new Date().getHours(); //获取当前时间的小时
let minutes = new Date().getMinutes(); //获取当前时间的分数
// let seconds = new Date().getSeconds(); //获取当前时间的秒数
//当小于 10 的是时候，在前面加 0
if (hours < 10) {
hours = '0' + hours;
}
if (minutes < 10) {
minutes = '0' + minutes;
}
// if (seconds < 10) {
// seconds = '0' + seconds;
// }
//拼接格式化当前时间
this.times =
hours +
':' +
minutes +
' | ' +
week +
' | ' +
year +
'.' +
month +
'.' +
day
},
async getWeather() {
setInterval(() => {
fetch(`https://restapi.amap.com/v3/weather/weatherInfo?key=a20a2093715deb9bd68e423c34a2ac3c&city=110108`, {
method: 'get',
extensions: 'base',
// output:'JSON'
}).then((response) => {
// 注意此处
response.json().then((data) => {
console.log(data)
this.weather = data.lives[0].weather + ' '+ data.lives[0].temperature + '℃'
}).catch((err) => {
this.weather = '晴 25℃'
console.log(err);
})
})
}, 1000)
},
toggleFullscreen() { toggleFullscreen() {
screenfull.toggle(); screenfull.toggle();
this.isFullscreen = !this.isFullscreen; this.isFullscreen = !this.isFullscreen;