projects/mescc/lb
into projects/mescc/develop
4 months ago
@@ -5,8 +5,8 @@ ENV = 'development' | |||||
VUE_APP_TITLE = 芋道管理系统 | 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 | VUE_CLI_BABEL_TRANSPILE_MODULES = true | ||||
@@ -18,6 +18,7 @@ const state = { | |||||
efficiency: {}, | efficiency: {}, | ||||
}, | }, | ||||
home: { | home: { | ||||
/** 主页状态 */ | |||||
ftoInvest: null, | ftoInvest: null, | ||||
chipInvest: null, | chipInvest: null, | ||||
chipOutput: null, | chipOutput: null, | ||||
@@ -65,13 +66,13 @@ const actions = { | |||||
async initCopilot({ commit }, { period, source }) { | async initCopilot({ commit }, { period, source }) { | ||||
const fetcher = { | const fetcher = { | ||||
yield: getCopilotYield, | yield: getCopilotYield, | ||||
energy: null, | |||||
efficiency: null, | |||||
energy: getCopilotEnergy, | |||||
efficiency: getCopilotEfficiency, | |||||
}[source]; | }[source]; | ||||
// 获取产量数据 | // 获取产量数据 | ||||
let { data: factoryList, type } = await fetcher(period); | let { data: factoryList, type } = await fetcher(period); | ||||
let targetList = null; | let targetList = null; | ||||
if (source === "yield") { | |||||
if (source === "yield" || source === "efficiency") { | |||||
// 获取目标数据 | // 获取目标数据 | ||||
let { data } = await fetcher(period, true); | let { data } = await fetcher(period, true); | ||||
targetList = data; | targetList = data; | ||||
@@ -88,8 +89,8 @@ export default { | |||||
actions, | actions, | ||||
}; | }; | ||||
// utils function | |||||
function splitCurrentAndPrevious(factoryListResponse, targetListResponse) { | function splitCurrentAndPrevious(factoryListResponse, targetListResponse) { | ||||
// 初始数据 | |||||
const { chipInvest, ftoInvest, chipOutput, stdOutput, bipvOutput } = init(); | const { chipInvest, ftoInvest, chipOutput, stdOutput, bipvOutput } = init(); | ||||
if (factoryListResponse) { | if (factoryListResponse) { | ||||
for (const factory of factoryListResponse) { | for (const factory of factoryListResponse) { | ||||
@@ -148,6 +149,10 @@ function getFactoryTargetValue(targetList, factoryId) { | |||||
}; | }; | ||||
} | } | ||||
/** | |||||
* | |||||
* @returns 初始化状态值 | |||||
*/ | |||||
function init() { | function init() { | ||||
const t_ = { | const t_ = { | ||||
current: Array(7).fill(0), | current: Array(7).fill(0), | ||||
@@ -168,11 +173,11 @@ function init() { | |||||
const bipvOutput = deepClone(chipOutput); | const bipvOutput = deepClone(chipOutput); | ||||
return { | return { | ||||
chipInvest, | |||||
ftoInvest, | |||||
chipOutput, | |||||
stdOutput, | |||||
bipvOutput, | |||||
chipInvest, // 芯片投入 | |||||
ftoInvest, // FTO投入 | |||||
chipOutput, // 芯片产出 | |||||
stdOutput, // 标准组件产出 | |||||
bipvOutput, // BIPV产出 | |||||
}; | }; | ||||
} | } | ||||
@@ -210,13 +215,33 @@ async function getHomeTarget() { | |||||
return null; | 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( | 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, | ...params, | ||||
} | } | ||||
@@ -224,17 +249,36 @@ async function fetcher(type = "yield", params) { | |||||
if (code == 0) { | if (code == 0) { | ||||
return data; | return data; | ||||
} | } | ||||
console.warn("getCopilotYield failed, code: ", code); | |||||
console.warn("[doFetch] failed, code: ", code); | |||||
return null; | 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 {*} period 周期: 日周月年 | ||||
* @param {*} target 是否获取目标数据:默认 否 | * @param {*} target 是否获取目标数据:默认 否 | ||||
* @returns | * @returns | ||||
*/ | */ | ||||
async function getCopilotYield(period, target = false) { | |||||
async function getCopilotData(copilot_module, period, target = false) { | |||||
if (!copilot_module) copilot_module = "yield"; | |||||
// 请求参数,直接一次性获取所有工厂 | // 请求参数,直接一次性获取所有工厂 | ||||
let queryParams = { | let queryParams = { | ||||
factorys: [], | factorys: [], | ||||
@@ -260,7 +304,7 @@ async function getCopilotYield(period, target = false) { | |||||
} | } | ||||
return { | return { | ||||
data: await fetcher(target ? "target" : "yield", queryParams), | |||||
type: "yield", | |||||
data: await doFetch(copilot_module, target ? true : false, queryParams), | |||||
type: copilot_module, | |||||
}; | }; | ||||
} | } |
@@ -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> | <template> | ||||
<div class="efficiency-copilot"> | <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> | </div> | ||||
</template> | </template> | ||||
<script> | <script> | ||||
import Container from "../../dashboard/components/Container.vue"; | |||||
import Container from "@/views/copilot/components/Container.vue"; | |||||
export default { | export default { | ||||
name: "EfficiencyCopilot", | name: "EfficiencyCopilot", | ||||
components: { DbContainer: Container }, | |||||
components: { Container }, | |||||
props: { | |||||
period: { | |||||
type: String, | |||||
default: "日", | |||||
}, | |||||
}, | |||||
data() { | data() { | ||||
return {}; | 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> | </script> | ||||
@@ -10,7 +10,7 @@ | |||||
</template> | </template> | ||||
<script> | <script> | ||||
import DoubleRingWrapperVue from "./base/DoubleRingWrapper.vue"; | |||||
import DoubleRingWrapperVue from "./sub/ring/DoubleRingWrapper.vue"; | |||||
export default { | export default { | ||||
name: "BipvOutput", | name: "BipvOutput", |
@@ -6,7 +6,7 @@ | |||||
--> | --> | ||||
<template> | <template> | ||||
<bar-chart-base | |||||
<BarChartBase | |||||
:legend="legend" | :legend="legend" | ||||
:series="series" | :series="series" | ||||
:xAxis="xAxis" | :xAxis="xAxis" | ||||
@@ -16,7 +16,7 @@ | |||||
</template> | </template> | ||||
<script> | <script> | ||||
import BarChartBase from "./base/BarChartBase.vue"; | |||||
import BarChartBase from "./sub/bar/BarChartBase.vue"; | |||||
export default { | export default { | ||||
name: "ChipInvest", | name: "ChipInvest", |
@@ -10,7 +10,7 @@ | |||||
</template> | </template> | ||||
<script> | <script> | ||||
import DoubleRingWrapperVue from "./base/DoubleRingWrapper.vue"; | |||||
import DoubleRingWrapperVue from "./sub/ring/DoubleRingWrapper.vue"; | |||||
export default { | export default { | ||||
name: "ChipOutput", | name: "ChipOutput", |
@@ -6,7 +6,7 @@ | |||||
--> | --> | ||||
<template> | <template> | ||||
<bar-chart-base | |||||
<BarChartBase | |||||
:legend="legend" | :legend="legend" | ||||
:series="series" | :series="series" | ||||
:xAxis="xAxis" | :xAxis="xAxis" | ||||
@@ -16,7 +16,7 @@ | |||||
</template> | </template> | ||||
<script> | <script> | ||||
import BarChartBase from "./base/BarChartBase.vue"; | |||||
import BarChartBase from "./sub/bar/BarChartBase.vue"; | |||||
export default { | export default { | ||||
name: "FtoInvest", | name: "FtoInvest", |
@@ -10,7 +10,7 @@ | |||||
</template> | </template> | ||||
<script> | <script> | ||||
import DoubleRingWrapperVue from "./base/DoubleRingWrapper.vue"; | |||||
import DoubleRingWrapperVue from "./sub/ring/DoubleRingWrapper.vue"; | |||||
export default { | export default { | ||||
name: "StdOutput", | name: "StdOutput", |
@@ -26,13 +26,13 @@ | |||||
<script> | <script> | ||||
import screenfull from "screenfull"; | import screenfull from "screenfull"; | ||||
import ChartContainerVue from "../../../../components/ChartContainer.vue"; | |||||
import ChartContainer from "../../../../components/ChartContainer.vue"; | |||||
import chartMixin from "@/mixins/chart.js"; | import chartMixin from "@/mixins/chart.js"; | ||||
export default { | export default { | ||||
name: "BarChartBase", | name: "BarChartBase", | ||||
components: { | components: { | ||||
ChartContainer: ChartContainerVue, | |||||
ChartContainer, | |||||
}, | }, | ||||
mixins: [chartMixin], | mixins: [chartMixin], | ||||
props: { | props: { |
@@ -98,6 +98,7 @@ export default { | |||||
_cities[idx].value = v ?? 0; | _cities[idx].value = v ?? 0; | ||||
} | } | ||||
); | ); | ||||
// 删掉凯盛光伏 | |||||
_cities.splice(4, 1); | _cities.splice(4, 1); | ||||
return _cities; | return _cities; | ||||
}, | }, |
@@ -8,14 +8,15 @@ | |||||
<template> | <template> | ||||
<div class="city-item inner-shadow"> | <div class="city-item inner-shadow"> | ||||
<CityName :value="location" /> | <CityName :value="location" /> | ||||
<CityValue :value="value+''" :period="period" /> | |||||
<CityValue :value="value + ''" :period="period" /> | |||||
</div> | </div> | ||||
</template> | </template> | ||||
<script> | <script> | ||||
import CityNameVue from "./CityName.vue"; | import CityNameVue from "./CityName.vue"; | ||||
import CityValueVue from "./CityValue.vue"; | import CityValueVue from "./CityValue.vue"; | ||||
import GradientTextVue from "./GradientText.vue"; | |||||
import GradientTextVue from "../gradient/GradientText.vue"; | |||||
export default { | export default { | ||||
name: "CityItem", | name: "CityItem", | ||||
components: { | components: { |
@@ -13,7 +13,7 @@ | |||||
</template> | </template> | ||||
<script> | <script> | ||||
import Icon from "./icon.png"; | |||||
import Icon from "../../../assets/icon.png"; | |||||
export default { | export default { | ||||
name: "CityName", | name: "CityName", |
@@ -18,7 +18,7 @@ | |||||
</template> | </template> | ||||
<script> | <script> | ||||
import GradientTextVue from "./GradientText.vue"; | |||||
import GradientTextVue from "../gradient/GradientText.vue"; | |||||
export default { | export default { | ||||
name: "CityValue", | name: "CityValue", |
@@ -8,7 +8,7 @@ | |||||
<template> | <template> | ||||
<div class="double-ring-chart"> | <div class="double-ring-chart"> | ||||
<div ref="chart" class="double-ring-chart__container"></div> | <div ref="chart" class="double-ring-chart__container"></div> | ||||
<!-- :style="{ height: vHeight + 'vh' }" --> | |||||
<!-- style="{ height: vHeight + 'vh' }" --> | |||||
<div class="double-ring-chart__legend"> | <div class="double-ring-chart__legend"> | ||||
<div v-for="item in legendItems" :key="item.label" class="legend-item"> | <div v-for="item in legendItems" :key="item.label" class="legend-item"> | ||||
<span class="legend-item__label">{{ item.label }}</span> | <span class="legend-item__label">{{ item.label }}</span> | ||||
@@ -21,7 +21,7 @@ | |||||
<script> | <script> | ||||
import chartMixin from "@/mixins/chart.js"; | import chartMixin from "@/mixins/chart.js"; | ||||
import fullscreenMixin from "@/mixins/fullscreen.js"; | import fullscreenMixin from "@/mixins/fullscreen.js"; | ||||
import getOptions from "./double-ring-chart-options"; | |||||
import getOptions from "../../../options/double-ring-chart-options"; | |||||
export default { | export default { | ||||
name: "DoubleRingChart", | name: "DoubleRingChart", | ||||
@@ -75,6 +75,7 @@ export default { | |||||
getter.current[this.factoryId], | getter.current[this.factoryId], | ||||
]; | ]; | ||||
} | } | ||||
// [100, 200, 200] | |||||
return [ | return [ | ||||
getter.previous[this.factoryId], | getter.previous[this.factoryId], | ||||
getter.current[this.factoryId], | getter.current[this.factoryId], |
@@ -27,9 +27,9 @@ | |||||
</template> | </template> | ||||
<script> | <script> | ||||
import CopilotSelect from "../../select.vue"; | |||||
import CopilotSelect from "@/views/copilot/components/select.vue"; | |||||
import DoubleRingChartVue from "./DoubleRingChart.vue"; | import DoubleRingChartVue from "./DoubleRingChart.vue"; | ||||
import CityData from "./CityData.vue"; | |||||
import CityData from "../city/CityData.vue"; | |||||
export default { | export default { | ||||
name: "DoubleRingWrapper", | name: "DoubleRingWrapper", |
@@ -30,22 +30,22 @@ | |||||
</template> | </template> | ||||
<script> | <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 { | export default { | ||||
name: "YieldCopilot", | name: "YieldCopilot", | ||||
components: { | components: { | ||||
DbContainer: Container, | DbContainer: Container, | ||||
StdOutput: StdOutputVue, | |||||
ChipOutput: ChipOutputVue, | |||||
BipvOutput: BipvOutputVue, | |||||
FtoInvest: FtoInvestVue, | |||||
ChipInvest: ChipInvestVue, | |||||
StdOutput, | |||||
ChipOutput, | |||||
BipvOutput, | |||||
FtoInvest, | |||||
ChipInvest, | |||||
}, | }, | ||||
props: { | props: { | ||||
period: { | period: { | ||||
@@ -12,7 +12,7 @@ | |||||
<h2>{{ info.companyName }}</h2> | <h2>{{ info.companyName }}</h2> | ||||
<ul> | <ul> | ||||
<li v-for="item in info.items" :key="item.label"> | <li v-for="item in info.items" :key="item.label"> | ||||
{{ item.label }} {{ item.value | currency }} | |||||
{{ item.label }} {{ item.value | numberFilter }} | |||||
</li> | </li> | ||||
</ul> | </ul> | ||||
</div> | </div> | ||||
@@ -35,8 +35,12 @@ export default { | |||||
}, | }, | ||||
}, | }, | ||||
filters: { | filters: { | ||||
currency(value) { | |||||
return value.toLocaleString(); | |||||
numberFilter(value) { | |||||
if (value != null && !isNaN(parseInt(value))) { | |||||
return parseInt(value).toLocaleString(); | |||||
} else { | |||||
return '-'; | |||||
} | |||||
}, | }, | ||||
}, | }, | ||||
data() { | data() { | ||||