Merge branch 'projects/mescc/develop' into projects/mescc/zjl
This commit is contained in:
commit
18e50722b0
2
.env.dev
2
.env.dev
@ -1,7 +1,7 @@
|
|||||||
###
|
###
|
||||||
# @Author: zhp
|
# @Author: zhp
|
||||||
# @Date: 2024-04-28 13:42:51
|
# @Date: 2024-04-28 13:42:51
|
||||||
# @LastEditTime: 2024-05-10 08:42:44
|
# @LastEditTime: 2024-05-13 13:30:20
|
||||||
# @LastEditors: zhp
|
# @LastEditors: zhp
|
||||||
# @Description:
|
# @Description:
|
||||||
###
|
###
|
||||||
|
@ -1,20 +1,19 @@
|
|||||||
import * as echarts from "echarts";
|
import * as echarts from "echarts";
|
||||||
|
|
||||||
function __resizeHandler(entries) {
|
function __resizeHandler(entries) {
|
||||||
console.log(entries);
|
|
||||||
for (const entry of entries) {
|
for (const entry of entries) {
|
||||||
if (entry.contentBoxSize) {
|
if (entry.contentBoxSize) {
|
||||||
// manipulate contentBoxSize
|
// manipulate contentBoxSize
|
||||||
const contentBoxSize = Array.isArray(entry.contentBoxSize)
|
// const contentBoxSize = Array.isArray(entry.contentBoxSize)
|
||||||
? entry.contentBoxSize[0]
|
// ? entry.contentBoxSize[0]
|
||||||
: entry.contentBoxSize;
|
// : entry.contentBoxSize;
|
||||||
this.chart_mixin_chartInstance.resize({
|
// this.chart_mixin_chartInstance.resize({
|
||||||
width:
|
// width:
|
||||||
contentBoxSize.inlineSize < this.MIN_WIDTH
|
// contentBoxSize.inlineSize < this.MIN_WIDTH
|
||||||
? this.MIN_WIDTH
|
// ? this.MIN_WIDTH
|
||||||
: contentBoxSize.inlineSize,
|
// : contentBoxSize.inlineSize,
|
||||||
height: contentBoxSize.blockSize,
|
// height: contentBoxSize.blockSize,
|
||||||
});
|
// });
|
||||||
} else {
|
} else {
|
||||||
// manipulate contentRect
|
// manipulate contentRect
|
||||||
this.chart_mixin_chartInstance.resize({
|
this.chart_mixin_chartInstance.resize({
|
||||||
|
@ -29,10 +29,12 @@ const state = {
|
|||||||
target: [],
|
target: [],
|
||||||
current: [],
|
current: [],
|
||||||
previous: [],
|
previous: [],
|
||||||
|
outputNumber:[],
|
||||||
},
|
},
|
||||||
stdRate: {
|
stdRate: {
|
||||||
target: [],
|
target: [],
|
||||||
current: [],
|
current: [],
|
||||||
|
outputNumber:[]
|
||||||
},
|
},
|
||||||
},
|
},
|
||||||
},
|
},
|
||||||
@ -112,11 +114,8 @@ const actions = {
|
|||||||
targetList = data
|
targetList = data
|
||||||
}
|
}
|
||||||
let factoryData = factoryList.prodOutputResultDO ? factoryList.prodOutputResultDO : factoryList.prodOutputRateDO
|
let factoryData = factoryList.prodOutputResultDO ? factoryList.prodOutputResultDO : factoryList.prodOutputRateDO
|
||||||
let targetData = targetList.ProdTargetDO ? targetList.ProdTargetDO : targetList.ProdTargetDO
|
let targetData = targetList.prodTargetDO ? targetList.prodTargetDO : targetList.prodTargetDO
|
||||||
console.log(factoryList.ProdOutputDO)
|
|
||||||
console.log('ryf',factoryList)
|
|
||||||
const payload = handler(factoryData, targetData)
|
const payload = handler(factoryData, targetData)
|
||||||
console.log(payload)
|
|
||||||
commit("SET_COPILOT_INFO", { type, payload });
|
commit("SET_COPILOT_INFO", { type, payload });
|
||||||
},
|
},
|
||||||
};
|
};
|
||||||
@ -129,7 +128,7 @@ export default {
|
|||||||
};
|
};
|
||||||
|
|
||||||
function splitCurrentAndPreviousA(factoryListResponse, targetListResponse) {
|
function splitCurrentAndPreviousA(factoryListResponse, targetListResponse) {
|
||||||
console.log('工厂',factoryListResponse);
|
console.log('工厂',targetListResponse);
|
||||||
// console.log('工厂',factoryListResponse);
|
// console.log('工厂',factoryListResponse);
|
||||||
|
|
||||||
// 初始数据
|
// 初始数据
|
||||||
@ -186,9 +185,6 @@ function splitCurrentAndPreviousA(factoryListResponse, targetListResponse) {
|
|||||||
// ];
|
// ];
|
||||||
if (factoryListResponse) {
|
if (factoryListResponse) {
|
||||||
for (const factory of factoryListResponse) {
|
for (const factory of factoryListResponse) {
|
||||||
if (factory.glassType === 1) {
|
|
||||||
console.log(factory.yieldRate)
|
|
||||||
}
|
|
||||||
const fId = getFactoryId(factory);
|
const fId = getFactoryId(factory);
|
||||||
// 获取目标值
|
// 获取目标值
|
||||||
if (targetListResponse) {
|
if (targetListResponse) {
|
||||||
@ -197,23 +193,25 @@ function splitCurrentAndPreviousA(factoryListResponse, targetListResponse) {
|
|||||||
componentYieldRate,
|
componentYieldRate,
|
||||||
chipOee,
|
chipOee,
|
||||||
componentConversionEfficiency,
|
componentConversionEfficiency,
|
||||||
|
componentYield
|
||||||
} = getFactoryTargetValueA(targetListResponse, fId);
|
} = getFactoryTargetValueA(targetListResponse, fId);
|
||||||
stdRate.target[fId] = chipYieldRate;
|
stdRate.target[fId] = componentYieldRate
|
||||||
chipRate.target[fId] = componentYieldRate;
|
chipRate.target[fId] = chipYieldRate
|
||||||
}
|
}
|
||||||
// 芯片OEE
|
// 芯片OEE
|
||||||
chipOee.current[fId] = factory.oee * 100 || random_default();
|
chipOee.current[fId] = factory.oee * 100 ;
|
||||||
chipOee.previous[fId] = factory.previousYearOee * 100 || random_default();
|
chipOee.previous[fId] = factory.previousYearOee * 100 ;
|
||||||
// 转化效率
|
// 转化效率
|
||||||
transformRate.current[fId] =
|
transformRate.current[fId] =
|
||||||
factory.componentConversionEfficiency * 100 || random_default();
|
factory.componentConversionEfficiency * 100 ;
|
||||||
transformRate.previous[fId] =
|
transformRate.previous[fId] =
|
||||||
factory.previousYearComponentConversionEfficiency * 100 || random_default();
|
factory.previousYearComponentConversionEfficiency * 100 ;
|
||||||
// 芯片良率 与 标准组件良率
|
// 芯片良率 与 标准组件良率
|
||||||
if (![0, 1].includes(factory.glassType)) continue;
|
if (![0, 1].includes(factory.glassType)) continue;
|
||||||
const _t = [chipRate, stdRate][factory.glassType];
|
const _t = [chipRate, stdRate][factory.glassType]
|
||||||
_t.current[fId] = factory.yieldRate || random_default();
|
console.log('_t',_t);
|
||||||
_t.previous[fId] = factory.previousYearYieldRate || random_default();
|
_t.current[fId] = factory.yieldRate ;
|
||||||
|
_t.previous[fId] = factory.previousYearYieldRate ;
|
||||||
}
|
}
|
||||||
|
|
||||||
return {
|
return {
|
||||||
@ -295,16 +293,18 @@ function getFactoryTargetValue(targetList, factoryId) {
|
|||||||
* @returns
|
* @returns
|
||||||
*/
|
*/
|
||||||
function getFactoryTargetValueA(targetList, factoryId) {
|
function getFactoryTargetValueA(targetList, factoryId) {
|
||||||
const target = targetList.find((item) => item.factory === factoryId);
|
const target = targetList.find((item) => item.factory === factoryId)
|
||||||
if (target) {
|
if (target) {
|
||||||
return {
|
return {
|
||||||
chipYieldRate: target.chipYieldRate ?? random_default(),
|
chipYieldRate: target.chipYieldRate ?? random_default(),
|
||||||
componentYieldRate: target.componentYieldRate ?? random_default(),
|
componentYieldRate: target.componentYieldRate ?? random_default(),
|
||||||
|
componentYield: target.componentYield ?? random_default(),
|
||||||
};
|
};
|
||||||
}
|
}
|
||||||
return {
|
return {
|
||||||
chipYieldRate: random_default(),
|
chipYieldRate:0,
|
||||||
componentYieldRate: random_default(),
|
componentYieldRate:0,
|
||||||
|
componentYield:0 ,
|
||||||
};
|
};
|
||||||
}
|
}
|
||||||
|
|
||||||
|
@ -1,44 +1,36 @@
|
|||||||
<!--
|
<!--
|
||||||
filename: LineChartBase.vue
|
filename: LineChartBase.vue
|
||||||
author: liubin
|
author: liubin
|
||||||
date: 2024-04-30 08:59:28
|
date: 2024-04-30 08:59:28
|
||||||
description:
|
description:
|
||||||
-->
|
-->
|
||||||
|
|
||||||
<template>
|
<template>
|
||||||
<chart-container class="line-chart-base">
|
<chart-container class="line-chart-base">
|
||||||
<div class="legend">
|
<div class="legend">
|
||||||
<span
|
<span v-for="item in legend" :key="item.label" class="legend-item"
|
||||||
v-for="item in legend"
|
:style="{ fontSize: isFullscreen ? '0.58vw' : '0.54vw' }">{{ item.label }}</span>
|
||||||
:key="item.label"
|
|
||||||
class="legend-item"
|
|
||||||
:style="{ fontSize: isFullscreen ? '0.58vw' : '0.54vw' }"
|
|
||||||
>{{ item.label }}</span
|
|
||||||
>
|
|
||||||
</div>
|
</div>
|
||||||
<div
|
<div ref="elsChart" :style="{ height: '100%',width: width}"></div>
|
||||||
ref="chart"
|
|
||||||
style="max-width: 50vw"
|
|
||||||
:style="{ height: vHeight + 'vh' }"
|
|
||||||
></div>
|
|
||||||
</chart-container>
|
</chart-container>
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
<script>
|
<script>
|
||||||
import screenfull from "screenfull";
|
import screenfull from "screenfull";
|
||||||
|
import { debounce } from "@/utils/debounce";
|
||||||
import ChartContainer from "./ChartContainer.vue";
|
import ChartContainer from "./ChartContainer.vue";
|
||||||
import chartMixin from "@/mixins/chart.js";
|
// import chartMixin from "@/mixins/chart.js";
|
||||||
|
import * as echarts from "echarts";
|
||||||
export default {
|
export default {
|
||||||
name: "LineChartBase",
|
name: "LineChartBase",
|
||||||
components: {
|
components: {
|
||||||
ChartContainer,
|
ChartContainer,
|
||||||
},
|
},
|
||||||
mixins: [chartMixin],
|
// mixins: [chartMixin],
|
||||||
props: {
|
props: {
|
||||||
vHeight: {
|
vHeight: {
|
||||||
type: Number,
|
type: Number,
|
||||||
default: 34,
|
default: 38,
|
||||||
},
|
},
|
||||||
legend: {
|
legend: {
|
||||||
type: Array,
|
type: Array,
|
||||||
@ -59,6 +51,7 @@ export default {
|
|||||||
},
|
},
|
||||||
data() {
|
data() {
|
||||||
return {
|
return {
|
||||||
|
width: '100%',
|
||||||
isFullscreen: false,
|
isFullscreen: false,
|
||||||
actualOptions: null,
|
actualOptions: null,
|
||||||
options: {
|
options: {
|
||||||
@ -69,120 +62,319 @@ export default {
|
|||||||
top: "15%",
|
top: "15%",
|
||||||
containLabel: true,
|
containLabel: true,
|
||||||
},
|
},
|
||||||
tooltip: {},
|
// title: {
|
||||||
xAxis: {
|
// text: 'Stacked Area Chart'
|
||||||
axisTick: {
|
// },
|
||||||
show: false,
|
tooltip: {
|
||||||
},
|
trigger: 'axis',
|
||||||
axisLine: {
|
axisPointer: {
|
||||||
lineStyle: {
|
type: 'cross',
|
||||||
color: "#4561AE",
|
label: {
|
||||||
},
|
backgroundColor: '#6a7985'
|
||||||
},
|
}
|
||||||
axisLabel: {
|
}
|
||||||
color: "#fff",
|
|
||||||
fontSize: 12,
|
|
||||||
},
|
|
||||||
data: this.xAxis,
|
|
||||||
},
|
},
|
||||||
yAxis: {
|
// legend: {
|
||||||
name: "单位/片",
|
// data: ['Email', 'Union Ads', 'Video Ads', 'Direct', 'Search Engine']
|
||||||
nameTextStyle: {
|
// },
|
||||||
color: "#fff",
|
// toolbox: {
|
||||||
fontSize: 12,
|
// feature: {
|
||||||
},
|
// saveAsImage: {}
|
||||||
axisTick: {
|
// }
|
||||||
show: false,
|
// },
|
||||||
},
|
grid: {
|
||||||
axisLabel: {
|
left: '3%',
|
||||||
color: "#fff",
|
right: '4%',
|
||||||
fontSize: 12,
|
bottom: '3%',
|
||||||
},
|
containLabel: true
|
||||||
axisLine: {
|
|
||||||
show: true,
|
|
||||||
lineStyle: {
|
|
||||||
color: "#4561AE",
|
|
||||||
},
|
|
||||||
},
|
|
||||||
splitLine: {
|
|
||||||
lineStyle: {
|
|
||||||
color: "#4561AE",
|
|
||||||
},
|
|
||||||
},
|
|
||||||
},
|
},
|
||||||
series: [
|
xAxis: [
|
||||||
{
|
{
|
||||||
name: "", // this.series[0].name,
|
type: 'category',
|
||||||
type: "bar",
|
boundaryGap: false,
|
||||||
barWidth: 12,
|
data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
|
||||||
itemStyle: {
|
}
|
||||||
borderRadius: [10, 10, 0, 0],
|
],
|
||||||
color: {
|
yAxis: [
|
||||||
type: "linear",
|
{
|
||||||
x: 0,
|
min: function () { // 取最小值向下取整为最小刻度
|
||||||
y: 0,
|
return 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,
|
max: function (value) { // 取最大值向上取整为最大刻度
|
||||||
},
|
},
|
||||||
{
|
scale: true,
|
||||||
name: "", // this.series[1].name,
|
type: 'value',
|
||||||
type: "bar",
|
name: 'kw/h',
|
||||||
barWidth: 12,
|
// max: 100,//最大值
|
||||||
// tooltip: {
|
// min: 0,//最小值
|
||||||
// valueFormatter: function (value) {
|
// interval: 20,//间隔
|
||||||
// return value + " ml";
|
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]
|
||||||
|
// }
|
||||||
// },
|
// },
|
||||||
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,
|
|
||||||
},
|
},
|
||||||
],
|
],
|
||||||
|
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]
|
||||||
|
},
|
||||||
|
]
|
||||||
},
|
},
|
||||||
};
|
};
|
||||||
},
|
},
|
||||||
|
computed: {
|
||||||
|
isOpen() {
|
||||||
|
return this.$store.getters.sidebar.opened
|
||||||
|
},
|
||||||
|
},
|
||||||
watch: {
|
watch: {
|
||||||
|
isOpen(val) {
|
||||||
|
if (val === true) {
|
||||||
|
this.width = '99%'
|
||||||
|
this.canvasReset()
|
||||||
|
console.log(this.width)
|
||||||
|
} else {
|
||||||
|
this.watch = 100 + '%'
|
||||||
|
this.canvasReset()
|
||||||
|
}
|
||||||
|
},
|
||||||
/** 全屏状态切换时,对柱子粗细和字体大小进行相应调整 */
|
/** 全屏状态切换时,对柱子粗细和字体大小进行相应调整 */
|
||||||
isFullscreen(val) {
|
isFullscreen(val) {
|
||||||
this.actualOptions.series.map((item) => {
|
this.actualOptions.series.map((item) => {
|
||||||
@ -191,11 +383,11 @@ export default {
|
|||||||
this.actualOptions.xAxis.axisLabel.fontSize = val ? 18 : 12;
|
this.actualOptions.xAxis.axisLabel.fontSize = val ? 18 : 12;
|
||||||
this.actualOptions.yAxis.axisLabel.fontSize = val ? 18 : 12;
|
this.actualOptions.yAxis.axisLabel.fontSize = val ? 18 : 12;
|
||||||
this.actualOptions.yAxis.nameTextStyle.fontSize = val ? 18 : 12;
|
this.actualOptions.yAxis.nameTextStyle.fontSize = val ? 18 : 12;
|
||||||
this.initOptions(this.actualOptions);
|
this.initChart(this.actualOptions);
|
||||||
},
|
},
|
||||||
series(val) {
|
series(val) {
|
||||||
if (!val) {
|
if (!val) {
|
||||||
this.initOptions(this.options);
|
this.initChart(this.options);
|
||||||
return;
|
return;
|
||||||
}
|
}
|
||||||
const actualOptions = JSON.parse(JSON.stringify(this.options));
|
const actualOptions = JSON.parse(JSON.stringify(this.options));
|
||||||
@ -204,19 +396,42 @@ export default {
|
|||||||
actualOptions.series[1].data = val?.[1]?.data || [];
|
actualOptions.series[1].data = val?.[1]?.data || [];
|
||||||
actualOptions.series[1].name = val?.[1]?.name || "";
|
actualOptions.series[1].name = val?.[1]?.name || "";
|
||||||
this.actualOptions = actualOptions;
|
this.actualOptions = actualOptions;
|
||||||
this.initOptions(actualOptions);
|
this.initChart(actualOptions);
|
||||||
},
|
},
|
||||||
},
|
},
|
||||||
mounted() {
|
|
||||||
this.actualOptions = this.options;
|
|
||||||
this.initOptions(this.options);
|
|
||||||
|
|
||||||
if (screenfull.isEnabled) {
|
mounted() {
|
||||||
screenfull.on("change", () => {
|
// if (screenfull.isEnabled) {
|
||||||
this.isFullscreen = screenfull.isFullscreen;
|
// 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>
|
</script>
|
||||||
|
|
||||||
@ -233,7 +448,7 @@ export default {
|
|||||||
.legend-item {
|
.legend-item {
|
||||||
position: relative;
|
position: relative;
|
||||||
// font-size: 12px;
|
// font-size: 12px;
|
||||||
margin-right: 0.67vw;
|
margin-right: 2vw;
|
||||||
|
|
||||||
&::before {
|
&::before {
|
||||||
content: "";
|
content: "";
|
||||||
@ -260,37 +475,37 @@ export default {
|
|||||||
|
|
||||||
.legend-item:nth-child(1):after,
|
.legend-item:nth-child(1):after,
|
||||||
.legend-item:nth-child(1):before {
|
.legend-item:nth-child(1):before {
|
||||||
background-color: #fad162;
|
background-color: #8167F6;
|
||||||
}
|
}
|
||||||
|
|
||||||
.legend-item:nth-child(2):after,
|
.legend-item:nth-child(2):after,
|
||||||
.legend-item:nth-child(2):before {
|
.legend-item:nth-child(2):before {
|
||||||
background-color: #2160f3;
|
background-color: #2760FF;
|
||||||
}
|
}
|
||||||
|
|
||||||
.legend-item:nth-child(3):after,
|
.legend-item:nth-child(3):after,
|
||||||
.legend-item:nth-child(3):before {
|
.legend-item:nth-child(3):before {
|
||||||
background-color: #13dbf3;
|
background-color: #5996F7;
|
||||||
}
|
}
|
||||||
|
|
||||||
.legend-item:nth-child(4):after,
|
.legend-item:nth-child(4):after,
|
||||||
.legend-item:nth-child(4):before {
|
.legend-item:nth-child(4):before {
|
||||||
background-color: #88ca67;
|
background-color: #8BC566;
|
||||||
}
|
}
|
||||||
|
|
||||||
.legend-item:nth-child(5):after,
|
.legend-item:nth-child(5):after,
|
||||||
.legend-item:nth-child(5):before {
|
.legend-item:nth-child(5):before {
|
||||||
background-color: #5c97fc;
|
background-color: #11FAF0;
|
||||||
}
|
}
|
||||||
|
|
||||||
.legend-item:nth-child(6):after,
|
.legend-item:nth-child(6):after,
|
||||||
.legend-item:nth-child(6):before {
|
.legend-item:nth-child(6):before {
|
||||||
background-color: #f48900;
|
background-color: #F3C000;
|
||||||
}
|
}
|
||||||
|
|
||||||
.legend-item:nth-child(7):after,
|
.legend-item:nth-child(7):after,
|
||||||
.legend-item:nth-child(7):before {
|
.legend-item:nth-child(7):before {
|
||||||
background-color: #776bf0;
|
background-color: #F38600;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
</style>
|
</style>
|
||||||
|
515
src/views/copilot/components/LineChartWater.vue
Normal file
515
src/views/copilot/components/LineChartWater.vue
Normal 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
304
src/views/copilot/components/gasBarChartBase.vue
Normal 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>
|
@ -1,7 +1,7 @@
|
|||||||
<!--
|
<!--
|
||||||
* @Author: zhp
|
* @Author: zhp
|
||||||
* @Date: 2024-05-07 10:25:10
|
* @Date: 2024-05-07 10:25:10
|
||||||
* @LastEditTime: 2024-05-09 08:44:21
|
* @LastEditTime: 2024-05-11 14:51:07
|
||||||
* @LastEditors: zhp
|
* @LastEditors: zhp
|
||||||
* @Description:
|
* @Description:
|
||||||
-->
|
-->
|
||||||
@ -28,21 +28,68 @@ export default {
|
|||||||
default: "日",
|
default: "日",
|
||||||
},
|
},
|
||||||
},
|
},
|
||||||
|
computed: {
|
||||||
|
cities() {
|
||||||
|
console.log('ztl', this.$store.getters.copilot.efficiency.stdRate)
|
||||||
|
// let getterName = "";
|
||||||
|
// switch (this.dataSource) {
|
||||||
|
// case "标准组件产出":
|
||||||
|
// getterName = "stdOutput";
|
||||||
|
// break;
|
||||||
|
// case "芯片产出":
|
||||||
|
// getterName = "chipOutput";
|
||||||
|
// break;
|
||||||
|
// case "BIPV产出":
|
||||||
|
// getterName = "bipvOutput";
|
||||||
|
// break;
|
||||||
|
// }
|
||||||
|
const _cities = [
|
||||||
|
{ name: "瑞昌", target: 0, total: 0, current: 0, componentYield: 0, goodNumber:0,},
|
||||||
|
{ name: "邯郸", target: 0, total: 0, current: 0, componentYield: 0, goodNumber: 0, },
|
||||||
|
{ name: "株洲", target: 0, previous: 0, current: 0, componentYield: 0, goodNumber: 0, },
|
||||||
|
{ name: "佳木斯", target: 0, previous: 0, current: 0, componentYield: 0, goodNumber: 0, },
|
||||||
|
{ name: "成都", target: 0, previous: 0, current: 0, componentYield: 0, goodNumber: 0, },
|
||||||
|
{ name: "凯盛光伏", target: 0, previous: 0, current: 0, componentYield: 0, goodNumber: 0, },
|
||||||
|
{ name: "蚌埠", target: 0, previous: 0, current: 0, componentYield: 0, goodNumber: 0, },
|
||||||
|
]
|
||||||
|
if (this.$store.getters.copilot?.efficiency.stdRate?.previous) {
|
||||||
|
this.$store.getters.copilot?.efficiency.stdRate?.previous.forEach(
|
||||||
|
(v, idx) => {
|
||||||
|
_cities[idx].previous = v ?? 0;
|
||||||
|
}
|
||||||
|
);
|
||||||
|
}
|
||||||
|
if (this.$store.getters.copilot?.efficiency.stdRate?.target) {
|
||||||
|
this.$store.getters.copilot?.efficiency.stdRate?.target.forEach(
|
||||||
|
(v, idx) => {
|
||||||
|
_cities[idx].target = v ?? 0;
|
||||||
|
}
|
||||||
|
)
|
||||||
|
}
|
||||||
|
if (this.$store.getters.copilot?.efficiency.stdRate?.current) {
|
||||||
|
this.$store.getters.copilot?.efficiency.stdRate?.current.forEach(
|
||||||
|
(v, idx) => {
|
||||||
|
_cities[idx].current = v ?? 0;
|
||||||
|
}
|
||||||
|
);
|
||||||
|
}
|
||||||
|
// 删掉凯盛光伏
|
||||||
|
// _cities.splice(4, 1);
|
||||||
|
return _cities;
|
||||||
|
},
|
||||||
|
},
|
||||||
data() {
|
data() {
|
||||||
return {
|
return {
|
||||||
cities: [
|
// cities: [
|
||||||
{ name: "瑞昌", target: 100, total: 200, thisYear: 20 },
|
// { name: "瑞昌", target: 100, total: 200, current: 20 },
|
||||||
{ name: "邯郸", target: 200, total: 300, thisYear: 20 },
|
// { name: "邯郸", target: 200, total: 300, current: 20 },
|
||||||
{ name: "株洲", target: 300, total: 400, thisYear: 20 },
|
// { name: "株洲", target: 300, total: 400, current: 20 },
|
||||||
{ name: "佳木斯", target: 400, total: 500, thisYear: 20 },
|
// { name: "佳木斯", target: 400, total: 500, current: 20 },
|
||||||
{ name: "成都", target: 500, total: 600, thisYear: 20 },
|
// { name: "成都", target: 500, total: 600, current: 20 },
|
||||||
{ name: "凯盛光伏", target: 400, total: 500, thisYear: 20 },
|
// { name: "凯盛光伏", target: 400, total: 500, current: 20 },
|
||||||
{ name: "蚌埠", target: 500, total: 600, thisYear: 20 },
|
// { name: "蚌埠", target: 500, total: 600, current: 20 },
|
||||||
],
|
// ],
|
||||||
};
|
};
|
||||||
},
|
|
||||||
computed: {
|
|
||||||
|
|
||||||
},
|
},
|
||||||
methods: {},
|
methods: {},
|
||||||
};
|
};
|
||||||
|
@ -1,40 +1,32 @@
|
|||||||
<!--
|
<!--
|
||||||
* @Author: zhp
|
* @Author: zhp
|
||||||
* @Date: 2024-05-07 13:22:43
|
* @Date: 2024-05-07 13:22:43
|
||||||
* @LastEditTime: 2024-05-09 16:22:24
|
* @LastEditTime: 2024-05-14 08:32:44
|
||||||
* @LastEditors: zhp
|
* @LastEditors: zhp
|
||||||
* @Description:
|
* @Description:
|
||||||
-->
|
-->
|
||||||
<template>
|
<template>
|
||||||
<chart-container class="bar-chart-base">
|
<chart-container class="bar-chart-base">
|
||||||
<div class="legend">
|
<div class="legend">
|
||||||
<span
|
<span v-for="item in legend" :key="item.label" class="legend-item"
|
||||||
v-for="item in legend"
|
:style="{ fontSize: isFullscreen ? '0.58vw' : '0.54vw' }">{{ item.label }}</span>
|
||||||
:key="item.label"
|
|
||||||
class="legend-item"
|
|
||||||
:style="{ fontSize: isFullscreen ? '0.58vw' : '0.54vw' }"
|
|
||||||
>{{ item.label }}</span
|
|
||||||
>
|
|
||||||
</div>
|
</div>
|
||||||
<div
|
<div ref="chart" :style="{ height: '100%',width: width}"></div>
|
||||||
ref="chart"
|
|
||||||
style="max-width: 40vw"
|
|
||||||
:style="{ height: vHeight + 'vh' }"
|
|
||||||
></div>
|
|
||||||
</chart-container>
|
</chart-container>
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
<script>
|
<script>
|
||||||
import screenfull from "screenfull";
|
import screenfull from "screenfull";
|
||||||
import ChartContainer from "../../../../components/ChartContainer.vue";
|
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 {
|
export default {
|
||||||
name: "BarChartBase",
|
name: "BarChartBase",
|
||||||
components: {
|
components: {
|
||||||
ChartContainer,
|
ChartContainer,
|
||||||
},
|
},
|
||||||
mixins: [chartMixin],
|
// mixins: [chartMixin],
|
||||||
props: {
|
props: {
|
||||||
vHeight: {
|
vHeight: {
|
||||||
type: Number,
|
type: Number,
|
||||||
@ -59,12 +51,13 @@ export default {
|
|||||||
},
|
},
|
||||||
data() {
|
data() {
|
||||||
return {
|
return {
|
||||||
|
width: '100%',
|
||||||
isFullscreen: false,
|
isFullscreen: false,
|
||||||
actualOptions: null,
|
actualOptions: null,
|
||||||
options: {
|
options: {
|
||||||
grid: {
|
grid: {
|
||||||
left: "5%",
|
left: "5%",
|
||||||
right: "4%",
|
right: "0%",
|
||||||
bottom: "3%",
|
bottom: "3%",
|
||||||
top: "15%",
|
top: "15%",
|
||||||
containLabel: true,
|
containLabel: true,
|
||||||
@ -182,7 +175,21 @@ export default {
|
|||||||
},
|
},
|
||||||
};
|
};
|
||||||
},
|
},
|
||||||
|
computed: {
|
||||||
|
isOpen() {
|
||||||
|
return this.$store.getters.sidebar.opened
|
||||||
|
},
|
||||||
|
},
|
||||||
watch: {
|
watch: {
|
||||||
|
isOpen(val) {
|
||||||
|
if (val === true) {
|
||||||
|
this.width = '100%-128px'
|
||||||
|
this.canvasReset()
|
||||||
|
} else {
|
||||||
|
this.watch = 100 + '%'
|
||||||
|
this.canvasReset()
|
||||||
|
}
|
||||||
|
},
|
||||||
/** 全屏状态切换时,对柱子粗细和字体大小进行相应调整 */
|
/** 全屏状态切换时,对柱子粗细和字体大小进行相应调整 */
|
||||||
isFullscreen(val) {
|
isFullscreen(val) {
|
||||||
this.actualOptions.series.map((item) => {
|
this.actualOptions.series.map((item) => {
|
||||||
@ -191,11 +198,11 @@ export default {
|
|||||||
this.actualOptions.xAxis.axisLabel.fontSize = val ? 18 : 12;
|
this.actualOptions.xAxis.axisLabel.fontSize = val ? 18 : 12;
|
||||||
this.actualOptions.yAxis.axisLabel.fontSize = val ? 18 : 12;
|
this.actualOptions.yAxis.axisLabel.fontSize = val ? 18 : 12;
|
||||||
this.actualOptions.yAxis.nameTextStyle.fontSize = val ? 18 : 12;
|
this.actualOptions.yAxis.nameTextStyle.fontSize = val ? 18 : 12;
|
||||||
this.initOptions(this.actualOptions);
|
this.initChart(this.actualOptions);
|
||||||
},
|
},
|
||||||
series(val) {
|
series(val) {
|
||||||
if (!val) {
|
if (!val) {
|
||||||
this.initOptions(this.options);
|
this.initChart(this.options);
|
||||||
return;
|
return;
|
||||||
}
|
}
|
||||||
console.log(val)
|
console.log(val)
|
||||||
@ -205,19 +212,41 @@ export default {
|
|||||||
actualOptions.series[1].data = val?.[1]?.data || [];
|
actualOptions.series[1].data = val?.[1]?.data || [];
|
||||||
actualOptions.series[1].name = val?.[1]?.name || "";
|
actualOptions.series[1].name = val?.[1]?.name || "";
|
||||||
this.actualOptions = actualOptions;
|
this.actualOptions = actualOptions;
|
||||||
this.initOptions(actualOptions);
|
this.initChart(actualOptions);
|
||||||
},
|
},
|
||||||
},
|
},
|
||||||
mounted() {
|
mounted() {
|
||||||
this.actualOptions = this.options;
|
// if (screenfull.isEnabled) {
|
||||||
this.initOptions(this.options);
|
// 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>
|
</script>
|
||||||
|
|
||||||
|
@ -59,7 +59,7 @@ export default {
|
|||||||
},
|
},
|
||||||
valueTuple() {
|
valueTuple() {
|
||||||
const getter = this.chipRate;
|
const getter = this.chipRate;
|
||||||
console.log(getter)
|
// console.log(getter)
|
||||||
if (this.period === "日" || this.period === "周") {
|
if (this.period === "日" || this.period === "周") {
|
||||||
return [
|
return [
|
||||||
getter.previous[this.factoryId],
|
getter.previous[this.factoryId],
|
||||||
@ -111,11 +111,11 @@ export default {
|
|||||||
this.period == "月"
|
this.period == "月"
|
||||||
? `${year - 1}年${month}月良率`
|
? `${year - 1}年${month}月良率`
|
||||||
: `${year - 1}年良率`,
|
: `${year - 1}年良率`,
|
||||||
value: (this.valueTuple[0] * 100).toFixed(0) + "%",
|
value: isNaN((this.valueTuple[0] * 100).toFixed(0)) ? 0 + "%" : (this.valueTuple[0] * 100).toFixed(0) + "%"
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
label: this.period == "月" ? `${month}月良率` : `${year}年良率`,
|
label: this.period == "月" ? `${month}月良率` : `${year}年良率`,
|
||||||
value: (this.valueTuple[1] * 100).toFixed(0) + "%",
|
value: isNaN((this.valueTuple[1] * 100).toFixed(0)) ? 0 + "%" : (this.valueTuple[1] * 100).toFixed(0) + "%"
|
||||||
},
|
},
|
||||||
];
|
];
|
||||||
},
|
},
|
||||||
@ -159,6 +159,7 @@ export default {
|
|||||||
}
|
}
|
||||||
|
|
||||||
.chart {
|
.chart {
|
||||||
|
width: 390px;
|
||||||
align-self: stretch;
|
align-self: stretch;
|
||||||
height: 280px;
|
height: 280px;
|
||||||
}
|
}
|
||||||
|
@ -6,11 +6,8 @@
|
|||||||
-->
|
-->
|
||||||
|
|
||||||
<template>
|
<template>
|
||||||
<div class="progress-bar" :data-title="title" :data-rate="dataRate">
|
<div class="progress-bar" :data-title="titleYear" :data-rate="number">
|
||||||
<div
|
<div class="progress-bar__rate" :style="{ width: dataRate == '-' ? 0 : dataRate }"></div>
|
||||||
class="progress-bar__rate"
|
|
||||||
:style="{ width: dataRate == '-' ? 0 : dataRate }"
|
|
||||||
></div>
|
|
||||||
</div>
|
</div>
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
@ -23,23 +20,52 @@ export default {
|
|||||||
type: Number,
|
type: Number,
|
||||||
default: 0,
|
default: 0,
|
||||||
},
|
},
|
||||||
total: {
|
target: {
|
||||||
type: Number,
|
type: Number,
|
||||||
default: 0,
|
default: 0,
|
||||||
},
|
},
|
||||||
|
goodNumber: {
|
||||||
|
type: Number,
|
||||||
|
default:0
|
||||||
|
},
|
||||||
|
componentYield: {
|
||||||
|
type: Number,
|
||||||
|
default:0
|
||||||
|
},
|
||||||
|
period: {
|
||||||
|
type: String,
|
||||||
|
default:'日',
|
||||||
|
},
|
||||||
title: {
|
title: {
|
||||||
type: String,
|
type: String,
|
||||||
default: "",
|
default: "",
|
||||||
},
|
},
|
||||||
|
city: {
|
||||||
|
type: String,
|
||||||
|
default:""
|
||||||
|
}
|
||||||
},
|
},
|
||||||
data() {
|
data() {
|
||||||
return {};
|
return {
|
||||||
|
number: 0,
|
||||||
|
titleYear:'',
|
||||||
|
};
|
||||||
},
|
},
|
||||||
computed: {
|
computed: {
|
||||||
dataRate() {
|
dataRate() {
|
||||||
return this.total == 0
|
if ((this.period === '年' || this.period === '月') && this.target != 0) {
|
||||||
|
// console.log(this.componentYield)
|
||||||
|
this.titleYear = this.title + ' ' + `${(this.target * 100).toFixed(0)}%`
|
||||||
|
} else {
|
||||||
|
this.titleYear = this.title
|
||||||
|
}
|
||||||
|
this.number = this.value == 0
|
||||||
? "-"
|
? "-"
|
||||||
: `${(parseFloat(this.value / this.total) * 100).toFixed(0)}%`;
|
: `${(this.value * 100).toFixed(0)}%`
|
||||||
|
// console.log(this.period)
|
||||||
|
return this.value == 0
|
||||||
|
? "-"
|
||||||
|
: this.value >1 ? 100 + '%' :`${(this.value * 100).toFixed(0)}%`
|
||||||
},
|
},
|
||||||
},
|
},
|
||||||
methods: {},
|
methods: {},
|
||||||
@ -69,7 +95,7 @@ export default {
|
|||||||
color: #fff;
|
color: #fff;
|
||||||
position: absolute;
|
position: absolute;
|
||||||
bottom: -200%;
|
bottom: -200%;
|
||||||
right: 0;
|
right: 10px;
|
||||||
font-size: 12px;
|
font-size: 12px;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
@ -1,7 +1,7 @@
|
|||||||
<!--
|
<!--
|
||||||
* @Author: zhp
|
* @Author: zhp
|
||||||
* @Date: 2024-05-07 10:25:10
|
* @Date: 2024-05-07 10:25:10
|
||||||
* @LastEditTime: 2024-05-09 09:04:07
|
* @LastEditTime: 2024-05-11 15:05:17
|
||||||
* @LastEditors: zhp
|
* @LastEditors: zhp
|
||||||
* @Description:
|
* @Description:
|
||||||
-->
|
-->
|
||||||
@ -10,29 +10,29 @@
|
|||||||
<div v-if="period == '日'" class="std-rate-item">
|
<div v-if="period == '日'" class="std-rate-item">
|
||||||
<CityName :value="city.name" />
|
<CityName :value="city.name" />
|
||||||
<div class="std-rate-item__value">
|
<div class="std-rate-item__value">
|
||||||
<ProgressBar :title="title" :total="city.target" :value="city.target" />
|
<ProgressBar :period="period" :title="title" :value="city.current" />
|
||||||
<!-- <ProgressBar title="24年累计" :total="city.target" :value="city.thisYear" /> -->
|
<!-- <ProgressBar title="24年累计" :total="city.target" :value="city.thisYear" /> -->
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div v-else-if="period == '周'" class="std-rate-item">
|
<div v-else-if="period == '周'" class="std-rate-item">
|
||||||
<CityName :value="city.name" />
|
<CityName :value="city.name" />
|
||||||
<div class="std-rate-item__value">
|
<div class="std-rate-item__value">
|
||||||
<ProgressBar :title="title" :total="city.target" :value="city.target" />
|
<ProgressBar :period="period" :title="title" :value="city.current" />
|
||||||
<!-- <ProgressBar title="24年累计" :total="city.target" :value="city.thisYear" /> -->
|
<!-- <ProgressBar title="24年累计" :total="city.target" :value="city.thisYear" /> -->
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div v-else-if="period == '月'" class="std-rate-item">
|
<div v-else-if="period == '月'" class="std-rate-item">
|
||||||
<CityName :value="city.name" />
|
<CityName :value="city.name" />
|
||||||
<div class="std-rate-item__value">
|
<div class="std-rate-item__value">
|
||||||
<ProgressBar :title="titleEnd" :total="city.target" :value="city.target" />
|
<ProgressBar :period="period" :title="titleEnd" :target="city.target" :value="city.current" />
|
||||||
<ProgressBar :title="title" :total="city.target" :value="city.thisYear" />
|
<ProgressBar :period="period" :title="title" :value="city.previous" />
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div v-else="period == '年'" class="std-rate-item">
|
<div v-else="period == '年'" class="std-rate-item">
|
||||||
<CityName :value="city.name" />
|
<CityName :value="city.name" />
|
||||||
<div class="std-rate-item__value">
|
<div class="std-rate-item__value">
|
||||||
<ProgressBar :title="titleEnd" :total="city.target" :value="city.target" />
|
<ProgressBar :period="period" :title="titleEnd" :target="city.target" :value="city.current" />
|
||||||
<ProgressBar :title="title" :total="city.target" :value="city.thisYear" />
|
<ProgressBar :period="period" :title="title" :value="city.previous" />
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</template>
|
</template>
|
||||||
|
@ -1,4 +1,4 @@
|
|||||||
<!--
|
<!--
|
||||||
filename: ElecCost.vue
|
filename: ElecCost.vue
|
||||||
author: liubin
|
author: liubin
|
||||||
date: 2024-04-29 16:37:01
|
date: 2024-04-29 16:37:01
|
||||||
@ -7,31 +7,30 @@
|
|||||||
|
|
||||||
<template>
|
<template>
|
||||||
<LineChartBase
|
<LineChartBase
|
||||||
v-if="1"
|
|
||||||
:legend="legend"
|
:legend="legend"
|
||||||
:series="series"
|
:series="series"
|
||||||
:xAxis="xAxis"
|
:xAxis="xAxis"
|
||||||
in="elecCost"
|
in="elecCost"
|
||||||
class="elec-cost"
|
class="elec-cost"
|
||||||
/>
|
/>
|
||||||
<BarChartBase
|
<!-- <BarChartBase
|
||||||
v-else
|
v-else
|
||||||
:legend="legend"
|
:legend="legend"
|
||||||
:series="series"
|
:series="series"
|
||||||
:xAxis="xAxis"
|
:xAxis="xAxis"
|
||||||
in="elecCost"
|
in="elecCost"
|
||||||
class="elec-cost"
|
class="elec-cost"
|
||||||
/>
|
/> -->
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
<script>
|
<script>
|
||||||
import BarChartBaseVue from "@/views/copilot/components/BarChartBase.vue";
|
// import BarChartBaseVue from "@/views/copilot/components/BarChartBase.vue";
|
||||||
import LineChartBaseVue from "@/views/copilot/components/LineChartBase.vue";
|
import LineChartBaseVue from "@/views/copilot/components/LineChartBase.vue";
|
||||||
|
|
||||||
export default {
|
export default {
|
||||||
name: "ElecCost",
|
name: "ElecCost",
|
||||||
components: {
|
components: {
|
||||||
BarChartBase: BarChartBaseVue,
|
// BarChartBase: BarChartBaseVue,
|
||||||
LineChartBase: LineChartBaseVue,
|
LineChartBase: LineChartBaseVue,
|
||||||
},
|
},
|
||||||
props: {
|
props: {
|
||||||
@ -44,38 +43,47 @@ export default {
|
|||||||
// 城市数组的顺序必须是固定的
|
// 城市数组的顺序必须是固定的
|
||||||
const cities = ["瑞昌", "邯郸", "株洲", "佳木斯", "成都", "凯盛", "蚌埠"];
|
const cities = ["瑞昌", "邯郸", "株洲", "佳木斯", "成都", "凯盛", "蚌埠"];
|
||||||
return {
|
return {
|
||||||
|
legend: [
|
||||||
|
{ label: '瑞昌', color: "#8167F6" },
|
||||||
|
{ label: '邯郸', color: "#2760FF" },
|
||||||
|
{ label: '株洲', color: "#5996F7" },
|
||||||
|
{ label: '佳木斯', color: "#8BC566" },
|
||||||
|
{ label: '成都', color: "#11FAF0" },
|
||||||
|
{ label: '凯盛', color: "#F3C000" },
|
||||||
|
{ label: '蚌埠', color: "#F38600" },
|
||||||
|
],
|
||||||
xAxis: cities,
|
xAxis: cities,
|
||||||
};
|
};
|
||||||
},
|
},
|
||||||
computed: {
|
computed: {
|
||||||
legend() {
|
// legend() {
|
||||||
switch (this.period) {
|
// switch (this.period) {
|
||||||
case "日":
|
// case "日":
|
||||||
return [{ label: "昨日", color: "#12f7f1" }];
|
// return [{ label: "昨日", color: "#12f7f1" }];
|
||||||
case "周":
|
// case "周":
|
||||||
return [{ label: "本周", color: "#12f7f1" }];
|
// return [{ label: "本周", color: "#12f7f1" }];
|
||||||
case "月": {
|
// case "月": {
|
||||||
const year = new Date().getFullYear();
|
// const year = new Date().getFullYear();
|
||||||
const month = new Date().getMonth() + 1;
|
// const month = new Date().getMonth() + 1;
|
||||||
return [
|
// return [
|
||||||
{ label: `${year - 1}年${month}月`, color: "#12f7f1" },
|
// { label: `${year - 1}年${month}月`, color: "#12f7f1" },
|
||||||
{ label: `${year}年${month}月`, color: "#58adfa" },
|
// { label: `${year}年${month}月`, color: "#58adfa" },
|
||||||
];
|
// ];
|
||||||
}
|
// }
|
||||||
case "年": {
|
// case "年": {
|
||||||
const year = new Date().getFullYear();
|
// const year = new Date().getFullYear();
|
||||||
return [
|
// return [
|
||||||
{ label: `${year - 1}年`, color: "#12f7f1" },
|
// { label: `${year - 1}年`, color: "#12f7f1" },
|
||||||
{ label: `${year}年`, color: "#58adfa" },
|
// { label: `${year}年`, color: "#58adfa" },
|
||||||
];
|
// ];
|
||||||
}
|
// }
|
||||||
default:
|
// default:
|
||||||
return [
|
// return [
|
||||||
{ label: `${year - 1}年`, color: "#12f7f1" },
|
// { label: `${year - 1}年`, color: "#12f7f1" },
|
||||||
{ label: `${year}年`, color: "#58adfa" },
|
// { label: `${year}年`, color: "#58adfa" },
|
||||||
];
|
// ];
|
||||||
}
|
// }
|
||||||
},
|
// },
|
||||||
series() {
|
series() {
|
||||||
const { ftoInvest } = this.$store.getters.copilot.yield;
|
const { ftoInvest } = this.$store.getters.copilot.yield;
|
||||||
let dataList = null;
|
let dataList = null;
|
||||||
|
@ -1,4 +1,4 @@
|
|||||||
<!--
|
<!--
|
||||||
filename: NatGas.vue
|
filename: NatGas.vue
|
||||||
author: liubin
|
author: liubin
|
||||||
date: 2024-04-29 16:36:27
|
date: 2024-04-29 16:36:27
|
||||||
@ -7,7 +7,6 @@
|
|||||||
|
|
||||||
<template>
|
<template>
|
||||||
<BarChartBase
|
<BarChartBase
|
||||||
:legend="legend"
|
|
||||||
:series="series"
|
:series="series"
|
||||||
:xAxis="xAxis"
|
:xAxis="xAxis"
|
||||||
in="nat-gas"
|
in="nat-gas"
|
||||||
@ -16,7 +15,7 @@
|
|||||||
</template>
|
</template>
|
||||||
|
|
||||||
<script>
|
<script>
|
||||||
import BarChartBase from "@/views/copilot/components/BarChartBase.vue";
|
import BarChartBase from "@/views/copilot/components/gasBarChartBase.vue";
|
||||||
|
|
||||||
export default {
|
export default {
|
||||||
name: "NatGasCost",
|
name: "NatGasCost",
|
||||||
@ -35,34 +34,34 @@ export default {
|
|||||||
};
|
};
|
||||||
},
|
},
|
||||||
computed: {
|
computed: {
|
||||||
legend() {
|
// legend() {
|
||||||
switch (this.period) {
|
// switch (this.period) {
|
||||||
case "日":
|
// case "日":
|
||||||
return [{ label: "昨日", color: "#12f7f1" }];
|
// return [{ label: "昨日", color: "#12f7f1" }];
|
||||||
case "周":
|
// case "周":
|
||||||
return [{ label: "本周", color: "#12f7f1" }];
|
// return [{ label: "本周", color: "#12f7f1" }];
|
||||||
case "月": {
|
// case "月": {
|
||||||
const year = new Date().getFullYear();
|
// const year = new Date().getFullYear();
|
||||||
const month = new Date().getMonth() + 1;
|
// const month = new Date().getMonth() + 1;
|
||||||
return [
|
// return [
|
||||||
{ label: `${year - 1}年${month}月`, color: "#12f7f1" },
|
// { label: `${year - 1}年${month}月`, color: "#12f7f1" },
|
||||||
{ label: `${year}年${month}月`, color: "#58adfa" },
|
// { label: `${year}年${month}月`, color: "#58adfa" },
|
||||||
];
|
// ];
|
||||||
}
|
// }
|
||||||
case "年": {
|
// case "年": {
|
||||||
const year = new Date().getFullYear();
|
// const year = new Date().getFullYear();
|
||||||
return [
|
// return [
|
||||||
{ label: `${year - 1}年`, color: "#12f7f1" },
|
// { label: `${year - 1}年`, color: "#12f7f1" },
|
||||||
{ label: `${year}年`, color: "#58adfa" },
|
// { label: `${year}年`, color: "#58adfa" },
|
||||||
];
|
// ];
|
||||||
}
|
// }
|
||||||
default:
|
// default:
|
||||||
return [
|
// return [
|
||||||
{ label: `${year - 1}年`, color: "#12f7f1" },
|
// { label: `${year - 1}年`, color: "#12f7f1" },
|
||||||
{ label: `${year}年`, color: "#58adfa" },
|
// { label: `${year}年`, color: "#58adfa" },
|
||||||
];
|
// ];
|
||||||
}
|
// }
|
||||||
},
|
// },
|
||||||
series() {
|
series() {
|
||||||
const { ftoInvest } = this.$store.getters.copilot.yield;
|
const { ftoInvest } = this.$store.getters.copilot.yield;
|
||||||
let dataList = null;
|
let dataList = null;
|
||||||
|
@ -1,4 +1,4 @@
|
|||||||
<!--
|
<!--
|
||||||
filename: WaterCost.vue
|
filename: WaterCost.vue
|
||||||
author: liubin
|
author: liubin
|
||||||
date: 2024-04-29 16:37:34
|
date: 2024-04-29 16:37:34
|
||||||
@ -7,31 +7,30 @@
|
|||||||
|
|
||||||
<template>
|
<template>
|
||||||
<LineChartBase
|
<LineChartBase
|
||||||
v-if="0"
|
|
||||||
:legend="legend"
|
:legend="legend"
|
||||||
:series="series"
|
:series="series"
|
||||||
:xAxis="xAxis"
|
:xAxis="xAxis"
|
||||||
in="waterCost"
|
in="waterCost"
|
||||||
class="water-cost"
|
class="water-cost"
|
||||||
/>
|
/>
|
||||||
<BarChartBase
|
<!-- <BarChartBase
|
||||||
v-else
|
v-else
|
||||||
:legend="legend"
|
:legend="legend"
|
||||||
:series="series"
|
:series="series"
|
||||||
:xAxis="xAxis"
|
:xAxis="xAxis"
|
||||||
in="waterCost"
|
in="waterCost"
|
||||||
class="water-cost"
|
class="water-cost"
|
||||||
/>
|
/> -->
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
<script>
|
<script>
|
||||||
import BarChartBaseVue from "@/views/copilot/components/BarChartBase.vue";
|
// import BarChartBaseVue from "@/views/copilot/components/BarChartBase.vue";
|
||||||
import LineChartBaseVue from "@/views/copilot/components/LineChartBase.vue";
|
import LineChartBaseVue from "@/views/copilot/components/LineChartWater.vue";
|
||||||
|
|
||||||
export default {
|
export default {
|
||||||
name: "WaterCost",
|
name: "WaterCost",
|
||||||
components: {
|
components: {
|
||||||
BarChartBase: BarChartBaseVue,
|
// BarChartBase: BarChartBaseVue,
|
||||||
LineChartBase: LineChartBaseVue,
|
LineChartBase: LineChartBaseVue,
|
||||||
},
|
},
|
||||||
props: {
|
props: {
|
||||||
@ -45,37 +44,46 @@ export default {
|
|||||||
const cities = ["瑞昌", "邯郸", "株洲", "佳木斯", "成都", "凯盛", "蚌埠"];
|
const cities = ["瑞昌", "邯郸", "株洲", "佳木斯", "成都", "凯盛", "蚌埠"];
|
||||||
return {
|
return {
|
||||||
xAxis: cities,
|
xAxis: cities,
|
||||||
|
legend: [
|
||||||
|
{ label: '瑞昌', color: "#8167F6" },
|
||||||
|
{ label: '邯郸', color: "#2760FF" },
|
||||||
|
{ label: '株洲', color: "#5996F7" },
|
||||||
|
{ label: '佳木斯', color: "#8BC566" },
|
||||||
|
{ label: '成都', color: "#11FAF0" },
|
||||||
|
{ label: '凯盛', color: "#F3C000" },
|
||||||
|
{ label: '蚌埠', color: "#F38600" },
|
||||||
|
],
|
||||||
};
|
};
|
||||||
},
|
},
|
||||||
computed: {
|
computed: {
|
||||||
legend() {
|
// legend() {
|
||||||
switch (this.period) {
|
// switch (this.period) {
|
||||||
case "日":
|
// case "日":
|
||||||
return [{ label: "昨日", color: "#12f7f1" }];
|
// return [{ label: "昨日", color: "#12f7f1" }];
|
||||||
case "周":
|
// case "周":
|
||||||
return [{ label: "本周", color: "#12f7f1" }];
|
// return [{ label: "本周", color: "#12f7f1" }];
|
||||||
case "月": {
|
// case "月": {
|
||||||
const year = new Date().getFullYear();
|
// const year = new Date().getFullYear();
|
||||||
const month = new Date().getMonth() + 1;
|
// const month = new Date().getMonth() + 1;
|
||||||
return [
|
// return [
|
||||||
{ label: `${year - 1}年${month}月`, color: "#12f7f1" },
|
// { label: `${year - 1}年${month}月`, color: "#12f7f1" },
|
||||||
{ label: `${year}年${month}月`, color: "#58adfa" },
|
// { label: `${year}年${month}月`, color: "#58adfa" },
|
||||||
];
|
// ];
|
||||||
}
|
// }
|
||||||
case "年": {
|
// case "年": {
|
||||||
const year = new Date().getFullYear();
|
// const year = new Date().getFullYear();
|
||||||
return [
|
// return [
|
||||||
{ label: `${year - 1}年`, color: "#12f7f1" },
|
// { label: `${year - 1}年`, color: "#12f7f1" },
|
||||||
{ label: `${year}年`, color: "#58adfa" },
|
// { label: `${year}年`, color: "#58adfa" },
|
||||||
];
|
// ];
|
||||||
}
|
// }
|
||||||
default:
|
// default:
|
||||||
return [
|
// return [
|
||||||
{ label: `${year - 1}年`, color: "#12f7f1" },
|
// { label: `${year - 1}年`, color: "#12f7f1" },
|
||||||
{ label: `${year}年`, color: "#58adfa" },
|
// { label: `${year}年`, color: "#58adfa" },
|
||||||
];
|
// ];
|
||||||
}
|
// }
|
||||||
},
|
// },
|
||||||
series() {
|
series() {
|
||||||
const { ftoInvest } = this.$store.getters.copilot.yield;
|
const { ftoInvest } = this.$store.getters.copilot.yield;
|
||||||
let dataList = null;
|
let dataList = null;
|
||||||
|
@ -10,10 +10,12 @@
|
|||||||
<div class="cities">
|
<div class="cities">
|
||||||
<CopilotButtons :options="cities" @update:active="handleCityUpdate" />
|
<CopilotButtons :options="cities" @update:active="handleCityUpdate" />
|
||||||
</div>
|
</div>
|
||||||
<div class="chart" ref="chart"></div>
|
<div style="padding: 0 30px;width: 90%;">
|
||||||
|
<div class="chart" ref="chart"></div>
|
||||||
|
</div>
|
||||||
<div class="legend" v-if="1">
|
<div class="legend" v-if="1">
|
||||||
<div class="legend-item" v-for="(lgd,index) in legendList" :key="lgd.name">
|
<div class="legend-item" v-for="(lgd,index) in legendList" :key="lgd.name">
|
||||||
<div >
|
<div>
|
||||||
<span :style="'backgroundColor:' + colors[index%5]" class="legend-item__chart"></span>
|
<span :style="'backgroundColor:' + colors[index%5]" class="legend-item__chart"></span>
|
||||||
<span :style="'color:' + colors[index%5]" class="legend-item__label">{{ lgd.name }}</span>
|
<span :style="'color:' + colors[index%5]" class="legend-item__label">{{ lgd.name }}</span>
|
||||||
</div>
|
</div>
|
||||||
@ -108,6 +110,8 @@ export default {
|
|||||||
}
|
}
|
||||||
|
|
||||||
.chart {
|
.chart {
|
||||||
|
margin-left: 5%;
|
||||||
|
width: 290px;
|
||||||
align-self: stretch;
|
align-self: stretch;
|
||||||
height: 280px;
|
height: 280px;
|
||||||
}
|
}
|
||||||
|
@ -1,7 +1,7 @@
|
|||||||
<!--
|
<!--
|
||||||
* @Author: zhp
|
* @Author: zhp
|
||||||
* @Date: 2024-05-07 10:25:10
|
* @Date: 2024-05-07 10:25:10
|
||||||
* @LastEditTime: 2024-05-09 08:41:11
|
* @LastEditTime: 2024-05-13 15:48:10
|
||||||
* @LastEditors: zhp
|
* @LastEditors: zhp
|
||||||
* @Description:
|
* @Description:
|
||||||
-->
|
-->
|
||||||
@ -56,8 +56,11 @@ export default {
|
|||||||
immediate: true,
|
immediate: true,
|
||||||
},
|
},
|
||||||
},
|
},
|
||||||
|
|
||||||
methods: {
|
methods: {
|
||||||
fetchData(period = "日") {
|
fetchData(period = "日") {
|
||||||
|
// console.log(this.width);
|
||||||
|
// console.log('sidebar', this.$store.getters.sidebar);
|
||||||
console.log(`效率驾驶舱,获取${period}数据`);
|
console.log(`效率驾驶舱,获取${period}数据`);
|
||||||
this.$store.dispatch("copilot/initCopilot", {
|
this.$store.dispatch("copilot/initCopilot", {
|
||||||
period,
|
period,
|
||||||
|
@ -1,7 +1,7 @@
|
|||||||
/*
|
/*
|
||||||
* @Author: zhp
|
* @Author: zhp
|
||||||
* @Date: 2024-05-07 10:25:10
|
* @Date: 2024-05-07 10:25:10
|
||||||
* @LastEditTime: 2024-05-08 10:30:06
|
* @LastEditTime: 2024-05-10 16:10:49
|
||||||
* @LastEditors: zhp
|
* @LastEditors: zhp
|
||||||
* @Description:
|
* @Description:
|
||||||
*/
|
*/
|
||||||
@ -51,7 +51,7 @@ export default function ({
|
|||||||
name: 'Access From',
|
name: 'Access From',
|
||||||
type: 'pie',
|
type: 'pie',
|
||||||
// center: ['50%', '40%'],
|
// center: ['50%', '40%'],
|
||||||
radius: ['60%', '90%'],
|
radius: ['50%', '80%'],
|
||||||
avoidLabelOverlap: false,
|
avoidLabelOverlap: false,
|
||||||
labelLine: {
|
labelLine: {
|
||||||
show: false
|
show: false
|
||||||
|
@ -1,8 +1,8 @@
|
|||||||
<!--
|
<!--
|
||||||
filename: CityData.vue
|
filename: CityData.vue
|
||||||
author: liubin
|
author: liubin
|
||||||
date: 2024-04-17 09:55:12
|
date: 2024-04-17 09:55:12
|
||||||
description:
|
description:
|
||||||
-->
|
-->
|
||||||
|
|
||||||
<template>
|
<template>
|
||||||
@ -72,6 +72,7 @@ export default {
|
|||||||
);
|
);
|
||||||
},
|
},
|
||||||
cities() {
|
cities() {
|
||||||
|
// console.log('ztl')
|
||||||
let getterName = "";
|
let getterName = "";
|
||||||
switch (this.dataSource) {
|
switch (this.dataSource) {
|
||||||
case "标准组件产出":
|
case "标准组件产出":
|
||||||
|
@ -1,16 +1,16 @@
|
|||||||
<!--
|
<!--
|
||||||
filename: Header.vue
|
filename: Header.vue
|
||||||
author: liubin
|
author: liubin
|
||||||
date: 2024-04-09 09:04:12
|
date: 2024-04-09 09:04:12
|
||||||
description:
|
description:
|
||||||
-->
|
-->
|
||||||
|
|
||||||
<template>
|
<template>
|
||||||
<header class="dashboard-header">
|
<header class="dashboard-header">
|
||||||
<div class="btn" :style="btnStyle" @click="toggleFullscreen"></div>
|
<div class="btn" :style="btnStyle" @click="toggleFullscreen"></div>
|
||||||
<h1>发电玻璃智能管控平台地图总览</h1>
|
<h1>发电玻璃智能管控平台地图总览</h1>
|
||||||
<span class="side left">晴转多云 14℃</span>
|
<span class="side left">{{ this.weather }}</span>
|
||||||
<span class="side right">23:12|星期一|2023.12.13</span>
|
<span class="side right"> {{ times }} </span>
|
||||||
</header>
|
</header>
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
@ -25,7 +25,10 @@ export default {
|
|||||||
props: {},
|
props: {},
|
||||||
data() {
|
data() {
|
||||||
return {
|
return {
|
||||||
|
weatherInterval:null,
|
||||||
isFullscreen: false,
|
isFullscreen: false,
|
||||||
|
times: null,
|
||||||
|
weather:'',
|
||||||
};
|
};
|
||||||
},
|
},
|
||||||
computed: {
|
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: {
|
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() {
|
toggleFullscreen() {
|
||||||
screenfull.toggle();
|
screenfull.toggle();
|
||||||
this.isFullscreen = !this.isFullscreen;
|
this.isFullscreen = !this.isFullscreen;
|
||||||
|
Loading…
Reference in New Issue
Block a user