#11 优化驾驶舱代码结构

Fusionado
g7hoo fusionados 4 commits de projects/mescc/lb en projects/mescc/develop hace 4 meses
  1. +2
    -2
      .env.dev
  2. +63
    -19
      src/store/modules/home.js
  3. +69
    -0
      src/views/copilot/components/ChartContainer.vue
  4. +0
    -10
      src/views/copilot/components/charts/base/fetcherDoubleRing.js
  5. +0
    -0
      src/views/copilot/components/name.vue
  6. +26
    -8
      src/views/copilot/efficiency/index.vue
  7. +0
    -0
      src/views/copilot/yield/assets/icon.png
  8. +1
    -1
      src/views/copilot/yield/components/BipvOutput.vue
  9. +2
    -2
      src/views/copilot/yield/components/ChipInvest.vue
  10. +1
    -1
      src/views/copilot/yield/components/ChipOutput.vue
  11. +2
    -2
      src/views/copilot/yield/components/FtoInvest.vue
  12. +1
    -1
      src/views/copilot/yield/components/StdOutput.vue
  13. +2
    -2
      src/views/copilot/yield/components/sub/bar/BarChartBase.vue
  14. +1
    -0
      src/views/copilot/yield/components/sub/city/CityData.vue
  15. +3
    -2
      src/views/copilot/yield/components/sub/city/CityItem.vue
  16. +1
    -1
      src/views/copilot/yield/components/sub/city/CityName.vue
  17. +1
    -1
      src/views/copilot/yield/components/sub/city/CityValue.vue
  18. +0
    -0
      src/views/copilot/yield/components/sub/gradient/GradientText.vue
  19. +3
    -2
      src/views/copilot/yield/components/sub/ring/DoubleRingChart.vue
  20. +2
    -2
      src/views/copilot/yield/components/sub/ring/DoubleRingWrapper.vue
  21. +11
    -11
      src/views/copilot/yield/index.vue
  22. +0
    -0
      src/views/copilot/yield/options/double-ring-chart-options.js
  23. +7
    -3
      src/views/dashboard/components/CompanyInfo.vue

+ 2
- 2
.env.dev Ver fichero

@@ -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


+ 63
- 19
src/store/modules/home.js Ver fichero

@@ -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
- 0
src/views/copilot/components/ChartContainer.vue Ver fichero

@@ -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>

+ 0
- 10
src/views/copilot/components/charts/base/fetcherDoubleRing.js Ver fichero

@@ -1,10 +0,0 @@
export default {
getData: async function (url) {
//
return await new Promise((resolve, reject) => {
setTimeout(() => {
resolve([90119, 40801, 44028]);
}, 1200);
});
},
};

+ 0
- 0
src/views/copilot/components/name.vue Ver fichero


+ 26
- 8
src/views/copilot/efficiency/index.vue Ver fichero

@@ -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>



src/views/copilot/components/charts/base/icon.png → src/views/copilot/yield/assets/icon.png Ver fichero


src/views/copilot/components/charts/BipvOutput.vue → src/views/copilot/yield/components/BipvOutput.vue Ver fichero

@@ -10,7 +10,7 @@
</template>

<script>
import DoubleRingWrapperVue from "./base/DoubleRingWrapper.vue";
import DoubleRingWrapperVue from "./sub/ring/DoubleRingWrapper.vue";

export default {
name: "BipvOutput",

src/views/copilot/components/charts/ChipInvest.vue → src/views/copilot/yield/components/ChipInvest.vue Ver fichero

@@ -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",

src/views/copilot/components/charts/ChipOutput.vue → src/views/copilot/yield/components/ChipOutput.vue Ver fichero

@@ -10,7 +10,7 @@
</template>

<script>
import DoubleRingWrapperVue from "./base/DoubleRingWrapper.vue";
import DoubleRingWrapperVue from "./sub/ring/DoubleRingWrapper.vue";

export default {
name: "ChipOutput",

src/views/copilot/components/charts/FtoInvest.vue → src/views/copilot/yield/components/FtoInvest.vue Ver fichero

@@ -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",

src/views/copilot/components/charts/StdOutput.vue → src/views/copilot/yield/components/StdOutput.vue Ver fichero

@@ -10,7 +10,7 @@
</template>

<script>
import DoubleRingWrapperVue from "./base/DoubleRingWrapper.vue";
import DoubleRingWrapperVue from "./sub/ring/DoubleRingWrapper.vue";

export default {
name: "StdOutput",

src/views/copilot/components/charts/base/BarChartBase.vue → src/views/copilot/yield/components/sub/bar/BarChartBase.vue Ver fichero

@@ -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: {

src/views/copilot/components/charts/base/CityData.vue → src/views/copilot/yield/components/sub/city/CityData.vue Ver fichero

@@ -98,6 +98,7 @@ export default {
_cities[idx].value = v ?? 0;
}
);
// 删掉凯盛光伏
_cities.splice(4, 1);
return _cities;
},

src/views/copilot/components/charts/base/CityItem.vue → src/views/copilot/yield/components/sub/city/CityItem.vue Ver fichero

@@ -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: {

src/views/copilot/components/charts/base/CityName.vue → src/views/copilot/yield/components/sub/city/CityName.vue Ver fichero

@@ -13,7 +13,7 @@
</template>

<script>
import Icon from "./icon.png";
import Icon from "../../../assets/icon.png";

export default {
name: "CityName",

src/views/copilot/components/charts/base/CityValue.vue → src/views/copilot/yield/components/sub/city/CityValue.vue Ver fichero

@@ -18,7 +18,7 @@
</template>

<script>
import GradientTextVue from "./GradientText.vue";
import GradientTextVue from "../gradient/GradientText.vue";

export default {
name: "CityValue",

src/views/copilot/components/charts/base/GradientText.vue → src/views/copilot/yield/components/sub/gradient/GradientText.vue Ver fichero


src/views/copilot/components/charts/base/DoubleRingChart.vue → src/views/copilot/yield/components/sub/ring/DoubleRingChart.vue Ver fichero

@@ -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],

src/views/copilot/components/charts/base/DoubleRingWrapper.vue → src/views/copilot/yield/components/sub/ring/DoubleRingWrapper.vue Ver fichero

@@ -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",

+ 11
- 11
src/views/copilot/yield/index.vue Ver fichero

@@ -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: {


src/views/copilot/components/charts/base/double-ring-chart-options.js → src/views/copilot/yield/options/double-ring-chart-options.js Ver fichero


+ 7
- 3
src/views/dashboard/components/CompanyInfo.vue Ver fichero

@@ -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() {


Cargando…
Cancelar
Guardar