Compare commits

..

No commits in common. "fdf71145e85334f16a7f730861d005d2a2c35ef7" and "646eb9c27063ba57a56df95d48cb6455bcef99c1" have entirely different histories.

14 changed files with 75 additions and 1227 deletions

View File

@ -15,25 +15,7 @@ const state = {
/* 能源驾驶舱 */ /* 能源驾驶舱 */
energy: {}, energy: {},
/* 效率驾驶舱 */ /* 效率驾驶舱 */
efficiency: { efficiency: {},
chipOee: {
current: [],
previous: [],
},
transformRate: {
current: [],
previous: [],
},
chipRate: {
target: [],
current: [],
previous: [],
},
stdRate: {
target: [],
current: [],
},
},
}, },
home: { home: {
/** 主页状态 */ /** 主页状态 */
@ -66,10 +48,7 @@ const mutations = {
state.copilot.energy = payload.data; state.copilot.energy = payload.data;
break; break;
case "efficiency": case "efficiency":
state.copilot.efficiency.chipOee = payload.chipOee; state.copilot.efficiency = payload.data;
state.copilot.efficiency.transformRate = payload.transformRate;
state.copilot.efficiency.chipRate = payload.chipRate;
state.copilot.efficiency.stdRate = payload.stdRate;
break; break;
} }
}, },
@ -85,18 +64,13 @@ const actions = {
}, },
/** 初始化驾驶舱数据 */ /** 初始化驾驶舱数据 */
async initCopilot({ commit }, { period, source }) { async initCopilot({ commit }, { period, source }) {
if (source == "comprehensive") return; if (source == 'comprehensive') return;
const fetcher = { const fetcher = {
yield: getCopilotYield, yield: getCopilotYield,
comprehensive: getCopilotEnergy, comprehensive: getCopilotEnergy,
efficiency: getCopilotEfficiency, efficiency: getCopilotEfficiency,
}[source]; }[source];
const handler = {
yield: splitCurrentAndPrevious,
comprehensive: () => null,
efficiency: splitCurrentAndPreviousA,
}[source];
// 获取产量数据 // 获取产量数据
let { data: factoryList, type } = await fetcher(period); let { data: factoryList, type } = await fetcher(period);
let targetList = null; let targetList = null;
@ -105,7 +79,7 @@ const actions = {
let { data } = await fetcher(period, true); let { data } = await fetcher(period, true);
targetList = data; targetList = data;
} }
const payload = handler(factoryList, targetList); const payload = splitCurrentAndPrevious(factoryList, targetList);
commit("SET_COPILOT_INFO", { type, payload }); commit("SET_COPILOT_INFO", { type, payload });
}, },
}; };
@ -117,97 +91,6 @@ export default {
actions, actions,
}; };
function splitCurrentAndPreviousA(factoryListResponse, targetListResponse) {
// 初始数据
const { chipOee, transformRate, chipRate, stdRate } = initA();
factoryListResponse = [
{
factory: 0,
oee: 0.8,
previousYearOee: 0.7,
componentConversionEfficiency: 0.8,
previousYearComponentConversionEfficiency: 0.7,
glassType: 0,
yieldRate: 0.8,
previousYearYieldRate: 0.7,
chipYieldRate: 0.38,
componentYieldRate: 0.73,
},
{
factory: 1,
oee: 0.8,
previousYearOee: 0.7,
componentConversionEfficiency: 0.8,
previousYearComponentConversionEfficiency: 0.7,
glassType: 1,
yieldRate: 0.8,
previousYearYieldRate: 0.7,
chipYieldRate: 0.38,
componentYieldRate: 0.73,
},
{
factory: 2,
oee: 0.8,
previousYearOee: 0.7,
componentConversionEfficiency: 0.8,
previousYearComponentConversionEfficiency: 0.7,
glassType: 1,
yieldRate: 0.8,
previousYearYieldRate: 0.7,
chipYieldRate: 0.38,
componentYieldRate: 0.73,
},
{
factory: 3,
oee: 0.8,
previousYearOee: 0.7,
componentConversionEfficiency: 0.8,
previousYearComponentConversionEfficiency: 0.7,
glassType: 0,
yieldRate: 0.8,
previousYearYieldRate: 0.7,
chipYieldRate: 0.38,
componentYieldRate: 0.73,
},
];
if (factoryListResponse) {
for (const factory of factoryListResponse) {
const fId = getFactoryId(factory);
// 获取目标值
if (targetListResponse) {
const {
chipYieldRate,
componentYieldRate,
chipOee,
componentConversionEfficiency,
} = getFactoryTargetValueA(targetListResponse, fId);
stdRate.target[fId] = chipYieldRate;
chipRate.target[fId] = componentYieldRate;
}
// 芯片OEE
chipOee.current[fId] = factory.oee || random_default();
chipOee.previous[fId] = factory.previousYearOee || random_default();
// 转化效率
transformRate.current[fId] =
factory.componentConversionEfficiency || random_default();
transformRate.previous[fId] =
factory.previousYearComponentConversionEfficiency || random_default();
// 芯片良率 与 标准组件良率
if (![0, 1].includes(factory.glassType)) continue;
const _t = [chipRate, stdRate][factory.glassType];
_t.current[fId] = factory.yieldRate || random_default();
_t.previous[fId] = factory.previousYearYieldRate || random_default();
}
return {
chipOee,
transformRate,
chipRate,
stdRate,
};
}
}
function splitCurrentAndPrevious(factoryListResponse, targetListResponse) { function splitCurrentAndPrevious(factoryListResponse, targetListResponse) {
// 初始数据 // 初始数据
const { chipInvest, ftoInvest, chipOutput, stdOutput, bipvOutput } = init(); const { chipInvest, ftoInvest, chipOutput, stdOutput, bipvOutput } = init();
@ -268,58 +151,9 @@ function getFactoryTargetValue(targetList, factoryId) {
}; };
} }
/**
* 获取 芯片良率目标值 标准组件良率目标值
* @param {*} targetList 目标值列表
* @param {*} factoryId 工厂ID
* @returns
*/
function getFactoryTargetValueA(targetList, factoryId) {
const target = targetList.find((item) => item.factory === factoryId);
if (target) {
return {
chipYieldRate: target.chipYieldRate ?? random_default(),
componentYieldRate: target.componentYieldRate ?? random_default(),
};
}
return {
chipYieldRate: random_default(),
componentYieldRate: random_default(),
};
}
/** /**
* *
* @returns 初始化 效率模块里 初始状态值 * @returns 初始化状态值
*/
function initA() {
const t_ = {
current: Array(7).fill(0),
previous: Array(7).fill(0),
};
// 芯片OEE
const chipOee = deepClone(t_);
// 转化效率
const transformRate = deepClone(t_);
// 标准组件良率
const stdRate = {
...deepClone(t_),
target: Array(7).fill(0),
};
// 芯片良率
const chipRate = deepClone(stdRate);
return {
chipOee,
transformRate,
chipRate,
stdRate,
};
}
/**
*
* @returns 初始化 产量模块里 初始状态值
*/ */
function init() { function init() {
const t_ = { const t_ = {
@ -349,11 +183,11 @@ function init() {
}; };
} }
function random_default(min = 0, max = 1) { function random_default() {
// return 0; return 0;
let a = Math.floor(Math.random() * max); let a = Math.floor(Math.random() * 1000);
while (a < min) { while (a < 600) {
a = Math.floor(Math.random() * max); a = Math.floor(Math.random() * 1000);
} }
return a; return a;
} }

View File

@ -9,7 +9,6 @@
<div class="copilot-container"> <div class="copilot-container">
<!-- refresh btn --> <!-- refresh btn -->
<button <button
v-if="0"
style=" style="
appearance: none; appearance: none;
outline: none; outline: none;
@ -110,12 +109,7 @@ export default {
border-radius: 2px; border-radius: 2px;
top: 0%; top: 0%;
left: 0; left: 0;
background: radial-gradient( background: radial-gradient(circle at center , #024798 2%, #024798 30%, transparent);
circle at center,
#024798 2%,
#024798 30%,
transparent
);
z-index: 1; z-index: 1;
} }

View File

@ -1,296 +0,0 @@
<!--
filename: LineChartBase.vue
author: liubin
date: 2024-04-30 08:59:28
description:
-->
<template>
<chart-container class="line-chart-base">
<div class="legend">
<span
v-for="item in legend"
:key="item.label"
class="legend-item"
:style="{ fontSize: isFullscreen ? '0.58vw' : '0.54vw' }"
>{{ item.label }}</span
>
</div>
<div
ref="chart"
style="max-width: 50vw"
:style="{ height: vHeight + 'vh' }"
></div>
</chart-container>
</template>
<script>
import screenfull from "screenfull";
import ChartContainer from "./ChartContainer.vue";
import chartMixin from "@/mixins/chart.js";
export default {
name: "LineChartBase",
components: {
ChartContainer,
},
mixins: [chartMixin],
props: {
vHeight: {
type: Number,
default: 34,
},
legend: {
type: Array,
required: true,
},
xAxis: {
type: Array,
required: true,
},
series: {
type: Array,
required: true,
},
in: {
type: String,
default: "",
},
},
data() {
return {
isFullscreen: false,
actualOptions: null,
options: {
grid: {
left: "5%",
right: "4%",
bottom: "3%",
top: "15%",
containLabel: true,
},
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,
},
],
},
};
},
watch: {
/** 全屏状态切换时,对柱子粗细和字体大小进行相应调整 */
isFullscreen(val) {
this.actualOptions.series.map((item) => {
item.barWidth = val ? 18 : 12;
});
this.actualOptions.xAxis.axisLabel.fontSize = val ? 18 : 12;
this.actualOptions.yAxis.axisLabel.fontSize = val ? 18 : 12;
this.actualOptions.yAxis.nameTextStyle.fontSize = val ? 18 : 12;
this.initOptions(this.actualOptions);
},
series(val) {
if (!val) {
this.initOptions(this.options);
return;
}
const actualOptions = JSON.parse(JSON.stringify(this.options));
actualOptions.series[0].data = val[0].data;
actualOptions.series[0].name = val[0].name;
actualOptions.series[1].data = val?.[1]?.data || [];
actualOptions.series[1].name = val?.[1]?.name || "";
this.actualOptions = actualOptions;
this.initOptions(actualOptions);
},
},
mounted() {
this.actualOptions = this.options;
this.initOptions(this.options);
if (screenfull.isEnabled) {
screenfull.on("change", () => {
this.isFullscreen = screenfull.isFullscreen;
});
}
},
};
</script>
<style scoped lang="scss">
.line-chart-base {
// position: relative;
.legend {
position: absolute;
top: 5.2vh;
right: 1vw;
}
.legend-item {
position: relative;
// font-size: 12px;
margin-right: 0.67vw;
&::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: #fad162;
}
.legend-item:nth-child(2):after,
.legend-item:nth-child(2):before {
background-color: #2160f3;
}
.legend-item:nth-child(3):after,
.legend-item:nth-child(3):before {
background-color: #13dbf3;
}
.legend-item:nth-child(4):after,
.legend-item:nth-child(4):before {
background-color: #88ca67;
}
.legend-item:nth-child(5):after,
.legend-item:nth-child(5):before {
background-color: #5c97fc;
}
.legend-item:nth-child(6):after,
.legend-item:nth-child(6):before {
background-color: #f48900;
}
.legend-item:nth-child(7):after,
.legend-item:nth-child(7):before {
background-color: #776bf0;
}
}
</style>

