保存
This commit is contained in:
‘937886381’
149
src/views/copilot/efficiency/components/sub/city/CityData.vue
Normal file
149
src/views/copilot/efficiency/components/sub/city/CityData.vue
Normal file
@@ -0,0 +1,149 @@
|
||||
<!--
|
||||
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() {
|
||||
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>
|
||||
@@ -0,0 +1,59 @@
|
||||
<!--
|
||||
filename: CityItem.vue
|
||||
author: liubin
|
||||
date: 2024-04-17 09:55:12
|
||||
description:
|
||||
-->
|
||||
|
||||
<template>
|
||||
<div class="city-item inner-shadow">
|
||||
<CityName :value="location" />
|
||||
<CityValue :value="value + ''" :period="period" />
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import CityNameVue from "./CityName.vue";
|
||||
import CityValueVue from "./CityValue.vue";
|
||||
import GradientTextVue from "../gradient/GradientText.vue";
|
||||
|
||||
export default {
|
||||
name: "CityItem",
|
||||
components: {
|
||||
GradientTextVue,
|
||||
CityName: CityNameVue,
|
||||
CityValue: CityValueVue,
|
||||
},
|
||||
props: {
|
||||
location: {
|
||||
type: String,
|
||||
default: "",
|
||||
},
|
||||
value: {
|
||||
type: Number,
|
||||
default: 0,
|
||||
},
|
||||
period: {
|
||||
type: String,
|
||||
default: "日",
|
||||
},
|
||||
},
|
||||
data() {
|
||||
return {};
|
||||
},
|
||||
computed: {},
|
||||
mounted() {},
|
||||
methods: {},
|
||||
};
|
||||
</script>
|
||||
|
||||
<style scoped lang="scss">
|
||||
.city-item {
|
||||
display: flex;
|
||||
}
|
||||
|
||||
.inner-shadow {
|
||||
box-shadow: inset 0 0 12px 2px #fff3;
|
||||
border-radius: 4px;
|
||||
}
|
||||
</style>
|
||||
@@ -0,0 +1,55 @@
|
||||
<!--
|
||||
filename: CityName.vue
|
||||
author: liubin
|
||||
date: 2024-04-10 08:59:28
|
||||
description:
|
||||
-->
|
||||
|
||||
<template>
|
||||
<div class="city-name">
|
||||
<img :src="Icon" alt="city icon" />
|
||||
<span>{{ value }}</span>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import Icon from "../../../assets/icon.png";
|
||||
|
||||
export default {
|
||||
name: "CityName",
|
||||
props: {
|
||||
value: {
|
||||
type: String,
|
||||
default: "",
|
||||
},
|
||||
},
|
||||
data() {
|
||||
return { Icon };
|
||||
},
|
||||
};
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.city-name {
|
||||
min-width: 80px;
|
||||
margin: auto;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
padding: 0 8px;
|
||||
flex: 1;
|
||||
}
|
||||
|
||||
img {
|
||||
/* width: 32px; */
|
||||
width: 1.543vw;
|
||||
}
|
||||
|
||||
span {
|
||||
/* font-size: 12px; */
|
||||
font-size: 0.77vw;
|
||||
letter-spacing: 2px;
|
||||
text-align: center;
|
||||
}
|
||||
</style>
|
||||
127
src/views/copilot/efficiency/components/sub/city/CityValue.vue
Normal file
127
src/views/copilot/efficiency/components/sub/city/CityValue.vue
Normal file
@@ -0,0 +1,127 @@
|
||||
<!--
|
||||
filename: CityValue.vue
|
||||
author: liubin
|
||||
date: 2024-04-10 08:59:28
|
||||
description:
|
||||
-->
|
||||
|
||||
<template>
|
||||
<div class="city-value" :class="[horizontal ? 'horizontal' : '']">
|
||||
<span class="hint" :class="[horizontal ? 'horizontal' : '']">{{
|
||||
period == "周" ? "本周产出" : "今日产出"
|
||||
}}</span>
|
||||
<span class="value" :class="[horizontal ? 'horizontal' : '']">{{
|
||||
value | numberFilter
|
||||
}}</span>
|
||||
<!-- <GradientTextVue :text="value" :size="horizontal ? 32 : 26" /> -->
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import GradientTextVue from "../gradient/GradientText.vue";
|
||||
|
||||
export default {
|
||||
name: "CityValue",
|
||||
components: { GradientTextVue },
|
||||
props: {
|
||||
period: {
|
||||
type: String,
|
||||
default: "日",
|
||||
},
|
||||
value: {
|
||||
type: String,
|
||||
default: "",
|
||||
},
|
||||
horizontal: {
|
||||
type: Boolean,
|
||||
default: false,
|
||||
},
|
||||
},
|
||||
filters: {
|
||||
numberFilter(value) {
|
||||
if (value != null && !isNaN(parseInt(value))) {
|
||||
return parseInt(value).toLocaleString();
|
||||
} else {
|
||||
return value;
|
||||
}
|
||||
},
|
||||
},
|
||||
data() {
|
||||
return {};
|
||||
},
|
||||
};
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.city-value {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
padding: 0 8px;
|
||||
flex: 2;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.city-value.horizontal {
|
||||
flex-direction: row;
|
||||
}
|
||||
|
||||
.city-value::after {
|
||||
content: "";
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 1px;
|
||||
height: 100%;
|
||||
background: linear-gradient(
|
||||
to bottom,
|
||||
transparent 20%,
|
||||
#fff 50%,
|
||||
transparent 80%
|
||||
);
|
||||
}
|
||||
|
||||
span.hint {
|
||||
margin: 0 0.77vw;
|
||||
font-size: 0.77vw;
|
||||
order: 2;
|
||||
/* margin: 0 12px;
|
||||
width: 32px;
|
||||
font-size: 12px; */
|
||||
}
|
||||
|
||||
span.hint.horizontal {
|
||||
margin: 0 1.235vw;
|
||||
width: 1.543vw;
|
||||
order: 1;
|
||||
font-size: 0.77vw;
|
||||
/* margin: 0 12px;
|
||||
width: 32px;
|
||||
font-size: 12px; */
|
||||
}
|
||||
|
||||
.value {
|
||||
color: #4dd2fe;
|
||||
text-align: center;
|
||||
font-size: 1.132vw;
|
||||
order: 1;
|
||||
}
|
||||
.value.horizontal {
|
||||
text-align: left;
|
||||
flex: 1;
|
||||
font-size: 1.543vw;
|
||||
order: 2;
|
||||
}
|
||||
|
||||
svg,
|
||||
.value {
|
||||
width: 100px;
|
||||
order: 1;
|
||||
}
|
||||
|
||||
.value.horizontal,
|
||||
svg.horizontal {
|
||||
order: 2;
|
||||
}
|
||||
</style>
|
||||
Reference in New Issue
Block a user