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

projects/mescc/develop #24

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

2
.env.dev
View File

@ -1,7 +1,7 @@
### ###
# @Author: zhp # @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:
### ###

21
src/mixins/chart.js
View File

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

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

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

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

@ -8,37 +8,29 @@
<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',
axisPointer: {
type: 'cross',
label: {
backgroundColor: '#6a7985'
}
}
}, },
axisLine: { // legend: {
lineStyle: { // data: ['Email', 'Union Ads', 'Video Ads', 'Direct', 'Search Engine']
color: "#4561AE", // },
// toolbox: {
// feature: {
// saveAsImage: {}
// }
// },
grid: {
left: '3%',
right: '4%',
bottom: '3%',
containLabel: true
}, },
xAxis: [
{
type: 'category',
boundaryGap: false,
data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
}
],
yAxis: [
{
min: function () { // 取最小值向下取整为最小刻度
return 0
}, },
axisLabel: { max: function (value) { // 取最大值向上取整为最大刻度
color: "#fff",
fontSize: 12,
}, },
data: this.xAxis, scale: true,
}, type: 'value',
yAxis: { name: 'kw/h',
name: "单位/片", // max: 100,//最大值
nameTextStyle: { // min: 0,//最小值
color: "#fff", // interval: 20,//间隔
fontSize: 12, nameTextStyle: {// y轴上方单位的颜色
}, color: 'rgba(255,255,255,0.5)', // 坐标值得具体的颜色
axisTick: { align: "right",
show: false, padding: [0, 0, 0, 2]
},
axisLabel: {
color: "#fff",
fontSize: 12,
}, },
// position: 'left',
alignTicks: true,
axisLine: { axisLine: {
show: true, show: true,
lineStyle: { lineStyle: {
color: "#4561AE", // type: 'solid',
color: '#25528f',
// width: '1' // 坐标线的宽度
}
}, },
axisLabel: {
color: 'rgba(255,255,255,0.5)', // 坐标值得具体的颜色
fontSize: 12,
// formatter: '{value}'
formatter: '{value}'
// }
}, },
splitLine: { splitLine: {
lineStyle: { lineStyle: {
color: "#4561AE", color: '#25528f'
}, }
}, }
// type: 'value'
// axisLine: {
// show: true,
// lineStyle: {
// color: colors[0]
// }
// },
}, },
],
series: [ series: [
{ {
name: "", // this.series[0].name, name: '瑞昌',
type: "bar", type: 'line',
barWidth: 12, stack: 'Total',
itemStyle: { areaStyle: {
borderRadius: [10, 10, 0, 0], opacity: 0.8,
color: { color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
type: "linear",
x: 0,
y: 0,
x2: 0,
y2: 1,
colorStops: [
{ {
offset: 0, offset: 0,
color: "#12f7f1", // 0% 处的颜色 color: '#8167F6'
},
{
offset: 0.35,
color: "#12f7f177", // 100% 处的颜色
},
{
offset: 0.75,
color: "#12f7f133", // 100% 处的颜色
}, },
{ {
offset: 1, offset: 1,
color: "transparent", // 100% 处的颜色 color: 'rgba(255, 234, 153, 0)'
}
])
}, },
], itemStyle: {
global: false, // 缺省为 false normal: {
color: '#8167F6', //改变折线点的颜色
lineStyle: {
color: '#8167F6' //改变折线颜色
}
}
}, },
}, // emphasis: {
data: [], // this.series[0].data, // focus: 'series'
// },
data: [120, 132, 101, 134, 90, 230, 210]
}, },
{ {
name: "", // this.series[1].name, name: '邯郸',
type: "bar", type: 'line',
barWidth: 12, stack: 'Total',
// tooltip: { areaStyle: {
// valueFormatter: function (value) { opacity: 0.8,
// return value + " ml"; color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
// },
// },
itemStyle: {
borderRadius: [10, 10, 0, 0],
color: {
type: "linear",
x: 0,
y: 0,
x2: 0,
y2: 1,
colorStops: [
{ {
offset: 0, offset: 0,
color: "#57abf8", // 0% 处的颜色 color: '#2760FF'
}, },
{ {
offset: 1, offset: 1,
color: "#364BFE66", // 100% 处的颜色 color: 'rgba(255, 234, 153, 0)'
}
])
}, },
], itemStyle: {
global: false, // 缺省为 false normal: {
color: '#2760FF', //改变折线点的颜色
lineStyle: {
color: '#2760FF' //改变折线颜色
}
}
}, },
// emphasis: {
// focus: 'series'
// },
data: [120, 132, 101, 134, 90, 230, 210]
}, },
data: [], // this.series[1].data, {
name: '株洲',
type: 'line',
stack: 'Total',
areaStyle: {
opacity: 0.8,
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
{
offset: 0,
color: '#5996F7'
}, },
], {
offset: 1,
color: 'rgba(255, 234, 153, 0)'
}
])
},
itemStyle: {
normal: {
color: '#5996F7', //改变折线点的颜色
lineStyle: {
color: '#5996F7' //改变折线颜色
}
}
},
// emphasis: {
// focus: 'series'
// },
data: [120, 132, 101, 134, 90, 230, 210]
},
{
name: '佳木斯',
type: 'line',
stack: 'Total',
areaStyle: {
opacity: 0.8,
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
{
offset: 0,
color: '#8BC566'
},
{
offset: 1,
color: 'rgba(255, 234, 153, 0)'
}
])
},
itemStyle: {
normal: {
color: '#8BC566', //改变折线点的颜色
lineStyle: {
color: '#8BC566' //改变折线颜色
}
}
},
// emphasis: {
// focus: 'series'
// },
data: [120, 132, 101, 134, 90, 230, 210]
},
{
name: '成都',
type: 'line',
stack: 'Total',
areaStyle: {
opacity: 0.8,
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
{
offset: 0,
color: '#11FAF0'
},
{
offset: 1,
color: 'rgba(255, 234, 153, 0)'
}
])
},
itemStyle: {
normal: {
color: '#11FAF0', //改变折线点的颜色
lineStyle: {
color: '#11FAF0' //改变折线颜色
}
}
},
// emphasis: {
// focus: 'series'
// },
data: [120, 132, 101, 134, 90, 230, 210]
},
{
name: '凯盛',
type: 'line',
stack: 'Total',
areaStyle: {
opacity: 0.8,
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
{
offset: 0,
color: '#F3C000'
},
{
offset: 1,
color: 'rgba(255, 234, 153, 0)'
}
])
},
itemStyle: {
normal: {
color: '#F3C000', //改变折线点的颜色
lineStyle: {
color: '#F3C000' //改变折线颜色
}
}
},
// emphasis: {
// focus: 'series'
// },
data: [120, 132, 101, 134, 90, 230, 210]
},
{
name: '蚌埠',
type: 'line',
stack: 'Total',
areaStyle: {
opacity: 0.8,
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
{
offset: 0,
color: '#F38600'
},
{
offset: 1,
color: 'rgba(255, 234, 153, 0)'
}
])
},
itemStyle: {
normal: {
color: '#F38600', //改变折线点的颜色
lineStyle: {
color: '#F38600' //改变折线颜色
}
}
},
// emphasis: {
// focus: 'series'
// },
data: [120, 132, 101, 134, 90, 230, 210]
},
]
}, },
}; };
}, },
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
View File

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

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

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

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