View File

@ -7,16 +7,8 @@
<template> <template>
<div class="chip-rate"> <div class="chip-rate">
<ChipRateItem <ChipRateItem :cities="['成都', '邯郸', '株洲', '瑞昌']" :color="1" />
:period="period" <ChipRateItem :cities="['佳木斯', '凯盛光伏', '蚌埠兴科']" :color="2" />
:cities="['成都', '邯郸', '株洲', '瑞昌']"
:color="1"
/>
<ChipRateItem
:period="period"
:cities="['佳木斯', '凯盛光伏', '蚌埠兴科']"
:color="2"
/>
</div> </div>
</template> </template>
@ -25,12 +17,7 @@ import ChipRateItemVue from "./sub/chip/ChipRateItem.vue";
export default { export default {
name: "ChipRate", name: "ChipRate",
components: { ChipRateItem: ChipRateItemVue }, components: { ChipRateItem: ChipRateItemVue },
props: { props: {},
period: {
type: String,
default: "日",
},
},
data() { data() {
return {}; return {};
}, },

View File

@ -11,10 +11,14 @@
<CopilotButtons :options="cities" @update:active="handleCityUpdate" /> <CopilotButtons :options="cities" @update:active="handleCityUpdate" />
</div> </div>
<div class="chart" ref="chart"></div> <div class="chart" ref="chart"></div>
<div class="legend" v-if="period == '月' || period == '年'"> <div class="legend" v-if="1">
<div class="legend-item" v-for="lgd in legend" :key="lgd.label"> <div class="legend-item">
<span class="legend-item__value">{{ lgd.value }}</span> <span class="legend-item__value">20%</span>
<span class="legend-item__label">{{ lgd.label }}</span> <span class="legend-item__label">2023年累计</span>
</div>
<div class="legend-item">
<span class="legend-item__value">20%</span>
<span class="legend-item__label">2024年累计</span>
</div> </div>
</div> </div>
</div> </div>
@ -25,7 +29,6 @@ import CopilotButtons from "@/views/copilot/components/select.vue";
import chartMixin from "@/mixins/chart.js"; import chartMixin from "@/mixins/chart.js";
import fullscreenMixin from "@/mixins/fullscreen.js"; import fullscreenMixin from "@/mixins/fullscreen.js";
import getOptions from "../../../options/chipOptions.js"; import getOptions from "../../../options/chipOptions.js";
import { mapGetters } from "vuex";
export default { export default {
name: "ChipRateItem", name: "ChipRateItem",
@ -40,102 +43,44 @@ export default {
type: Number, type: Number,
default: 1, default: 1,
}, },
period: {
type: String,
default: "日",
},
}, },
data() { data() {
return { return {
factoryId: 0, period: "月",
count: 1, valueTuple: [100, 100, 200],
}; };
}, },
computed: { computed: {
chipRate() {
return this.$store.getters.copilot.efficiency.chipRate;
},
valueTuple() {
const getter = this.chipRate;
if (this.period === "日" || this.period === "周") {
return [
getter.previous[this.factoryId],
getter.current[this.factoryId],
0,
];
}
// [100, 200, 200]
return [
getter.previous[this.factoryId],
getter.current[this.factoryId],
getter.target[this.factoryId],
];
},
options() { options() {
const single = this.period === "日" || this.period === "周";
const year = new Date().getFullYear(); const year = new Date().getFullYear();
const month = new Date().getMonth() + 1; const month = new Date().getMonth() + 1;
const vt = this.valueTuple; const vt = this.valueTuple;
let titleValue = single let titleValue =
? (vt[1] != null && `${vt[1] * 100}%`) || "0%" vt[0] != null && vt[2] != null && vt[2] !== 0
: vt[0] != null && vt[2] != null && vt[2] !== 0 ? `${((vt[1] / vt[2]) * 100).toFixed(0)}%`
? `${((vt[1] / vt[2]) * 100).toFixed(0)}%` : "0%",
: "0%", subtitle =
subtitle = { this.period == "月" ? `${month}月累计产出` : `${year}年累计产出`;
: "本日良率",
: "本周良率",
: `${month}月良率`,
: `${year}良率`,
}[this.period];
const t = getOptions({ return getOptions({
single, single: true,
color: this.color == 1 ? "#4CF0E8" : "#1065ff", color: this.color == 1 ? "#4CF0E8" : "#1065ff",
titleValue, titleValue,
subtitle, subtitle,
previousSum: vt[0], previousSum: this.valueTuple[0],
currentSum: vt[1], currentSum: this.valueTuple[1],
targetSum: vt[2], targetSum: this.valueTuple[2],
}); });
return t;
},
legend() {
const year = new Date().getFullYear();
const month = new Date().getMonth() + 1;
return [
{
label:
this.period == "月"
? `${year - 1}${month}月良率`
: `${year - 1}年良率`,
value: (this.valueTuple[0] * 100).toFixed(0) + "%",
},
{
label: this.period == "月" ? `${month}月良率` : `${year}年良率`,
value: (this.valueTuple[1] * 100).toFixed(0) + "%",
},
];
}, },
}, },
mounted() { mounted() {
this.initOptions(this.options); this.initOptions(this.options);
}, },
watch: {
period() {
this.initOptions(this.options);
},
factoryId() {
this.initOptions(this.options);
},
chipRate() {
this.initOptions(this.options);
},
},
methods: { methods: {
handleCityUpdate(id) { handleCityUpdate() {},
this.factoryId = id; fullscreenCallback(isFullscreen) {
console.log("isFullscreen--->", isFullscreen);
}, },
fullscreenCallback(isFullscreen) {},
}, },
}; };
</script> </script>

