151 lines
3.0 KiB
Vue
151 lines
3.0 KiB
Vue
<!--
|
|
filename: CityData.vue
|
|
author: liubin
|
|
date: 2024-04-17 09:55:12
|
|
description:
|
|
-->
|
|
|
|
<template>
|
|
<div class="city-data">
|
|
<div class="headquarter">
|
|
<div class="inner-shadow w-1"></div>
|
|
<div class="inner-shadow flex-1 flex">
|
|
<CityName value="凯盛光伏" />
|
|
<CityValue :value="headquarterValue" horizontal :period="period" />
|
|
</div>
|
|
<div class="inner-shadow w-1"></div>
|
|
</div>
|
|
|
|
<div class="city-item-container">
|
|
<CityItem
|
|
v-for="city in cities"
|
|
:key="city.name"
|
|
:location="city.name"
|
|
:value="city.value"
|
|
:period="period"
|
|
/>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
|
|
<script>
|
|
import CityItemVue from "./CityItem.vue";
|
|
import CityNameVue from "./CityName.vue";
|
|
import CityValueVue from "./CityValue.vue";
|
|
|
|
export default {
|
|
name: "CityData",
|
|
components: {
|
|
CityItem: CityItemVue,
|
|
CityName: CityNameVue,
|
|
CityValue: CityValueVue,
|
|
},
|
|
props: {
|
|
dataSource: {
|
|
type: String,
|
|
default: null,
|
|
},
|
|
period: {
|
|
type: String,
|
|
default: "日",
|
|
},
|
|
},
|
|
data() {
|
|
return {};
|
|
},
|
|
computed: {
|
|
headquarterValue() {
|
|
let getterName = "";
|
|
switch (this.dataSource) {
|
|
case "标准组件产出":
|
|
getterName = "stdOutput";
|
|
break;
|
|
case "芯片产出":
|
|
getterName = "chipOutput";
|
|
break;
|
|
case "BIPV产出":
|
|
getterName = "bipvOutput";
|
|
break;
|
|
}
|
|
return (
|
|
"" + (this.$store.getters.copilot.yield[getterName]?.current?.[5] ?? 0)
|
|
);
|
|
},
|
|
cities() {
|
|
// console.log('ztl')
|
|
let getterName = "";
|
|
switch (this.dataSource) {
|
|
case "标准组件产出":
|
|
getterName = "stdOutput";
|
|
break;
|
|
case "芯片产出":
|
|
getterName = "chipOutput";
|
|
break;
|
|
case "BIPV产出":
|
|
getterName = "bipvOutput";
|
|
break;
|
|
}
|
|
const _cities = [
|
|
{ name: "瑞昌", value: 0 },
|
|
{ name: "邯郸", value: 0 },
|
|
{ name: "株洲", value: 0 },
|
|
{ name: "佳木斯", value: 0 },
|
|
{ name: "成都", value: 0 },
|
|
{ name: "凯盛光伏", value: 0 },
|
|
{ name: "蚌埠兴科", value: 0 },
|
|
];
|
|
this.$store.getters.copilot.yield[getterName]?.current?.forEach(
|
|
(v, idx) => {
|
|
_cities[idx].value = v ?? 0;
|
|
}
|
|
);
|
|
// 删掉凯盛光伏
|
|
_cities.splice(4, 1);
|
|
return _cities;
|
|
},
|
|
},
|
|
mounted() {},
|
|
methods: {},
|
|
};
|
|
</script>
|
|
|
|
<style scoped lang="scss">
|
|
.city-data {
|
|
width: 100%;
|
|
flex: 1;
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: 8px;
|
|
}
|
|
|
|
.headquarter {
|
|
flex: 1;
|
|
display: flex;
|
|
gap: 8px;
|
|
}
|
|
|
|
.w-1 {
|
|
width: 70px;
|
|
}
|
|
|
|
.flex {
|
|
display: flex;
|
|
}
|
|
|
|
.flex-1 {
|
|
flex: 1;
|
|
}
|
|
|
|
.inner-shadow {
|
|
box-shadow: inset 0 0 12px 2px #fff3;
|
|
border-radius: 4px;
|
|
}
|
|
|
|
.city-item-container {
|
|
flex: 3;
|
|
display: grid;
|
|
grid-template-columns: repeat(2, 1fr);
|
|
gap: 8px;
|
|
}
|
|
</style>
|