Compare commits

...

2 Commits

Author SHA1 Message Date
DESKTOP-FUDKNA8\znjsz
fdf71145e8 1 2024-04-30 16:22:15 +08:00
DESKTOP-FUDKNA8\znjsz
ea63cb5730 update 综合 2024-04-30 11:02:17 +08:00
14 changed files with 1231 additions and 79 deletions

View File

@ -15,7 +15,25 @@ const state = {
/* 能源驾驶舱 */
energy: {},
/* 效率驾驶舱 */
efficiency: {},
efficiency: {
chipOee: {
current: [],
previous: [],
},
transformRate: {
current: [],
previous: [],
},
chipRate: {
target: [],
current: [],
previous: [],
},
stdRate: {
target: [],
current: [],
},
},
},
home: {
/** 主页状态 */
@ -48,7 +66,10 @@ const mutations = {
state.copilot.energy = payload.data;
break;
case "efficiency":
state.copilot.efficiency = payload.data;
state.copilot.efficiency.chipOee = payload.chipOee;
state.copilot.efficiency.transformRate = payload.transformRate;
state.copilot.efficiency.chipRate = payload.chipRate;
state.copilot.efficiency.stdRate = payload.stdRate;
break;
}
},
@ -64,13 +85,18 @@ const actions = {
},
/** 初始化驾驶舱数据 */
async initCopilot({ commit }, { period, source }) {
if (source == 'comprehensive') return;
if (source == "comprehensive") return;
const fetcher = {
yield: getCopilotYield,
comprehensive: getCopilotEnergy,
efficiency: getCopilotEfficiency,
}[source];
const handler = {
yield: splitCurrentAndPrevious,
comprehensive: () => null,
efficiency: splitCurrentAndPreviousA,
}[source];
// 获取产量数据
let { data: factoryList, type } = await fetcher(period);
let targetList = null;
@ -79,7 +105,7 @@ const actions = {
let { data } = await fetcher(period, true);
targetList = data;
}
const payload = splitCurrentAndPrevious(factoryList, targetList);
const payload = handler(factoryList, targetList);
commit("SET_COPILOT_INFO", { type, payload });
},
};
@ -91,8 +117,99 @@ export default {
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) {
// 初始数据
// 初始数据
const { chipInvest, ftoInvest, chipOutput, stdOutput, bipvOutput } = init();
if (factoryListResponse) {
for (const factory of factoryListResponse) {
@ -152,8 +269,57 @@ function getFactoryTargetValue(targetList, factoryId) {
}
/**
*
* @returns 初始化状态值
* 获取 芯片良率目标值 标准组件良率目标值
* @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 初始化 效率模块里 初始状态值
*/
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() {
const t_ = {
@ -183,11 +349,11 @@ function init() {
};
}
function random_default() {
return 0;
let a = Math.floor(Math.random() * 1000);
while (a < 600) {
a = Math.floor(Math.random() * 1000);
function random_default(min = 0, max = 1) {
// return 0;
let a = Math.floor(Math.random() * max);
while (a < min) {
a = Math.floor(Math.random() * max);
}
return a;
}
@ -256,10 +422,10 @@ async function doFetch(copilot_module = "yield", fetch_target, params) {
}
/**
*
*
* @param {*} period 日周月年1,2,3,4
* @param {*} target 是否获取目标数据
* @returns
* @returns
*/
function getCopilotYield(period, target = false) {
return getCopilotData("yield", period, target);

View File

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

View File

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

View File

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

View File

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

View File

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

View File

@ -6,25 +6,123 @@
-->
<template>
<div class="elec-cost">elec cost</div>
<LineChartBase
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>
<script>
import BarChartBaseVue from "@/views/copilot/components/BarChartBase.vue";
import LineChartBaseVue from "@/views/copilot/components/LineChartBase.vue";
export default {
name: "ElecCost",
components: {},
props: {},
data() {
return {};
components: {
BarChartBase: BarChartBaseVue,
LineChartBase: LineChartBaseVue,
},
props: {
period: {
type: String,
default: "日",
},
},
data() {
//
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: {},
};
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>
<style scoped lang="scss">
.elec-cost {
background: #cc03;
flex: 1;
}
</style>

View File

@ -6,25 +6,110 @@
-->
<template>
<div class="nat-gas">nat-gas</div>
<BarChartBase
:legend="legend"
:series="series"
:xAxis="xAxis"
in="nat-gas"
class="nat-gas"
/>
</template>
<script>
import BarChartBase from "@/views/copilot/components/BarChartBase.vue";
export default {
name: "NatGas",
components: {},
props: {},
data() {
return {};
name: "NatGasCost",
components: { BarChartBase },
props: {
period: {
type: String,
default: "日",
},
},
data() {
//
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: {},
};
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>
<style scoped lang="scss">
.nat-gas {
background: #31f2;
flex: 1;
}
</style>

View File

@ -6,16 +6,36 @@
-->
<template>
<div class="stock-monitor">仓库监控</div>
<div class="stock-monitor">
<MonitorItem
:cities="['成都', '邯郸', '株洲', '瑞昌', '佳木斯']"
:legendList="dhgList"
/>
<MonitorItem :cities="['凯盛光伏', '蚌埠兴科']" :legendList="otherList" />
</div>
</template>
<script>
import MonitorItemVue from "./sub/monitor/MonitorItem.vue";
export default {
name: "StockMonitor",
components: {},
components: { MonitorItem: MonitorItemVue },
props: {},
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: {},
methods: {},
@ -24,7 +44,20 @@ export default {
<style scoped lang="scss">
.stock-monitor {
background: #fff2;
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>

View File

@ -6,25 +6,123 @@
-->
<template>
<div class="water-cost">water cost</div>
<LineChartBase
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>
<script>
import BarChartBaseVue from "@/views/copilot/components/BarChartBase.vue";
import LineChartBaseVue from "@/views/copilot/components/LineChartBase.vue";
export default {
name: "WaterCost",
components: {},
props: {},
data() {
return {};
components: {
BarChartBase: BarChartBaseVue,
LineChartBase: LineChartBaseVue,
},
props: {
period: {
type: String,
default: "日",
},
},
data() {
//
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: {},
};
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>
<style scoped lang="scss">
.water-cost {
background: #f002;
flex: 1;
}
</style>

View File

@ -0,0 +1,139 @@
<!--
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>
<div class="energy-copilot">
<Container title="仓库监控·当前" icon="chip2">
<StockMonitorVue />
<StockMonitorVue :period="period" />
</Container>
<Container title="天然气能耗" icon="std">
<NatGasVue />
<NatGasVue :period="period" />
</Container>
<Container title="电能耗" icon="chip">
<ElecCostVue :period="period" />

View File

@ -0,0 +1,156 @@
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 },
},
],
},
],
};
}