projects/mescc/zhp #12

Merged
juzi merged 13 commits from projects/mescc/zhp into projects/mescc/develop 2024-05-08 16:40:47 +08:00
31 changed files with 483 additions and 291 deletions
Showing only changes of commit 9c9dba5452 - Show all commits

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-04-28 13:43:03 # @LastEditTime: 2024-05-08 08:57:33
# @LastEditors: zhp # @LastEditors: zhp
# @Description: # @Description:
### ###

Binary file not shown.

After

Width:  |  Height:  |  Size: 662 B

Binary file not shown.

After

Width:  |  Height:  |  Size: 796 B

Binary file not shown.

After

Width:  |  Height:  |  Size: 269 B

Binary file not shown.

After

Width:  |  Height:  |  Size: 592 B

View File

@ -1,7 +1,7 @@
<!-- <!--
* @Author: zhp * @Author: zhp
* @Date: 2024-04-12 11:13:06 * @Date: 2024-04-12 11:13:06
* @LastEditTime: 2024-04-15 13:52:16 * @LastEditTime: 2024-05-08 13:37:05
* @LastEditors: zhp * @LastEditors: zhp
* @Description: * @Description:
--> -->

View File

@ -1,3 +1,4 @@
import axios from "@/utils/request"; import axios from "@/utils/request";
import { deepClone } from "../../utils"; import { deepClone } from "../../utils";
@ -15,7 +16,25 @@ const state = {
/* 能源驾驶舱 */ /* 能源驾驶舱 */
energy: {}, energy: {},
/* 效率驾驶舱 */ /* 效率驾驶舱 */
efficiency: {}, efficiency: {
chipOee: {
current: [],
previous: [],
},
transformRate: {
current: [],
previous: [],
},
chipRate: {
target: [],
current: [],
previous: [],
},
stdRate: {
target: [],
current: [],
},
},
}, },
home: { home: {
/** 主页状态 */ /** 主页状态 */
@ -48,7 +67,11 @@ const mutations = {
state.copilot.energy = payload.data; state.copilot.energy = payload.data;
break; break;
case "efficiency": case "efficiency":
state.copilot.efficiency = payload.data; console.log('222222', payload.chipOee)
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; break;
} }
}, },
@ -64,20 +87,29 @@ const actions = {
}, },
/** 初始化驾驶舱数据 */ /** 初始化驾驶舱数据 */
async initCopilot({ commit }, { period, source }) { async initCopilot({ commit }, { period, source }) {
if (source == "comprehensive") return;
const fetcher = { const fetcher = {
yield: getCopilotYield, yield: getCopilotYield,
energy: getCopilotEnergy, comprehensive: getCopilotEnergy,
efficiency: getCopilotEfficiency, efficiency: getCopilotEfficiency,
}[source]; }[source];
const handler = {
yield: splitCurrentAndPrevious,
comprehensive: () => null,
efficiency: splitCurrentAndPreviousA,
}[source];
// 获取产量数据 // 获取产量数据
// console.log('qqqqqq',handler)
let { data: factoryList, type } = await fetcher(period); let { data: factoryList, type } = await fetcher(period);
let targetList = null; let targetList = null;
if (source === "yield" || source === "efficiency") { if (source === "yield" || source === "efficiency") {
// 获取目标数据 // 获取目标数据
let { data } = await fetcher(period, true); let { data } = await fetcher(period, true)
console.log('11111',data)
targetList = data; targetList = data;
} }
const payload = splitCurrentAndPrevious(factoryList, targetList); const payload = handler(factoryList, targetList);
commit("SET_COPILOT_INFO", { type, payload }); commit("SET_COPILOT_INFO", { type, payload });
}, },
}; };
@ -89,7 +121,103 @@ export default {
actions, actions,
}; };
function splitCurrentAndPreviousA(factoryListResponse, targetListResponse) {
console.log('工厂',factoryListResponse);
// console.log('工厂',factoryListResponse);
// 初始数据
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 * 100 || random_default();
chipOee.previous[fId] = factory.previousYearOee * 100 || random_default();
// 转化效率
transformRate.current[fId] =
factory.componentConversionEfficiency * 100 || random_default();
transformRate.previous[fId] =
factory.previousYearComponentConversionEfficiency * 100 || 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) {
console.log('工厂',factoryListResponse);
// 初始数据 // 初始数据
const { chipInvest, ftoInvest, chipOutput, stdOutput, bipvOutput } = init(); const { chipInvest, ftoInvest, chipOutput, stdOutput, bipvOutput } = init();
if (factoryListResponse) { if (factoryListResponse) {
@ -149,9 +277,58 @@ 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_ = {
@ -181,11 +358,11 @@ function init() {
}; };
} }
function random_default() { function random_default(min = 0, max = 1) {
return 0; // return 0;
let a = Math.floor(Math.random() * 1000); let a = Math.floor(Math.random() * max);
while (a < 600) { while (a < min) {
a = Math.floor(Math.random() * 1000); a = Math.floor(Math.random() * max);
} }
return a; return a;
} }

View File

@ -1,8 +1,8 @@
<!-- <!--
filename: BarChartBase.vue filename: BarChartBase.vue
author: liubin author: liubin
date: 2024-04-10 08:59:28 date: 2024-04-10 08:59:28
description: description:
--> -->
<template> <template>
@ -18,7 +18,7 @@
</div> </div>
<div <div
ref="chart" ref="chart"
style="max-width: 50vw" style="max-width: 40vw"
:style="{ height: vHeight + 'vh' }" :style="{ height: vHeight + 'vh' }"
></div> ></div>
</chart-container> </chart-container>
@ -199,6 +199,7 @@ export default {
return; return;
} }
const actualOptions = JSON.parse(JSON.stringify(this.options)); const actualOptions = JSON.parse(JSON.stringify(this.options));
console.log('actualOptions', this.options)
actualOptions.series[0].data = val[0].data; actualOptions.series[0].data = val[0].data;
actualOptions.series[0].name = val[0].name; actualOptions.series[0].name = val[0].name;
actualOptions.series[1].data = val?.[1]?.data || []; actualOptions.series[1].data = val?.[1]?.data || [];

