驾驶舱对接
This commit is contained in:
@@ -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-16 10:42:25
|
||||
* @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,7 +10,7 @@
|
||||
<div class="cities">
|
||||
<CopilotButtons :options="cities" @update:active="handleCityUpdate" />
|
||||
</div>
|
||||
<div style="padding: 0 30px;width: 90%;">
|
||||
<div style="padding: 0 40px;width: 90%;">
|
||||
<div class="chart" ref="chart"></div>
|
||||
</div>
|
||||
<div class="legend" v-if="1">
|
||||
@@ -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: "月",
|
||||
factoryId: 0,
|
||||
// legendList:[],
|
||||
colors:['#2760FF', '#5996F7', '#8BC566', '#11FAF0', '#F3C000'],
|
||||
valueTuple: [100, 100, 200],
|
||||
// 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,10 @@ export default {
|
||||
}
|
||||
|
||||
.chart {
|
||||
margin-left: 5%;
|
||||
// margin-left: 5%;
|
||||
width: 290px;
|
||||
align-self: stretch;
|
||||
height: 280px;
|
||||
height: 150px;
|
||||
}
|
||||
|
||||
.legend {
|
||||
|
||||
Reference in New Issue
Block a user