优化驾驶舱代码结构 #11
4
.env.dev
4
.env.dev
@ -5,8 +5,8 @@ ENV = 'development'
|
||||
VUE_APP_TITLE = 芋道管理系统
|
||||
|
||||
# 芋道管理系统/开发环境
|
||||
# VUE_APP_BASE_API = 'http://192.168.1.61:48080'
|
||||
VUE_APP_BASE_API = 'http://glass.kszny.picaiba.com'
|
||||
VUE_APP_BASE_API = 'http://192.168.1.61:48080'
|
||||
# VUE_APP_BASE_API = 'http://glass.kszny.picaiba.com'
|
||||
|
||||
# 路由懒加载
|
||||
VUE_CLI_BABEL_TRANSPILE_MODULES = true
|
||||
|
@ -18,6 +18,7 @@ const state = {
|
||||
efficiency: {},
|
||||
},
|
||||
home: {
|
||||
/** 主页状态 */
|
||||
ftoInvest: null,
|
||||
chipInvest: null,
|
||||
chipOutput: null,
|
||||
@ -65,13 +66,13 @@ const actions = {
|
||||
async initCopilot({ commit }, { period, source }) {
|
||||
const fetcher = {
|
||||
yield: getCopilotYield,
|
||||
energy: null,
|
||||
efficiency: null,
|
||||
energy: getCopilotEnergy,
|
||||
efficiency: getCopilotEfficiency,
|
||||
}[source];
|
||||
// 获取产量数据
|
||||
let { data: factoryList, type } = await fetcher(period);
|
||||
let targetList = null;
|
||||
if (source === "yield") {
|
||||
if (source === "yield" || source === "efficiency") {
|
||||
// 获取目标数据
|
||||
let { data } = await fetcher(period, true);
|
||||
targetList = data;
|
||||
@ -88,8 +89,8 @@ export default {
|
||||
actions,
|
||||
};
|
||||
|
||||
// utils function
|
||||
function splitCurrentAndPrevious(factoryListResponse, targetListResponse) {
|
||||
// 初始数据
|
||||
const { chipInvest, ftoInvest, chipOutput, stdOutput, bipvOutput } = init();
|
||||
if (factoryListResponse) {
|
||||
for (const factory of factoryListResponse) {
|
||||
@ -148,6 +149,10 @@ function getFactoryTargetValue(targetList, factoryId) {
|
||||
};
|
||||
}
|
||||
|
||||
/**
|
||||
*
|
||||
* @returns 初始化状态值
|
||||
*/
|
||||
function init() {
|
||||
const t_ = {
|
||||
current: Array(7).fill(0),
|
||||
@ -168,11 +173,11 @@ function init() {
|
||||
const bipvOutput = deepClone(chipOutput);
|
||||
|
||||
return {
|
||||
chipInvest,
|
||||
ftoInvest,
|
||||
chipOutput,
|
||||
stdOutput,
|
||||
bipvOutput,
|
||||
chipInvest, // 芯片投入
|
||||
ftoInvest, // FTO投入
|
||||
chipOutput, // 芯片产出
|
||||
stdOutput, // 标准组件产出
|
||||
bipvOutput, // BIPV产出
|
||||
};
|
||||
}
|
||||
|
||||
@ -210,13 +215,33 @@ async function getHomeTarget() {
|
||||
return null;
|
||||
}
|
||||
|
||||
async function fetcher(type = "yield", params) {
|
||||
function getUrl(copilot_module) {
|
||||
let url = {
|
||||
// 对比数据的 URL
|
||||
comparison: "",
|
||||
// 目标数据的 URL
|
||||
target: "",
|
||||
};
|
||||
switch (copilot_module) {
|
||||
case "yield":
|
||||
url.comparison = "/ip/prod-output/query-by-date";
|
||||
url.target = "/ip/prod-target/query-by-date";
|
||||
break;
|
||||
case "energy":
|
||||
break;
|
||||
case "efficiency":
|
||||
url.comparison = "/ip/prod-output/query-Rate-List";
|
||||
url.target = "/ip/prod-target/query-rate-target";
|
||||
break;
|
||||
}
|
||||
|
||||
return url;
|
||||
}
|
||||
|
||||
async function doFetch(copilot_module = "yield", fetch_target, params) {
|
||||
const url = getUrl(copilot_module);
|
||||
const { code, data } = await axios.post(
|
||||
type == "yield"
|
||||
? // 产量 数据
|
||||
"/ip/prod-output/query-by-date"
|
||||
: // 目标数据
|
||||
"/ip/prod-target/query-by-date",
|
||||
fetch_target ? url.target : url.comparison,
|
||||
{
|
||||
...params,
|
||||
}
|
||||
@ -224,17 +249,36 @@ async function fetcher(type = "yield", params) {
|
||||
if (code == 0) {
|
||||
return data;
|
||||
}
|
||||
console.warn("getCopilotYield failed, code: ", code);
|
||||
console.warn("[doFetch] failed, code: ", code);
|
||||
return null;
|
||||
}
|
||||
|
||||
/**
|
||||
*
|
||||
* @param {*} period 日周月年1,2,3,4
|
||||
* @param {*} target 是否获取目标数据
|
||||
* @returns
|
||||
*/
|
||||
function getCopilotYield(period, target = false) {
|
||||
return getCopilotData("yield", period, target);
|
||||
}
|
||||
|
||||
function getCopilotEnergy(period, target = false) {
|
||||
return getCopilotData("energy", period, target);
|
||||
}
|
||||
|
||||
function getCopilotEfficiency(period, target = false) {
|
||||
return getCopilotData("efficiency", period, target);
|
||||
}
|
||||
|
||||
/**
|
||||
*
|
||||
* @param {*} period 周期: 日周月年
|
||||
* @param {*} target 是否获取目标数据:默认 否
|
||||
* @returns
|
||||
*/
|
||||
async function getCopilotYield(period, target = false) {
|
||||
async function getCopilotData(copilot_module, period, target = false) {
|
||||
if (!copilot_module) copilot_module = "yield";
|
||||
// 请求参数,直接一次性获取所有工厂
|
||||
let queryParams = {
|
||||
factorys: [],
|
||||
@ -260,7 +304,7 @@ async function getCopilotYield(period, target = false) {
|
||||
}
|
||||
|
||||
return {
|
||||
data: await fetcher(target ? "target" : "yield", queryParams),
|
||||
type: "yield",
|
||||
data: await doFetch(copilot_module, target ? true : false, queryParams),
|
||||
type: copilot_module,
|
||||
};
|
||||
}
|
||||
|
69
src/views/copilot/components/ChartContainer.vue
Normal file
69
src/views/copilot/components/ChartContainer.vue
Normal file
@ -0,0 +1,69 @@
|
||||
<!--
|
||||
filename: ChartContainer.vue
|
||||
author: liubin
|
||||
date: 2024-04-10 08:54:33
|
||||
description:
|
||||
todo: 驾驶舱和首页的 ChartContainer, 实现滑动条 和动态宽高
|
||||
-->
|
||||
|
||||
<template>
|
||||
<div class="chart-container" :class="{ 'no-scroll': noScroll }">
|
||||
<slot />
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
name: "ChartContainer",
|
||||
components: {},
|
||||
props: {
|
||||
noScroll: {
|
||||
type: Boolean,
|
||||
default: false,
|
||||
},
|
||||
},
|
||||
data() {
|
||||
return {};
|
||||
},
|
||||
computed: {},
|
||||
methods: {},
|
||||
};
|
||||
</script>
|
||||
|
||||
<style scoped lang="scss">
|
||||
.chart-container {
|
||||
height: 0;
|
||||
flex: 1;
|
||||
overflow-x: scroll;
|
||||
}
|
||||
|
||||
.no-scroll::-webkit-scrollbar {
|
||||
width: 0;
|
||||
height: 0;
|
||||
}
|
||||
|
||||
::-webkit-scrollbar {
|
||||
width: 8px;
|
||||
height: 8px;
|
||||
}
|
||||
|
||||
::-webkit-scrollbar-button {
|
||||
width: 0;
|
||||
height: 0;
|
||||
// width: 10px;
|
||||
// height: 10px;
|
||||
// background: #14305f;
|
||||
}
|
||||
|
||||
::-webkit-scrollbar-track {
|
||||
background: #14305f;
|
||||
border: 0 none;
|
||||
border-radius: 0;
|
||||
}
|
||||
|
||||
::-webkit-scrollbar-thumb {
|
||||
background: #004798;
|
||||
border: 0 none;
|
||||
border-radius: 6px;
|
||||
}
|
||||
</style>
|
@ -1,10 +0,0 @@
|
||||
export default {
|
||||
getData: async function (url) {
|
||||
//
|
||||
return await new Promise((resolve, reject) => {
|
||||
setTimeout(() => {
|
||||
resolve([90119, 40801, 44028]);
|
||||
}, 1200);
|
||||
});
|
||||
},
|
||||
};
|
@ -7,23 +7,41 @@
|
||||
|
||||
<template>
|
||||
<div class="efficiency-copilot">
|
||||
<db-container title="芯片良率" icon="chip2"></db-container>
|
||||
<db-container title="标准组件良率" icon="std"></db-container>
|
||||
<db-container title="芯片OEE" icon="chip"></db-container>
|
||||
<db-container title="转化效率" icon="cube"></db-container>
|
||||
<Container title="芯片良率" icon="chip2"></Container>
|
||||
<Container title="标准组件良率" icon="std"></Container>
|
||||
<Container title="芯片OEE" icon="chip"></Container>
|
||||
<Container title="转化效率" icon="cube"></Container>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import Container from "../../dashboard/components/Container.vue";
|
||||
import Container from "@/views/copilot/components/Container.vue";
|
||||
export default {
|
||||
name: "EfficiencyCopilot",
|
||||
components: { DbContainer: Container },
|
||||
components: { Container },
|
||||
props: {
|
||||
period: {
|
||||
type: String,
|
||||
default: "日",
|
||||
},
|
||||
},
|
||||
data() {
|
||||
return {};
|
||||
},
|
||||
computed: {},
|
||||
methods: {},
|
||||
watch: {
|
||||
period: {
|
||||
handler(val) {
|
||||
val && this.fetchData(val);
|
||||
},
|
||||
immediate: true,
|
||||
},
|
||||
},
|
||||
methods: {
|
||||
fetchData(period = "日") {
|
||||
console.log(`效率驾驶舱,获取${period}数据`);
|
||||
this.$store.dispatch("copilot/initCopilot", { period, source: "efficiency" });
|
||||
},
|
||||
},
|
||||
};
|
||||
</script>
|
||||
|
||||
|
Przed Szerokość: | Wysokość: | Rozmiar: 5.0 KiB Po Szerokość: | Wysokość: | Rozmiar: 5.0 KiB |
@ -10,7 +10,7 @@
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import DoubleRingWrapperVue from "./base/DoubleRingWrapper.vue";
|
||||
import DoubleRingWrapperVue from "./sub/ring/DoubleRingWrapper.vue";
|
||||
|
||||
export default {
|
||||
name: "BipvOutput",
|
@ -6,7 +6,7 @@
|
||||
-->
|
||||
|
||||
<template>
|
||||
<bar-chart-base
|
||||
<BarChartBase
|
||||
:legend="legend"
|
||||
:series="series"
|
||||
:xAxis="xAxis"
|
||||
@ -16,7 +16,7 @@
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import BarChartBase from "./base/BarChartBase.vue";
|
||||
import BarChartBase from "./sub/bar/BarChartBase.vue";
|
||||
|
||||
export default {
|
||||
name: "ChipInvest",
|
@ -10,7 +10,7 @@
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import DoubleRingWrapperVue from "./base/DoubleRingWrapper.vue";
|
||||
import DoubleRingWrapperVue from "./sub/ring/DoubleRingWrapper.vue";
|
||||
|
||||
export default {
|
||||
name: "ChipOutput",
|
@ -6,7 +6,7 @@
|
||||
-->
|
||||
|
||||
<template>
|
||||
<bar-chart-base
|
||||
<BarChartBase
|
||||
:legend="legend"
|
||||
:series="series"
|
||||
:xAxis="xAxis"
|
||||
@ -16,7 +16,7 @@
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import BarChartBase from "./base/BarChartBase.vue";
|
||||
import BarChartBase from "./sub/bar/BarChartBase.vue";
|
||||
|
||||
export default {
|
||||
name: "FtoInvest",
|
@ -10,7 +10,7 @@
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import DoubleRingWrapperVue from "./base/DoubleRingWrapper.vue";
|
||||
import DoubleRingWrapperVue from "./sub/ring/DoubleRingWrapper.vue";
|
||||
|
||||
export default {
|
||||
name: "StdOutput",
|
@ -26,13 +26,13 @@
|
||||
|
||||
<script>
|
||||
import screenfull from "screenfull";
|
||||
import ChartContainerVue from "../../../../components/ChartContainer.vue";
|
||||
import ChartContainer from "../../../../components/ChartContainer.vue";
|
||||
import chartMixin from "@/mixins/chart.js";
|
||||
|
||||
export default {
|
||||
name: "BarChartBase",
|
||||
components: {
|
||||
ChartContainer: ChartContainerVue,
|
||||
ChartContainer,
|
||||
},
|
||||
mixins: [chartMixin],
|
||||
props: {
|
@ -98,6 +98,7 @@ export default {
|
||||
_cities[idx].value = v ?? 0;
|
||||
}
|
||||
);
|
||||
// 删掉凯盛光伏
|
||||
_cities.splice(4, 1);
|
||||
return _cities;
|
||||
},
|
@ -8,14 +8,15 @@
|
||||
<template>
|
||||
<div class="city-item inner-shadow">
|
||||
<CityName :value="location" />
|
||||
<CityValue :value="value+''" :period="period" />
|
||||
<CityValue :value="value + ''" :period="period" />
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import CityNameVue from "./CityName.vue";
|
||||
import CityValueVue from "./CityValue.vue";
|
||||
import GradientTextVue from "./GradientText.vue";
|
||||
import GradientTextVue from "../gradient/GradientText.vue";
|
||||
|
||||
export default {
|
||||
name: "CityItem",
|
||||
components: {
|
@ -13,7 +13,7 @@
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import Icon from "./icon.png";
|
||||
import Icon from "../../../assets/icon.png";
|
||||
|
||||
export default {
|
||||
name: "CityName",
|
@ -18,7 +18,7 @@
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import GradientTextVue from "./GradientText.vue";
|
||||
import GradientTextVue from "../gradient/GradientText.vue";
|
||||
|
||||
export default {
|
||||
name: "CityValue",
|
@ -8,7 +8,7 @@
|
||||
<template>
|
||||
<div class="double-ring-chart">
|
||||
<div ref="chart" class="double-ring-chart__container"></div>
|
||||
<!-- :style="{ height: vHeight + 'vh' }" -->
|
||||
<!-- style="{ height: vHeight + 'vh' }" -->
|
||||
<div class="double-ring-chart__legend">
|
||||
<div v-for="item in legendItems" :key="item.label" class="legend-item">
|
||||
<span class="legend-item__label">{{ item.label }}</span>
|
||||
@ -21,7 +21,7 @@
|
||||
<script>
|
||||
import chartMixin from "@/mixins/chart.js";
|
||||
import fullscreenMixin from "@/mixins/fullscreen.js";
|
||||
import getOptions from "./double-ring-chart-options";
|
||||
import getOptions from "../../../options/double-ring-chart-options";
|
||||
|
||||
export default {
|
||||
name: "DoubleRingChart",
|
||||
@ -75,6 +75,7 @@ export default {
|
||||
getter.current[this.factoryId],
|
||||
];
|
||||
}
|
||||
// [100, 200, 200]
|
||||
return [
|
||||
getter.previous[this.factoryId],
|
||||
getter.current[this.factoryId],
|
@ -27,9 +27,9 @@
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import CopilotSelect from "../../select.vue";
|
||||
import CopilotSelect from "@/views/copilot/components/select.vue";
|
||||
import DoubleRingChartVue from "./DoubleRingChart.vue";
|
||||
import CityData from "./CityData.vue";
|
||||
import CityData from "../city/CityData.vue";
|
||||
|
||||
export default {
|
||||
name: "DoubleRingWrapper",
|
@ -30,22 +30,22 @@
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import Container from "../components/Container.vue";
|
||||
import StdOutputVue from "../components/charts/StdOutput.vue";
|
||||
import ChipOutputVue from "../components/charts/ChipOutput.vue";
|
||||
import FtoInvestVue from "../components/charts/FtoInvest.vue";
|
||||
import BipvOutputVue from "../components/charts/BipvOutput.vue";
|
||||
import ChipInvestVue from "../components/charts/ChipInvest.vue";
|
||||
import Container from "@/views/copilot/components/Container.vue";
|
||||
import StdOutput from "./components/StdOutput.vue";
|
||||
import ChipOutput from "./components/ChipOutput.vue";
|
||||
import FtoInvest from "./components/FtoInvest.vue";
|
||||
import BipvOutput from "./components/BipvOutput.vue";
|
||||
import ChipInvest from "./components/ChipInvest.vue";
|
||||
|
||||
export default {
|
||||
name: "YieldCopilot",
|
||||
components: {
|
||||
DbContainer: Container,
|
||||
StdOutput: StdOutputVue,
|
||||
ChipOutput: ChipOutputVue,
|
||||
BipvOutput: BipvOutputVue,
|
||||
FtoInvest: FtoInvestVue,
|
||||
ChipInvest: ChipInvestVue,
|
||||
StdOutput,
|
||||
ChipOutput,
|
||||
BipvOutput,
|
||||
FtoInvest,
|
||||
ChipInvest,
|
||||
},
|
||||
props: {
|
||||
period: {
|
||||
|
@ -12,7 +12,7 @@
|
||||
<h2>{{ info.companyName }}</h2>
|
||||
<ul>
|
||||
<li v-for="item in info.items" :key="item.label">
|
||||
{{ item.label }} {{ item.value | currency }}
|
||||
{{ item.label }} {{ item.value | numberFilter }}
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
@ -35,8 +35,12 @@ export default {
|
||||
},
|
||||
},
|
||||
filters: {
|
||||
currency(value) {
|
||||
return value.toLocaleString();
|
||||
numberFilter(value) {
|
||||
if (value != null && !isNaN(parseInt(value))) {
|
||||
return parseInt(value).toLocaleString();
|
||||
} else {
|
||||
return '-';
|
||||
}
|
||||
},
|
||||
},
|
||||
data() {
|
||||
|
Ładowanie…
Reference in New Issue
Block a user