View File

@ -1,8 +1,8 @@
<!-- <!--
filename: Container.vue filename: Container.vue
author: liubin author: liubin
date: 2024-04-09 10:44:09 date: 2024-04-09 10:44:09
description: description:
--> -->
<template> <template>

View File

@ -1,8 +1,9 @@
<!-- <!--
filename: ContainerIcon.vue * @Author: zhp
author: liubin * @Date: 2024-04-28 13:42:51
date: 2024-04-09 16:41:36 * @LastEditTime: 2024-05-07 16:54:54
description: * @LastEditors: zhp
* @Description:
--> -->
<template> <template>
@ -14,8 +15,13 @@ import cube from "@/assets/images/homeindex/fto-icon.png";
import chip from "@/assets/images/homeindex/chip-icon.png"; import chip from "@/assets/images/homeindex/chip-icon.png";
import chip2 from "@/assets/images/homeindex/chip-icon-2.png"; import chip2 from "@/assets/images/homeindex/chip-icon-2.png";
import bipv from "@/assets/images/homeindex/bipv-icon.png"; import bipv from "@/assets/images/homeindex/bipv-icon.png";
import water from "@/assets/images/homeindex/water-icon.png";
import gas from "@/assets/images/homeindex/gas-icon.png";
import ware from "@/assets/images/homeindex/ware-icon.png";
import flash from "@/assets/images/homeindex/flash-icon.png";
import std from "@/assets/images/homeindex/std-icon.png"; import std from "@/assets/images/homeindex/std-icon.png";
export default { export default {
name: "ContainerIcon", name: "ContainerIcon",
components: {}, components: {},
@ -40,6 +46,10 @@ export default {
bipv: bipv:
"background: url(" + bipv + ") no-repeat center center / 100% 100%", "background: url(" + bipv + ") no-repeat center center / 100% 100%",
std: "background: url(" + std + ") no-repeat center center / 100% 100%", std: "background: url(" + std + ") no-repeat center center / 100% 100%",
water: "background: url(" + water + ") no-repeat center center / 100% 100%",
gas: "background: url(" + gas + ") no-repeat center center / 100% 100%",
flash: "background: url(" + flash + ") no-repeat center center / 100% 100%",
ware: "background: url(" + ware + ") no-repeat center center / 100% 100%",
}[this.icon]; }[this.icon];
}, },
}, },