View File

@ -8,10 +8,10 @@
<template> <template>
<div class="efficiency-copilot"> <div class="efficiency-copilot">
<Container title="芯片良率" icon="chip2"> <Container title="芯片良率" icon="chip2">
<ChipRate :period="period" /> <ChipRate />
</Container> </Container>
<Container title="标准组件良率" icon="std"> <Container title="标准组件良率" icon="std">
<StdRate :period="period" /> <StdRate />
</Container> </Container>
<Container title="芯片OEE" icon="chip"> <Container title="芯片OEE" icon="chip">
<ChipOee :period="period" /> <ChipOee :period="period" />

View File

@ -15,11 +15,7 @@ export default function ({
top: 0, top: 0,
containLabel: true, containLabel: true,
}, },
tooltip: { tooltip: {},
// formatter(params) {
// return `${params.name}: ${(params.value * 100).toFixed(0)}%`;
// }
},
title: { title: {
text: titleValue, text: titleValue,
left: "49%", left: "49%",
@ -64,7 +60,7 @@ export default function ({
data: [ data: [
{ {
value: currentSum, value: currentSum,
name: "当前良率", name: "当前累计产出",
selected: false, selected: false,
itemStyle: { itemStyle: {
borderJoin: "round", borderJoin: "round",
@ -97,9 +93,9 @@ export default function ({
? currentSum == 0 ? currentSum == 0
? 1 ? 1
: 0 : 0
: targetSum, : 0,
name: "未达成", name: "未达成累计",
itemStyle: { color: "transparent" }, itemStyle: { color: "transparent" },
label: { show: false }, label: { show: false },
}, },
@ -122,7 +118,7 @@ export default function ({
data: [ data: [
{ {
value: previousSum, value: previousSum,
name: "上期良率", name: "上期累计产出",
selected: false, selected: false,
itemStyle: { itemStyle: {
borderJoin: "round", borderJoin: "round",
@ -150,9 +146,6 @@ export default function ({
? 1 ? 1
: 0, : 0,
name: "-", name: "-",
formatter: {
show: false
},
itemStyle: { color: "transparent" }, itemStyle: { color: "transparent" },
label: { show: false }, label: { show: false },
}, },

View File

@ -6,123 +6,25 @@
--> -->
<template> <template>
<LineChartBase <div class="elec-cost">elec cost</div>
v-if="1"
:legend="legend"
:series="series"
:xAxis="xAxis"
in="elecCost"
class="elec-cost"
/>
<BarChartBase
v-else
:legend="legend"
:series="series"
:xAxis="xAxis"
in="elecCost"
class="elec-cost"
/>
</template> </template>
<script> <script>
import BarChartBaseVue from "@/views/copilot/components/BarChartBase.vue";
import LineChartBaseVue from "@/views/copilot/components/LineChartBase.vue";
export default { export default {
name: "ElecCost", name: "ElecCost",
components: { components: {},
BarChartBase: BarChartBaseVue, props: {},
LineChartBase: LineChartBaseVue,
},
props: {
period: {
type: String,
default: "日",
},
},
data() { data() {
// return {};
const cities = ["瑞昌", "邯郸", "株洲", "佳木斯", "成都", "凯盛", "蚌埠"];
return {
xAxis: cities,
};
},
computed: {
legend() {
switch (this.period) {
case "日":
return [{ label: "昨日", color: "#12f7f1" }];
case "周":
return [{ label: "本周", color: "#12f7f1" }];
case "月": {
const year = new Date().getFullYear();
const month = new Date().getMonth() + 1;
return [
{ label: `${year - 1}${month}`, color: "#12f7f1" },
{ label: `${year}${month}`, color: "#58adfa" },
];
}
case "年": {
const year = new Date().getFullYear();
return [
{ label: `${year - 1}`, color: "#12f7f1" },
{ label: `${year}`, color: "#58adfa" },
];
}
default:
return [
{ label: `${year - 1}`, color: "#12f7f1" },
{ label: `${year}`, color: "#58adfa" },
];
}
},
series() {
const { ftoInvest } = this.$store.getters.copilot.yield;
let dataList = null;
switch (this.period) {
case "日":
case "周":
dataList = ftoInvest?.current;
break;
default:
dataList = [];
dataList[0] = ftoInvest?.pervious;
dataList[1] = ftoInvest?.current;
}
return getTemplate(this.period, dataList);
},
}, },
computed: {},
methods: {}, methods: {},
}; };
function getTemplate(period, dataList) {
const year = new Date().getFullYear();
const month = new Date().getMonth() + 1;
return period == "日" || period == "周"
? [
{
name: period == "日" ? "昨日" : "本周",
data: dataList ?? [],
},
]
: [
{
name: period == "年" ? `${year - 1}` : `${year - 1}${month}`,
data: dataList ? dataList[0] : [],
},
{
name: period == "年" ? `${year}` : `${year}${month}`,
data: dataList ? dataList[1] : [],
// : Array.from({ length: 7 }, () => Math.floor(Math.random() * 1000)),
},
];
}
</script> </script>
<style scoped lang="scss"> <style scoped lang="scss">
.elec-cost { .elec-cost {
background: #cc03;
flex: 1; flex: 1;
} }
</style> </style>

View File

@ -6,110 +6,25 @@
--> -->
<template> <template>
<BarChartBase <div class="nat-gas">nat-gas</div>
:legend="legend"
:series="series"
:xAxis="xAxis"
in="nat-gas"
class="nat-gas"
/>
</template> </template>
<script> <script>
import BarChartBase from "@/views/copilot/components/BarChartBase.vue";
export default { export default {
name: "NatGasCost", name: "NatGas",
components: { BarChartBase }, components: {},
props: { props: {},
period: {
type: String,
default: "日",
},
},
data() { data() {
// return {};
const cities = ["瑞昌", "邯郸", "株洲", "佳木斯", "成都", "凯盛", "蚌埠"];
return {
xAxis: cities,
};
},
computed: {
legend() {
switch (this.period) {
case "日":
return [{ label: "昨日", color: "#12f7f1" }];
case "周":
return [{ label: "本周", color: "#12f7f1" }];
case "月": {
const year = new Date().getFullYear();
const month = new Date().getMonth() + 1;
return [
{ label: `${year - 1}${month}`, color: "#12f7f1" },
{ label: `${year}${month}`, color: "#58adfa" },
];
}
case "年": {
const year = new Date().getFullYear();
return [
{ label: `${year - 1}`, color: "#12f7f1" },
{ label: `${year}`, color: "#58adfa" },
];
}
default:
return [
{ label: `${year - 1}`, color: "#12f7f1" },
{ label: `${year}`, color: "#58adfa" },
];
}
},
series() {
const { ftoInvest } = this.$store.getters.copilot.yield;
let dataList = null;
switch (this.period) {
case "日":
case "周":
dataList = ftoInvest?.current;
break;
default:
dataList = [];
dataList[0] = ftoInvest?.pervious;
dataList[1] = ftoInvest?.current;
}
return getTemplate(this.period, dataList);
},
}, },
computed: {},
methods: {}, methods: {},
}; };
function getTemplate(period, dataList) {
const year = new Date().getFullYear();
const month = new Date().getMonth() + 1;
return period == "日" || period == "周"
? [
{
name: period == "日" ? "昨日" : "本周",
data: dataList ?? [],
},
]
: [
{
name: period == "年" ? `${year - 1}` : `${year - 1}${month}`,
data: dataList ? dataList[0] : [],
},
{
name: period == "年" ? `${year}` : `${year}${month}`,
data: dataList ? dataList[1] : [],
// : Array.from({ length: 7 }, () => Math.floor(Math.random() * 1000)),
},
];
}
</script> </script>
<style scoped lang="scss"> <style scoped lang="scss">
.nat-gas { .nat-gas {
background: #31f2;
flex: 1; flex: 1;
} }
</style> </style>

View File

@ -6,36 +6,16 @@
--> -->
<template> <template>
<div class="stock-monitor"> <div class="stock-monitor">仓库监控</div>
<MonitorItem
:cities="['成都', '邯郸', '株洲', '瑞昌', '佳木斯']"
:legendList="dhgList"
/>
<MonitorItem :cities="['凯盛光伏', '蚌埠兴科']" :legendList="otherList" />
</div>
</template> </template>
<script> <script>
import MonitorItemVue from "./sub/monitor/MonitorItem.vue";
export default { export default {
name: "StockMonitor", name: "StockMonitor",
components: { MonitorItem: MonitorItemVue }, components: {},
props: {}, props: {},
data() { data() {
return { return {};
dhgList: [
{ name: "总库存", value: "1000" },
{ name: "已用库存", value: "500" },
{ name: "剩余库存", value: "500" },
],
otherList: [
{ name: "分类1", value: "1000" },
{ name: "分类2", value: "1000" },
{ name: "分类3", value: "1000" },
{ name: "分类4", value: "1000" },
],
};
}, },
computed: {}, computed: {},
methods: {}, methods: {},
@ -44,20 +24,7 @@ export default {
<style scoped lang="scss"> <style scoped lang="scss">
.stock-monitor { .stock-monitor {
background: #fff2;
flex: 1; flex: 1;
display: flex;
gap: 5px;
position: relative;
&:after {
content: "";
position: absolute;
left: 50%;
top: 0;
width: 3px;
height: 100%;
transform: translateX(-50%);
background: linear-gradient(to bottom, transparent, #00f2ff, transparent);
}
} }
</style> </style>

View File

@ -6,123 +6,25 @@
--> -->
<template> <template>
<LineChartBase <div class="water-cost">water cost</div>
v-if="0"
:legend="legend"
:series="series"
:xAxis="xAxis"
in="waterCost"
class="water-cost"
/>
<BarChartBase
v-else
:legend="legend"
:series="series"
:xAxis="xAxis"
in="waterCost"
class="water-cost"
/>
</template> </template>
<script> <script>
import BarChartBaseVue from "@/views/copilot/components/BarChartBase.vue";
import LineChartBaseVue from "@/views/copilot/components/LineChartBase.vue";
export default { export default {
name: "WaterCost", name: "WaterCost",
components: { components: {},
BarChartBase: BarChartBaseVue, props: {},
LineChartBase: LineChartBaseVue,
},
props: {
period: {
type: String,
default: "日",
},
},
data() { data() {
// return {};
const cities = ["瑞昌", "邯郸", "株洲", "佳木斯", "成都", "凯盛", "蚌埠"];
return {
xAxis: cities,
};
},
computed: {
legend() {
switch (this.period) {
case "日":
return [{ label: "昨日", color: "#12f7f1" }];
case "周":
return [{ label: "本周", color: "#12f7f1" }];
case "月": {
const year = new Date().getFullYear();
const month = new Date().getMonth() + 1;
return [
{ label: `${year - 1}${month}`, color: "#12f7f1" },
{ label: `${year}${month}`, color: "#58adfa" },
];
}
case "年": {
const year = new Date().getFullYear();
return [
{ label: `${year - 1}`, color: "#12f7f1" },
{ label: `${year}`, color: "#58adfa" },
];
}
default:
return [
{ label: `${year - 1}`, color: "#12f7f1" },
{ label: `${year}`, color: "#58adfa" },
];
}
},
series() {
const { ftoInvest } = this.$store.getters.copilot.yield;
let dataList = null;
switch (this.period) {
case "日":
case "周":
dataList = ftoInvest?.current;
break;
default:
dataList = [];
dataList[0] = ftoInvest?.pervious;
dataList[1] = ftoInvest?.current;
}
return getTemplate(this.period, dataList);
},
}, },
computed: {},
methods: {}, methods: {},
}; };
function getTemplate(period, dataList) {
const year = new Date().getFullYear();
const month = new Date().getMonth() + 1;
return period == "日" || period == "周"
? [
{
name: period == "日" ? "昨日" : "本周",
data: dataList ?? [],
},
]
: [
{
name: period == "年" ? `${year - 1}` : `${year - 1}${month}`,
data: dataList ? dataList[0] : [],
},
{
name: period == "年" ? `${year}` : `${year}${month}`,
data: dataList ? dataList[1] : [],
// : Array.from({ length: 7 }, () => Math.floor(Math.random() * 1000)),
},
];
}
</script> </script>
<style scoped lang="scss"> <style scoped lang="scss">
.water-cost { .water-cost {
background: #f002;
flex: 1; flex: 1;
} }
</style> </style>

View File

@ -1,139 +0,0 @@
<!--
filename: ChipRateItem.vue
author: liubin
date: 2024-04-29 14:25:18
description:
-->
<template>
<div class="monitor-item">
<div class="cities">
<CopilotButtons :options="cities" @update:active="handleCityUpdate" />
</div>
<div class="chart" ref="chart"></div>
<div class="legend" v-if="1">
<div class="legend-item" v-for="lgd in legendList" :key="lgd.name">
<span class="legend-item__label">{{ lgd.name }}</span>
<span class="legend-item__value">{{ lgd.value }}</span>
</div>
</div>
</div>
</template>
<script>
import CopilotButtons from "@/views/copilot/components/select.vue";
import chartMixin from "@/mixins/chart.js";
import fullscreenMixin from "@/mixins/fullscreen.js";
import getOptions from "../../../options/monitorOptions.js";
export default {
name: "ChipRateItem",
components: { CopilotButtons },
mixins: [chartMixin, fullscreenMixin],
props: {
cities: {
type: Array,
default: () => [],
},
legendList: {
type: Array,
default: () => [],
},
color: {
type: Number,
default: 1,
},
},
data() {
return {
period: "月",
valueTuple: [100, 100, 200],
};
},
computed: {
options() {
const year = new Date().getFullYear();
const month = new Date().getMonth() + 1;
const vt = this.valueTuple;
let titleValue =
vt[0] != null && vt[2] != null && vt[2] !== 0
? `${((vt[1] / vt[2]) * 100).toFixed(0)}%`
: "0%",
subtitle =
this.period == "月" ? `${month}月累计产出` : `${year}年累计产出`;
return getOptions({
single: true,
color: this.color == 1 ? "#4CF0E8" : "#1065ff",
titleValue,
subtitle,
previousSum: this.valueTuple[0],
currentSum: this.valueTuple[1],
targetSum: this.valueTuple[2],
});
},
},
mounted() {
this.initOptions(this.options);
},
methods: {
handleCityUpdate() {},
fullscreenCallback(isFullscreen) {
console.log("isFullscreen--->", isFullscreen);
},
},
};
</script>
<style scoped lang="scss">
.monitor-item {
flex: 1;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
gap: 3px;
backdrop-filter: blur(24px);
.cities {
height: 40px;
}
.chart {
align-self: stretch;
height: 280px;
}
.legend {
height: 80px;
display: flex;
gap: 40px;
justify-content: space-around;
}
.legend-item {
display: flex;
flex-direction: column;
align-items: center;
gap: 3px;
&:first-child {
.legend-item__value {
color: #0e61f5;
}
}
&:nth-child(2) {
.legend-item__value {
color: #0fd5d1;
}
}
}
.legend-item__value {
font-size: 24px;
font-weight: 600;
}
}
</style>
l

View File

@ -8,10 +8,10 @@
<template> <template>
<div class="energy-copilot"> <div class="energy-copilot">
<Container title="仓库监控·当前" icon="chip2"> <Container title="仓库监控·当前" icon="chip2">
<StockMonitorVue :period="period" /> <StockMonitorVue />
</Container> </Container>
<Container title="天然气能耗" icon="std"> <Container title="天然气能耗" icon="std">
<NatGasVue :period="period" /> <NatGasVue />
</Container> </Container>
<Container title="电能耗" icon="chip"> <Container title="电能耗" icon="chip">
<ElecCostVue :period="period" /> <ElecCostVue :period="period" />

View File

@ -1,156 +0,0 @@
export default function ({
single = false,
color,
titleValue,
subtitle,
previousSum,
currentSum,
targetSum,
}) {
return {
grid: {
left: 0,
right: 0,
bottom: 0,
top: 0,
containLabel: true,
},
tooltip: {},
title: {
text: titleValue,
left: "49%",
top: "39%",
textAlign: "center",
textStyle: {
fontWeight: 600,
fontSize: 32,
color: "#fffd",
},
subtext: `\u2002${subtitle}\u2002`,
subtextStyle: {
fontSize: 14,
fontWeight: 100,
color: "#fffd",
align: "right",
},
},
series: [
// 背景 series
{
type: "pie",
name: "当前目标",
radius: ["70%", "85%"],
center: ["50%", "52%"],
emptyCircleStyle: {
color: "#040c5f45",
},
},
// 数据 series
{
type: "pie",
radius: ["70%", "85%"],
center: ["50%", "52%"],
avoidLabelOvervlap: false,
label: {
show: false,
},
labelLine: {
show: false,
},
data: [
{
value: currentSum,
name: "当前累计产出",
selected: false,
itemStyle: {
borderJoin: "round",
borderCap: "round",
borderWidth: 12,
borderRadius: "50%",
// color: {
// type: "linear",
// x: 1,
// y: 0,
// x2: 0,
// y2: 1,
// colorStops: single
// ? [
// { offset: 0, color: `${color}11` },
// { offset: 1, color: `${color}` },
// ]
// : [
// { offset: 0, color: "#4CF0E811" },
// { offset: 1, color: "#4CF0E8" },
// ],
// },
},
},
{
value:
targetSum > currentSum
? targetSum - currentSum
: targetSum == 0
? currentSum == 0
? 1
: 0
: 0,
name: "未达成累计",
itemStyle: { color: "transparent" },
label: { show: false },
},
],
},
// 数据 series2 - 2023累计
single
? null
: {
type: "pie",
radius: ["55%", "70%"],
center: ["50%", "52%"],
avoidLabelOvervlap: false,
label: {
show: false,
},
labelLine: {
show: false,
},
data: [
{
value: previousSum,
name: "上期累计产出",
selected: false,
itemStyle: {
borderJoin: "round",
borderCap: "round",
borderWidth: 12,
borderRadius: "50%",
// color: {
// type: "linear",
// x: 1,
// y: 0,
// x2: 0,
// y2: 1,
// colorStops: [
// { offset: 0, color: "#1065ff66" },
// { offset: 1, color: "#1065ff" },
// ],
// },
},
},
{
value:
targetSum > previousSum
? targetSum - previousSum
: previousSum == 0
? 1
: 0,
name: "-",
itemStyle: { color: "transparent" },
label: { show: false },
},
],
},
],
};
}