驾驶舱

This commit is contained in:
‘937886381’ 2024-05-20 10:20:37 +08:00
parent 5a9ce24451
commit 83ad88858b
15 changed files with 130 additions and 192 deletions

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-05-16 09:00:26 # @LastEditTime: 2024-05-20 08:31:10
# @LastEditors: zhp # @LastEditors: zhp
# @Description: # @Description:
### ###
@ -12,8 +12,8 @@ ENV = 'development'
VUE_APP_TITLE = 芋道管理系统 VUE_APP_TITLE = 芋道管理系统
# 芋道管理系统/开发环境 # 芋道管理系统/开发环境
# VUE_APP_BASE_API = 'http://192.168.1.54:48080' VUE_APP_BASE_API = 'http://192.168.1.61:48080'
VUE_APP_BASE_API = 'http://glass.kszny.picaiba.com' # VUE_APP_BASE_API = 'http://glass.kszny.picaiba.com'
# #
# 路由懒加载 # 路由懒加载
VUE_CLI_BABEL_TRANSPILE_MODULES = true VUE_CLI_BABEL_TRANSPILE_MODULES = true

View File

@ -1,19 +1,19 @@
import * as echarts from "echarts"; import * as echarts from "echarts";
function __resizeHandler(entries) { function __resizeHandler(entries) {
console.log(entries)
for (const entry of entries) { for (const entry of entries) {
if (entry.contentBoxSize) { if (entry.contentBoxSize) {
// manipulate contentBoxSize // const contentBoxSize = Array.isArray(entry.contentBoxSize)
// const contentBoxSize = Array.isArray(entry.contentBoxSize) // ? entry.contentBoxSize[0]
// ? entry.contentBoxSize[0] // : entry.contentBoxSize;
// : entry.contentBoxSize; // this.chart_mixin_chartInstance.resize({
// this.chart_mixin_chartInstance.resize({ // width:
// width: // contentBoxSize.inlineSize < this.MIN_WIDTH
// contentBoxSize.inlineSize < this.MIN_WIDTH // ? this.MIN_WIDTH
// ? this.MIN_WIDTH // : contentBoxSize.inlineSize,
// : contentBoxSize.inlineSize, // height: contentBoxSize.blockSize,
// height: contentBoxSize.blockSize, // });
// });
} else { } else {
// manipulate contentRect // manipulate contentRect
this.chart_mixin_chartInstance.resize({ this.chart_mixin_chartInstance.resize({

View File

@ -90,8 +90,10 @@ const actions = {
/** 初始化首页数据 */ /** 初始化首页数据 */
async initHome({ commit }) { async initHome({ commit }) {
const dataArr = await getHomeInfo(); const dataArr = await getHomeInfo();
const targetArr = await getHomeInfo(); console.log('dataArr',dataArr);
const payload = splitCurrentAndPrevious(dataArr.prodOutputResultDO, targetArr.prodTargetDO); // const targetArr = await getHomeInfo();
const payload = splitCurrentAndPrevious(dataArr.prodOutputOutDO, dataArr.prodTargetDO,dataArr.prodOutputFtoDO
);
commit("SET_HOME_INFO", payload); commit("SET_HOME_INFO", payload);
}, },
/** 初始化驾驶舱数据 */ /** 初始化驾驶舱数据 */
@ -121,9 +123,10 @@ const actions = {
const payload = handler(factoryData) const payload = handler(factoryData)
commit("SET_COPILOT_INFO", { type, payload }); commit("SET_COPILOT_INFO", { type, payload });
} else { } else {
let factoryData = factoryList.prodOutputResultDO ? factoryList.prodOutputResultDO : factoryList.prodOutputRateDO let factoryData = factoryList.prodOutputOutDO ? factoryList.prodOutputOutDO : factoryList.prodOutputRateDO
let prodOutputFtoDO = factoryList.prodOutputFtoDO ? factoryList.prodOutputFtoDO : []
let targetData = targetList.prodTargetDO ? targetList.prodTargetDO : targetList.prodTargetDO let targetData = targetList.prodTargetDO ? targetList.prodTargetDO : targetList.prodTargetDO
const payload = handler(factoryData, targetData) const payload = handler(factoryData, targetData,prodOutputFtoDO)
commit("SET_COPILOT_INFO", { type, payload }); commit("SET_COPILOT_INFO", { type, payload });
} }
@ -372,14 +375,20 @@ function splitCurrentAndPreviousA(factoryListResponse, targetListResponse) {
} }
} }
function splitCurrentAndPrevious(factoryListResponse, targetListResponse) { function splitCurrentAndPrevious(factoryListResponse, targetListResponse, prodOutputFtoListRes) {
console.log('prodOutputFtoListRes',prodOutputFtoListRes);
// 初始数据 // 初始数据
const { chipInvest, ftoInvest, chipOutput, stdOutput, bipvOutput } = init(); const { chipInvest, ftoInvest, chipOutput, stdOutput, bipvOutput } = init()
if (prodOutputFtoListRes) {
for (const factory of prodOutputFtoListRes) {
console.log(factory);
const fId = getFactoryId(factory);
ftoInvest.current[fId] = factory.chipInput;
ftoInvest.previous[fId] = factory.previousYearChipInput;
}
}
if (factoryListResponse) { if (factoryListResponse) {
for (const factory of factoryListResponse) { for (const factory of factoryListResponse) {
const fId = getFactoryId(factory); const fId = getFactoryId(factory);
// 获取目标值 // 获取目标值
if (targetListResponse) { if (targetListResponse) {
@ -393,8 +402,11 @@ function splitCurrentAndPrevious(factoryListResponse, targetListResponse) {
chipInvest.current[fId] = factory.inputNumber; chipInvest.current[fId] = factory.inputNumber;
chipInvest.previous[fId] = factory.previousYearInputNumber; chipInvest.previous[fId] = factory.previousYearInputNumber;
// FTO投入 // FTO投入
ftoInvest.current[fId] = factory.chipInput; // if (factory.chipInput || factory.previousYearChipInput) {
ftoInvest.previous[fId] = factory.previousYearChipInput; // ftoInvest.current[fId] = factory.chipInput;
// ftoInvest.previous[fId] = factory.previousYearChipInput;
// }
// 产出数据, 0 - (玻璃)芯片产出, 1 - 标准组件产出, 2 - BIPV产出 // 产出数据, 0 - (玻璃)芯片产出, 1 - 标准组件产出, 2 - BIPV产出
// 因为后端写的垃圾数据,所以这里要做一下判断 // 因为后端写的垃圾数据,所以这里要做一下判断
if (![0, 1, 2].includes(factory.glassType)) continue; if (![0, 1, 2].includes(factory.glassType)) continue;
@ -406,6 +418,7 @@ function splitCurrentAndPrevious(factoryListResponse, targetListResponse) {
return { return {
chipInvest, chipInvest,
// ftoInvest,
ftoInvest, ftoInvest,
chipOutput, chipOutput,
stdOutput, stdOutput,

View File

@ -62,7 +62,6 @@ export default {
methods: { methods: {
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");

View File

@ -85,7 +85,7 @@ export default {
height: calc(100% + 38px); height: calc(100% + 38px);
} }
.other { .other {
height: 100vh + 50px; height: calc(100% + 240px);
} }
.copilot-footer { .copilot-footer {
/** position: absolute; /** position: absolute;

View File

@ -1,7 +1,7 @@
<!-- <!--
* @Author: zhp * @Author: zhp
* @Date: 2024-05-07 10:25:10 * @Date: 2024-05-07 10:25:10
* @LastEditTime: 2024-05-16 10:46:33 * @LastEditTime: 2024-05-20 10:04:03
* @LastEditors: zhp * @LastEditors: zhp
* @Description: * @Description:
--> -->
@ -98,17 +98,21 @@ export default {
<style scoped lang="scss"> <style scoped lang="scss">
.std-rate { .std-rate {
display: flex; display: flex;
// gap: 8px; // gap: 1px;
display: -webkit-box; flex: 1 1 auto;
// display: -webkit-box;
flex-wrap: wrap; flex-wrap: wrap;
align-items: center; align-items: center;
// grid-template-columns: repeat(2, 1fr); // grid-template-columns: repeat(2, 1fr);
// grid-template-rows: repeat(4, 1fr); // grid-template-rows: repeat(4, 1fr);
} }
.flex-item{ .flex-item{
// flex: 1 1 auto;
width: 50%; width: 50%;
} }
.span-2 { .span-2 {
// flex: 1 1 auto;
flex-basis: 100%; flex-basis: 100%;
} }
</style> </style>

View File

@ -11,7 +11,7 @@
<CopilotButtons :options="cities" @update:active="handleCityUpdate" /> <CopilotButtons :options="cities" @update:active="handleCityUpdate" />
</div> </div>
<!-- <div style="flex:1;padding: 0 20%;"> --> <!-- <div style="flex:1;padding: 0 20%;"> -->
<div class="chart" ref="chart"></div> <div class="chart" ref="chart"></div>
<!-- </div> --> <!-- </div> -->
<div class="legend" v-if="period == '月' || period == '年'"> <div class="legend" v-if="period == '月' || period == '年'">
<div class="legend-item" v-for="lgd in legend" :key="lgd.label"> <div class="legend-item" v-for="lgd in legend" :key="lgd.label">
@ -145,25 +145,29 @@ export default {
</script> </script>
<style scoped lang="scss"> <style scoped lang="scss">
.chip-rate-item {
flex: 1;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
gap: 3px;
backdrop-filter: blur(24px);
.chip-rate-item {
flex: 1;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
gap: 3px;
backdrop-filter: blur(24px);
.cities { .cities {
height: 40px; height: 40px;
} }
.chart { .chart {
// width: 390px; // margin-left: 5%;
align-self: stretch; // width: 290px;
height: 150px; align-self: stretch;
} // flex: 1 1 auto;
// padding: 0 10%;
/* margin: 10%; */
/* min-width: 300px; */
height: 200px;
}
.legend { .legend {
height: 80px; height: 80px;
display: flex; display: flex;

View File

@ -1,7 +1,7 @@
<!-- <!--
* @Author: zhp * @Author: zhp
* @Date: 2024-05-07 10:25:10 * @Date: 2024-05-07 10:25:10
* @LastEditTime: 2024-05-16 08:45:32 * @LastEditTime: 2024-05-20 09:46:19
* @LastEditors: zhp * @LastEditors: zhp
* @Description: * @Description:
--> -->
@ -109,15 +109,16 @@ export default {
display: flex; display: flex;
align-items: center; align-items: center;
gap: 8px; gap: 8px;
flex: 1 1 auto;
padding: 12px; padding: 12px;
} }
.std-rate-item__value { .std-rate-item__value {
flex: 1; flex: 1 1 auto;
margin: 6px; margin: 6px;
display: flex; display: flex;
gap: 12px; gap: 12px;
height: auto; // height: auto;
flex-direction: column; flex-direction: column;
justify-content: center; justify-content: center;
} }

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-15 16:46:15 * @LastEditTime: 2024-05-17 17:05:36
* @LastEditors: zhp * @LastEditors: zhp
* @Description: * @Description:
--> -->

View File

@ -1,7 +1,7 @@
<!-- <!--
* @Author: zhp * @Author: zhp
* @Date: 2024-05-07 10:25:10 * @Date: 2024-05-07 10:25:10
* @LastEditTime: 2024-05-16 10:42:25 * @LastEditTime: 2024-05-17 10:34:51
* @LastEditors: zhp * @LastEditors: zhp
* @Description: * @Description:
--> -->

View File

@ -10,16 +10,16 @@
<div class="cities"> <div class="cities">
<CopilotButtons :options="cities" @update:active="handleCityUpdate" /> <CopilotButtons :options="cities" @update:active="handleCityUpdate" />
</div> </div>
<div style="padding: 0 40px;width: 90%;"> <!-- <div style="width: 90%;"> -->
<div class="chart" ref="chart"></div> <div class="chart" ref="chart"></div>
</div> <!-- </div> -->
<div class="legend" v-if="1"> <div class="legend" v-if="1">
<div class="legend-item" v-for="(lgd,index) in legendList" :key="lgd.name"> <div class="legend-item" v-for="(lgd, index) in legendList" :key="lgd.name">
<div> <div>
<span :style="'backgroundColor:' + colors[index%5]" class="legend-item__chart"></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> <span :style="'color:' + colors[index % 5]" class="legend-item__label">{{ lgd.name }}</span>
</div> </div>
<div :style="'color:' + colors[index%5]" class="legend-item__value">{{ lgd.value }}</div> <div :style="'color:' + colors[index % 5]" class="legend-item__value">{{ lgd.value }}</div>
</div> </div>
</div> </div>
</div> </div>
@ -54,7 +54,7 @@ export default {
period: "月", period: "月",
factoryId: 0, factoryId: 0,
// legendList:[], // legendList:[],
colors:['#2760FF', '#5996F7', '#8BC566', '#11FAF0', '#F3C000'], colors: ['#2760FF', '#5996F7', '#8BC566', '#11FAF0', '#F3C000'],
// valueTuple: [100, 100, 200], // valueTuple: [100, 100, 200],
}; };
}, },
@ -69,13 +69,13 @@ export default {
legendList() { legendList() {
// if (this.valueTuple) { // if (this.valueTuple) {
// if (this.valueTuple.length == 0) { // if (this.valueTuple.length == 0) {
return this.valueTuple return this.valueTuple
// } else { // } else {
// return [] // return []
// } // }
// console.log(this.valueTuple) // console.log(this.valueTuple)
// } else { // } else {
// return [] // return []
// } // }
}, },
options() { options() {
@ -88,7 +88,7 @@ export default {
arr.push(ele.value) arr.push(ele.value)
}); });
let vt = arr let vt = arr
titleValue = vt.reduce(function (prev, cur, index, arr) { titleValue = vt.reduce(function (prev, cur, index, arr) {
return prev + cur return prev + cur
}) })
} else { } else {
@ -119,13 +119,13 @@ export default {
factoryId(newVal, oldVal) { factoryId(newVal, oldVal) {
console.log(newVal); console.log(newVal);
// if (newVal) { // if (newVal) {
// this.legendList = this.data[newVal] // this.legendList = this.data[newVal]
// if ( == 0) { // if ( == 0) {
// this.initOptions(this.options) // this.initOptions(this.options)
// } // }
// console.log(this.valueTuple.length) // console.log(this.valueTuple.length)
// console.log(this.options) // console.log(this.options)
this.initOptions(this.options) this.initOptions(this.options)
// } // }
}, },
// chipRate() { // chipRate() {
@ -164,9 +164,13 @@ export default {
.chart { .chart {
// margin-left: 5%; // margin-left: 5%;
width: 290px; // width: 290px;
align-self: stretch; align-self: stretch;
height: 150px; flex: 1 1 auto;
// padding: 0 10%;
/* margin: 10%; */
/* min-width: 300px; */
height: 0;
} }
.legend { .legend {
@ -185,7 +189,8 @@ export default {
align-items: center; align-items: center;
flex-wrap: wrap; flex-wrap: wrap;
gap: 3px; gap: 3px;
.legend-item__chart{
.legend-item__chart {
display: inline-block; display: inline-block;
width: 14px; width: 14px;
height: 14px; height: 14px;
@ -193,9 +198,11 @@ export default {
border-radius: 2px; border-radius: 2px;
// margin-right: 8px; // margin-right: 8px;
} }
.legend-item__label {
.legend-item__label {
margin-left: 8px; margin-left: 8px;
} }
// } // }
} }
@ -205,4 +212,3 @@ export default {
} }
} }
</style> </style>
l

View File

@ -33,7 +33,6 @@ import StockMonitorVue from "./components/StockMonitor.vue";
import ElecCostVue from "./components/ElecCost.vue"; import ElecCostVue from "./components/ElecCost.vue";
import NatGasVue from "./components/NatGas.vue"; import NatGasVue from "./components/NatGas.vue";
import WaterCostVue from "./components/WaterCost.vue"; import WaterCostVue from "./components/WaterCost.vue";
import { getEnergySumPage } from '@/api/energy'
export default { export default {
name: "EnergyCopilot", name: "EnergyCopilot",
components: { components: {
@ -78,111 +77,6 @@ export default {
// source: "comprehensive", // source: "comprehensive",
// }); // });
}, },
dedupe(array){
return Array.from(new Set(array));
},
async getData(period) {
let date = null
switch (period) {
case "日":
date = 1;
break;
case "周":
date = 2;
break;
case "月":
date = 3;
break;
case "年":
date = 4;
break;
default:
date = 1;
break;
}
const res = await getEnergySumPage({
// factorys:[],
date
})
let factoryArr = [
{
id: 0,
name: '瑞昌中建材光电材料有限公司',
stockData: [],
waterData: [],
elsData: [],
gasData: [],
},
{
id: 1,
name: '邯郸中建材光电材料有限公司',
stockData: [],
waterData: [],
elsData: [],
gasData: [],
},
{
id: 2,
name: '中建材株洲光电材料有限公司',
stockData: [],
waterData: [],
elsData: [],
gasData: [],
},
{
id: 3,
name: '佳木斯中建材光电材料有限公司',
stockData: [],
waterData: [],
elsData: [],
gasData: [],
},
{
id: 4,
name: '成都中建材光电材料有限公司',
stockData: [],
waterData: [],
elsData: [],
gasData: [],
},
{
id: 5,
name: '凯盛光伏材料有限公司',
stockData: [],
waterData: [],
elsData: [],
gasData: [],
},
{
id: 6,
name: '蚌埠兴科玻璃有限公司',
stockData: [],
waterData: [],
elsData: [],
gasData: [],
},
]
for (let i in res.data.stockDO) {
const index = factoryArr.findIndex(item => item.id == res.data.stockDO[i].factory)
if (index != -1) {
res.data.stockDO[i].stockInfo.forEach(ele => {
factoryArr[index].stockData.push(ele)
});
}
}
let stockDOData = []
factoryArr.forEach((ele, index) => [
stockDOData[index]= [],
ele.stockData.forEach((item) => {
let obj = {}
obj.name = item.glassType == 0 ? '玻璃芯片' : item.glassType == 1 ? '标准组件' : item.glassType == 2 ? 'BIPV' : '定制组件'
obj.value = item.stockNumber
stockDOData[index].push(obj)
}),
])
this.stockDOData = stockDOData
this.$store.commit('home/updateEnergyData', stockDOData)
}
}, },
}; };
</script> </script>

View File

@ -65,6 +65,7 @@ export default {
}, },
series() { series() {
const { ftoInvest } = this.$store.getters.copilot.yield; const { ftoInvest } = this.$store.getters.copilot.yield;
console.log('ftoInvest', this.$store.getters.copilot.yield);
let dataList = null; let dataList = null;
switch (this.period) { switch (this.period) {

View File

@ -7,9 +7,9 @@
<template> <template>
<div class="double-ring-chart"> <div class="double-ring-chart">
<div class="double-ring-chart__container"> <!-- <div> -->
<div ref="chart" style="height: 100%;"></div> <div ref="chart" class="double-ring-chart__container"></div>
</div> <!-- </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">
@ -22,12 +22,12 @@
<script> <script>
import chartMixin from "@/mixins/chart.js"; import chartMixin from "@/mixins/chart.js";
import fullscreenMixin from "@/mixins/fullscreen.js"; import screenfull from "screenfull";
import getOptions from "../../../options/double-ring-chart-options"; import getOptions from "../../../options/double-ring-chart-options";
export default { export default {
name: "DoubleRingChart", name: "DoubleRingChart",
mixins: [chartMixin, fullscreenMixin], mixins: [chartMixin],
props: { props: {
vHeight: { vHeight: {
type: Number, type: Number,
@ -47,7 +47,9 @@ export default {
}, },
}, },
data() { data() {
return {}; return {
isFullscreen: false,
};
}, },
filters: { filters: {
numberFilter(val) { numberFilter(val) {
@ -111,18 +113,32 @@ export default {
}, },
}, },
watch: { watch: {
isFullscreen(val) {
// this.actualOptions.series.map((item) => {
// item.barWidth = val ? 18 : 12;
// });
// this.actualOptions.xAxis.axisLabel.fontSize = val ? 18 : 12;
// this.actualOptions.yAxis.axisLabel.fontSize = val ? 18 : 12;
// this.actualOptions.yAxis.nameTextStyle.fontSize = val ? 18 : 12;
this.initOptions(this.options)
},
legendItems() { legendItems() {
this.initOptions(this.options); this.initOptions(this.options);
}, },
}, },
mounted() { mounted() {
this.initOptions(this.options); this.initOptions(this.options);
if (screenfull.isEnabled) {
screenfull.on("change", () => {
this.isFullscreen = screenfull.isFullscreen;
});
}
}, },
methods: { methods: {
// fullscreen mixin // fullscreen mixin
fullscreenCallback(isFullscreen) { // fullscreenCallback(isFullscreen) {
console.log("isFullscreen--->", isFullscreen); // console.log("isFullscreen--->", isFullscreen);
}, // },
}, },
}; };
@ -171,7 +187,7 @@ function calculateItems(period, valueTuple) {
} }
.double-ring-chart__container { .double-ring-chart__container {
flex:1; flex:1 1 auto;
padding: 0 10%; padding: 0 10%;
/* margin: 10%; */ /* margin: 10%; */
/* min-width: 300px; */ /* min-width: 300px; */