View File

@ -1,8 +1,8 @@
<!-- <!--
filename: CopilotHeader.vue filename: CopilotHeader.vue
author: liubin author: liubin
date: 2024-04-16 15:14:01 date: 2024-04-16 15:14:01
description: description:
--> -->
<template> <template>
@ -63,7 +63,7 @@ export default {
toggleFullScreen() { toggleFullScreen() {
this.isFullscreen = !this.isFullscreen; this.isFullscreen = !this.isFullscreen;
screenfull.toggle(document.querySelector(".copilot-layout")); screenfull.toggle(document.querySelector(".copilot-layout"))
// //
// const el = document.querySelector(".copilot-layout"); // const el = document.querySelector(".copilot-layout");
// el.style.width = this.isFullscreen ? "100vw" : "calc(100vw - 54px)"; // el.style.width = this.isFullscreen ? "100vw" : "calc(100vw - 54px)";

View File

@ -1,18 +1,14 @@
<!--
<!--
filename: container.vue filename: container.vue
author: liubin author: liubin
date: 2024-04-16 14:51:25 date: 2024-04-16 14:51:25
description: description:
--> -->
<template> <template>
<div class="copilot-layout"> <div class="copilot-layout" ref="copilot-layout">
<CopilotHeaderVue <CopilotHeaderVue :active="page" :period="period" @update:active="page = $event" @update:period="period = $event" />
:active="page"
:period="period"
@update:active="page = $event"
@update:period="period = $event"
/>
<YieldCopilot v-if="page == '产量'" :period="period" /> <YieldCopilot v-if="page == '产量'" :period="period" />
<EnergyCopilot v-if="page == '综合'" :period="period" /> <EnergyCopilot v-if="page == '综合'" :period="period" />
@ -52,8 +48,8 @@ export default {
// }, // },
}; };
</script> </script>
<style> <style>
.copilot-layout { .copilot-layout {
padding: 16px; padding: 16px;
background: url(../../assets/images/copilot-bg.png) 0 0 / 100% 100% no-repeat; background: url(../../assets/images/copilot-bg.png) 0 0 / 100% 100% no-repeat;

View File

@ -63,20 +63,22 @@ export default {
} }
}, },
series() { series() {
const { ftoInvest } = this.$store.getters.copilot.efficiency.chipOee; // console.log('aaaaaaaa', this.$store.getters.copilot.efficiency.chipOee);
const { chipOee } = this.$store.getters.copilot.efficiency;
let dataList = null; let dataList = null;
switch (this.period) { switch (this.period) {
case "日": case "日":
case "周": case "周":
dataList = ftoInvest?.current; dataList = chipOee?.current;
case "周":
dataList = chipOee?.current;
break; break;
default: default:
dataList = []; dataList = [];
dataList[0] = ftoInvest?.pervious; dataList[0] = chipOee?.previous;
dataList[1] = ftoInvest?.current; dataList[1] = chipOee?.current;
} }
// console.log(dataList)
return getTemplate(this.period, dataList); return getTemplate(this.period, dataList);
}, },
}, },
@ -86,6 +88,7 @@ export default {
function getTemplate(period, dataList) { function getTemplate(period, dataList) {
const year = new Date().getFullYear(); const year = new Date().getFullYear();
const month = new Date().getMonth() + 1; const month = new Date().getMonth() + 1;
console.log('11111', dataList);
return period == "日" || period == "周" return period == "日" || period == "周"
? [ ? [
{ {

View File

@ -1,20 +1,18 @@
<!-- <!--
filename: StdRate.vue * @Author: zhp
author: liubin * @Date: 2024-05-07 10:25:10
date: 2024-04-29 08:50:43 * @LastEditTime: 2024-05-08 15:55:24
description: 标准组件良率 * @LastEditors: zhp
* @Description:
--> -->
<template> <template>
<div class="std-rate"> <div class="std-rate">
<div class="span-2"> <div class="span-2">
<StdRateItem :city="cities[5]" /> <StdRateItem :period="period" :city="cities[5]" />
</div> </div>
<div <div v-for="item in cities.filter((val, index) => index != 5)" :key="item.name">
v-for="item in cities.filter((val, index) => index != 5)" <StdRateItem :period="period" :city="item" />
:key="item.name"
>
<StdRateItem :city="item" />
</div> </div>
</div> </div>
</template> </template>
@ -24,7 +22,12 @@ import StdRateItem from "./sub/std/StdRateItem.vue";
export default { export default {
name: "StdRate", name: "StdRate",
components: { StdRateItem }, components: { StdRateItem },
props: {}, props: {
period: {
type: String,
default: "日",
},
},
data() { data() {
return { return {
cities: [ cities: [
@ -38,7 +41,9 @@ export default {
], ],
}; };
}, },
computed: {}, computed: {
},
methods: {}, methods: {},
}; };
</script> </script>
@ -48,7 +53,7 @@ export default {
display: grid; display: grid;
gap: 8px; gap: 8px;
grid-template-columns: repeat(2, 1fr); grid-template-columns: repeat(2, 1fr);
grid-template-rows: repeat(4, 1fr); grid-template-rows: repeat(1, 1fr);
} }
.span-2 { .span-2 {

View File

@ -1,4 +1,4 @@
<!-- <!--
filename: TransformRate.vue filename: TransformRate.vue
author: liubin author: liubin
date: 2024-04-29 08:50:34 date: 2024-04-29 08:50:34
@ -16,7 +16,7 @@
</template> </template>
<script> <script>
import BarChartBase from "@/views/copilot/components/BarChartBase.vue"; import BarChartBase from "@/views/copilot/efficiency/components/sub/bar/BarChartChipOEE.vue";
export default { export default {
name: "TransformRate", name: "TransformRate",
components: { BarChartBase }, components: { BarChartBase },
@ -63,18 +63,18 @@ export default {
} }
}, },
series() { series() {
const { ftoInvest } = this.$store.getters.copilot.yield; const { transformRate } = this.$store.getters.copilot.efficiency;
let dataList = null; let dataList = null;
switch (this.period) { switch (this.period) {
case "日": case "日":
case "周": case "周":
dataList = ftoInvest?.current; dataList = transformRate?.current;
break; break;
default: default:
dataList = []; dataList = [];
dataList[0] = ftoInvest?.pervious; dataList[0] = transformRate?.previous;
dataList[1] = ftoInvest?.current; dataList[1] = transformRate?.current;
} }
return getTemplate(this.period, dataList); return getTemplate(this.period, dataList);

View File

@ -1,7 +1,7 @@
<!-- <!--
* @Author: zhp * @Author: zhp
* @Date: 2024-05-07 13:22:43 * @Date: 2024-05-07 13:22:43
* @LastEditTime: 2024-05-07 13:29:55 * @LastEditTime: 2024-05-08 15:52:09
* @LastEditors: zhp * @LastEditors: zhp
* @Description: * @Description:
--> -->
@ -18,7 +18,7 @@
</div> </div>
<div <div
ref="chart" ref="chart"
style="max-width: 50vw" style="max-width: 40vw"
:style="{ height: vHeight + 'vh' }" :style="{ height: vHeight + 'vh' }"
></div> ></div>
</chart-container> </chart-container>
@ -198,7 +198,8 @@ export default {
this.initOptions(this.options); this.initOptions(this.options);
return; return;
} }
const actualOptions = JSON.parse(JSON.stringify(this.options)); console.log(val)
const actualOptions = JSON.parse(JSON.stringify(this.options))
actualOptions.series[0].data = val[0].data; actualOptions.series[0].data = val[0].data;
actualOptions.series[0].name = val[0].name; actualOptions.series[0].name = val[0].name;
actualOptions.series[1].data = val?.[1]?.data || []; actualOptions.series[1].data = val?.[1]?.data || [];

View File

@ -192,4 +192,4 @@ export default {
} }
} }
</style> </style>
l

View File

@ -1,8 +1,8 @@
<!-- <!--
filename: CityName.vue filename: CityName.vue
author: liubin author: liubin
date: 2024-04-10 08:59:28 date: 2024-04-10 08:59:28
description: description:
--> -->
<template> <template>

View File

@ -1,8 +1,8 @@
<!-- <!--
filename: ProgressBar.vue filename: ProgressBar.vue
author: liubin author: liubin
date: 2024-04-29 09:18:30 date: 2024-04-29 09:18:30
description: description:
--> -->
<template> <template>

View File

@ -1,20 +1,38 @@
<!-- <!--
filename: StdRateItem.vue * @Author: zhp
author: liubin * @Date: 2024-05-07 10:25:10
date: 2024-04-29 08:59:33 * @LastEditTime: 2024-05-08 14:54:24
description: * @LastEditors: zhp
* @Description:
--> -->
<template> <template>
<div 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="24年目标" :total="city.target" :value="city.target" /> <ProgressBar :title="title" :total="city.target" :value="city.target" />
<ProgressBar <!-- <ProgressBar title="24年累计" :total="city.target" :value="city.thisYear" /> -->
title="24年累计" </div>
:total="city.target" </div>
:value="city.thisYear" <div v-else-if="period == ''" class="std-rate-item">
/> <CityName :value="city.name" />
<div class="std-rate-item__value">
<ProgressBar :title="title" :total="city.target" :value="city.target" />
<!-- <ProgressBar title="24年累计" :total="city.target" :value="city.thisYear" /> -->
</div>
</div>
<div v-else-if="period == ''" class="std-rate-item">
<CityName :value="city.name" />
<div class="std-rate-item__value">
<ProgressBar :title="titleEnd" :total="city.target" :value="city.target" />
<ProgressBar :title="title" :total="city.target" :value="city.thisYear" />
</div>
</div>
<div v-else="period == '年'" class="std-rate-item">
<CityName :value="city.name" />
<div class="std-rate-item__value">
<ProgressBar :title="titleEnd" :total="city.target" :value="city.target" />
<ProgressBar :title="title" :total="city.target" :value="city.thisYear" />
</div> </div>
</div> </div>
</template> </template>
@ -31,9 +49,55 @@ export default {
type: Object, type: Object,
required: true, required: true,
}, },
period: {
type: String,
default: "日",
}
}, },
data() { data() {
return {}; return {
showDay:true,
};
},
computed: {
title() {
switch (this.period) {
case "日":
return "今日"
case "周":
return "本周"
case "月":
const year = new Date().getFullYear();
const month = new Date().getMonth() + 1;
return `${year - 1}${month}月累计`
case "年": {
const year = new Date().getFullYear();
// return [
return `${year - 1}年累计`
// ];
}
default:
return "今日"
}
},
titleEnd() {
switch (this.period) {
// case "":
// return ""
// case "":
// return ""
case "月":
const year = new Date().getFullYear();
const month = new Date().getMonth() + 1;
return `${year}${month}月目标`
case "年": {
const year = new Date().getFullYear();
// return [
return `${year}年目标`
// ];
}
}
}
}, },
}; };
</script> </script>

View File

@ -1,7 +1,7 @@
<!-- <!--
* @Author: zhp * @Author: zhp
* @Date: 2024-05-07 10:04:53 * @Date: 2024-05-07 10:04:53
* @LastEditTime: 2024-05-07 10:25:55 * @LastEditTime: 2024-05-08 15:58:14
* @LastEditors: zhp * @LastEditors: zhp
* @Description: * @Description:
--> -->
@ -74,7 +74,7 @@ export default {
display: grid; display: grid;
gap: 16px; gap: 16px;
grid-template-columns: 1fr 1fr; grid-template-columns: 1fr 1fr;
grid-template-rows: 1fr 1fr; grid-template-rows: .5fr .5fr;
} }
.efficiency-copilot > div { .efficiency-copilot > div {

View File

@ -1,8 +1,9 @@
<!-- <!--
filename: StockMonitor.vue * @Author: zhp
author: liubin * @Date: 2024-05-07 10:25:10
date: 2024-04-29 16:35:40 * @LastEditTime: 2024-05-08 09:39:15
description: 仓库监控·当前 * @LastEditors: zhp
* @Description:
--> -->
<template> <template>
@ -25,15 +26,15 @@ export default {
data() { data() {
return { return {
dhgList: [ dhgList: [
{ name: "总库存", value: "1000" }, { name: "总库存", value: 1000 },
{ name: "已用库存", value: "500" }, { name: "已用库存", value: 500 },
{ name: "剩余库存", value: "500" }, { name: "剩余库存", value: 500 },
], ],
otherList: [ otherList: [
{ name: "分类1", value: "1000" }, { name: "分类1", value: 1000 },
{ name: "分类2", value: "1000" }, { name: "分类2", value: 1000 },
{ name: "分类3", value: "1000" }, { name: "分类3", value: 1000 },
{ name: "分类4", value: "1000" }, { name: "分类4", value: 1000 },
], ],
}; };
}, },

View File

@ -1,8 +1,8 @@
<!-- <!--
filename: ChipRateItem.vue filename: ChipRateItem.vue
author: liubin author: liubin
date: 2024-04-29 14:25:18 date: 2024-04-29 14:25:18
description: description:
--> -->
<template> <template>
@ -12,9 +12,12 @@
</div> </div>
<div class="chart" ref="chart"></div> <div class="chart" ref="chart"></div>
<div class="legend" v-if="1"> <div class="legend" v-if="1">
<div class="legend-item" v-for="lgd in legendList" :key="lgd.name"> <div class="legend-item" v-for="(lgd,index) in legendList" :key="lgd.name">
<span class="legend-item__label">{{ lgd.name }}</span> <div >
<span class="legend-item__value">{{ lgd.value }}</span> <span :style="'backgroundColor:' + colors[index%5]" class="legend-item__chart"></span>
<span :style="'color:' + colors[index%5]" class="legend-item__label">{{ lgd.name }}</span>
</div>
<div :style="'color:' + colors[index%5]" class="legend-item__value">{{ lgd.value }}</div>
</div> </div>
</div> </div>
</div> </div>
@ -47,6 +50,7 @@ export default {
data() { data() {
return { return {
period: "月", period: "月",
colors:['#2760FF', '#5996F7', '#8BC566', '#11FAF0', '#F3C000'],
valueTuple: [100, 100, 200], valueTuple: [100, 100, 200],
}; };
}, },
@ -54,19 +58,23 @@ export default {
options() { options() {
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; let arr = []
let titleValue = this.legendList.forEach(ele => {
vt[0] != null && vt[2] != null && vt[2] !== 0 arr.push(ele.value)
? `${((vt[1] / vt[2]) * 100).toFixed(0)}%` });
: "0%", let vt = arr
subtitle = console.log(arr)
this.period == "月" ? `${month}月累计产出` : `${year}年累计产出`; let titleValue = vt.reduce(function (prev, cur, index, arr) {
return prev + cur
})
let subtitle = `总计/片`;
return getOptions({ return getOptions({
single: true, single: true,
color: this.color == 1 ? "#4CF0E8" : "#1065ff", color: this.color == 1 ? "#4CF0E8" : "#1065ff",
titleValue, titleValue,
subtitle, subtitle,
dataList:this.legendList,
previousSum: this.valueTuple[0], previousSum: this.valueTuple[0],
currentSum: this.valueTuple[1], currentSum: this.valueTuple[1],
targetSum: this.valueTuple[2], targetSum: this.valueTuple[2],
@ -107,27 +115,31 @@ export default {
.legend { .legend {
height: 80px; height: 80px;
display: flex; display: flex;
gap: 40px; gap: 20px;
justify-content: space-around; justify-content: space-around;
} }
.legend-item { .legend-item {
display: flex; display: flex;
// width: 90px;
flex-direction: column; flex-direction: column;
// justify-content: space-around;
// justify-content: space-between;
align-items: center; align-items: center;
flex-wrap: wrap;
gap: 3px; gap: 3px;
.legend-item__chart{
&:first-child { display: inline-block;
.legend-item__value { width: 14px;
color: #0e61f5; height: 14px;
} background: #2760FF;
border-radius: 2px;
// margin-right: 8px;
} }
.legend-item__label {
&:nth-child(2) { margin-left: 8px;
.legend-item__value {
color: #0fd5d1;
}
} }
// }
} }
.legend-item__value { .legend-item__value {

View File

@ -1,22 +1,23 @@
<!-- <!--
filename: index.vue * @Author: zhp
author: liubin * @Date: 2024-05-07 10:25:10
date: 2024-04-16 14:40:15 * @LastEditTime: 2024-05-08 15:29:28
description: 综合驾驶舱 * @LastEditors: zhp
* @Description:
--> -->
<template> <template>
<div class="energy-copilot"> <div class="energy-copilot">
<Container title="仓库监控·当前" icon="chip2"> <Container title="仓库监控·当前" icon="ware">
<StockMonitorVue :period="period" /> <StockMonitorVue :period="period" />
</Container> </Container>
<Container title="天然气能耗" icon="std"> <Container title="天然气能耗" icon="gas">
<NatGasVue :period="period" /> <NatGasVue :period="period" />
</Container> </Container>
<Container title="电能耗" icon="chip"> <Container title="电能耗" icon="flash">
<ElecCostVue :period="period" /> <ElecCostVue :period="period" />
</Container> </Container>
<Container title="水能耗" icon="cube"> <Container title="水能耗" icon="water">
<WaterCostVue :period="period" /> <WaterCostVue :period="period" />
</Container> </Container>
</div> </div>
@ -73,7 +74,7 @@ export default {
display: grid; display: grid;
gap: 16px; gap: 16px;
grid-template-columns: 1fr 1fr; grid-template-columns: 1fr 1fr;
grid-template-rows: 1fr 1fr; /* grid-template-rows: 1fr 1fr; */
} }
.energy-copilot > div { .energy-copilot > div {

View File

@ -1,156 +1,84 @@
/*
* @Author: zhp
* @Date: 2024-05-07 10:25:10
* @LastEditTime: 2024-05-08 10:30:06
* @LastEditors: zhp
* @Description:
*/
export default function ({ export default function ({
single = false, single = false,
color, colors = ['#2760FF', '#5996F7', '#8BC566', '#11FAF0','#F3C000'],
titleValue, titleValue,
subtitle, subtitle,
dataList,
previousSum, previousSum,
currentSum, currentSum,
targetSum, targetSum,
}) { }) {
return { return {
grid: { grid: {
left: 0, left: 0,
right: 0, right: 0,
bottom: 0, bottom: 0,
top: 0, top: 0,
containLabel: true, containLabel: true,
},
// tooltip: {},
title: {
text: titleValue,
left: "49%",
top: "39%",
textAlign: "center",
textStyle: {
fontWeight: 600,
fontSize: 32,
color: "#fffd",
}, },
tooltip: {}, subtext: `\u2002${subtitle}\u2002`,
title: { subtextStyle: {
text: titleValue, fontSize: 14,
left: "49%", fontWeight: 100,
top: "39%", color: "#fffd",
textAlign: "center", align: "right",
textStyle: {
fontWeight: 600,
fontSize: 32,
color: "#fffd",
},
subtext: `\u2002${subtitle}\u2002`,
subtextStyle: {
fontSize: 14,
fontWeight: 100,
color: "#fffd",
align: "right",
},
}, },
series: [ },
// 背景 series // legend: {
{ // top: '5%',
type: "pie", // left: 'center'
name: "当前目标", // },
radius: ["70%", "85%"], series: [
center: ["50%", "52%"], {
emptyCircleStyle: { name: 'Access From',
color: "#040c5f45", type: 'pie',
}, // center: ['50%', '40%'],
}, radius: ['60%', '90%'],
// 数据 series avoidLabelOverlap: false,
{
type: "pie",
radius: ["70%", "85%"],
center: ["50%", "52%"],
avoidLabelOvervlap: false,
label: {
show: false,
},
labelLine: { labelLine: {
show: false, 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累计 label: {
single show: false
? null },
: { data: dataList && dataList.length > 0 && dataList.map((item, index) => ({
type: "pie", name:item.name,
radius: ["55%", "70%"], value: item.value,
center: ["50%", "52%"],
avoidLabelOvervlap: false, itemStyle:{
label: { color:{
show: false, type: 'linear',
}, x: 0,
labelLine: { y: 0,
show: false, x2: 0,
}, y2: 1,
data: [ global: false,
{ colorStops:[
value: previousSum, {offset: 0,color:colors[index%5]},
name: "上期累计产出", {offset: 1,color:colors[index%5]+'33'}
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 },
},
],
},
],
}; };
} }

View File

@ -1,8 +1,8 @@
<!-- <!--
filename: FtoInvest.vue filename: FtoInvest.vue
author: liubin author: liubin
date: 2024-04-10 08:59:28 date: 2024-04-10 08:59:28
description: description:
--> -->
<template> <template>
@ -73,7 +73,7 @@ export default {
break; break;
default: default:
dataList = []; dataList = [];
dataList[0] = chipInvest?.pervious; dataList[0] = chipInvest?.previous;
dataList[1] = chipInvest?.current; dataList[1] = chipInvest?.current;
} }
return getTemplate(this.period, dataList); return getTemplate(this.period, dataList);

View File

@ -1,8 +1,8 @@
<!-- <!--
filename: FtoInvest.vue filename: FtoInvest.vue
author: liubin author: liubin
date: 2024-04-10 08:59:28 date: 2024-04-10 08:59:28
description: description:
--> -->
<template> <template>
@ -74,7 +74,7 @@ export default {
break; break;
default: default:
dataList = []; dataList = [];
dataList[0] = ftoInvest?.pervious; dataList[0] = ftoInvest?.previous;
dataList[1] = ftoInvest?.current; dataList[1] = ftoInvest?.current;
} }

View File

@ -1,8 +1,8 @@
<!-- <!--
filename: DoubleRingChart.vue filename: DoubleRingChart.vue
author: liubin author: liubin
date: 2024-04-17 11:01:55 date: 2024-04-17 11:01:55
description: description:
--> -->
<template> <template>
@ -70,6 +70,7 @@ export default {
// [previousValue, currentValue, sumValue?] // [previousValue, currentValue, sumValue?]
const getter = this.$store.getters.copilot.yield[this.dataSourceField]; const getter = this.$store.getters.copilot.yield[this.dataSourceField];
if (this.period === "日" || this.period === "周") { if (this.period === "日" || this.period === "周") {
console.log(this.period)
return [ return [
getter.previous[this.factoryId], getter.previous[this.factoryId],
getter.current[this.factoryId], getter.current[this.factoryId],

View File

@ -1,4 +1,4 @@
<!-- <!--
filename: index.vue filename: index.vue
author: liubin author: liubin
date: 2024-04-16 14:40:15 date: 2024-04-16 14:40:15

View File

@ -210,14 +210,6 @@ export default {
}, },
}; };
</script> </script>
<style>
.hideSidebar.mobile .dashboard-factory-all {
left: 0 !important;
width: 100vw !important;
}
</style>
<style lang="scss" scoped> <style lang="scss" scoped>
.dashboard-factory-all { .dashboard-factory-all {
background: #151516; background: #151516;
@ -271,9 +263,9 @@ export default {
z-index: 9998; z-index: 9998;
width: 1.702vw; width: 1.702vw;
height: 1.702vw; height: 1.702vw;
/* /*
width: 32px; width: 32px;
height: 32px; height: 32px;
*/ */
background: url(../assets/pinicon.png) no-repeat 0 0 / 100% 100%; background: url(../assets/pinicon.png) no-repeat 0 0 / 100% 100%;
transition: transform 0.1s linear; transition: transform 0.1s linear;

View File

@ -1,4 +1,4 @@
<!-- <!--
filename: playground.vue filename: playground.vue
author: liubin author: liubin
date: 2024-04-02 09:42:43 date: 2024-04-02 09:42:43