@ -1,7 +1,7 @@
<!-- <!--
* @Author: zhp * @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: {},
}; };

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

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

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

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

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

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

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

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

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

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

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

@ -7,7 +7,6 @@
<template> <template>
<BarChartBase <BarChartBase
:legend="legend"
:series="series" :series="series"
:xAxis="xAxis" :xAxis="xAxis"
in="nat-gas" in="nat-gas"
@ -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;

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

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

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

@ -10,7 +10,9 @@
<div class="cities"> <div class="cities">
<CopilotButtons :options="cities" @update:active="handleCityUpdate" /> <CopilotButtons :options="cities" @update:active="handleCityUpdate" />
</div> </div>
<div style="padding: 0 30px;width: 90%;">
<div class="chart" ref="chart"></div> <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>
@ -108,6 +110,8 @@ export default {
} }
.chart { .chart {
margin-left: 5%;
width: 290px;
align-self: stretch; align-self: stretch;
height: 280px; height: 280px;
} }

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

@ -1,7 +1,7 @@
<!-- <!--
* @Author: zhp * @Author: zhp
* @Date: 2024-05-07 10:25:10 * @Date: 2024-05-07 10:25:10
* @LastEditTime: 2024-05-09 08: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,

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

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

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

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

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

@ -9,8 +9,8 @@
<header class="dashboard-header"> <header class="dashboard-header">
<div class="btn" :style="btnStyle" @click="toggleFullscreen"></div> <div class="btn" :style="btnStyle" @click="toggleFullscreen"></div>
<h1>发电玻璃智能管控平台地图总览</h1> <h1>发电玻璃智能管控平台地图总览</h1>
<span class="side left">晴转多云 14℃</span> <span class="side left">{{ this.weather }}</span>
<span class="side right">23:12|星期一|2023.12.13</span> <span class="side right"> {{ times }} </span>
</header> </header>
</template> </template>
@ -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;