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

projects/mescc/zjl #20

Merged
juzi merged 5 commits from projects/mescc/zjl into projects/mescc/develop 2024-05-21 08:35:15 +08:00
Conversation 0 Commits 5 Files Changed 32 +1569 -342
19 changed files with 1569 additions and 342 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files
Showing only changes of commit 18e50722b0 - Show all commits

2
.env.dev
View File

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

21
src/mixins/chart.js
View File

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

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

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

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

@ -8,37 +8,29 @@
<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
>
<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>
<div ref="elsChart" :style="{ height: '100%',width: width}"></div>
</chart-container>
</template>
<script>
import screenfull from "screenfull";
import { debounce } from "@/utils/debounce";
import ChartContainer from "./ChartContainer.vue";
import chartMixin from "@/mixins/chart.js";
// import chartMixin from "@/mixins/chart.js";
import * as echarts from "echarts";
export default {
name: "LineChartBase",
components: {
ChartContainer,
},
mixins: [chartMixin],
// mixins: [chartMixin],
props: {
vHeight: {
type: Number,
default: 34,
default: 38,
},
legend: {
type: Array,
@ -59,6 +51,7 @@ export default {
},
data() {
return {
width: '100%',
isFullscreen: false,
actualOptions: null,
options: {
@ -69,120 +62,319 @@ export default {
top: "15%",
containLabel: true,
},
tooltip: {},
xAxis: {
axisTick: {
show: false,
// title: {
// text: 'Stacked Area Chart'
// },
tooltip: {
trigger: 'axis',
axisPointer: {
type: 'cross',
label: {
backgroundColor: '#6a7985'
}
}
},
axisLine: {
lineStyle: {
color: "#4561AE",
// 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
},
axisLabel: {
color: "#fff",
fontSize: 12,
max: function (value) { // 取最大值向上取整为最大刻度
},
data: this.xAxis,
},
yAxis: {
name: "单位/片",
nameTextStyle: {
color: "#fff",
fontSize: 12,
},
axisTick: {
show: false,
},
axisLabel: {
color: "#fff",
fontSize: 12,
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: {
color: "#4561AE",
// type: 'solid',
color: '#25528f',
// width: '1' // 坐标线的宽度
}
},
axisLabel: {
color: 'rgba(255,255,255,0.5)', // 坐标值得具体的颜色
fontSize: 12,
// formatter: '{value}'
formatter: '{value}'
// }
},
splitLine: {
lineStyle: {
color: "#4561AE",
},
},
color: '#25528f'
}
}
// type: 'value'
// axisLine: {
// show: true,
// lineStyle: {
// color: colors[0]
// }
// },
},
],
series: [
{
name: "", // this.series[0].name,
type: "bar",
barWidth: 12,
itemStyle: {
borderRadius: [10, 10, 0, 0],
color: {
type: "linear",
x: 0,
y: 0,
x2: 0,
y2: 1,
colorStops: [
name: '瑞昌',
type: 'line',
stack: 'Total',
areaStyle: {
opacity: 0.8,
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
{
offset: 0,
color: "#12f7f1", // 0% 处的颜色
},
{
offset: 0.35,
color: "#12f7f177", // 100% 处的颜色
},
{
offset: 0.75,
color: "#12f7f133", // 100% 处的颜色
color: '#8167F6'
},
{
offset: 1,
color: "transparent", // 100% 处的颜色
color: 'rgba(255, 234, 153, 0)'
}
])
},
],
global: false, // 缺省为 false
itemStyle: {
normal: {
color: '#8167F6', //改变折线点的颜色
lineStyle: {
color: '#8167F6' //改变折线颜色
}
}
},
},
data: [], // this.series[0].data,
// emphasis: {
// focus: 'series'
// },
data: [120, 132, 101, 134, 90, 230, 210]
},
{
name: "", // this.series[1].name,
type: "bar",
barWidth: 12,
// tooltip: {
// valueFormatter: function (value) {
// return value + " ml";
// },
// },
itemStyle: {
borderRadius: [10, 10, 0, 0],
color: {
type: "linear",
x: 0,
y: 0,
x2: 0,
y2: 1,
colorStops: [
name: '邯郸',
type: 'line',
stack: 'Total',
areaStyle: {
opacity: 0.8,
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
{
offset: 0,
color: "#57abf8", // 0% 处的颜色
color: '#2760FF'
},
{
offset: 1,
color: "#364BFE66", // 100% 处的颜色
color: 'rgba(255, 234, 153, 0)'
}
])
},
],
global: false, // 缺省为 false
itemStyle: {
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]
},
]
},
};
},
computed: {
isOpen() {
return this.$store.getters.sidebar.opened
},
},
watch: {
isOpen(val) {
if (val === true) {
this.width = '99%'
this.canvasReset()
console.log(this.width)
} else {
this.watch = 100 + '%'
this.canvasReset()
}
},
/** 全屏状态切换时，对柱子粗细和字体大小进行相应调整 */
isFullscreen(val) {
this.actualOptions.series.map((item) => {
@ -191,11 +383,11 @@ 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.initOptions(this.actualOptions);
this.initChart(this.actualOptions);
},
series(val) {
if (!val) {
this.initOptions(this.options);
this.initChart(this.options);
return;
}
const actualOptions = JSON.parse(JSON.stringify(this.options));
@ -204,19 +396,42 @@ export default {
actualOptions.series[1].data = val?.[1]?.data || [];
actualOptions.series[1].name = val?.[1]?.name || "";
this.actualOptions = actualOptions;
this.initOptions(actualOptions);
this.initChart(actualOptions);
},
},
mounted() {
this.actualOptions = this.options;
this.initOptions(this.options);
if (screenfull.isEnabled) {
screenfull.on("change", () => {
this.isFullscreen = screenfull.isFullscreen;
});
mounted() {
// if (screenfull.isEnabled) {
// screenfull.on("change", () => {
// this.isFullscreen = screenfull.isFullscreen;
// });
// }
this.actualOptions = this.options
this.canvasReset();
window.addEventListener("resize", this.canvasReset);
},
beforeDestroy() {
if (this.chart) {
this.chart.dispose();
}
},
destroyed() {
window.removeEventListener("resize", this.canvasReset);
},
methods: {
canvasReset() {
debounce(() => {
this.initChart();
}, 500)();
},
initChart() {
if (this.chart) {
this.chart.dispose();
}
this.chart = echarts.init(this.$refs.elsChart);
this.chart.setOption(this.actualOptions);
},
},
};
</script>
@ -233,7 +448,7 @@ export default {
.legend-item {
position: relative;
// font-size: 12px;
margin-right: 0.67vw;
margin-right: 2vw;
&::before {
content: "";
@ -260,37 +475,37 @@ export default {
.legend-item:nth-child(1):after,
.legend-item:nth-child(1):before {
background-color: #fad162;
background-color: #8167F6;
}
.legend-item:nth-child(2):after,
.legend-item:nth-child(2):before {
background-color: #2160f3;
background-color: #2760FF;
}
.legend-item:nth-child(3):after,
.legend-item:nth-child(3):before {
background-color: #13dbf3;
background-color: #5996F7;
}
.legend-item:nth-child(4):after,
.legend-item:nth-child(4):before {
background-color: #88ca67;
background-color: #8BC566;
}
.legend-item:nth-child(5):after,
.legend-item:nth-child(5):before {
background-color: #5c97fc;
background-color: #11FAF0;
}
.legend-item:nth-child(6):after,
.legend-item:nth-child(6):before {
background-color: #f48900;
background-color: #F3C000;
}
.legend-item:nth-child(7):after,
.legend-item:nth-child(7):before {
background-color: #776bf0;
background-color: #F38600;
}
}
</style>

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

@ -0,0 +1,515 @@
<!--
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="waterChart" :style="{ height: '100%',width: width}"></div>
</chart-container>
</template>
<script>
import screenfull from "screenfull";
import { debounce } from "@/utils/debounce";
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 {
width:'',
isFullscreen: false,
actualOptions: null,
options: {
grid: {
left: "1%",
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: {
isOpen(val) {
// console.log(val)
if (val === true) {
console.log('ztl')
this.width = '99%'
this.canvasReset()
console.log(this.width)
} else {
this.watch = 100 + '%'
this.canvasReset()
}
},
/** 全屏状态切换时，对柱子粗细和字体大小进行相应调整 */
isFullscreen(val) {
if (val === true && this.isOpen === true) {
this.width = '99%'
}
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.initChart(this.actualOptions);
},
series(val) {
if (!val) {
this.initChart(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.initChart(actualOptions);
},
},
computed: {
isOpen() {
return this.$store.getters.sidebar.opened
},
},
mounted() {
if (screenfull.isEnabled) {
screenfull.on("change", () => {
this.isFullscreen = screenfull.isFullscreen;
});
}
this.actualOptions = this.options
this.canvasReset();
window.addEventListener("resize", this.canvasReset);
},
beforeDestroy() {
if (this.chart) {
this.chart.dispose();
}
},
destroyed() {
window.removeEventListener("resize", this.canvasReset);
},
methods: {
canvasReset() {
debounce(() => {
this.initChart();
}, 500)();
},
initChart() {
if (this.chart) {
this.chart.dispose();
}
this.chart = echarts.init(this.$refs.waterChart);
this.chart.setOption(this.actualOptions);
},
},
};
</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>

304
src/views/copilot/components/gasBarChartBase.vue Normal file
View File

@ -0,0 +1,304 @@
<!--
* @Author: zhp
* @Date: 2024-05-13 14:08:51
* @LastEditTime: 2024-05-14 08:46:07
* @LastEditors: zhp
* @Description:
-->
<template>
<chart-container class="bar-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="gasChart" :style="{ height: '100%',width: width}"></div>
</chart-container>
</template>
<script>
import screenfull from "screenfull";
import ChartContainer from "./ChartContainer.vue";
// import chartMixin from "@/mixins/chart.js";
import { debounce } from "@/utils/debounce";
import * as echarts from "echarts";
export default {
name: "BarChartBase",
components: {
ChartContainer,
},
// mixins: [chartMixin],
props: {
vHeight: {
type: Number,
default: 38,
},
legend: {
type: Array,
required: false,
},
xAxis: {
type: Array,
required: true,
},
series: {
type: Array,
required: true,
},
in: {
type: String,
default: "",
},
},
data() {
return {
width: '100%',
isFullscreen: false,
actualOptions: null,
options: {
grid: {
left: "1%",
right: "4%",
bottom: "3%",
top: "15%",
containLabel: true,
},
tooltip: {},
xAxis: {
axisTick: {
show: false,
},
axisLine: {
lineStyle: {
color: "#4561AE",
},
},
axisLabel: {
color: "#fff",
fontSize: 12,
},
data: this.xAxis,
},
yAxis: {
name: "单位/片",
nameTextStyle: {
color: "#fff",
fontSize: 12,
},
axisTick: {
show: false,
},
axisLabel: {
color: "#fff",
fontSize: 12,
},
axisLine: {
show: true,
lineStyle: {
color: "#4561AE",
},
},
splitLine: {
lineStyle: {
color: "#4561AE",
},
},
},
series: [
{
name: "", // this.series[0].name,
type: "bar",
barWidth: 12,
itemStyle: {
borderRadius: [10, 10, 0, 0],
color: {
type: "linear",
x: 0,
y: 0,
x2: 0,
y2: 1,
colorStops: [
{
offset: 0,
color: "#12f7f1", // 0% 处的颜色
},
{
offset: 0.35,
color: "#12f7f177", // 100% 处的颜色
},
{
offset: 0.75,
color: "#12f7f133", // 100% 处的颜色
},
{
offset: 1,
color: "transparent", // 100% 处的颜色
},
],
global: false, // 缺省为 false
},
},
data: [], // this.series[0].data,
},
{
name: "", // this.series[1].name,
type: "bar",
barWidth: 12,
// tooltip: {
// valueFormatter: function (value) {
// return value + " ml";
// },
// },
itemStyle: {
borderRadius: [10, 10, 0, 0],
color: {
type: "linear",
x: 0,
y: 0,
x2: 0,
y2: 1,
colorStops: [
{
offset: 0,
color: "#57abf8", // 0% 处的颜色
},
{
offset: 1,
color: "#364BFE66", // 100% 处的颜色
},
],
global: false, // 缺省为 false
},
},
data: [], // this.series[1].data,
},
],
},
};
},
computed: {
isOpen() {
return this.$store.getters.sidebar.opened
},
},
watch: {
isOpen(val) {
// console.log(val)
if (val === true) {
console.log('ryf')
this.width = '99%'
this.canvasReset()
console.log(this.width)
} else {
this.watch = 100 + '%'
this.canvasReset()
}
},
/** 全屏状态切换时，对柱子粗细和字体大小进行相应调整 */
isFullscreen(val) {
if (val === true && this.isOpen === true) {
this.width = '99%'
}
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));
console.log('actualOptions', 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.initChart(actualOptions);
},
},
mounted() {
if (screenfull.isEnabled) {
screenfull.on("change", () => {
this.isFullscreen = screenfull.isFullscreen;
});
}
this.actualOptions = this.options
this.canvasReset();
window.addEventListener("resize", this.canvasReset);
},
beforeDestroy() {
if (this.chart) {
this.chart.dispose();
}
},
destroyed() {
window.removeEventListener("resize", this.canvasReset);
},
methods: {
canvasReset() {
debounce(() => {
this.initChart();
}, 500)();
},
initChart() {
if (this.chart) {
this.chart.dispose();
}
this.chart = echarts.init(this.$refs.gasChart);
this.chart.setOption(this.actualOptions);
},
},
// mounted() {
// this.actualOptions = this.options;
// this.initOptions(this.options);
// window.addEventListener("resize", this.initOptions(this.actualOptions))
// if (screenfull.isEnabled) {
// screenfull.on("change", () => {
// this.isFullscreen = screenfull.isFullscreen;
// });
// }
// },
};
</script>
<style scoped lang="scss">
.bar-chart-base {
// position: relative;
.legend {
position: absolute;
top: 5.2vh;
right: 1vw;
}
.legend-item {
position: relative;
// font-size: 12px;
margin-right: 0.67vw;
&::before {
content: "";
display: inline-block;
width: 0.531vw;
height: 0.531vw;
background-color: #ccc;
border-radius: 2px;
margin-right: 0.22vw;
}
}
.legend-item:nth-child(1):before {
background-color: #12f7f1;
}
.legend-item:nth-child(2):before {
background-color: #58adfa;
}
}
</style>

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

@ -1,7 +1,7 @@
<!--
* @Author: zhp
* @Date: 2024-05-07 10:25:10
* @LastEditTime: 2024-05-09 08:44:21
* @LastEditTime: 2024-05-11 14:51:07
* @LastEditors: zhp
* @Description:
-->
@ -28,21 +28,68 @@ export 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() {
return {
cities: [
{ name: "瑞昌", target: 100, total: 200, thisYear: 20 },
{ name: "邯郸", target: 200, total: 300, thisYear: 20 },
{ name: "株洲", target: 300, total: 400, thisYear: 20 },
{ name: "佳木斯", target: 400, total: 500, thisYear: 20 },
{ name: "成都", target: 500, total: 600, thisYear: 20 },
{ name: "凯盛光伏", target: 400, total: 500, thisYear: 20 },
{ name: "蚌埠", target: 500, total: 600, thisYear: 20 },
],
// cities: [
// { name: "瑞昌", target: 100, total: 200, current: 20 },
// { name: "邯郸", target: 200, total: 300, current: 20 },
// { name: "株洲", target: 300, total: 400, current: 20 },
// { name: "佳木斯", target: 400, total: 500, current: 20 },
// { name: "成都", target: 500, total: 600, current: 20 },
// { name: "凯盛光伏", target: 400, total: 500, current: 20 },
// { name: "蚌埠", target: 500, total: 600, current: 20 },
// ],
};
},
computed: {
},
methods: {},
};

83
src/views/copilot/efficiency/components/sub/bar/BarChartChipOEE.vue
View File

@ -1,40 +1,32 @@
<!--
* @Author: zhp
* @Date: 2024-05-07 13:22:43
* @LastEditTime: 2024-05-09 16:22:24
* @LastEditTime: 2024-05-14 08:32:44
* @LastEditors: zhp
* @Description:
-->
<template>
<chart-container class="bar-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
>
<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: 40vw"
:style="{ height: vHeight + 'vh' }"
></div>
<div ref="chart" :style="{ height: '100%',width: width}"></div>
</chart-container>
</template>
<script>
import screenfull from "screenfull";
import ChartContainer from "../../../../components/ChartContainer.vue";
import chartMixin from "@/mixins/chart.js";
// import chartMixin from "@/mixins/chart.js";
import { debounce } from "@/utils/debounce";
import * as echarts from "echarts";
export default {
name: "BarChartBase",
components: {
ChartContainer,
},
mixins: [chartMixin],
// mixins: [chartMixin],
props: {
vHeight: {
type: Number,
@ -59,12 +51,13 @@ export default {
},
data() {
return {
width: '100%',
isFullscreen: false,
actualOptions: null,
options: {
grid: {
left: "5%",
right: "4%",
right: "0%",
bottom: "3%",
top: "15%",
containLabel: true,
@ -182,7 +175,21 @@ export default {
},
};
},
computed: {
isOpen() {
return this.$store.getters.sidebar.opened
},
},
watch: {
isOpen(val) {
if (val === true) {
this.width = '100%-128px'
this.canvasReset()
} else {
this.watch = 100 + '%'
this.canvasReset()
}
},
/** 全屏状态切换时，对柱子粗细和字体大小进行相应调整 */
isFullscreen(val) {
this.actualOptions.series.map((item) => {
@ -191,11 +198,11 @@ 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.initOptions(this.actualOptions);
this.initChart(this.actualOptions);
},
series(val) {
if (!val) {
this.initOptions(this.options);
this.initChart(this.options);
return;
}
console.log(val)
@ -205,19 +212,41 @@ export default {
actualOptions.series[1].data = val?.[1]?.data || [];
actualOptions.series[1].name = val?.[1]?.name || "";
this.actualOptions = actualOptions;
this.initOptions(actualOptions);
this.initChart(actualOptions);
},
},
mounted() {
this.actualOptions = this.options;
this.initOptions(this.options);
if (screenfull.isEnabled) {
screenfull.on("change", () => {
this.isFullscreen = screenfull.isFullscreen;
});
// if (screenfull.isEnabled) {
// screenfull.on("change", () => {
// this.isFullscreen = screenfull.isFullscreen;
// });
// }
this.actualOptions = this.options
this.canvasReset();
window.addEventListener("resize", this.canvasReset);
},
beforeDestroy() {
if (this.chart) {
this.chart.dispose();
}
},
destroyed() {
window.removeEventListener("resize", this.canvasReset);
},
methods: {
canvasReset() {
debounce(() => {
this.initChart();
}, 500)();
},
initChart() {
if (this.chart) {
this.chart.dispose();
}
this.chart = echarts.init(this.$refs.chart);
this.chart.setOption(this.actualOptions);
},
},
};
</script>

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

@ -59,7 +59,7 @@ export default {
},
valueTuple() {
const getter = this.chipRate;
console.log(getter)
// console.log(getter)
if (this.period === "日" || this.period === "周") {
return [
getter.previous[this.factoryId],
@ -111,11 +111,11 @@ export default {
this.period == "月"
? `${year - 1}年${month}月良率`
: `${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}年良率`,
value: (this.valueTuple[1] * 100).toFixed(0) + "%",
value: isNaN((this.valueTuple[1] * 100).toFixed(0)) ? 0 + "%" : (this.valueTuple[1] * 100).toFixed(0) + "%"
},
];
},
@ -159,6 +159,7 @@ export default {
}
.chart {
width: 390px;
align-self: stretch;
height: 280px;
}

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

@ -6,11 +6,8 @@
-->
<template>
<div class="progress-bar" :data-title="title" :data-rate="dataRate">
<div
class="progress-bar__rate"
:style="{ width: dataRate == '-' ? 0 : dataRate }"
></div>
<div class="progress-bar" :data-title="titleYear" :data-rate="number">
<div class="progress-bar__rate" :style="{ width: dataRate == '-' ? 0 : dataRate }"></div>
</div>
</template>
@ -23,23 +20,52 @@ export default {
type: Number,
default: 0,
},
total: {
target: {
type: Number,
default: 0,
},
goodNumber: {
type: Number,
default:0
},
componentYield: {
type: Number,
default:0
},
period: {
type: String,
default:'日',
},
title: {
type: String,
default: "",
},
city: {
type: String,
default:""
}
},
data() {
return {};
return {
number: 0,
titleYear:'',
};
},
computed: {
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: {},
@ -69,7 +95,7 @@ export default {
color: #fff;
position: absolute;
bottom: -200%;
right: 0;
right: 10px;
font-size: 12px;
}

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

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

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

@ -7,31 +7,30 @@
<template>
<LineChartBase
v-if="1"
:legend="legend"
:series="series"
:xAxis="xAxis"
in="elecCost"
class="elec-cost"
/>
<BarChartBase
<!-- <BarChartBase
v-else
:legend="legend"
:series="series"
:xAxis="xAxis"
in="elecCost"
class="elec-cost"
/>
/> -->
</template>
<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";
export default {
name: "ElecCost",
components: {
BarChartBase: BarChartBaseVue,
// BarChartBase: BarChartBaseVue,
LineChartBase: LineChartBaseVue,
},
props: {
@ -44,38 +43,47 @@ export default {
// 城市数组的顺序必须是固定的
const cities = ["瑞昌", "邯郸", "株洲", "佳木斯", "成都", "凯盛", "蚌埠"];
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,
};
},
computed: {
legend() {
switch (this.period) {
case "日":
return [{ label: "昨日", color: "#12f7f1" }];
case "周":
return [{ label: "本周", color: "#12f7f1" }];
case "月": {
const year = new Date().getFullYear();
const month = new Date().getMonth() + 1;
return [
{ label: `${year - 1}年${month}月`, color: "#12f7f1" },
{ label: `${year}年${month}月`, color: "#58adfa" },
];
}
case "年": {
const year = new Date().getFullYear();
return [
{ label: `${year - 1}年`, color: "#12f7f1" },
{ label: `${year}年`, color: "#58adfa" },
];
}
default:
return [
{ label: `${year - 1}年`, color: "#12f7f1" },
{ label: `${year}年`, color: "#58adfa" },
];
}
},
// legend() {
// switch (this.period) {
// case "日":
// return [{ label: "昨日", color: "#12f7f1" }];
// case "周":
// return [{ label: "本周", color: "#12f7f1" }];
// case "月": {
// const year = new Date().getFullYear();
// const month = new Date().getMonth() + 1;
// return [
// { label: `${year - 1}年${month}月`, color: "#12f7f1" },
// { label: `${year}年${month}月`, color: "#58adfa" },
// ];
// }
// case "年": {
// const year = new Date().getFullYear();
// return [
// { label: `${year - 1}年`, color: "#12f7f1" },
// { label: `${year}年`, color: "#58adfa" },
// ];
// }
// default:
// return [
// { label: `${year - 1}年`, color: "#12f7f1" },
// { label: `${year}年`, color: "#58adfa" },
// ];
// }
// },
series() {
const { ftoInvest } = this.$store.getters.copilot.yield;
let dataList = null;

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

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

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

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

4
src/views/copilot/energy/components/sub/monitor/MonitorItem.vue
View File

@ -10,7 +10,9 @@
<div class="cities">
<CopilotButtons :options="cities" @update:active="handleCityUpdate" />
</div>
<div style="padding: 0 30px;width: 90%;">
<div class="chart" ref="chart"></div>
</div>
<div class="legend" v-if="1">
<div class="legend-item" v-for="(lgd,index) in legendList" :key="lgd.name">
<div>
@ -108,6 +110,8 @@ export default {
}
.chart {
margin-left: 5%;
width: 290px;
align-self: stretch;
height: 280px;
}

5
src/views/copilot/energy/index.vue
View File

@ -1,7 +1,7 @@
<!--
* @Author: zhp
* @Date: 2024-05-07 10:25:10
* @LastEditTime: 2024-05-09 08:41:11
* @LastEditTime: 2024-05-13 15:48:10
* @LastEditors: zhp
* @Description:
-->
@ -56,8 +56,11 @@ export default {
immediate: true,
},
},
methods: {
fetchData(period = "日") {
// console.log(this.width);
// console.log('sidebar', this.$store.getters.sidebar);
console.log(`效率驾驶舱，获取${period}数据`);
this.$store.dispatch("copilot/initCopilot", {
period,

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

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

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

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

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

@ -9,8 +9,8 @@
<header class="dashboard-header">
<div class="btn" :style="btnStyle" @click="toggleFullscreen"></div>
<h1>发电玻璃智能管控平台地图总览</h1>
<span class="side left">晴转多云 14℃</span>
<span class="side right">23:12|星期一|2023.12.13</span>
<span class="side left">{{ this.weather }}</span>
<span class="side right"> {{ times }} </span>
</header>
</template>
@ -25,7 +25,10 @@ export default {
props: {},
data() {
return {
weatherInterval:null,
isFullscreen: false,
times: null,
weather:'',
};
},
computed: {
@ -37,7 +40,72 @@ export default {
};
},
},
mounted() {
this.getTimes()
this.weatherInterval = setInterval(() => {
this,this.getWeather()
}, 1000)
},
destroyed() {
// console.log(1111)
clearInterval(this.weatherInterval)
},
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
},
getWeather() {
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);
})
})
},
toggleFullscreen() {
screenfull.toggle();
this.isFullscreen = !this.isFullscreen;