修改
This commit is contained in:
‘937886381’
@@ -1,8 +1,9 @@
|
||||
<!--
|
||||
filename: StockMonitor.vue
|
||||
author: liubin
|
||||
date: 2024-04-29 16:35:40
|
||||
description: 仓库监控·当前
|
||||
<!--
|
||||
* @Author: zhp
|
||||
* @Date: 2024-05-07 10:25:10
|
||||
* @LastEditTime: 2024-05-08 09:39:15
|
||||
* @LastEditors: zhp
|
||||
* @Description:
|
||||
-->
|
||||
|
||||
<template>
|
||||
@@ -25,15 +26,15 @@ export default {
|
||||
data() {
|
||||
return {
|
||||
dhgList: [
|
||||
{ name: "总库存", value: "1000" },
|
||||
{ name: "已用库存", value: "500" },
|
||||
{ name: "剩余库存", value: "500" },
|
||||
{ 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" },
|
||||
{ name: "分类1", value: 1000 },
|
||||
{ name: "分类2", value: 1000 },
|
||||
{ name: "分类3", value: 1000 },
|
||||
{ name: "分类4", value: 1000 },
|
||||
],
|
||||
};
|
||||
},
|
||||
|
||||
@@ -1,8 +1,8 @@
|
||||
<!--
|
||||
<!--
|
||||
filename: ChipRateItem.vue
|
||||
author: liubin
|
||||
date: 2024-04-29 14:25:18
|
||||
description:
|
||||
description:
|
||||
-->
|
||||
|
||||
<template>
|
||||
@@ -12,9 +12,12 @@
|
||||
</div>
|
||||
<div class="chart" ref="chart"></div>
|
||||
<div class="legend" v-if="1">
|
||||
<div class="legend-item" v-for="lgd in legendList" :key="lgd.name">
|
||||
<span class="legend-item__label">{{ lgd.name }}</span>
|
||||
<span class="legend-item__value">{{ lgd.value }}</span>
|
||||
<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>
|
||||
</div>
|
||||
<div :style="'color:' + colors[index%5]" class="legend-item__value">{{ lgd.value }}</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@@ -47,6 +50,7 @@ export default {
|
||||
data() {
|
||||
return {
|
||||
period: "月",
|
||||
colors:['#2760FF', '#5996F7', '#8BC566', '#11FAF0', '#F3C000'],
|
||||
valueTuple: [100, 100, 200],
|
||||
};
|
||||
},
|
||||
@@ -54,19 +58,23 @@ export default {
|
||||
options() {
|
||||
const year = new Date().getFullYear();
|
||||
const month = new Date().getMonth() + 1;
|
||||
const vt = this.valueTuple;
|
||||
let titleValue =
|
||||
vt[0] != null && vt[2] != null && vt[2] !== 0
|
||||
? `${((vt[1] / vt[2]) * 100).toFixed(0)}%`
|
||||
: "0%",
|
||||
subtitle =
|
||||
this.period == "月" ? `${month}月累计产出` : `${year}年累计产出`;
|
||||
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 = `总计/片`;
|
||||
|
||||
return getOptions({
|
||||
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],
|
||||
@@ -107,27 +115,31 @@ export default {
|
||||
.legend {
|
||||
height: 80px;
|
||||
display: flex;
|
||||
gap: 40px;
|
||||
gap: 20px;
|
||||
justify-content: space-around;
|
||||
}
|
||||
|
||||
.legend-item {
|
||||
display: flex;
|
||||
// width: 90px;
|
||||
flex-direction: column;
|
||||
// justify-content: space-around;
|
||||
// justify-content: space-between;
|
||||
align-items: center;
|
||||
flex-wrap: wrap;
|
||||
gap: 3px;
|
||||
|
||||
&:first-child {
|
||||
.legend-item__value {
|
||||
color: #0e61f5;
|
||||
}
|
||||
.legend-item__chart{
|
||||
display: inline-block;
|
||||
width: 14px;
|
||||
height: 14px;
|
||||
background: #2760FF;
|
||||
border-radius: 2px;
|
||||
// margin-right: 8px;
|
||||
}
|
||||
|
||||
&:nth-child(2) {
|
||||
.legend-item__value {
|
||||
color: #0fd5d1;
|
||||
}
|
||||
.legend-item__label {
|
||||
margin-left: 8px;
|
||||
}
|
||||
// }
|
||||
}
|
||||
|
||||
.legend-item__value {
|
||||
|
||||
@@ -1,22 +1,23 @@
|
||||
<!--
|
||||
filename: index.vue
|
||||
author: liubin
|
||||
date: 2024-04-16 14:40:15
|
||||
description: 综合驾驶舱
|
||||
<!--
|
||||
* @Author: zhp
|
||||
* @Date: 2024-05-07 10:25:10
|
||||
* @LastEditTime: 2024-05-08 15:29:28
|
||||
* @LastEditors: zhp
|
||||
* @Description:
|
||||
-->
|
||||
|
||||
<template>
|
||||
<div class="energy-copilot">
|
||||
<Container title="仓库监控·当前" icon="chip2">
|
||||
<Container title="仓库监控·当前" icon="ware">
|
||||
<StockMonitorVue :period="period" />
|
||||
</Container>
|
||||
<Container title="天然气能耗" icon="std">
|
||||
<Container title="天然气能耗" icon="gas">
|
||||
<NatGasVue :period="period" />
|
||||
</Container>
|
||||
<Container title="电能耗" icon="chip">
|
||||
<Container title="电能耗" icon="flash">
|
||||
<ElecCostVue :period="period" />
|
||||
</Container>
|
||||
<Container title="水能耗" icon="cube">
|
||||
<Container title="水能耗" icon="water">
|
||||
<WaterCostVue :period="period" />
|
||||
</Container>
|
||||
</div>
|
||||
@@ -73,7 +74,7 @@ export default {
|
||||
display: grid;
|
||||
gap: 16px;
|
||||
grid-template-columns: 1fr 1fr;
|
||||
grid-template-rows: 1fr 1fr;
|
||||
/* grid-template-rows: 1fr 1fr; */
|
||||
}
|
||||
|
||||
.energy-copilot > div {
|
||||
|
||||
@@ -1,156 +1,84 @@
|
||||
/*
|
||||
* @Author: zhp
|
||||
* @Date: 2024-05-07 10:25:10
|
||||
* @LastEditTime: 2024-05-08 10:30:06
|
||||
* @LastEditors: zhp
|
||||
* @Description:
|
||||
*/
|
||||
export default function ({
|
||||
single = false,
|
||||
color,
|
||||
colors = ['#2760FF', '#5996F7', '#8BC566', '#11FAF0','#F3C000'],
|
||||
titleValue,
|
||||
subtitle,
|
||||
dataList,
|
||||
previousSum,
|
||||
currentSum,
|
||||
targetSum,
|
||||
}) {
|
||||
return {
|
||||
grid: {
|
||||
left: 0,
|
||||
right: 0,
|
||||
bottom: 0,
|
||||
top: 0,
|
||||
containLabel: true,
|
||||
grid: {
|
||||
left: 0,
|
||||
right: 0,
|
||||
bottom: 0,
|
||||
top: 0,
|
||||
containLabel: true,
|
||||
},
|
||||
// tooltip: {},
|
||||
title: {
|
||||
text: titleValue,
|
||||
left: "49%",
|
||||
top: "39%",
|
||||
textAlign: "center",
|
||||
textStyle: {
|
||||
fontWeight: 600,
|
||||
fontSize: 32,
|
||||
color: "#fffd",
|
||||
},
|
||||
tooltip: {},
|
||||
title: {
|
||||
text: titleValue,
|
||||
left: "49%",
|
||||
top: "39%",
|
||||
textAlign: "center",
|
||||
textStyle: {
|
||||
fontWeight: 600,
|
||||
fontSize: 32,
|
||||
color: "#fffd",
|
||||
},
|
||||
subtext: `\u2002${subtitle}\u2002`,
|
||||
subtextStyle: {
|
||||
fontSize: 14,
|
||||
fontWeight: 100,
|
||||
color: "#fffd",
|
||||
align: "right",
|
||||
},
|
||||
subtext: `\u2002${subtitle}\u2002`,
|
||||
subtextStyle: {
|
||||
fontSize: 14,
|
||||
fontWeight: 100,
|
||||
color: "#fffd",
|
||||
align: "right",
|
||||
},
|
||||
series: [
|
||||
// 背景 series
|
||||
{
|
||||
type: "pie",
|
||||
name: "当前目标",
|
||||
radius: ["70%", "85%"],
|
||||
center: ["50%", "52%"],
|
||||
emptyCircleStyle: {
|
||||
color: "#040c5f45",
|
||||
},
|
||||
},
|
||||
// 数据 series
|
||||
{
|
||||
type: "pie",
|
||||
radius: ["70%", "85%"],
|
||||
center: ["50%", "52%"],
|
||||
avoidLabelOvervlap: false,
|
||||
label: {
|
||||
show: false,
|
||||
},
|
||||
},
|
||||
// legend: {
|
||||
// top: '5%',
|
||||
// left: 'center'
|
||||
// },
|
||||
series: [
|
||||
{
|
||||
name: 'Access From',
|
||||
type: 'pie',
|
||||
// center: ['50%', '40%'],
|
||||
radius: ['60%', '90%'],
|
||||
avoidLabelOverlap: false,
|
||||
labelLine: {
|
||||
show: false,
|
||||
},
|
||||
data: [
|
||||
{
|
||||
value: currentSum,
|
||||
name: "当前累计产出",
|
||||
selected: false,
|
||||
itemStyle: {
|
||||
borderJoin: "round",
|
||||
borderCap: "round",
|
||||
borderWidth: 12,
|
||||
borderRadius: "50%",
|
||||
// color: {
|
||||
// type: "linear",
|
||||
// x: 1,
|
||||
// y: 0,
|
||||
// x2: 0,
|
||||
// y2: 1,
|
||||
// colorStops: single
|
||||
// ? [
|
||||
// { offset: 0, color: `${color}11` },
|
||||
// { offset: 1, color: `${color}` },
|
||||
// ]
|
||||
// : [
|
||||
// { offset: 0, color: "#4CF0E811" },
|
||||
// { offset: 1, color: "#4CF0E8" },
|
||||
// ],
|
||||
// },
|
||||
},
|
||||
},
|
||||
{
|
||||
value:
|
||||
targetSum > currentSum
|
||||
? targetSum - currentSum
|
||||
: targetSum == 0
|
||||
? currentSum == 0
|
||||
? 1
|
||||
: 0
|
||||
: 0,
|
||||
|
||||
name: "未达成累计",
|
||||
itemStyle: { color: "transparent" },
|
||||
label: { show: false },
|
||||
},
|
||||
],
|
||||
show: false
|
||||
},
|
||||
// 数据 series2 - 2023累计
|
||||
single
|
||||
? null
|
||||
: {
|
||||
type: "pie",
|
||||
radius: ["55%", "70%"],
|
||||
center: ["50%", "52%"],
|
||||
avoidLabelOvervlap: false,
|
||||
label: {
|
||||
show: false,
|
||||
},
|
||||
labelLine: {
|
||||
show: false,
|
||||
},
|
||||
data: [
|
||||
{
|
||||
value: previousSum,
|
||||
name: "上期累计产出",
|
||||
selected: false,
|
||||
itemStyle: {
|
||||
borderJoin: "round",
|
||||
borderCap: "round",
|
||||
borderWidth: 12,
|
||||
borderRadius: "50%",
|
||||
// color: {
|
||||
// type: "linear",
|
||||
// x: 1,
|
||||
// y: 0,
|
||||
// x2: 0,
|
||||
// y2: 1,
|
||||
// colorStops: [
|
||||
// { offset: 0, color: "#1065ff66" },
|
||||
// { offset: 1, color: "#1065ff" },
|
||||
// ],
|
||||
// },
|
||||
},
|
||||
},
|
||||
{
|
||||
value:
|
||||
targetSum > previousSum
|
||||
? targetSum - previousSum
|
||||
: previousSum == 0
|
||||
? 1
|
||||
: 0,
|
||||
name: "-",
|
||||
itemStyle: { color: "transparent" },
|
||||
label: { show: false },
|
||||
},
|
||||
],
|
||||
},
|
||||
],
|
||||
label: {
|
||||
show: false
|
||||
},
|
||||
data: dataList && dataList.length > 0 && dataList.map((item, index) => ({
|
||||
name:item.name,
|
||||
value: item.value,
|
||||
|
||||
itemStyle:{
|
||||
color:{
|
||||
type: 'linear',
|
||||
x: 0,
|
||||
y: 0,
|
||||
x2: 0,
|
||||
y2: 1,
|
||||
global: false,
|
||||
colorStops:[
|
||||
{offset: 0,color:colors[index%5]},
|
||||
{offset: 1,color:colors[index%5]+'33'}
|
||||
]
|
||||
}
|
||||
}
|
||||
}))
|
||||
}
|
||||
]
|
||||
};
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user