projects/mescc/zhp
do projects/mescc/develop
4 miesięcy temu
@@ -1,7 +1,7 @@ | |||
### | |||
# @Author: zhp | |||
# @Date: 2024-04-28 13:42:51 | |||
# @LastEditTime: 2024-05-13 13:30:20 | |||
# @LastEditTime: 2024-05-20 08:31:10 | |||
# @LastEditors: zhp | |||
# @Description: | |||
### | |||
@@ -12,9 +12,9 @@ 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 | |||
@@ -1,7 +1,7 @@ | |||
/* | |||
* @Author: zhp | |||
* @Date: 2024-04-28 09:28:12 | |||
* @LastEditTime: 2024-04-28 09:43:40 | |||
* @LastEditTime: 2024-05-16 08:56:59 | |||
* @LastEditors: zhp | |||
* @Description: | |||
*/ | |||
@@ -13,3 +13,11 @@ export function getEnergyPage(data) { | |||
data: data | |||
}) | |||
} | |||
export function getEnergySumPage(data) { | |||
return request({ | |||
url: 'ip/prod-output/cockpitComprehensiveDataMonitor', | |||
method: 'post', | |||
data: data | |||
}) | |||
} |
@@ -1,14 +1,7 @@ | |||
/* | |||
* @Author: zhp | |||
* @Date: 2024-05-07 08:54:59 | |||
* @LastEditTime: 2024-05-07 09:34:17 | |||
* @LastEditors: zhp | |||
* @Description: | |||
*/ | |||
/* | |||
* @Author: zhp | |||
* @Date: 2024-04-26 14:53:45 | |||
* @LastEditTime: 2024-05-06 14:53:04 | |||
* @LastEditTime: 2024-05-14 15:43:50 | |||
* @LastEditors: zhp | |||
* @Description: | |||
*/ | |||
@@ -1,19 +1,19 @@ | |||
import * as echarts from "echarts"; | |||
function __resizeHandler(entries) { | |||
console.log(entries) | |||
for (const entry of entries) { | |||
if (entry.contentBoxSize) { | |||
// manipulate contentBoxSize | |||
// const contentBoxSize = Array.isArray(entry.contentBoxSize) | |||
// ? entry.contentBoxSize[0] | |||
// : entry.contentBoxSize; | |||
// this.chart_mixin_chartInstance.resize({ | |||
// width: | |||
// contentBoxSize.inlineSize < this.MIN_WIDTH | |||
// ? this.MIN_WIDTH | |||
// : contentBoxSize.inlineSize, | |||
// height: contentBoxSize.blockSize, | |||
// }); | |||
// const contentBoxSize = Array.isArray(entry.contentBoxSize) | |||
// ? entry.contentBoxSize[0] | |||
// : entry.contentBoxSize; | |||
// this.chart_mixin_chartInstance.resize({ | |||
// width: | |||
// contentBoxSize.inlineSize < this.MIN_WIDTH | |||
// ? this.MIN_WIDTH | |||
// : contentBoxSize.inlineSize, | |||
// height: contentBoxSize.blockSize, | |||
// }); | |||
} else { | |||
// manipulate contentRect | |||
this.chart_mixin_chartInstance.resize({ | |||
@@ -1,7 +1,15 @@ | |||
/* | |||
* @Author: zhp | |||
* @Date: 2024-04-28 13:42:51 | |||
* @LastEditTime: 2024-05-16 11:59:04 | |||
* @LastEditors: zhp | |||
* @Description: | |||
*/ | |||
import Vue from 'vue' | |||
import Vuex from 'vuex' | |||
import app from './modules/app' | |||
import user from './modules/user' | |||
import home from './modules/home' | |||
import tagsView from './modules/tagsView' | |||
import permission from './modules/permission' | |||
import settings from './modules/settings' | |||
@@ -19,6 +27,7 @@ const store = new Vuex.Store({ | |||
permission, | |||
settings, | |||
dict, | |||
home, | |||
copilot | |||
}, | |||
getters | |||
@@ -14,7 +14,12 @@ const state = { | |||
bipvOutput: null, | |||
}, | |||
/* 能源驾驶舱 */ | |||
energy: {}, | |||
energy: { | |||
stockDOData: [], | |||
waterList: {}, | |||
gasList: [], | |||
elecList:{} | |||
}, | |||
/* 效率驾驶舱 */ | |||
efficiency: { | |||
chipOee: { | |||
@@ -66,10 +71,12 @@ const mutations = { | |||
state.copilot.yield.bipvOutput = payload.bipvOutput; | |||
break; | |||
case "energy": | |||
state.copilot.energy = payload.data; | |||
state.copilot.energy.stockDOData = payload.stockDOData; | |||
state.copilot.energy.gasList = payload.gasList; | |||
state.copilot.energy.waterList = payload.waterList; | |||
state.copilot.energy.elecList = payload.elecList; | |||
break; | |||
case "efficiency": | |||
console.log('222222', payload) | |||
state.copilot.efficiency.chipOee = payload.chipOee; | |||
state.copilot.efficiency.transformRate = payload.transformRate; | |||
state.copilot.efficiency.chipRate = payload.chipRate; | |||
@@ -83,40 +90,47 @@ const actions = { | |||
/** 初始化首页数据 */ | |||
async initHome({ commit }) { | |||
const dataArr = await getHomeInfo(); | |||
const targetArr = await getHomeInfo(); | |||
const payload = splitCurrentAndPrevious(dataArr.prodOutputResultDO, targetArr.prodTargetDO); | |||
console.log('dataArr',dataArr); | |||
// const targetArr = await getHomeInfo(); | |||
const payload = splitCurrentAndPrevious(dataArr.prodOutputOutDO, dataArr.prodTargetDO,dataArr.prodOutputFtoDO | |||
); | |||
commit("SET_HOME_INFO", payload); | |||
}, | |||
/** 初始化驾驶舱数据 */ | |||
async initCopilot({ commit }, { period, source }) { | |||
if (source == "comprehensive") return; | |||
// if (source == "energy") return; | |||
const fetcher = { | |||
yield: getCopilotYield, | |||
comprehensive: getCopilotEnergy, | |||
energy: getCopilotEnergy, | |||
efficiency: getCopilotEfficiency, | |||
}[source]; | |||
const handler = { | |||
yield: splitCurrentAndPrevious, | |||
comprehensive: () => null, | |||
energy: splitCurrentAndPreviousB, | |||
efficiency: splitCurrentAndPreviousA, | |||
}[source] | |||
console.log(handler) | |||
// 获取产量数据 | |||
// console.log('qqqqqq',handler) | |||
let { data: factoryList, type } = await fetcher(period) | |||
console.log(factoryList,type); | |||
let targetList = null; | |||
if (source === "yield" || source === "efficiency") { | |||
// 获取目标数据 | |||
let { data } = await fetcher(period, true) | |||
// console.log('11111',data) | |||
targetList = data | |||
} | |||
let factoryData = factoryList.prodOutputResultDO ? factoryList.prodOutputResultDO : factoryList.prodOutputRateDO | |||
let targetData = targetList.prodTargetDO ? targetList.prodTargetDO : targetList.prodTargetDO | |||
const payload = handler(factoryData, targetData) | |||
if (source == "energy") { | |||
let factoryData = factoryList | |||
const payload = handler(factoryData) | |||
commit("SET_COPILOT_INFO", { type, payload }); | |||
} else { | |||
let factoryData = factoryList.prodOutputOutDO ? factoryList.prodOutputOutDO : factoryList.prodOutputRateDO | |||
let prodOutputFtoDO = factoryList.prodOutputFtoDO ? factoryList.prodOutputFtoDO : [] | |||
let targetData = targetList.prodTargetDO ? targetList.prodTargetDO : targetList.prodTargetDO | |||
const payload = handler(factoryData, targetData,prodOutputFtoDO) | |||
commit("SET_COPILOT_INFO", { type, payload }); | |||
} | |||
}, | |||
}; | |||
@@ -127,8 +141,147 @@ export default { | |||
actions, | |||
}; | |||
function splitCurrentAndPreviousB(factoryListResponse) { | |||
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: [], | |||
}, | |||
] | |||
if (factoryListResponse) { | |||
for (let i in factoryListResponse.stockDO) { | |||
const index = factoryArr.findIndex(item => item.id == factoryListResponse.stockDO[i].factory) | |||
if (index != -1) { | |||
factoryListResponse.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) | |||
}), | |||
]) | |||
let gasList = [] | |||
// if (factoryListResponse.gasDO) { | |||
factoryListResponse.gasDO.forEach((ele) => { | |||
gasList[ele.factory] = ele.totalEnergyValue | |||
}) | |||
// } | |||
// console.log(factoryListResponse.gasDO); | |||
let waterObj = Object.groupBy(factoryListResponse.waterDO, ({ groupName }) => groupName) | |||
let waterList = { | |||
times: [], | |||
0: [], | |||
1: [], | |||
2: [], | |||
3: [], | |||
4: [], | |||
5: [], | |||
6: [], | |||
} | |||
for (let i in waterObj) { | |||
waterList.times.push(i) | |||
waterObj[i].forEach((ele, index) => { | |||
waterList[ele.factory].push(ele.totalEnergyValue) | |||
}) | |||
} | |||
let elecObj = Object.groupBy(factoryListResponse.elecDO, ({ groupName }) => groupName) | |||
let elecList = { | |||
times: [], | |||
0: [], | |||
1: [], | |||
2: [], | |||
3: [], | |||
4: [], | |||
5: [], | |||
6: [], | |||
} | |||
for (let i in elecObj) { | |||
elecList.times.push(i) | |||
elecObj[i].forEach((ele, index) => { | |||
elecList[ele.factory].push(ele.totalEnergyValue) | |||
}) | |||
} | |||
return { | |||
stockDOData, | |||
waterList, | |||
gasList, | |||
elecList, | |||
}; | |||
} else { | |||
let stockDOData = Array[7].fill([]) | |||
let waterList = {} | |||
return { | |||
stockDOData, | |||
waterList, | |||
gasList, | |||
elecList | |||
}; | |||
} | |||
} | |||
function splitCurrentAndPreviousA(factoryListResponse, targetListResponse) { | |||
console.log('工厂',targetListResponse); | |||
// console.log('工厂',factoryListResponse); | |||
// 初始数据 | |||
@@ -209,7 +362,6 @@ function splitCurrentAndPreviousA(factoryListResponse, targetListResponse) { | |||
// 芯片良率 与 标准组件良率 | |||
if (![0, 1].includes(factory.glassType)) continue; | |||
const _t = [chipRate, stdRate][factory.glassType] | |||
console.log('_t',_t); | |||
_t.current[fId] = factory.yieldRate ; | |||
_t.previous[fId] = factory.previousYearYieldRate ; | |||
} | |||
@@ -223,14 +375,20 @@ function splitCurrentAndPreviousA(factoryListResponse, targetListResponse) { | |||
} | |||
} | |||
function splitCurrentAndPrevious(factoryListResponse, targetListResponse) { | |||
console.log('工厂',factoryListResponse); | |||
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) { | |||
for (const factory of factoryListResponse) { | |||
const fId = getFactoryId(factory); | |||
// 获取目标值 | |||
if (targetListResponse) { | |||
@@ -244,8 +402,11 @@ function splitCurrentAndPrevious(factoryListResponse, targetListResponse) { | |||
chipInvest.current[fId] = factory.inputNumber; | |||
chipInvest.previous[fId] = factory.previousYearInputNumber; | |||
// FTO投入 | |||
ftoInvest.current[fId] = factory.chipInput; | |||
ftoInvest.previous[fId] = factory.previousYearChipInput; | |||
// if (factory.chipInput || factory.previousYearChipInput) { | |||
// ftoInvest.current[fId] = factory.chipInput; | |||
// ftoInvest.previous[fId] = factory.previousYearChipInput; | |||
// } | |||
// 产出数据, 0 - (玻璃)芯片产出, 1 - 标准组件产出, 2 - BIPV产出 | |||
// 因为后端写的垃圾数据,所以这里要做一下判断 | |||
if (![0, 1, 2].includes(factory.glassType)) continue; | |||
@@ -257,6 +418,7 @@ function splitCurrentAndPrevious(factoryListResponse, targetListResponse) { | |||
return { | |||
chipInvest, | |||
// ftoInvest, | |||
ftoInvest, | |||
chipOutput, | |||
stdOutput, | |||
@@ -407,7 +569,7 @@ function getUrl(copilot_module) { | |||
// 对比数据的 URL | |||
comparison: "", | |||
// 目标数据的 URL | |||
target: "", | |||
// target: "", | |||
}; | |||
switch (copilot_module) { | |||
case "yield": | |||
@@ -415,6 +577,7 @@ function getUrl(copilot_module) { | |||
// url.target = "/ip/prod-target/query-by-date"; | |||
break; | |||
case "energy": | |||
url.comparison = "ip/prod-output/cockpitComprehensiveDataMonitor"; | |||
break; | |||
case "efficiency": | |||
url.comparison = "ip/prod-output/cockpitDataRate"; | |||
@@ -62,7 +62,6 @@ export default { | |||
methods: { | |||
toggleFullScreen() { | |||
this.isFullscreen = !this.isFullscreen; | |||
screenfull.toggle(document.querySelector(".copilot-layout")) | |||
// 矫正宽度 | |||
// const el = document.querySelector(".copilot-layout"); | |||
@@ -11,7 +11,7 @@ | |||
<span v-for="item in legend" :key="item.label" class="legend-item" | |||
:style="{ fontSize: isFullscreen ? '0.58vw' : '0.54vw' }">{{ item.label }}</span> | |||
</div> | |||
<div ref="elsChart" :style="{ height: '100%',width: width}"></div> | |||
<div ref="elsChart" :style="{ height: '95%',width: width}"></div> | |||
</chart-container> | |||
</template> | |||
@@ -36,12 +36,12 @@ export default { | |||
type: Array, | |||
required: true, | |||
}, | |||
xAxis: { | |||
type: Array, | |||
required: true, | |||
}, | |||
// xAxis: { | |||
// type: Array, | |||
// required: true, | |||
// }, | |||
series: { | |||
type: Array, | |||
type: Object, | |||
required: true, | |||
}, | |||
in: { | |||
@@ -84,19 +84,16 @@ export default { | |||
// }, | |||
grid: { | |||
left: '3%', | |||
right: '4%', | |||
right: '2%', | |||
bottom: '3%', | |||
containLabel: true | |||
}, | |||
xAxis: [ | |||
{ | |||
xAxis:{ | |||
type: 'category', | |||
boundaryGap: false, | |||
data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'] | |||
} | |||
], | |||
yAxis: [ | |||
{ | |||
}, | |||
yAxis: { | |||
min: function () { // 取最小值向下取整为最小刻度 | |||
return 0 | |||
}, | |||
@@ -143,7 +140,6 @@ export default { | |||
// } | |||
// }, | |||
}, | |||
], | |||
series: [ | |||
{ | |||
name: '瑞昌', | |||
@@ -367,22 +363,31 @@ export default { | |||
watch: { | |||
isOpen(val) { | |||
if (val === true) { | |||
this.width = '99%' | |||
this.width = 97 + '%' | |||
this.canvasReset() | |||
console.log(this.width) | |||
} else { | |||
this.watch = 100 + '%' | |||
this.canvasReset() | |||
} | |||
}, | |||
/** 全屏状态切换时,对柱子粗细和字体大小进行相应调整 */ | |||
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; | |||
if (val === false && this.isOpen === true) { | |||
this.width = 97 + '%' | |||
this.canvasReset() | |||
} else if (val === false && this.isOpen === false) { | |||
this.watch = 100 + '%' | |||
this.canvasReset() | |||
} | |||
// 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.initChart(this.actualOptions); | |||
}, | |||
series(val) { | |||
@@ -391,21 +396,26 @@ export default { | |||
return; | |||
} | |||
const actualOptions = JSON.parse(JSON.stringify(this.options)); | |||
actualOptions.series[0].data = val[0].data; | |||
actualOptions.series[0].name = val[0].name; | |||
actualOptions.series[1].data = val?.[1]?.data || []; | |||
actualOptions.series[1].name = val?.[1]?.name || ""; | |||
actualOptions.xAxis.data = val.times | |||
actualOptions.series[0].data = val[0] | |||
actualOptions.series[1].data = val[1]; | |||
actualOptions.series[2].data = val[2]; | |||
actualOptions.series[3].data = val[3]; | |||
actualOptions.series[4].data = val[4]; | |||
actualOptions.series[5].data = val[5]; | |||
actualOptions.series[6].data = val[6]; | |||
this.actualOptions = actualOptions; | |||
this.initChart(actualOptions); | |||
}, | |||
}, | |||
mounted() { | |||
// if (screenfull.isEnabled) { | |||
// screenfull.on("change", () => { | |||
// this.isFullscreen = screenfull.isFullscreen; | |||
// }); | |||
// } | |||
if (screenfull.isEnabled) { | |||
screenfull.on("change", () => { | |||
this.isFullscreen = screenfull.isFullscreen; | |||
}); | |||
} | |||
this.actualOptions = this.options | |||
this.canvasReset(); | |||
window.addEventListener("resize", this.canvasReset); | |||
@@ -11,7 +11,7 @@ | |||
<span v-for="item in legend" :key="item.label" class="legend-item" | |||
:style="{ fontSize: isFullscreen ? '0.58vw' : '0.54vw' }">{{ item.label }}</span> | |||
</div> | |||
<div ref="waterChart" :style="{ height: '100%',width: width}"></div> | |||
<div ref="waterChart" :style="{ height: '95%',width: width}"></div> | |||
</chart-container> | |||
</template> | |||
@@ -36,12 +36,12 @@ export default { | |||
type: Array, | |||
required: true, | |||
}, | |||
xAxis: { | |||
type: Array, | |||
required: true, | |||
}, | |||
// xAxis: { | |||
// type: Array, | |||
// required: true, | |||
// }, | |||
series: { | |||
type: Array, | |||
type: Object, | |||
required: true, | |||
}, | |||
in: { | |||
@@ -56,8 +56,8 @@ export default { | |||
actualOptions: null, | |||
options: { | |||
grid: { | |||
left: "1%", | |||
right: "4%", | |||
left: "3%", | |||
right: "2%", | |||
bottom: "3%", | |||
top: "15%", | |||
containLabel: true, | |||
@@ -88,15 +88,12 @@ export default { | |||
bottom: '3%', | |||
containLabel: true | |||
}, | |||
xAxis: [ | |||
{ | |||
xAxis:{ | |||
type: 'category', | |||
boundaryGap: false, | |||
data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'] | |||
} | |||
], | |||
yAxis: [ | |||
{ | |||
// boundaryGap: false, | |||
data: [] | |||
}, | |||
yAxis: { | |||
min: function () { // 取最小值向下取整为最小刻度 | |||
return 0 | |||
}, | |||
@@ -143,7 +140,6 @@ export default { | |||
// } | |||
// }, | |||
}, | |||
], | |||
series: [ | |||
{ | |||
name: '瑞昌', | |||
@@ -173,7 +169,7 @@ export default { | |||
// emphasis: { | |||
// focus: 'series' | |||
// }, | |||
data: [120, 132, 101, 134, 90, 230, 210] | |||
data: [] | |||
}, | |||
{ | |||
name: '邯郸', | |||
@@ -203,7 +199,7 @@ export default { | |||
// emphasis: { | |||
// focus: 'series' | |||
// }, | |||
data: [120, 132, 101, 134, 90, 230, 210] | |||
data: [] | |||
}, | |||
{ | |||
name: '株洲', | |||
@@ -233,7 +229,7 @@ export default { | |||
// emphasis: { | |||
// focus: 'series' | |||
// }, | |||
data: [120, 132, 101, 134, 90, 230, 210] | |||
data: [] | |||
}, | |||
{ | |||
name: '佳木斯', | |||
@@ -263,7 +259,7 @@ export default { | |||
// emphasis: { | |||
// focus: 'series' | |||
// }, | |||
data: [120, 132, 101, 134, 90, 230, 210] | |||
data: [] | |||
}, | |||
{ | |||
name: '成都', | |||
@@ -293,7 +289,7 @@ export default { | |||
// emphasis: { | |||
// focus: 'series' | |||
// }, | |||
data: [120, 132, 101, 134, 90, 230, 210] | |||
data: [] | |||
}, | |||
{ | |||
name: '凯盛', | |||
@@ -323,7 +319,7 @@ export default { | |||
// emphasis: { | |||
// focus: 'series' | |||
// }, | |||
data: [120, 132, 101, 134, 90, 230, 210] | |||
data: [] | |||
}, | |||
{ | |||
name: '蚌埠', | |||
@@ -353,7 +349,7 @@ export default { | |||
// emphasis: { | |||
// focus: 'series' | |||
// }, | |||
data: [120, 132, 101, 134, 90, 230, 210] | |||
data: [] | |||
}, | |||
] | |||
}, | |||
@@ -364,8 +360,9 @@ export default { | |||
// console.log(val) | |||
if (val === true) { | |||
console.log('ztl') | |||
this.width = '99%' | |||
this.width = 97 + '%' | |||
this.canvasReset() | |||
console.log(this.width) | |||
} else { | |||
this.watch = 100 + '%' | |||
@@ -374,15 +371,20 @@ export default { | |||
}, | |||
/** 全屏状态切换时,对柱子粗细和字体大小进行相应调整 */ | |||
isFullscreen(val) { | |||
if (val === true && this.isOpen === true) { | |||
this.width = '99%' | |||
if (val === false && this.isOpen === true) { | |||
console.log(val) | |||
this.width = 97 + '%' | |||
this.canvasReset() | |||
} else if(val === false && this.isOpen === false) { | |||
this.watch = 100 + '%' | |||
this.canvasReset() | |||
} | |||
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.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.initChart(this.actualOptions); | |||
}, | |||
series(val) { | |||
@@ -390,11 +392,22 @@ export default { | |||
this.initChart(this.options); | |||
return; | |||
} | |||
const actualOptions = JSON.parse(JSON.stringify(this.options)); | |||
actualOptions.series[0].data = val[0].data; | |||
actualOptions.series[0].name = val[0].name; | |||
actualOptions.series[1].data = val?.[1]?.data || []; | |||
actualOptions.series[1].name = val?.[1]?.name || ""; | |||
const actualOptions = JSON.parse(JSON.stringify(this.options)) | |||
// console.log(actualOptions) | |||
actualOptions.xAxis.data = val.times | |||
// actualOptions.series.forEach((ele,index) => { | |||
// ele.data = val.index | |||
// }) | |||
actualOptions.series[0].data = val[0] | |||
actualOptions.series[1].data = val[1]; | |||
actualOptions.series[2].data = val[2]; | |||
actualOptions.series[3].data = val[3]; | |||
actualOptions.series[4].data = val[4]; | |||
actualOptions.series[5].data = val[5]; | |||
actualOptions.series[6].data = val[6]; | |||
// actualOptions.series[1].data = val?.[1]?.data || []; | |||
// actualOptions.series[1].name = val?.[1]?.name || ""; | |||
this.actualOptions = actualOptions; | |||
this.initChart(actualOptions); | |||
}, | |||
@@ -1,7 +1,7 @@ | |||
<!-- | |||
* @Author: zhp | |||
* @Date: 2024-05-13 14:08:51 | |||
* @LastEditTime: 2024-05-14 08:46:07 | |||
* @LastEditTime: 2024-05-17 09:37:01 | |||
* @LastEditors: zhp | |||
* @Description: | |||
--> | |||
@@ -12,7 +12,7 @@ | |||
<!-- <span v-for="item in legend" :key="item.label" class="legend-item" | |||
:style="{ fontSize: isFullscreen ? '0.58vw' : '0.54vw' }">{{ item.label }}</span> --> | |||
</div> | |||
<div ref="gasChart" :style="{ height: '100%',width: width}"></div> | |||
<div ref="gasChart" :style="{ height: '95%',width: width}"></div> | |||
</chart-container> | |||
</template> | |||
@@ -33,22 +33,22 @@ export default { | |||
type: Number, | |||
default: 38, | |||
}, | |||
legend: { | |||
type: Array, | |||
required: false, | |||
}, | |||
// legend: { | |||
// type: Array, | |||
// required: false, | |||
// }, | |||
xAxis: { | |||
type: Array, | |||
required: true, | |||
}, | |||
series: { | |||
type: Array, | |||
required: true, | |||
}, | |||
in: { | |||
type: String, | |||
default: "", | |||
required: false, | |||
}, | |||
// in: { | |||
// type: String, | |||
// default: "", | |||
// }, | |||
}, | |||
data() { | |||
return { | |||
@@ -57,8 +57,8 @@ export default { | |||
actualOptions: null, | |||
options: { | |||
grid: { | |||
left: "1%", | |||
right: "4%", | |||
left: "3%", | |||
right: "2%", | |||
bottom: "3%", | |||
top: "15%", | |||
containLabel: true, | |||
@@ -140,38 +140,38 @@ export default { | |||
}, | |||
data: [], // this.series[0].data, | |||
}, | |||
{ | |||
name: "", // this.series[1].name, | |||
type: "bar", | |||
barWidth: 12, | |||
// tooltip: { | |||
// valueFormatter: function (value) { | |||
// return value + " ml"; | |||
// }, | |||
// }, | |||
itemStyle: { | |||
borderRadius: [10, 10, 0, 0], | |||
color: { | |||
type: "linear", | |||
x: 0, | |||
y: 0, | |||
x2: 0, | |||
y2: 1, | |||
colorStops: [ | |||
{ | |||
offset: 0, | |||
color: "#57abf8", // 0% 处的颜色 | |||
}, | |||
{ | |||
offset: 1, | |||
color: "#364BFE66", // 100% 处的颜色 | |||
}, | |||
], | |||
global: false, // 缺省为 false | |||
}, | |||
}, | |||
data: [], // this.series[1].data, | |||
}, | |||
// { | |||
// name: "", // this.series[1].name, | |||
// type: "bar", | |||
// barWidth: 12, | |||
// // tooltip: { | |||
// // valueFormatter: function (value) { | |||
// // return value + " ml"; | |||
// // }, | |||
// // }, | |||
// itemStyle: { | |||
// borderRadius: [10, 10, 0, 0], | |||
// color: { | |||
// type: "linear", | |||
// x: 0, | |||
// y: 0, | |||
// x2: 0, | |||
// y2: 1, | |||
// colorStops: [ | |||
// { | |||
// offset: 0, | |||
// color: "#57abf8", // 0% 处的颜色 | |||
// }, | |||
// { | |||
// offset: 1, | |||
// color: "#364BFE66", // 100% 处的颜色 | |||
// }, | |||
// ], | |||
// global: false, // 缺省为 false | |||
// }, | |||
// }, | |||
// data: [], // this.series[1].data, | |||
// }, | |||
], | |||
}, | |||
}; | |||
@@ -185,39 +185,44 @@ export default { | |||
isOpen(val) { | |||
// console.log(val) | |||
if (val === true) { | |||
console.log('ryf') | |||
this.width = '99%' | |||
this.width = 97 + '%' | |||
this.canvasReset() | |||
console.log(this.width) | |||
} else { | |||
console.log('ryf') | |||
this.watch = 100 + '%' | |||
this.canvasReset() | |||
} | |||
}, | |||
/** 全屏状态切换时,对柱子粗细和字体大小进行相应调整 */ | |||
isFullscreen(val) { | |||
if (val === true && this.isOpen === true) { | |||
this.width = '99%' | |||
if (val === false && this.isOpen === true) { | |||
this.width = 97 + '%' | |||
this.canvasReset() | |||
} else if (val === false && this.isOpen === false) { | |||
this.watch = 100 + '%' | |||
this.canvasReset() | |||
} | |||
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.actualOptions); | |||
// 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.initChart(this.actualOptions); | |||
}, | |||
series(val) { | |||
if (!val) { | |||
this.initOptions(this.options); | |||
this.initChart(this.options); | |||
return; | |||
} | |||
const actualOptions = JSON.parse(JSON.stringify(this.options)); | |||
console.log('actualOptions', this.options) | |||
actualOptions.series[0].data = val[0].data; | |||
actualOptions.series[0].name = val[0].name; | |||
actualOptions.series[1].data = val?.[1]?.data || []; | |||
actualOptions.series[1].name = val?.[1]?.name || ""; | |||
actualOptions.series[0].data = val; | |||
// actualOptions.series[0].name = val[0].name; | |||
// actualOptions.series[1].data = val?.[1]?.data || []; | |||
// actualOptions.series[1].name = val?.[1]?.name || ""; | |||
this.actualOptions = actualOptions; | |||
this.initChart(actualOptions); | |||
}, | |||
@@ -1,8 +1,8 @@ | |||
<!-- | |||
<!-- | |||
filename: select.vue | |||
author: liubin | |||
date: 2024-04-17 09:50:03 | |||
description: | |||
description: | |||
--> | |||
<template> | |||
@@ -7,7 +7,8 @@ | |||
--> | |||
<template> | |||
<div class="copilot-layout" ref="copilot-layout" :class="[ page== '产量' ? 'produce': 'other' ]"> | |||
<!-- <div class="copilot-layout" ref="copilot-layout"> --> | |||
<div class="copilot-layout" ref="copilot-layout" :class="[page == '效率' ? 'other' : 'produce' ]"> | |||
<CopilotHeaderVue :active="page" :period="period" @update:active="page = $event" @update:period="period = $event" /> | |||
<YieldCopilot v-if="page == '产量'" :period="period" /> | |||
@@ -71,6 +72,7 @@ export default { | |||
position: absolute; | |||
left: -16px; | |||
/* top: -8px; */ | |||
/* height: calc(100% + 38px); */ | |||
width: calc(100% + 30px); | |||
z-index: 1001; | |||
color: #fff; | |||
@@ -83,7 +85,7 @@ export default { | |||
height: calc(100% + 38px); | |||
} | |||
.other { | |||
height: 100vh + 50px; | |||
height: calc(100% + 240px); | |||
} | |||
.copilot-footer { | |||
/** position: absolute; | |||
@@ -110,4 +110,6 @@ function getTemplate(period, dataList) { | |||
} | |||
</script> | |||
<style scoped lang="scss"></style> | |||
<style scoped lang="scss"> | |||
</style> |
@@ -1,7 +1,7 @@ | |||
<!-- | |||
* @Author: zhp | |||
* @Date: 2024-05-07 10:25:10 | |||
* @LastEditTime: 2024-05-11 14:51:07 | |||
* @LastEditTime: 2024-05-20 10:04:03 | |||
* @LastEditors: zhp | |||
* @Description: | |||
--> | |||
@@ -11,7 +11,7 @@ | |||
<div class="span-2"> | |||
<StdRateItem :period="period" :city="cities[5]" /> | |||
</div> | |||
<div v-for="item in cities.filter((val, index) => index != 5)" :key="item.name"> | |||
<div class="flex-item" v-for="item in cities.filter((val, index) => index != 5)" :key="item.name"> | |||
<StdRateItem :period="period" :city="item" /> | |||
</div> | |||
</div> | |||
@@ -97,13 +97,22 @@ export default { | |||
<style scoped lang="scss"> | |||
.std-rate { | |||
display: grid; | |||
gap: 8px; | |||
grid-template-columns: repeat(2, 1fr); | |||
grid-template-rows: repeat(4, 1fr); | |||
} | |||
display: flex; | |||
// gap: 1px; | |||
flex: 1 1 auto; | |||
// display: -webkit-box; | |||
flex-wrap: wrap; | |||
align-items: center; | |||
// grid-template-columns: repeat(2, 1fr); | |||
// grid-template-rows: repeat(4, 1fr); | |||
} | |||
.flex-item{ | |||
// flex: 1 1 auto; | |||
width: 50%; | |||
} | |||
.span-2 { | |||
grid-column: span 2; | |||
// flex: 1 1 auto; | |||
flex-basis: 100%; | |||
} | |||
</style> |
@@ -11,7 +11,7 @@ | |||
<CopilotButtons :options="cities" @update:active="handleCityUpdate" /> | |||
</div> | |||
<!-- <div style="flex:1;padding: 0 20%;"> --> | |||
<div class="chart" ref="chart"></div> | |||
<div class="chart" ref="chart"></div> | |||
<!-- </div> --> | |||
<div class="legend" v-if="period == '月' || period == '年'"> | |||
<div class="legend-item" v-for="lgd in legend" :key="lgd.label"> | |||
@@ -145,25 +145,29 @@ export default { | |||
</script> | |||
<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 { | |||
height: 40px; | |||
} | |||
.chart { | |||
width: 390px; | |||
align-self: stretch; | |||
height: 280px; | |||
} | |||
.chart { | |||
// margin-left: 5%; | |||
// width: 290px; | |||
align-self: stretch; | |||
// flex: 1 1 auto; | |||
// padding: 0 10%; | |||
/* margin: 10%; */ | |||
/* min-width: 300px; */ | |||
height: 200px; | |||
} | |||
.legend { | |||
height: 80px; | |||
display: flex; | |||
@@ -1,7 +1,7 @@ | |||
<!-- | |||
* @Author: zhp | |||
* @Date: 2024-05-07 10:25:10 | |||
* @LastEditTime: 2024-05-11 15:05:17 | |||
* @LastEditTime: 2024-05-20 09:46:19 | |||
* @LastEditors: zhp | |||
* @Description: | |||
--> | |||
@@ -109,15 +109,16 @@ export default { | |||
display: flex; | |||
align-items: center; | |||
gap: 8px; | |||
flex: 1 1 auto; | |||
padding: 12px; | |||
} | |||
.std-rate-item__value { | |||
flex: 1; | |||
flex: 1 1 auto; | |||
margin: 6px; | |||
display: flex; | |||
gap: 12px; | |||
height: 60px; | |||
// height: auto; | |||
flex-direction: column; | |||
justify-content: center; | |||
} | |||
@@ -1,7 +1,7 @@ | |||
<!-- | |||
* @Author: zhp | |||
* @Date: 2024-05-07 10:04:53 | |||
* @LastEditTime: 2024-05-09 08:56:44 | |||
* @LastEditTime: 2024-05-17 17:05:36 | |||
* @LastEditors: zhp | |||
* @Description: | |||
--> | |||
@@ -85,48 +85,25 @@ export default { | |||
// } | |||
// }, | |||
series() { | |||
const { ftoInvest } = this.$store.getters.copilot.yield; | |||
let dataList = null; | |||
return this.$store.getters.copilot.energy.elecList; | |||
// let dataList = null; | |||
switch (this.period) { | |||
case "日": | |||
case "周": | |||
dataList = ftoInvest?.current; | |||
break; | |||
default: | |||
dataList = []; | |||
dataList[0] = ftoInvest?.pervious; | |||
dataList[1] = ftoInvest?.current; | |||
} | |||
// switch (this.period) { | |||
// case "日": | |||
// case "周": | |||
// dataList = ftoInvest?.current; | |||
// break; | |||
// default: | |||
// dataList = []; | |||
// dataList[0] = ftoInvest?.pervious; | |||
// dataList[1] = ftoInvest?.current; | |||
// } | |||
return getTemplate(this.period, dataList); | |||
// return getTemplate(this.period, dataList); | |||
}, | |||
}, | |||
methods: {}, | |||
}; | |||
function getTemplate(period, dataList) { | |||
const year = new Date().getFullYear(); | |||
const month = new Date().getMonth() + 1; | |||
return period == "日" || period == "周" | |||
? [ | |||
{ | |||
name: period == "日" ? "昨日" : "本周", | |||
data: dataList ?? [], | |||
}, | |||
] | |||
: [ | |||
{ | |||
name: period == "年" ? `${year - 1}年` : `${year - 1}年${month}月`, | |||
data: dataList ? dataList[0] : [], | |||
}, | |||
{ | |||
name: period == "年" ? `${year}年` : `${year}年${month}月`, | |||
data: dataList ? dataList[1] : [], | |||
// : Array.from({ length: 7 }, () => Math.floor(Math.random() * 1000)), | |||
}, | |||
]; | |||
} | |||
</script> | |||
<style scoped lang="scss"> | |||
@@ -1,3 +1,11 @@ | |||
<!-- | |||
* @Author: zhp | |||
* @Date: 2024-05-14 08:48:34 | |||
* @LastEditTime: 2024-05-17 09:42:41 | |||
* @LastEditors: zhp | |||
* @Description: | |||
--> | |||
<!-- | |||
filename: NatGas.vue | |||
author: liubin | |||
@@ -30,81 +38,37 @@ export default { | |||
// 城市数组的顺序必须是固定的 | |||
const cities = ["瑞昌", "邯郸", "株洲", "佳木斯", "成都", "凯盛", "蚌埠"]; | |||
return { | |||
// series: [], | |||
xAxis: cities, | |||
}; | |||
}, | |||
// watch: { | |||
// period() { | |||
// this.series = this.$store.getters.copilot.energy.stockDOData; | |||
// } | |||
// }, | |||
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 - 1}年${month}月`, color: "#12f7f1" }, | |||
// { label: `${year}年${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 { ftoInvest } = this.$store.getters.copilot.yield; | |||
let dataList = null; | |||
console.log('this.$store.getters.copilot.energy.gasList', this.$store.getters.copilot.energy.gasList); | |||
return this.$store.getters.copilot.energy.gasList; | |||
// let dataList = null; | |||
// let dataList = gasList | |||
// switch (this.period) { | |||
// case "日": | |||
// case "周": | |||
// dataList = ftoInvest?.current; | |||
// break; | |||
// default: | |||
// dataList = []; | |||
// dataList[0] = ftoInvest?.pervious; | |||
// dataList[1] = ftoInvest?.current; | |||
// } | |||
switch (this.period) { | |||
case "日": | |||
case "周": | |||
dataList = ftoInvest?.current; | |||
break; | |||
default: | |||
dataList = []; | |||
dataList[0] = ftoInvest?.pervious; | |||
dataList[1] = ftoInvest?.current; | |||
} | |||
return getTemplate(this.period, dataList); | |||
// return gasList | |||
}, | |||
}, | |||
methods: {}, | |||
}; | |||
function getTemplate(period, dataList) { | |||
const year = new Date().getFullYear(); | |||
const month = new Date().getMonth() + 1; | |||
return period == "日" || period == "周" | |||
? [ | |||
{ | |||
name: period == "日" ? "昨日" : "本周", | |||
data: dataList ?? [], | |||
}, | |||
] | |||
: [ | |||
{ | |||
name: period == "年" ? `${year - 1}年` : `${year - 1}年${month}月`, | |||
data: dataList ? dataList[0] : [], | |||
}, | |||
{ | |||
name: period == "年" ? `${year}年` : `${year}年${month}月`, | |||
data: dataList ? dataList[1] : [], | |||
// : Array.from({ length: 7 }, () => Math.floor(Math.random() * 1000)), | |||
}, | |||
]; | |||
} | |||
</script> | |||
<style scoped lang="scss"> | |||
@@ -1,18 +1,15 @@ | |||
<!-- | |||
* @Author: zhp | |||
* @Date: 2024-05-07 10:25:10 | |||
* @LastEditTime: 2024-05-08 09:39:15 | |||
* @LastEditTime: 2024-05-17 10:34:51 | |||
* @LastEditors: zhp | |||
* @Description: | |||
--> | |||
<template> | |||
<div class="stock-monitor"> | |||
<MonitorItem | |||
:cities="['成都', '邯郸', '株洲', '瑞昌', '佳木斯']" | |||
:legendList="dhgList" | |||
/> | |||
<MonitorItem :cities="['凯盛光伏', '蚌埠兴科']" :legendList="otherList" /> | |||
<MonitorItem :cities="['成都', '邯郸', '株洲', '瑞昌', '佳木斯']" :stockDOData="stockDOData" /> | |||
<MonitorItem :cities="['凯盛光伏', '蚌埠兴科']" :stockDOData="stockDOData" /> | |||
</div> | |||
</template> | |||
@@ -22,23 +19,33 @@ import MonitorItemVue from "./sub/monitor/MonitorItem.vue"; | |||
export default { | |||
name: "StockMonitor", | |||
components: { MonitorItem: MonitorItemVue }, | |||
props: {}, | |||
props: { | |||
stockDOData: { | |||
type: Array, | |||
default: [], | |||
}, | |||
}, | |||
data() { | |||
return { | |||
dhgList: [ | |||
{ name: "总库存", value: 1000 }, | |||
{ name: "已用库存", value: 500 }, | |||
{ name: "剩余库存", value: 500 }, | |||
], | |||
otherList: [ | |||
{ name: "分类1", value: 1000 }, | |||
{ name: "分类2", value: 1000 }, | |||
{ name: "分类3", value: 1000 }, | |||
{ name: "分类4", value: 1000 }, | |||
], | |||
// dhgList: [ | |||
// { name: "总库存", value: 1000 }, | |||
// { name: "已用库存", value: 500 }, | |||
// { name: "剩余库存", value: 500 }, | |||
// ], | |||
// otherList: [ | |||
// { name: "分类1", value: 1000 }, | |||
// { name: "分类2", value: 1000 }, | |||
// { name: "分类3", value: 1000 }, | |||
// { name: "分类4", value: 1000 }, | |||
// ], | |||
}; | |||
}, | |||
computed: {}, | |||
computed: { | |||
dhgList() { | |||
console.log(this.stockDOData); | |||
// console.log() | |||
} | |||
}, | |||
methods: {}, | |||
}; | |||
</script> | |||
@@ -85,48 +85,13 @@ export default { | |||
// } | |||
// }, | |||
series() { | |||
const { ftoInvest } = this.$store.getters.copilot.yield; | |||
let dataList = null; | |||
switch (this.period) { | |||
case "日": | |||
case "周": | |||
dataList = ftoInvest?.current; | |||
break; | |||
default: | |||
dataList = []; | |||
dataList[0] = ftoInvest?.pervious; | |||
dataList[1] = ftoInvest?.current; | |||
} | |||
return getTemplate(this.period, dataList); | |||
console.log('this.$store.getters.copilot.energy.waterList', this.$store.getters.copilot.energy.waterList.times); | |||
return this.$store.getters.copilot.energy.waterList | |||
// return getTemplate(this.period, dataList); | |||
}, | |||
}, | |||
methods: {}, | |||
}; | |||
function getTemplate(period, dataList) { | |||
const year = new Date().getFullYear(); | |||
const month = new Date().getMonth() + 1; | |||
return period == "日" || period == "周" | |||
? [ | |||
{ | |||
name: period == "日" ? "昨日" : "本周", | |||
data: dataList ?? [], | |||
}, | |||
] | |||
: [ | |||
{ | |||
name: period == "年" ? `${year - 1}年` : `${year - 1}年${month}月`, | |||
data: dataList ? dataList[0] : [], | |||
}, | |||
{ | |||
name: period == "年" ? `${year}年` : `${year}年${month}月`, | |||
data: dataList ? dataList[1] : [], | |||
// : Array.from({ length: 7 }, () => Math.floor(Math.random() * 1000)), | |||
}, | |||
]; | |||
} | |||
</script> | |||
<style scoped lang="scss"> | |||
@@ -10,16 +10,16 @@ | |||
<div class="cities"> | |||
<CopilotButtons :options="cities" @update:active="handleCityUpdate" /> | |||
</div> | |||
<div style="padding: 0 30px;width: 90%;"> | |||
<!-- <div style="width: 90%;"> --> | |||
<div class="chart" ref="chart"></div> | |||
</div> | |||
<!-- </div> --> | |||
<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> | |||
<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="'backgroundColor:' + colors[index % 5]" class="legend-item__chart"></span> | |||
<span :style="'color:' + colors[index % 5]" class="legend-item__label">{{ lgd.name }}</span> | |||
</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> | |||
@@ -40,10 +40,10 @@ export default { | |||
type: Array, | |||
default: () => [], | |||
}, | |||
legendList: { | |||
type: Array, | |||
default: () => [], | |||
}, | |||
// legendList: { | |||
// type: Array, | |||
// default: () => [], | |||
// }, | |||
color: { | |||
type: Number, | |||
default: 1, | |||
@@ -52,42 +52,95 @@ export default { | |||
data() { | |||
return { | |||
period: "月", | |||
colors:['#2760FF', '#5996F7', '#8BC566', '#11FAF0', '#F3C000'], | |||
valueTuple: [100, 100, 200], | |||
factoryId: 0, | |||
// legendList:[], | |||
colors: ['#2760FF', '#5996F7', '#8BC566', '#11FAF0', '#F3C000'], | |||
// valueTuple: [100, 100, 200], | |||
}; | |||
}, | |||
computed: { | |||
data() { | |||
console.log('ztl', this.$store.getters.copilot.energy.gasList) | |||
return this.$store.getters.copilot.energy.stockDOData | |||
}, | |||
valueTuple() { | |||
return this.data[this.factoryId] | |||
}, | |||
legendList() { | |||
// if (this.valueTuple) { | |||
// if (this.valueTuple.length == 0) { | |||
return this.valueTuple | |||
// } else { | |||
// return [] | |||
// } | |||
// console.log(this.valueTuple) | |||
// } else { | |||
// return [] | |||
// } | |||
}, | |||
options() { | |||
const year = new Date().getFullYear(); | |||
const month = new Date().getMonth() + 1; | |||
// const year = new Date().getFullYear(); | |||
// const month = new Date().getMonth() + 1; | |||
let arr = [] | |||
this.legendList.forEach(ele => { | |||
arr.push(ele.value) | |||
}); | |||
let vt = arr | |||
console.log(arr) | |||
let titleValue = vt.reduce(function (prev, cur, index, arr) { | |||
return prev + cur | |||
}) | |||
let subtitle = `总计/片`; | |||
let titleValue = '' | |||
if (this.legendList != 0) { | |||
this.legendList.forEach(ele => { | |||
arr.push(ele.value) | |||
}); | |||
let vt = arr | |||
titleValue = vt.reduce(function (prev, cur, index, arr) { | |||
return prev + cur | |||
}) | |||
} else { | |||
titleValue = '' | |||
// this.legendList = [] | |||
} | |||
let subtitle = `总计/片`; | |||
return getOptions({ | |||
single: true, | |||
color: this.color == 1 ? "#4CF0E8" : "#1065ff", | |||
// single: true, | |||
// color: this.color == 1 ? "#4CF0E8" : "#1065ff", | |||
titleValue, | |||
subtitle, | |||
dataList:this.legendList, | |||
previousSum: this.valueTuple[0], | |||
currentSum: this.valueTuple[1], | |||
targetSum: this.valueTuple[2], | |||
dataList: this.data[this.factoryId], | |||
// previousSum: this.valueTuple[0], | |||
// currentSum: this.valueTuple[1], | |||
// targetSum: this.valueTuple[2], | |||
}); | |||
}, | |||
}, | |||
watch: { | |||
period() { | |||
this.initOptions(this.options); | |||
}, | |||
legendList() { | |||
this.initOptions(this.options); | |||
}, | |||
factoryId(newVal, oldVal) { | |||
console.log(newVal); | |||
// if (newVal) { | |||
// this.legendList = this.data[newVal] | |||
// if ( == 0) { | |||
// this.initOptions(this.options) | |||
// } | |||
// console.log(this.valueTuple.length) | |||
// console.log(this.options) | |||
this.initOptions(this.options) | |||
// } | |||
}, | |||
// chipRate() { | |||
// this.initOptions(this.options); | |||
// }, | |||
}, | |||
mounted() { | |||
// console.log(this.legendList) | |||
this.initOptions(this.options); | |||
}, | |||
methods: { | |||
handleCityUpdate() {}, | |||
handleCityUpdate(id) { | |||
console.log(id) | |||
this.factoryId = id; | |||
}, | |||
fullscreenCallback(isFullscreen) { | |||
console.log("isFullscreen--->", isFullscreen); | |||
}, | |||
@@ -110,10 +163,14 @@ export default { | |||
} | |||
.chart { | |||
margin-left: 5%; | |||
width: 290px; | |||
// margin-left: 5%; | |||
// width: 290px; | |||
align-self: stretch; | |||
height: 280px; | |||
flex: 1 1 auto; | |||
// padding: 0 10%; | |||
/* margin: 10%; */ | |||
/* min-width: 300px; */ | |||
height: 0; | |||
} | |||
.legend { | |||
@@ -132,7 +189,8 @@ export default { | |||
align-items: center; | |||
flex-wrap: wrap; | |||
gap: 3px; | |||
.legend-item__chart{ | |||
.legend-item__chart { | |||
display: inline-block; | |||
width: 14px; | |||
height: 14px; | |||
@@ -140,9 +198,11 @@ export default { | |||
border-radius: 2px; | |||
// margin-right: 8px; | |||
} | |||
.legend-item__label { | |||
.legend-item__label { | |||
margin-left: 8px; | |||
} | |||
// } | |||
} | |||
@@ -152,4 +212,3 @@ export default { | |||
} | |||
} | |||
</style> | |||
l |
@@ -1,25 +1,29 @@ | |||
<!-- | |||
* @Author: zhp | |||
* @Date: 2024-05-07 10:25:10 | |||
* @LastEditTime: 2024-05-13 15:48:10 | |||
* @LastEditTime: 2024-05-16 15:31:20 | |||
* @LastEditors: zhp | |||
* @Description: | |||
--> | |||
<template> | |||
<div class="energy-copilot"> | |||
<Container title="仓库监控·当前" icon="ware"> | |||
<StockMonitorVue :period="period" /> | |||
</Container> | |||
<Container title="天然气能耗" icon="gas"> | |||
<NatGasVue :period="period" /> | |||
</Container> | |||
<Container title="电能耗" icon="flash"> | |||
<ElecCostVue :period="period" /> | |||
</Container> | |||
<Container title="水能耗" icon="water"> | |||
<WaterCostVue :period="period" /> | |||
</Container> | |||
<section class="top flex"> | |||
<Container title="仓库监控·当前" icon="ware"> | |||
<StockMonitorVue :stockDOData="stockDOData" :period="period" /> | |||
</Container> | |||
<Container title="天然气能耗" icon="gas"> | |||
<NatGasVue :period="period" /> | |||
</Container> | |||
</section> | |||
<section class="bottom flex"> | |||
<Container title="电能耗" icon="flash"> | |||
<ElecCostVue :period="period" /> | |||
</Container> | |||
<Container title="水能耗" icon="water"> | |||
<WaterCostVue :period="period" /> | |||
</Container> | |||
</section> | |||
</div> | |||
</template> | |||
@@ -29,7 +33,6 @@ import StockMonitorVue from "./components/StockMonitor.vue"; | |||
import ElecCostVue from "./components/ElecCost.vue"; | |||
import NatGasVue from "./components/NatGas.vue"; | |||
import WaterCostVue from "./components/WaterCost.vue"; | |||
export default { | |||
name: "EnergyCopilot", | |||
components: { | |||
@@ -46,7 +49,9 @@ export default { | |||
}, | |||
}, | |||
data() { | |||
return {}; | |||
return { | |||
stockDOData:[], | |||
}; | |||
}, | |||
watch: { | |||
period: { | |||
@@ -61,11 +66,16 @@ export default { | |||
fetchData(period = "日") { | |||
// console.log(this.width); | |||
// console.log('sidebar', this.$store.getters.sidebar); | |||
console.log(`效率驾驶舱,获取${period}数据`); | |||
console.log(`综合驾驶舱,获取${period}数据`); | |||
// this.getData(this.period) | |||
this.$store.dispatch("copilot/initCopilot", { | |||
period, | |||
source: "comprehensive", | |||
source: "energy", | |||
}); | |||
// this.$store.dispatch("copilot/initCopilot", { | |||
// period, | |||
// source: "comprehensive", | |||
// }); | |||
}, | |||
}, | |||
}; | |||
@@ -74,13 +84,19 @@ export default { | |||
<style scoped> | |||
.energy-copilot { | |||
flex: 1; | |||
display: grid; | |||
display: flex; | |||
flex-direction: column; | |||
gap: 16px; | |||
grid-template-columns: 1fr 1fr; | |||
grid-template-rows: 1fr 1fr; | |||
} | |||
.energy-copilot > div { | |||
.flex { | |||
display: flex; | |||
gap: 16px; | |||
flex: 1; | |||
} | |||
.top>div, | |||
.bottom>div { | |||
height: 100%; | |||
} | |||
</style> |
@@ -1,19 +1,16 @@ | |||
/* | |||
* @Author: zhp | |||
* @Date: 2024-05-07 10:25:10 | |||
* @LastEditTime: 2024-05-10 16:10:49 | |||
* @LastEditTime: 2024-05-16 13:35:50 | |||
* @LastEditors: zhp | |||
* @Description: | |||
*/ | |||
export default function ({ | |||
single = false, | |||
// single = false, | |||
colors = ['#2760FF', '#5996F7', '#8BC566', '#11FAF0','#F3C000'], | |||
titleValue, | |||
subtitle, | |||
dataList, | |||
previousSum, | |||
currentSum, | |||
targetSum, | |||
}) { | |||
return { | |||
grid: { | |||
@@ -26,7 +23,7 @@ export default function ({ | |||
// tooltip: {}, | |||
title: { | |||
text: titleValue, | |||
left: "49%", | |||
left: "47%", | |||
top: "39%", | |||
textAlign: "center", | |||
textStyle: { | |||
@@ -50,7 +47,7 @@ export default function ({ | |||
{ | |||
name: 'Access From', | |||
type: 'pie', | |||
// center: ['50%', '40%'], | |||
center: ['50%', '50%'], | |||
radius: ['50%', '80%'], | |||
avoidLabelOverlap: false, | |||
labelLine: { | |||
@@ -62,7 +59,6 @@ export default function ({ | |||
data: dataList && dataList.length > 0 && dataList.map((item, index) => ({ | |||
name:item.name, | |||
value: item.value, | |||
itemStyle:{ | |||
color:{ | |||
type: 'linear', | |||
@@ -65,6 +65,7 @@ export default { | |||
}, | |||
series() { | |||
const { ftoInvest } = this.$store.getters.copilot.yield; | |||
console.log('ftoInvest', this.$store.getters.copilot.yield); | |||
let dataList = null; | |||
switch (this.period) { | |||
@@ -7,9 +7,9 @@ | |||
<template> | |||
<div class="double-ring-chart"> | |||
<div class="double-ring-chart__container"> | |||
<div ref="chart" style="height: 90%;"></div> | |||
</div> | |||
<!-- <div> --> | |||
<div ref="chart" class="double-ring-chart__container"></div> | |||
<!-- </div> --> | |||
<!-- style="{ height: vHeight + 'vh' }" --> | |||
<div class="double-ring-chart__legend"> | |||
<div v-for="item in legendItems" :key="item.label" class="legend-item"> | |||
@@ -22,12 +22,12 @@ | |||
<script> | |||
import chartMixin from "@/mixins/chart.js"; | |||
import fullscreenMixin from "@/mixins/fullscreen.js"; | |||
import screenfull from "screenfull"; | |||
import getOptions from "../../../options/double-ring-chart-options"; | |||
export default { | |||
name: "DoubleRingChart", | |||
mixins: [chartMixin, fullscreenMixin], | |||
mixins: [chartMixin], | |||
props: { | |||
vHeight: { | |||
type: Number, | |||
@@ -47,7 +47,9 @@ export default { | |||
}, | |||
}, | |||
data() { | |||
return {}; | |||
return { | |||
isFullscreen: false, | |||
}; | |||
}, | |||
filters: { | |||
numberFilter(val) { | |||
@@ -111,18 +113,32 @@ export default { | |||
}, | |||
}, | |||
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() { | |||
this.initOptions(this.options); | |||
}, | |||
}, | |||
mounted() { | |||
this.initOptions(this.options); | |||
if (screenfull.isEnabled) { | |||
screenfull.on("change", () => { | |||
this.isFullscreen = screenfull.isFullscreen; | |||
}); | |||
} | |||
}, | |||
methods: { | |||
// fullscreen mixin 需要的回调 | |||
fullscreenCallback(isFullscreen) { | |||
console.log("isFullscreen--->", isFullscreen); | |||
}, | |||
// fullscreenCallback(isFullscreen) { | |||
// console.log("isFullscreen--->", isFullscreen); | |||
// }, | |||
}, | |||
}; | |||
@@ -171,7 +187,7 @@ function calculateItems(period, valueTuple) { | |||
} | |||
.double-ring-chart__container { | |||
flex:1; | |||
flex:1 1 auto; | |||
padding: 0 10%; | |||
/* margin: 10%; */ | |||
/* min-width: 300px; */ | |||
@@ -1,8 +1,8 @@ | |||
<!-- | |||
<!-- | |||
filename: DoubleRingWrapper.vue | |||
author: liubin | |||
date: 2024-04-17 09:55:12 | |||
description: | |||
description: | |||
--> | |||
<template> | |||
@@ -42,9 +42,11 @@ export default { | |||
}, | |||
mounted() { | |||
this.getTimes() | |||
this.getWeather() | |||
this.getTimesInterval() | |||
this.weatherInterval = setInterval(() => { | |||
this,this.getWeather() | |||
}, 1000) | |||
this.getWeather() | |||
}, 1800000) | |||
}, | |||
destroyed() { | |||
// console.log(1111) | |||
@@ -52,9 +54,9 @@ export default { | |||
}, | |||
methods: { | |||
getTimes() { | |||
setInterval(this.getTimesInterval, 1000); | |||
setInterval(this.getTimesInterval, 60000); | |||
}, | |||
getTimesInterval: function () { | |||
getTimesInterval() { | |||
var now = new Date(); | |||
var weekDay = now.getDay(); | |||
var weeks = new Array("星期日", "星期一", "星期二", "星期三", "星期四", "星期五", "星期六"); | |||