Reviewed-on: http://git.picaiba.com/mt-fe-group/yudao-init/pulls/15pull/24/head
@@ -1,7 +1,7 @@ | |||
### | |||
# @Author: zhp | |||
# @Date: 2024-04-28 13:42:51 | |||
# @LastEditTime: 2024-05-10 08:42:44 | |||
# @LastEditTime: 2024-05-11 08:52:30 | |||
# @LastEditors: zhp | |||
# @Description: | |||
### | |||
@@ -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({ | |||
@@ -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 , | |||
}; | |||
} | |||
@@ -1,8 +1,8 @@ | |||
<!-- | |||
<!-- | |||
filename: LineChartBase.vue | |||
author: liubin | |||
date: 2024-04-30 08:59:28 | |||
description: | |||
description: | |||
--> | |||
<template> | |||
@@ -10,7 +10,7 @@ | |||
<div class="legend"> | |||
<span | |||
v-for="item in legend" | |||
:key="item.label" | |||
:key="item.label" | |||
class="legend-item" | |||
:style="{ fontSize: isFullscreen ? '0.58vw' : '0.54vw' }" | |||
>{{ item.label }}</span | |||
@@ -28,7 +28,7 @@ | |||
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: { | |||
@@ -38,7 +38,7 @@ export default { | |||
props: { | |||
vHeight: { | |||
type: Number, | |||
default: 34, | |||
default: 38, | |||
}, | |||
legend: { | |||
type: Array, | |||
@@ -69,116 +69,300 @@ export default { | |||
top: "15%", | |||
containLabel: true, | |||
}, | |||
tooltip: {}, | |||
xAxis: { | |||
axisTick: { | |||
show: false, | |||
}, | |||
axisLine: { | |||
lineStyle: { | |||
color: "#4561AE", | |||
}, | |||
}, | |||
axisLabel: { | |||
color: "#fff", | |||
fontSize: 12, | |||
}, | |||
data: this.xAxis, | |||
// 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: {} | |||
} | |||
}, | |||
yAxis: { | |||
name: "单位/片", | |||
nameTextStyle: { | |||
color: "#fff", | |||
fontSize: 12, | |||
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] | |||
// } | |||
// }, | |||
}, | |||
axisTick: { | |||
show: false, | |||
], | |||
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] | |||
}, | |||
axisLabel: { | |||
color: "#fff", | |||
fontSize: 12, | |||
{ | |||
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] | |||
}, | |||
axisLine: { | |||
show: true, | |||
lineStyle: { | |||
color: "#4561AE", | |||
{ | |||
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] | |||
}, | |||
splitLine: { | |||
lineStyle: { | |||
color: "#4561AE", | |||
{ | |||
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] | |||
}, | |||
}, | |||
series: [ | |||
{ | |||
name: "", // this.series[0].name, | |||
type: "bar", | |||
barWidth: 12, | |||
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: { | |||
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 | |||
}, | |||
normal: { | |||
color: '#11FAF0', //改变折线点的颜色 | |||
lineStyle: { | |||
color: '#11FAF0' //改变折线颜色 | |||
} | |||
} | |||
}, | |||
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"; | |||
// }, | |||
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: { | |||
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 | |||
}, | |||
normal: { | |||
color: '#F38600', //改变折线点的颜色 | |||
lineStyle: { | |||
color: '#F38600' //改变折线颜色 | |||
} | |||
} | |||
}, | |||
data: [], // this.series[1].data, | |||
// emphasis: { | |||
// focus: 'series' | |||
// }, | |||
data: [120, 132, 101, 134, 90, 230, 210] | |||
}, | |||
], | |||
] | |||
}, | |||
}; | |||
}, | |||
@@ -233,7 +417,7 @@ export default { | |||
.legend-item { | |||
position: relative; | |||
// font-size: 12px; | |||
margin-right: 0.67vw; | |||
margin-right: 2vw; | |||
&::before { | |||
content: ""; | |||
@@ -260,37 +444,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> |
@@ -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> |
@@ -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: {}, | |||
}; | |||
@@ -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) + "%" | |||
}, | |||
]; | |||
}, | |||
@@ -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 | |||
? "-" | |||
: `${(this.value * 100).toFixed(0)}%` | |||
// console.log(this.period) | |||
return this.value == 0 | |||
? "-" | |||
: `${(parseFloat(this.value / this.total) * 100).toFixed(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; | |||
} | |||
@@ -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> | |||
@@ -1,4 +1,4 @@ | |||
<!-- | |||
<!-- | |||
filename: ElecCost.vue | |||
author: liubin | |||
date: 2024-04-29 16:37:01 | |||
@@ -44,38 +44,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; | |||
@@ -1,4 +1,4 @@ | |||
<!-- | |||
<!-- | |||
filename: NatGas.vue | |||
author: liubin | |||
date: 2024-04-29 16:36:27 | |||
@@ -7,7 +7,6 @@ | |||
<template> | |||
<BarChartBase | |||
:legend="legend" | |||
:series="series" | |||
:xAxis="xAxis" | |||
in="nat-gas" | |||
@@ -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; | |||
@@ -1,4 +1,4 @@ | |||
<!-- | |||
<!-- | |||
filename: WaterCost.vue | |||
author: liubin | |||
date: 2024-04-29 16:37:34 | |||
@@ -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; | |||
@@ -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,8 +1,8 @@ | |||
<!-- | |||
<!-- | |||
filename: CityData.vue | |||
author: liubin | |||
date: 2024-04-17 09:55:12 | |||
description: | |||
description: | |||
--> | |||
<template> | |||
@@ -72,6 +72,7 @@ export default { | |||
); | |||
}, | |||
cities() { | |||
// console.log('ztl') | |||
let getterName = ""; | |||
switch (this.dataSource) { | |||
case "标准组件产出": | |||
@@ -1,16 +1,16 @@ | |||
<!-- | |||
<!-- | |||
filename: Header.vue | |||
author: liubin | |||
date: 2024-04-09 09:04:12 | |||
description: | |||
description: | |||
--> | |||
<template> | |||
<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> | |||
@@ -26,6 +26,8 @@ export default { | |||
data() { | |||
return { | |||
isFullscreen: false, | |||
times: null, | |||
weather:'', | |||
}; | |||
}, | |||
computed: { | |||
@@ -37,7 +39,68 @@ export default { | |||
}; | |||
}, | |||
}, | |||
mounted () { | |||
;this.getTimes() | |||
this.getWeather() | |||
}, | |||
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() { | |||
screenfull.toggle(); | |||
this.isFullscreen = !this.isFullscreen; | |||