Compare commits
2 Commits
30af8faa49
...
752df8417d
Author | SHA1 | Date | |
---|---|---|---|
|
752df8417d | ||
|
bb399835e7 |
@ -54,6 +54,7 @@
|
|||||||
"highlight.js": "^11.9.0",
|
"highlight.js": "^11.9.0",
|
||||||
"js-beautify": "^1.15.1",
|
"js-beautify": "^1.15.1",
|
||||||
"jsencrypt": "3.3.1",
|
"jsencrypt": "3.3.1",
|
||||||
|
"lodash": "^4.17.21",
|
||||||
"mockjs": "^1.1.0",
|
"mockjs": "^1.1.0",
|
||||||
"moment": "^2.30.1",
|
"moment": "^2.30.1",
|
||||||
"nprogress": "0.2.0",
|
"nprogress": "0.2.0",
|
||||||
|
@ -1,4 +1,172 @@
|
|||||||
import axios from "@/utils/request";
|
import axios from "@/utils/request";
|
||||||
|
import { deepClone } from "../../utils";
|
||||||
|
|
||||||
|
/* 状态 */
|
||||||
|
const state = {
|
||||||
|
copilot: {
|
||||||
|
/* 产量驾驶舱 */
|
||||||
|
yield: {
|
||||||
|
ftoInvest: null,
|
||||||
|
chipInvest: null,
|
||||||
|
chipOutput: null,
|
||||||
|
stdOutput: null,
|
||||||
|
bipvOutput: null,
|
||||||
|
},
|
||||||
|
/* 能源驾驶舱 */
|
||||||
|
energy: {},
|
||||||
|
/* 效率驾驶舱 */
|
||||||
|
efficiency: {},
|
||||||
|
},
|
||||||
|
home: {
|
||||||
|
ftoInvest: null,
|
||||||
|
chipInvest: null,
|
||||||
|
chipOutput: null,
|
||||||
|
stdOutput: null,
|
||||||
|
bipvOutput: null,
|
||||||
|
},
|
||||||
|
};
|
||||||
|
|
||||||
|
const mutations = {
|
||||||
|
SET_HOME_INFO: (state, payload) => {
|
||||||
|
state.home.ftoInvest = payload.ftoInvest;
|
||||||
|
state.home.chipInvest = payload.chipInvest;
|
||||||
|
state.home.chipOutput = payload.chipOutput;
|
||||||
|
state.home.stdOutput = payload.stdOutput;
|
||||||
|
state.home.bipvOutput = payload.bipvOutput;
|
||||||
|
},
|
||||||
|
SET_COPILOT_INFO: (state, { type, payload }) => {
|
||||||
|
switch (type) {
|
||||||
|
case "yield":
|
||||||
|
state.copilot.yield.ftoInvest = payload.ftoInvest;
|
||||||
|
state.copilot.yield.chipInvest = payload.chipInvest;
|
||||||
|
state.copilot.yield.chipOutput = payload.chipOutput;
|
||||||
|
state.copilot.yield.stdOutput = payload.stdOutput;
|
||||||
|
state.copilot.yield.bipvOutput = payload.bipvOutput;
|
||||||
|
break;
|
||||||
|
case "energy":
|
||||||
|
state.copilot.energy = payload.data;
|
||||||
|
break;
|
||||||
|
case "efficiency":
|
||||||
|
state.copilot.efficiency = payload.data;
|
||||||
|
break;
|
||||||
|
}
|
||||||
|
},
|
||||||
|
};
|
||||||
|
|
||||||
|
const actions = {
|
||||||
|
/** 初始化首页数据 */
|
||||||
|
async initHome({ commit }) {
|
||||||
|
const dataArr = await getHomeInfo();
|
||||||
|
const targetArr = await getHomeTarget();
|
||||||
|
const payload = splitCurrentAndPrevious(dataArr, targetArr);
|
||||||
|
commit("SET_HOME_INFO", payload);
|
||||||
|
},
|
||||||
|
/** 初始化驾驶舱数据 */
|
||||||
|
async initCopilot({ commit }, { period, source }) {
|
||||||
|
const fetcher = {
|
||||||
|
yield: getCopilotYield,
|
||||||
|
energy: null,
|
||||||
|
efficiency: null,
|
||||||
|
}[source];
|
||||||
|
let { data: factoryList, type } = await fetcher(period);
|
||||||
|
|
||||||
|
const payload = splitCurrentAndPrevious(factoryList);
|
||||||
|
commit("SET_COPILOT_INFO", { type, payload });
|
||||||
|
},
|
||||||
|
};
|
||||||
|
|
||||||
|
export default {
|
||||||
|
namespaced: true,
|
||||||
|
state,
|
||||||
|
mutations,
|
||||||
|
actions,
|
||||||
|
};
|
||||||
|
|
||||||
|
// utils function
|
||||||
|
function splitCurrentAndPrevious(factoryListResponse, targetListResponse) {
|
||||||
|
const { chipInvest, ftoInvest, chipOutput, stdOutput, bipvOutput } = init();
|
||||||
|
if (factoryListResponse) {
|
||||||
|
for (const factory of factoryListResponse) {
|
||||||
|
debugger;
|
||||||
|
const fId = getFactoryId(factory);
|
||||||
|
// 获取目标值
|
||||||
|
if (targetListResponse) {
|
||||||
|
const { chipYield, componentYield, bipvProductOutput } =
|
||||||
|
getFactoryTargetValue(targetListResponse, fId);
|
||||||
|
chipOutput.target[fId] = chipYield;
|
||||||
|
stdOutput.target[fId] = componentYield;
|
||||||
|
bipvOutput.target[fId] = bipvProductOutput;
|
||||||
|
}
|
||||||
|
// 芯片投入
|
||||||
|
chipInvest.current[fId] = factory.inputNumber;
|
||||||
|
chipInvest.previous[fId] = factory.previousYearInputNumber;
|
||||||
|
// FTO投入
|
||||||
|
ftoInvest.current[fId] = factory.chipInput;
|
||||||
|
ftoInvest.previous[fId] = factory.previousYearChipInput;
|
||||||
|
// 产出数据, 0 - (玻璃)芯片产出, 1 - 标准组件产出, 2 - BIPV产出
|
||||||
|
const _t = [chipOutput, stdOutput, bipvOutput][factory.glassType];
|
||||||
|
_t.current[fId] = factory.outputNumber;
|
||||||
|
_t.previous[fId] = factory.previousYearOutputNumber;
|
||||||
|
}
|
||||||
|
|
||||||
|
return {
|
||||||
|
chipInvest,
|
||||||
|
ftoInvest,
|
||||||
|
chipOutput,
|
||||||
|
stdOutput,
|
||||||
|
bipvOutput,
|
||||||
|
};
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
function getFactoryId(factory) {
|
||||||
|
return factory.factory;
|
||||||
|
}
|
||||||
|
|
||||||
|
function getFactoryTargetValue(targetList, factoryId) {
|
||||||
|
const target = targetList.find((item) => item.factory === factoryId);
|
||||||
|
if (target) {
|
||||||
|
return {
|
||||||
|
// 自带模拟数据了.... random_default
|
||||||
|
chipYield: target.chipYield ?? random_default(),
|
||||||
|
componentYield: target.componentYield ?? random_default(),
|
||||||
|
bipvProductOutput: target.bipvProductOutput ?? random_default(),
|
||||||
|
};
|
||||||
|
}
|
||||||
|
return {
|
||||||
|
chipYield: random_default(),
|
||||||
|
componentYield: random_default(),
|
||||||
|
bipvProductOutput: random_default(),
|
||||||
|
};
|
||||||
|
}
|
||||||
|
|
||||||
|
function init() {
|
||||||
|
const t_ = {
|
||||||
|
current: Array(7).fill(0),
|
||||||
|
previous: Array(7).fill(0),
|
||||||
|
};
|
||||||
|
// 芯片投入
|
||||||
|
const chipInvest = deepClone(t_);
|
||||||
|
// FTO投入
|
||||||
|
const ftoInvest = deepClone(t_);
|
||||||
|
// 芯片产出
|
||||||
|
const chipOutput = {
|
||||||
|
...deepClone(t_),
|
||||||
|
target: Array(7).fill(0),
|
||||||
|
};
|
||||||
|
// 标准组件产出
|
||||||
|
const stdOutput = deepClone(chipOutput);
|
||||||
|
// BIPV产出
|
||||||
|
const bipvOutput = deepClone(chipOutput);
|
||||||
|
|
||||||
|
return {
|
||||||
|
chipInvest,
|
||||||
|
ftoInvest,
|
||||||
|
chipOutput,
|
||||||
|
stdOutput,
|
||||||
|
bipvOutput,
|
||||||
|
};
|
||||||
|
}
|
||||||
|
|
||||||
function random_default() {
|
function random_default() {
|
||||||
return 0;
|
return 0;
|
||||||
@ -34,7 +202,7 @@ async function getHomeTarget() {
|
|||||||
return null;
|
return null;
|
||||||
}
|
}
|
||||||
|
|
||||||
async function getCopilotYield(params) {
|
async function fetcher(params) {
|
||||||
const { code, data } = await axios.post("/ip/prod-output/query-by-date", {
|
const { code, data } = await axios.post("/ip/prod-output/query-by-date", {
|
||||||
...params,
|
...params,
|
||||||
});
|
});
|
||||||
@ -45,218 +213,30 @@ async function getCopilotYield(params) {
|
|||||||
return null;
|
return null;
|
||||||
}
|
}
|
||||||
|
|
||||||
/* 状态 */
|
async function getCopilotYield(period) {
|
||||||
const state = {
|
// 请求参数,直接一次性获取所有工厂
|
||||||
copilot: {
|
let queryParams = {
|
||||||
/* 产量驾驶舱 */
|
factorys: [],
|
||||||
yield: {},
|
date: 4,
|
||||||
/* 能源驾驶舱 */
|
};
|
||||||
energy: {},
|
|
||||||
/* 效率驾驶舱 */
|
|
||||||
efficiency: {},
|
|
||||||
},
|
|
||||||
home: {
|
|
||||||
ftoInvest: null,
|
|
||||||
chipInvest: null,
|
|
||||||
chipOutput: null,
|
|
||||||
stdOutput: null,
|
|
||||||
bipvOutput: null,
|
|
||||||
},
|
|
||||||
};
|
|
||||||
|
|
||||||
const mutations = {
|
switch (period) {
|
||||||
SET_HOME_INFO: (state, payload) => {
|
case "日":
|
||||||
state.home.ftoInvest = payload.ftoInvest;
|
queryParams.date = 1;
|
||||||
state.home.chipInvest = payload.chipInvest;
|
break;
|
||||||
state.home.chipOutput = payload.chipOutput;
|
case "周":
|
||||||
state.home.stdOutput = payload.stdOutput;
|
queryParams.date = 2;
|
||||||
state.home.bipvOutput = payload.bipvOutput;
|
break;
|
||||||
},
|
case "月":
|
||||||
SET_COPILOT_INFO: (state, payload) => {
|
queryParams.date = 3;
|
||||||
switch (payload.type) {
|
break;
|
||||||
case "yield":
|
case "年":
|
||||||
state.copilot.yield = payload.data;
|
queryParams.date = 4;
|
||||||
break;
|
break;
|
||||||
case "energy":
|
default:
|
||||||
state.copilot.energy = payload.data;
|
queryParams.date = 1;
|
||||||
break;
|
break;
|
||||||
case "efficiency":
|
}
|
||||||
state.copilot.efficiency = payload.data;
|
|
||||||
break;
|
|
||||||
}
|
|
||||||
},
|
|
||||||
};
|
|
||||||
|
|
||||||
const actions = {
|
return { data: await fetcher(queryParams), type: "yield" };
|
||||||
/** 初始化首页数据 */
|
}
|
||||||
async initHome({ commit }) {
|
|
||||||
const dataArr = await getHomeInfo();
|
|
||||||
const targetArr = await getHomeTarget();
|
|
||||||
|
|
||||||
const chipInvest = {
|
|
||||||
current: Array(7).fill(0),
|
|
||||||
previous: Array(7).fill(0),
|
|
||||||
}; // 芯片投入
|
|
||||||
const ftoInvest = {
|
|
||||||
current: Array(7).fill(0),
|
|
||||||
previous: Array(7).fill(0),
|
|
||||||
}; // FTO投入
|
|
||||||
const chipOutput = {
|
|
||||||
current: Array(7).fill(0),
|
|
||||||
previous: Array(7).fill(0),
|
|
||||||
target: Array(7).fill(0),
|
|
||||||
}; // 芯片产出
|
|
||||||
const stdOutput = {
|
|
||||||
current: Array(7).fill(0),
|
|
||||||
previous: Array(7).fill(0),
|
|
||||||
target: Array(7).fill(0),
|
|
||||||
}; // 标准组件产出
|
|
||||||
const bipvOutput = {
|
|
||||||
current: Array(7).fill(0),
|
|
||||||
previous: Array(7).fill(0),
|
|
||||||
target: Array(7).fill(0),
|
|
||||||
}; // BIPV产出
|
|
||||||
|
|
||||||
if (dataArr) {
|
|
||||||
for (const factory of dataArr) {
|
|
||||||
/* 工厂索引 */
|
|
||||||
const factoryId = factory.factory;
|
|
||||||
/* 收集目标数据 */
|
|
||||||
if (targetArr) {
|
|
||||||
const target = targetArr.find((item) => item.factory === factoryId);
|
|
||||||
if (target) {
|
|
||||||
chipOutput.target.splice(factoryId, 1, target.chipYield ?? 0);
|
|
||||||
stdOutput.target.splice(factoryId, 1, target.componentYield ?? 0);
|
|
||||||
bipvOutput.target.splice(
|
|
||||||
factoryId,
|
|
||||||
1,
|
|
||||||
target.bipvProductOutput ?? 0
|
|
||||||
);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
/* 收集芯片投入数据 */
|
|
||||||
chipInvest.current.splice(
|
|
||||||
factoryId,
|
|
||||||
1,
|
|
||||||
factory.inputNumber ?? random_default()
|
|
||||||
);
|
|
||||||
chipInvest.previous.splice(
|
|
||||||
factoryId,
|
|
||||||
1,
|
|
||||||
factory.previousYearInputNumber ?? random_default()
|
|
||||||
);
|
|
||||||
/* 收集FTO投入数据 */
|
|
||||||
ftoInvest.current.splice(
|
|
||||||
factoryId,
|
|
||||||
1,
|
|
||||||
factory.chipInput ?? random_default()
|
|
||||||
);
|
|
||||||
ftoInvest.previous.splice(
|
|
||||||
factoryId,
|
|
||||||
1,
|
|
||||||
factory.previousYearChipInput ?? random_default()
|
|
||||||
);
|
|
||||||
/* 收集产出数据 */
|
|
||||||
switch (factory.glassType) {
|
|
||||||
case 0:
|
|
||||||
// 玻璃芯片 产出
|
|
||||||
chipOutput.current.splice(
|
|
||||||
factoryId,
|
|
||||||
1,
|
|
||||||
factory.outputNumber ?? random_default()
|
|
||||||
);
|
|
||||||
chipOutput.previous.splice(
|
|
||||||
factoryId,
|
|
||||||
1,
|
|
||||||
factory.previousYearOutputNumber ?? random_default()
|
|
||||||
);
|
|
||||||
break;
|
|
||||||
case 1:
|
|
||||||
// 标准组件 产出
|
|
||||||
stdOutput.current.splice(
|
|
||||||
factoryId,
|
|
||||||
1,
|
|
||||||
factory.outputNumber ?? random_default()
|
|
||||||
);
|
|
||||||
stdOutput.previous.splice(
|
|
||||||
factoryId,
|
|
||||||
1,
|
|
||||||
factory.previousYearOutputNumber ?? random_default()
|
|
||||||
);
|
|
||||||
break;
|
|
||||||
case 2:
|
|
||||||
// BIPV 产出
|
|
||||||
bipvOutput.current.splice(
|
|
||||||
factoryId,
|
|
||||||
1,
|
|
||||||
factory.outputNumber ?? random_default()
|
|
||||||
);
|
|
||||||
bipvOutput.previous.splice(
|
|
||||||
factoryId,
|
|
||||||
1,
|
|
||||||
factory.previousYearOutputNumber ?? random_default()
|
|
||||||
);
|
|
||||||
break;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
/* 更新 state */
|
|
||||||
commit("SET_HOME_INFO", {
|
|
||||||
ftoInvest,
|
|
||||||
chipInvest,
|
|
||||||
chipOutput,
|
|
||||||
stdOutput,
|
|
||||||
bipvOutput,
|
|
||||||
});
|
|
||||||
}
|
|
||||||
},
|
|
||||||
/** 初始化驾驶舱数据 */
|
|
||||||
async initCopilot({ commit }, payload) {
|
|
||||||
const { period } = payload;
|
|
||||||
let dummyData = null;
|
|
||||||
let type = null;
|
|
||||||
// 请求参数,直接一次性获取所有工厂
|
|
||||||
let queryParams = {
|
|
||||||
factorys: [],
|
|
||||||
date: 4,
|
|
||||||
};
|
|
||||||
|
|
||||||
switch (period) {
|
|
||||||
case "日":
|
|
||||||
queryParams.date = 1;
|
|
||||||
break;
|
|
||||||
case "周":
|
|
||||||
queryParams.date = 2;
|
|
||||||
break;
|
|
||||||
case "月":
|
|
||||||
queryParams.date = 3;
|
|
||||||
break;
|
|
||||||
case "年":
|
|
||||||
queryParams.date = 4;
|
|
||||||
break;
|
|
||||||
default:
|
|
||||||
queryParams.date = 1;
|
|
||||||
break;
|
|
||||||
}
|
|
||||||
|
|
||||||
const data = await getCopilotYield(queryParams);
|
|
||||||
if (data) {
|
|
||||||
dummyData = data;
|
|
||||||
type = "yield";
|
|
||||||
}
|
|
||||||
|
|
||||||
console.log("[copilot yield data]: ", dummyData, type);
|
|
||||||
// commit
|
|
||||||
// commit('SET_COPILOT_INFO', {
|
|
||||||
// type,
|
|
||||||
// data: dummyData
|
|
||||||
// })
|
|
||||||
},
|
|
||||||
};
|
|
||||||
|
|
||||||
export default {
|
|
||||||
namespaced: true,
|
|
||||||
state,
|
|
||||||
mutations,
|
|
||||||
actions,
|
|
||||||
};
|
|
||||||
|
@ -6,7 +6,7 @@
|
|||||||
-->
|
-->
|
||||||
|
|
||||||
<template>
|
<template>
|
||||||
<DoubleRingWrapperVue />
|
<DoubleRingWrapperVue :data-source="dataBundle" :period="period" />
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
<script>
|
<script>
|
||||||
@ -15,9 +15,14 @@ import DoubleRingWrapperVue from "./base/DoubleRingWrapper.vue";
|
|||||||
export default {
|
export default {
|
||||||
name: "BipvOutput",
|
name: "BipvOutput",
|
||||||
components: { DoubleRingWrapperVue },
|
components: { DoubleRingWrapperVue },
|
||||||
props: {},
|
props: {
|
||||||
|
period: {
|
||||||
|
type: String,
|
||||||
|
default: "日",
|
||||||
|
},
|
||||||
|
},
|
||||||
data() {
|
data() {
|
||||||
return {};
|
return { dataBundle: null };
|
||||||
},
|
},
|
||||||
};
|
};
|
||||||
</script>
|
</script>
|
||||||
|
121
src/views/copilot/components/charts/ChipInvest.vue
Normal file
121
src/views/copilot/components/charts/ChipInvest.vue
Normal file
@ -0,0 +1,121 @@
|
|||||||
|
<!--
|
||||||
|
filename: FtoInvest.vue
|
||||||
|
author: liubin
|
||||||
|
date: 2024-04-10 08:59:28
|
||||||
|
description:
|
||||||
|
-->
|
||||||
|
|
||||||
|
<template>
|
||||||
|
<bar-chart-base
|
||||||
|
:legend="legend"
|
||||||
|
:series="series"
|
||||||
|
:xAxis="xAxis"
|
||||||
|
class="fto-chart"
|
||||||
|
/>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
import BarChartBase from "./base/BarChartBase.vue";
|
||||||
|
|
||||||
|
export default {
|
||||||
|
name: "ChipInvest",
|
||||||
|
components: { BarChartBase },
|
||||||
|
data() {
|
||||||
|
// 城市数组的顺序必须是固定的
|
||||||
|
const cities = ["瑞昌", "邯郸", "株洲", "佳木斯", "成都", "凯盛", "蚌埠"];
|
||||||
|
return {
|
||||||
|
xAxis: cities,
|
||||||
|
};
|
||||||
|
},
|
||||||
|
props: {
|
||||||
|
period: {
|
||||||
|
type: String,
|
||||||
|
default: "日",
|
||||||
|
},
|
||||||
|
},
|
||||||
|
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}年${month}月`, color: "#12f7f1" },
|
||||||
|
{ label: `${year - 1}年${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 template =
|
||||||
|
this.period == "日" || this.period == "周"
|
||||||
|
? [
|
||||||
|
{
|
||||||
|
name: "样例数据--2023年",
|
||||||
|
data: Array.from({ length: 7 }, () =>
|
||||||
|
Math.floor(Math.random() * 1000)
|
||||||
|
),
|
||||||
|
},
|
||||||
|
]
|
||||||
|
: [
|
||||||
|
{
|
||||||
|
name: "样例数据--2023年",
|
||||||
|
data: Array.from({ length: 7 }, () =>
|
||||||
|
Math.floor(Math.random() * 1000)
|
||||||
|
),
|
||||||
|
},
|
||||||
|
{
|
||||||
|
name: "样例数据--2024年",
|
||||||
|
data: Array.from({ length: 7 }, () =>
|
||||||
|
Math.floor(Math.random() * 1000)
|
||||||
|
),
|
||||||
|
},
|
||||||
|
];
|
||||||
|
const ftoInvest = this.$store.getters.home.ftoInvest;
|
||||||
|
if (!ftoInvest || !ftoInvest.current || !ftoInvest.previous) {
|
||||||
|
return [
|
||||||
|
{
|
||||||
|
name: "样例数据--2023年",
|
||||||
|
data: Array.from({ length: 7 }, () =>
|
||||||
|
Math.floor(Math.random() * 1000)
|
||||||
|
),
|
||||||
|
},
|
||||||
|
{
|
||||||
|
name: "样例数据--2024年",
|
||||||
|
data: Array.from({ length: 7 }, () =>
|
||||||
|
Math.floor(Math.random() * 1000)
|
||||||
|
),
|
||||||
|
},
|
||||||
|
];
|
||||||
|
}
|
||||||
|
|
||||||
|
return [
|
||||||
|
{
|
||||||
|
name: `${new Date().getFullYear() - 1}年`,
|
||||||
|
data: ftoInvest.previous,
|
||||||
|
},
|
||||||
|
{
|
||||||
|
name: `${new Date().getFullYear()}年`,
|
||||||
|
data: ftoInvest.current,
|
||||||
|
},
|
||||||
|
];
|
||||||
|
},
|
||||||
|
},
|
||||||
|
};
|
||||||
|
</script>
|
@ -6,7 +6,7 @@
|
|||||||
-->
|
-->
|
||||||
|
|
||||||
<template>
|
<template>
|
||||||
<DoubleRingWrapperVue />
|
<DoubleRingWrapperVue :data-source="dataBundle" :period="period" />
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
<script>
|
<script>
|
||||||
@ -15,9 +15,14 @@ import DoubleRingWrapperVue from "./base/DoubleRingWrapper.vue";
|
|||||||
export default {
|
export default {
|
||||||
name: "ChipOutput",
|
name: "ChipOutput",
|
||||||
components: { DoubleRingWrapperVue },
|
components: { DoubleRingWrapperVue },
|
||||||
props: {},
|
props: {
|
||||||
|
period: {
|
||||||
|
type: String,
|
||||||
|
default: "日",
|
||||||
|
},
|
||||||
|
},
|
||||||
data() {
|
data() {
|
||||||
return {};
|
return { dataBundle: null };
|
||||||
},
|
},
|
||||||
};
|
};
|
||||||
</script>
|
</script>
|
||||||
|
@ -6,7 +6,7 @@
|
|||||||
-->
|
-->
|
||||||
|
|
||||||
<template>
|
<template>
|
||||||
<DoubleRingWrapperVue :data-source="dataBundle" :period="period" />
|
<DoubleRingWrapperVue data-source="标准组件输出" :period="period" />
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
<script>
|
<script>
|
||||||
@ -22,7 +22,7 @@ export default {
|
|||||||
},
|
},
|
||||||
},
|
},
|
||||||
data() {
|
data() {
|
||||||
return { dataBundle: null };
|
return {};
|
||||||
},
|
},
|
||||||
};
|
};
|
||||||
</script>
|
</script>
|
||||||
|
@ -9,7 +9,10 @@
|
|||||||
<div class="city-data">
|
<div class="city-data">
|
||||||
<div class="headquarter">
|
<div class="headquarter">
|
||||||
<div class="inner-shadow w-1"></div>
|
<div class="inner-shadow w-1"></div>
|
||||||
<div class="inner-shadow flex-1">凯盛光伏</div>
|
<div class="inner-shadow flex-1 flex">
|
||||||
|
<CityName value="凯盛光伏" />
|
||||||
|
<CityValue :value="headquarterValue" horizontal :period="period" />
|
||||||
|
</div>
|
||||||
<div class="inner-shadow w-1"></div>
|
<div class="inner-shadow w-1"></div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
@ -27,13 +30,20 @@
|
|||||||
|
|
||||||
<script>
|
<script>
|
||||||
import CityItemVue from "./CityItem.vue";
|
import CityItemVue from "./CityItem.vue";
|
||||||
|
import CityNameVue from "./CityName.vue";
|
||||||
|
import CityValueVue from "./CityValue.vue";
|
||||||
|
|
||||||
export default {
|
export default {
|
||||||
name: "CityData",
|
name: "CityData",
|
||||||
components: { CityItem: CityItemVue },
|
components: {
|
||||||
|
CityItem: CityItemVue,
|
||||||
|
CityName: CityNameVue,
|
||||||
|
CityValue: CityValueVue,
|
||||||
|
},
|
||||||
props: {
|
props: {
|
||||||
dataSource: {
|
dataSource: {
|
||||||
type: Object,
|
type: String,
|
||||||
default: () => ({}),
|
default: null,
|
||||||
},
|
},
|
||||||
period: {
|
period: {
|
||||||
type: String,
|
type: String,
|
||||||
@ -41,18 +51,57 @@ export default {
|
|||||||
},
|
},
|
||||||
},
|
},
|
||||||
data() {
|
data() {
|
||||||
return {
|
return {};
|
||||||
cities: [
|
},
|
||||||
{ name: "蚌埠兴科", value: 93111 },
|
computed: {
|
||||||
{ name: "成都", value: 32212 },
|
headquarterValue() {
|
||||||
{ name: "邯郸", value: 7732 },
|
let getterName = "";
|
||||||
{ name: "株洲", value: 71732 },
|
switch (this.dataSource) {
|
||||||
{ name: "瑞昌", value: 23421 },
|
case "标准组件输出":
|
||||||
{ name: "佳木斯", value: 340 },
|
getterName = "stdOutput";
|
||||||
],
|
break;
|
||||||
};
|
case "芯片输出":
|
||||||
|
getterName = "chipOutput";
|
||||||
|
break;
|
||||||
|
case "BIPV输出":
|
||||||
|
getterName = "bipvOutput";
|
||||||
|
break;
|
||||||
|
}
|
||||||
|
return (
|
||||||
|
"" + (this.$store.getters.copilot.yield[getterName]?.current?.[5] ?? 0)
|
||||||
|
);
|
||||||
|
},
|
||||||
|
cities() {
|
||||||
|
let getterName = "";
|
||||||
|
switch (this.dataSource) {
|
||||||
|
case "标准组件输出":
|
||||||
|
getterName = "stdOutput";
|
||||||
|
break;
|
||||||
|
case "芯片输出":
|
||||||
|
getterName = "chipOutput";
|
||||||
|
break;
|
||||||
|
case "BIPV输出":
|
||||||
|
getterName = "bipvOutput";
|
||||||
|
break;
|
||||||
|
}
|
||||||
|
const _cities = [
|
||||||
|
{ name: "瑞昌", value: 0 },
|
||||||
|
{ name: "邯郸", value: 0 },
|
||||||
|
{ name: "株洲", value: 0 },
|
||||||
|
{ name: "佳木斯", value: 0 },
|
||||||
|
{ name: "成都", value: 0 },
|
||||||
|
{ name: "凯盛光伏", value: 0 },
|
||||||
|
{ name: "蚌埠兴科", value: 0 },
|
||||||
|
];
|
||||||
|
this.$store.getters.copilot.yield[getterName]?.current?.forEach(
|
||||||
|
(v, idx) => {
|
||||||
|
_cities[idx].value = v ?? 0;
|
||||||
|
}
|
||||||
|
);
|
||||||
|
_cities.splice(4, 1);
|
||||||
|
return _cities;
|
||||||
|
},
|
||||||
},
|
},
|
||||||
computed: {},
|
|
||||||
mounted() {},
|
mounted() {},
|
||||||
methods: {},
|
methods: {},
|
||||||
};
|
};
|
||||||
@ -77,6 +126,10 @@ export default {
|
|||||||
width: 70px;
|
width: 70px;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.flex {
|
||||||
|
display: flex;
|
||||||
|
}
|
||||||
|
|
||||||
.flex-1 {
|
.flex-1 {
|
||||||
flex: 1;
|
flex: 1;
|
||||||
}
|
}
|
||||||
@ -90,7 +143,6 @@ export default {
|
|||||||
flex: 3;
|
flex: 3;
|
||||||
display: grid;
|
display: grid;
|
||||||
grid-template-columns: repeat(2, 1fr);
|
grid-template-columns: repeat(2, 1fr);
|
||||||
background: #ccc3;
|
|
||||||
gap: 8px;
|
gap: 8px;
|
||||||
}
|
}
|
||||||
</style>
|
</style>
|
||||||
|
@ -7,44 +7,22 @@
|
|||||||
|
|
||||||
<template>
|
<template>
|
||||||
<div class="city-item inner-shadow">
|
<div class="city-item inner-shadow">
|
||||||
<div class="item-location">
|
<CityName :value="location" />
|
||||||
<img src="#" alt="" />
|
<CityValue :value="value+''" :period="period" />
|
||||||
<span>{{ location }}</span>
|
|
||||||
</div>
|
|
||||||
<div class="item-value" style="position: relative; flex: 1">
|
|
||||||
<div
|
|
||||||
class=""
|
|
||||||
style="
|
|
||||||
width: 100%;
|
|
||||||
position: absolute;
|
|
||||||
top: 12%;
|
|
||||||
left: 50%;
|
|
||||||
transform: translateX(-25%);
|
|
||||||
overflow: hidden;
|
|
||||||
"
|
|
||||||
>
|
|
||||||
<GradientTextVue :text="'' + value" />
|
|
||||||
</div>
|
|
||||||
<span
|
|
||||||
style="
|
|
||||||
width: 100%;
|
|
||||||
font-size: 14px;
|
|
||||||
line-height: 16px;
|
|
||||||
position: absolute;
|
|
||||||
top: 56%;
|
|
||||||
left: 24%;
|
|
||||||
"
|
|
||||||
>{{ period == "日" ? "今日产出" : "本周产出" }}</span
|
|
||||||
>
|
|
||||||
</div>
|
|
||||||
</div>
|
</div>
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
<script>
|
<script>
|
||||||
|
import CityNameVue from "./CityName.vue";
|
||||||
|
import CityValueVue from "./CityValue.vue";
|
||||||
import GradientTextVue from "./GradientText.vue";
|
import GradientTextVue from "./GradientText.vue";
|
||||||
export default {
|
export default {
|
||||||
name: "CityItem",
|
name: "CityItem",
|
||||||
components: { GradientTextVue },
|
components: {
|
||||||
|
GradientTextVue,
|
||||||
|
CityName: CityNameVue,
|
||||||
|
CityValue: CityValueVue,
|
||||||
|
},
|
||||||
props: {
|
props: {
|
||||||
location: {
|
location: {
|
||||||
type: String,
|
type: String,
|
||||||
@ -71,7 +49,6 @@ export default {
|
|||||||
<style scoped lang="scss">
|
<style scoped lang="scss">
|
||||||
.city-item {
|
.city-item {
|
||||||
display: flex;
|
display: flex;
|
||||||
gap: 8px;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
.inner-shadow {
|
.inner-shadow {
|
||||||
|
55
src/views/copilot/components/charts/base/CityName.vue
Normal file
55
src/views/copilot/components/charts/base/CityName.vue
Normal file
@ -0,0 +1,55 @@
|
|||||||
|
<!--
|
||||||
|
filename: CityName.vue
|
||||||
|
author: liubin
|
||||||
|
date: 2024-04-10 08:59:28
|
||||||
|
description:
|
||||||
|
-->
|
||||||
|
|
||||||
|
<template>
|
||||||
|
<div class="city-name">
|
||||||
|
<img :src="Icon" alt="city icon" />
|
||||||
|
<span>{{ value }}</span>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
import Icon from "./icon.png";
|
||||||
|
|
||||||
|
export default {
|
||||||
|
name: "CityName",
|
||||||
|
props: {
|
||||||
|
value: {
|
||||||
|
type: String,
|
||||||
|
default: "",
|
||||||
|
},
|
||||||
|
},
|
||||||
|
data() {
|
||||||
|
return { Icon };
|
||||||
|
},
|
||||||
|
};
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style scoped>
|
||||||
|
.city-name {
|
||||||
|
min-width: 80px;
|
||||||
|
margin: auto;
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: center;
|
||||||
|
padding: 0 8px;
|
||||||
|
flex: 1;
|
||||||
|
}
|
||||||
|
|
||||||
|
img {
|
||||||
|
/* width: 32px; */
|
||||||
|
width: 1.543vw;
|
||||||
|
}
|
||||||
|
|
||||||
|
span {
|
||||||
|
/* font-size: 12px; */
|
||||||
|
font-size: 0.77vw;
|
||||||
|
letter-spacing: 2px;
|
||||||
|
text-align: center;
|
||||||
|
}
|
||||||
|
</style>
|
127
src/views/copilot/components/charts/base/CityValue.vue
Normal file
127
src/views/copilot/components/charts/base/CityValue.vue
Normal file
@ -0,0 +1,127 @@
|
|||||||
|
<!--
|
||||||
|
filename: CityValue.vue
|
||||||
|
author: liubin
|
||||||
|
date: 2024-04-10 08:59:28
|
||||||
|
description:
|
||||||
|
-->
|
||||||
|
|
||||||
|
<template>
|
||||||
|
<div class="city-value" :class="[horizontal ? 'horizontal' : '']">
|
||||||
|
<span class="hint" :class="[horizontal ? 'horizontal' : '']">{{
|
||||||
|
period == "周" ? "本周产出" : "今日产出"
|
||||||
|
}}</span>
|
||||||
|
<span class="value" :class="[horizontal ? 'horizontal' : '']">{{
|
||||||
|
value | numberFilter
|
||||||
|
}}</span>
|
||||||
|
<!-- <GradientTextVue :text="value" :size="horizontal ? 32 : 26" /> -->
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
import GradientTextVue from "./GradientText.vue";
|
||||||
|
|
||||||
|
export default {
|
||||||
|
name: "CityValue",
|
||||||
|
components: { GradientTextVue },
|
||||||
|
props: {
|
||||||
|
period: {
|
||||||
|
type: String,
|
||||||
|
default: "日",
|
||||||
|
},
|
||||||
|
value: {
|
||||||
|
type: String,
|
||||||
|
default: "",
|
||||||
|
},
|
||||||
|
horizontal: {
|
||||||
|
type: Boolean,
|
||||||
|
default: false,
|
||||||
|
},
|
||||||
|
},
|
||||||
|
filters: {
|
||||||
|
numberFilter(value) {
|
||||||
|
if (value != null && !isNaN(parseInt(value))) {
|
||||||
|
return parseInt(value).toLocaleString();
|
||||||
|
} else {
|
||||||
|
return value;
|
||||||
|
}
|
||||||
|
},
|
||||||
|
},
|
||||||
|
data() {
|
||||||
|
return {};
|
||||||
|
},
|
||||||
|
};
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style scoped>
|
||||||
|
.city-value {
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: center;
|
||||||
|
padding: 0 8px;
|
||||||
|
flex: 2;
|
||||||
|
position: relative;
|
||||||
|
}
|
||||||
|
|
||||||
|
.city-value.horizontal {
|
||||||
|
flex-direction: row;
|
||||||
|
}
|
||||||
|
|
||||||
|
.city-value::after {
|
||||||
|
content: "";
|
||||||
|
position: absolute;
|
||||||
|
top: 0;
|
||||||
|
left: 0;
|
||||||
|
width: 1px;
|
||||||
|
height: 100%;
|
||||||
|
background: linear-gradient(
|
||||||
|
to bottom,
|
||||||
|
transparent 20%,
|
||||||
|
#fff 50%,
|
||||||
|
transparent 80%
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
span.hint {
|
||||||
|
margin: 0 0.77vw;
|
||||||
|
font-size: 0.77vw;
|
||||||
|
order: 2;
|
||||||
|
/* margin: 0 12px;
|
||||||
|
width: 32px;
|
||||||
|
font-size: 12px; */
|
||||||
|
}
|
||||||
|
|
||||||
|
span.hint.horizontal {
|
||||||
|
margin: 0 1.235vw;
|
||||||
|
width: 1.543vw;
|
||||||
|
order: 1;
|
||||||
|
font-size: 0.77vw;
|
||||||
|
/* margin: 0 12px;
|
||||||
|
width: 32px;
|
||||||
|
font-size: 12px; */
|
||||||
|
}
|
||||||
|
|
||||||
|
.value {
|
||||||
|
color: #4dd2fe;
|
||||||
|
text-align: center;
|
||||||
|
font-size: 1.132vw;
|
||||||
|
order: 1;
|
||||||
|
}
|
||||||
|
.value.horizontal {
|
||||||
|
text-align: left;
|
||||||
|
flex: 1;
|
||||||
|
font-size: 1.543vw;
|
||||||
|
order: 2;
|
||||||
|
}
|
||||||
|
|
||||||
|
svg,
|
||||||
|
.value {
|
||||||
|
width: 100px;
|
||||||
|
order: 1;
|
||||||
|
}
|
||||||
|
|
||||||
|
.value.horizontal,
|
||||||
|
svg.horizontal {
|
||||||
|
order: 2;
|
||||||
|
}
|
||||||
|
</style>
|
@ -26,15 +26,15 @@
|
|||||||
import CopilotSelect from "../../select.vue";
|
import CopilotSelect from "../../select.vue";
|
||||||
import fetcher from "./fetcherDoubleRing";
|
import fetcher from "./fetcherDoubleRing";
|
||||||
import DoubleRingChartVue from "./DoubleRingChart.vue";
|
import DoubleRingChartVue from "./DoubleRingChart.vue";
|
||||||
import CityData from './CityData.vue';
|
import CityData from "./CityData.vue";
|
||||||
|
|
||||||
export default {
|
export default {
|
||||||
name: "DoubleRingWrapper",
|
name: "DoubleRingWrapper",
|
||||||
components: { CopilotSelect, DoubleRingChartVue, CityData },
|
components: { CopilotSelect, DoubleRingChartVue, CityData },
|
||||||
props: {
|
props: {
|
||||||
dataSource: {
|
dataSource: {
|
||||||
type: Object,
|
type: String,
|
||||||
default: () => ({}),
|
default: null,
|
||||||
},
|
},
|
||||||
period: {
|
period: {
|
||||||
type: String,
|
type: String,
|
||||||
|
@ -6,7 +6,7 @@
|
|||||||
-->
|
-->
|
||||||
|
|
||||||
<template>
|
<template>
|
||||||
<svg height="32" width="100%">
|
<svg :height="size + 8" width="100%">
|
||||||
<defs>
|
<defs>
|
||||||
<linearGradient id="smoke-text" x1="0%" y1="0%" x2="0%" y2="100%">
|
<linearGradient id="smoke-text" x1="0%" y1="0%" x2="0%" y2="100%">
|
||||||
<stop offset="0%" style="stop-color: #00fff4; stop-opacity: 1" />
|
<stop offset="0%" style="stop-color: #00fff4; stop-opacity: 1" />
|
||||||
@ -15,9 +15,13 @@
|
|||||||
</defs>
|
</defs>
|
||||||
<text
|
<text
|
||||||
x="0"
|
x="0"
|
||||||
y="24"
|
:y="size"
|
||||||
fill="url(#smoke-text)"
|
fill="url(#smoke-text)"
|
||||||
:style="{ fontSize: '24px', letterSpacing: spacing || '2px' }"
|
:style="{
|
||||||
|
fontSize: `${size}px`,
|
||||||
|
letterSpacing: spacing || '2px',
|
||||||
|
fontFamily: 'Calibri, Verdana, sans-serif',
|
||||||
|
}"
|
||||||
>
|
>
|
||||||
{{ text | numberFilter }}
|
{{ text | numberFilter }}
|
||||||
</text>
|
</text>
|
||||||
@ -37,6 +41,10 @@ export default {
|
|||||||
type: String,
|
type: String,
|
||||||
default: "1px",
|
default: "1px",
|
||||||
},
|
},
|
||||||
|
size: {
|
||||||
|
type: Number,
|
||||||
|
default: 24,
|
||||||
|
},
|
||||||
},
|
},
|
||||||
filters: {
|
filters: {
|
||||||
numberFilter(value) {
|
numberFilter(value) {
|
||||||
|
BIN
src/views/copilot/components/charts/base/icon.png
Normal file
BIN
src/views/copilot/components/charts/base/icon.png
Normal file
Binary file not shown.
After Width: | Height: | Size: 5.0 KiB |
@ -42,6 +42,14 @@ export default {
|
|||||||
period: "日",
|
period: "日",
|
||||||
};
|
};
|
||||||
},
|
},
|
||||||
|
// mounted() {
|
||||||
|
// document.body.style.minHeight = "1024px";
|
||||||
|
// document.body.style.minWidth = "1550px";
|
||||||
|
// },
|
||||||
|
// destroyed() {
|
||||||
|
// document.body.style.minHeight = "1024px";
|
||||||
|
// document.body.style.minWidth = "1550px";
|
||||||
|
// },
|
||||||
};
|
};
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
|
@ -12,21 +12,19 @@
|
|||||||
<std-output :period="period" />
|
<std-output :period="period" />
|
||||||
</db-container>
|
</db-container>
|
||||||
<db-container class="chip-yield" title="芯片产出" icon="chip2">
|
<db-container class="chip-yield" title="芯片产出" icon="chip2">
|
||||||
<chip-output />
|
<chip-output :period="period" />
|
||||||
</db-container>
|
</db-container>
|
||||||
<db-container class="bipv-yield" title="BIPV产出" icon="bipv">
|
<db-container class="bipv-yield" title="BIPV产出" icon="bipv">
|
||||||
<bipv-output />
|
<bipv-output :period="period" />
|
||||||
</db-container>
|
</db-container>
|
||||||
</section>
|
</section>
|
||||||
<section class="bottom flex">
|
<section class="bottom flex">
|
||||||
<db-container class="fto-involve" title="FTO投入">
|
<db-container class="fto-involve" title="FTO投入">
|
||||||
<fto-invest :period="period" />
|
<fto-invest :period="period" />
|
||||||
</db-container>
|
</db-container>
|
||||||
<db-container
|
<db-container class="chip-involve" title="芯片投入" icon="chip">
|
||||||
class="chip-involve"
|
<chip-invest :period="period" />
|
||||||
title="芯片投入"
|
</db-container>
|
||||||
icon="chip"
|
|
||||||
></db-container>
|
|
||||||
</section>
|
</section>
|
||||||
</div>
|
</div>
|
||||||
</template>
|
</template>
|
||||||
@ -37,6 +35,7 @@ import StdOutputVue from "../components/charts/StdOutput.vue";
|
|||||||
import ChipOutputVue from "../components/charts/ChipOutput.vue";
|
import ChipOutputVue from "../components/charts/ChipOutput.vue";
|
||||||
import FtoInvestVue from "../components/charts/FtoInvest.vue";
|
import FtoInvestVue from "../components/charts/FtoInvest.vue";
|
||||||
import BipvOutputVue from "../components/charts/BipvOutput.vue";
|
import BipvOutputVue from "../components/charts/BipvOutput.vue";
|
||||||
|
import ChipInvestVue from "../components/charts/ChipInvest.vue";
|
||||||
|
|
||||||
export default {
|
export default {
|
||||||
name: "YieldCopilot",
|
name: "YieldCopilot",
|
||||||
@ -45,7 +44,8 @@ export default {
|
|||||||
StdOutput: StdOutputVue,
|
StdOutput: StdOutputVue,
|
||||||
ChipOutput: ChipOutputVue,
|
ChipOutput: ChipOutputVue,
|
||||||
BipvOutput: BipvOutputVue,
|
BipvOutput: BipvOutputVue,
|
||||||
FtoInvest: FtoInvestVue
|
FtoInvest: FtoInvestVue,
|
||||||
|
ChipInvest: ChipInvestVue,
|
||||||
},
|
},
|
||||||
props: {
|
props: {
|
||||||
period: {
|
period: {
|
||||||
@ -56,7 +56,6 @@ export default {
|
|||||||
data() {
|
data() {
|
||||||
return {};
|
return {};
|
||||||
},
|
},
|
||||||
computed: {},
|
|
||||||
watch: {
|
watch: {
|
||||||
period: {
|
period: {
|
||||||
handler(val) {
|
handler(val) {
|
||||||
@ -67,7 +66,8 @@ export default {
|
|||||||
},
|
},
|
||||||
methods: {
|
methods: {
|
||||||
fetchData(period = "日") {
|
fetchData(period = "日") {
|
||||||
this.$store.dispatch("copilot/initCopilot", { period });
|
console.log(`产量驾驶舱,获取${period}数据`);
|
||||||
|
this.$store.dispatch("copilot/initCopilot", { period, source: "yield" });
|
||||||
},
|
},
|
||||||
},
|
},
|
||||||
};
|
};
|
||||||
|
Loading…
Reference in New Issue
Block a user