guangyin
/
hbt-training-ui
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

feat:运营管理页面搭建

wuyanfu
guangyin 2023-05-18 08:28:51 +08:00
parent b3d6a8aa29
commit 1f3c757bee
7 changed files with 215 additions and 106 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

74
src/assets/style/pageCommon.component.scss
View File

@ -3138,4 +3138,78 @@ svg.loading-icon {
color: #FFFFFF;
}
}
@keyframes wave{
0%{
transform: translate(-50%,-50%) rotate(0deg);
}
100%{
transform: translate(-50%,-50%) rotate(360deg);
}
}
.block-box{
display: flex;
justify-content: space-around;
margin: 30px 0;
.block{
width: 104px;
height: 104px;
border:1px solid #7DAEFF;
border-radius: 50%;
.inner-block{
width: 90px;
height: 90px;
position: relative;
left: 6px;
top: 6px;
border:1px solid rgba($color: #7DAEFF, $alpha: 0.2);
border-radius: 50%;
overflow: hidden;
color: rgba(255,255,255,0.8);
font-size: 12px;
line-height: 17px;
padding-top: 10px;
transform: rotate(180deg);
.full{
text-align: center;
transform: rotate(180deg);
}
.wave{
position: absolute;
width: 200%;
height: 200%;
top: 0;
left: 50%;
transform: translate(-50%,-50%);
background: rgba($color: #7DAEFF, $alpha: 0.2);
transition: top 2s;
animation: wave 5s linear infinite;
&.wave1{
border-radius: 30%;
}
&.wave2{
border-radius: 40%;
}
}
.wave.red{
background: rgba($color: #DD7171, $alpha: 0.2);
}
.count{
font-size: 20px;
line-height: 28px;
flex: none;
color: $font-color;
&.active{
color:#FFA900
}
}
}
}
.red{
border-color: #DD7171;
.red-2{
border-color: rgba(221, 113, 113, 0.2);
}
}
}

2
src/components/manage/left/chartData.js
View File

@ -161,7 +161,7 @@ export const lineChartData = function () {
endValue:10
},
legend: {
show: false,
show: true,
top: '10%',
icon: "rect",
itemWidth: 10, // 图例标记的图形宽度。

175
src/components/manage/right/chartData.js
View File

@ -1,57 +1,65 @@
export const lineChartData = function () {
export const lineChartData = function () {
let xLabel = ['周一', '周二', '周三', '周四', '周五', '周六', '周日'];
let dataValue = ['50', '150', '60', '110', '60', '200', '150'];
let dataValue1 = ['10', '60', '25', '45', '60', '76', '60'];
return {
color:['#FADFA4','#947FEA'],
dataZoom : {
type:"inside",
// orient:"vertical",
startValue:0,
endValue:10
},
legend: {
show: false,
top: '10%',
icon: "rect",
itemWidth: 10, // 图例标记的图形宽度。
// itemGap: 20, // 图例每项之间的间隔。
itemHeight: 10, // 图例标记的图形高度。
textStyle: {
color: '#fff',
fontSize: 14,
padding: [0, 8, 0, 8]
}
},
grid: {
top: '15%',
left: '10%',
right: '5%',
bottom: '20%',
},
xAxis: {
boundaryGap: false,
name:'日',
type: 'category',
splitLine: {
show: true,
lineStyle: {
color: '#999999',
color: 'rgba(153,153,153,0.4)',
type: 'solid'
},
},
axisLabel: {
//x轴文字的配置
show: true,
interval: 0,//使x轴文字显示全
// interval: 0,//使x轴文字显示全
},
axisLine: {
lineStyle: {
color: '#999999',
}
},
data: ['1月','2月','3月','4月','5月']
},
legend: {
top: 'top',
itemGap: 30,
itemWidth: 8,
itemHeight: 8,
textStyle: {
// 未单独设置样式的图例（即非上下标）
lineHeight: 12,
verticalAlign: "middle",
fontSize: 10,
color: "#fff"
},
data:[
{
name:'应急事件',
icon:'roundRect'
},{
name:'应急演练',
icon:'roundRect'
}
]
data: xLabel
},
yAxis: {
type: 'value',
name:'单位：吨',
nameLocation:'end',
splitLine: {
show: true,
lineStyle: {
color: '#999999',
color: 'rgba(153,153,153,0.4)',
type: 'solid'
},
},
@ -63,54 +71,68 @@ export const lineChartData = function () {
},
series: [
{
name:'应急事件',
data: [60,80,140,70,100],
name: '示例示例',
type: 'line',
symbolSize: 4,
symbol: 'circle',
lineStyle: {
width: 2
},
symbol: 'circle', // 默认是空心圆（中间是白色的），改成实心圆
smooth: true,
label: {
show: false,
position: 'top',
color: '#ffffff',
borderWidth: 0
color:'#7DAEFF',
lineStyle: {
normal: {
width: 2,
},
},
},{
name:'应急演练',
data: [50,70,130,60,90],
symbolSize: 4, //设定实心点的大小
data: dataValue,
areaStyle: {
normal: {
color: {
type: 'linear',
x: 0,
y: 0,
x2: 0,
y2: 1,
colorStops: [{
offset: 0, color: 'rgba(125,174,255,0.2)'
}, {
offset: 1, color: 'rgba(125,174,255,0.2)'
}],
global: false
}
},
},
},
{
name: '示例示例',
type: 'line',
symbolSize: 4,
symbol: 'circle',
lineStyle: {
width: 2
},
symbol: 'circle', // 默认是空心圆（中间是白色的），改成实心圆
smooth: true,
label: {
show: false,
position: 'top',
color: '#ffffff',
borderWidth: 0
color:'#DD7171',
lineStyle: {
normal: {
width: 2,
},
},
symbolSize: 4, //设定实心点的大小
data: dataValue1,
areaStyle: {
normal: {
color: {
type: 'linear',
x: 0,
y: 0,
x2: 0,
y2: 1,
colorStops: [{
offset: 0, color: 'rgba(221,113,113,0.2)'
}, {
offset: 1, color: 'rgba(221,113,113,0.2)'
}],
global: false
}
},
},
}
],
tooltip: {
trigger: 'item',
backgroundColor:"rgba(0,0,0,0.6)",
borderWidth:0,
textStyle:{
color:"rgba(255,255,255,0.8)",
},
},
grid: {
x: 30,
y: 30,
x2: 12,
y2: 20,
}
]
}
}
export const lineChartData1 = function () {
@ -189,9 +211,8 @@ export const lineChartData1 = function () {
type: 'line',
symbol: 'circle', // 默认是空心圆（中间是白色的），改成实心圆
smooth: true,
color:'#FADFA4',
color:'#FFFFFF',
lineStyle: {
color:'#FADFA4',
normal: {
width: 2,
},
@ -207,9 +228,9 @@ export const lineChartData1 = function () {
x2: 0,
y2: 1,
colorStops: [{
offset: 0, color: 'rgba(250,223,164,0.2)'
offset: 0, color: 'rgba(255,255,255,0.2)'
}, {
offset: 1, color: 'rgba(250,223,164,0.2)'
offset: 1, color: 'rgba(255,255,255,0.2)'
}],
global: false
}
@ -221,7 +242,7 @@ export const lineChartData1 = function () {
type: 'line',
symbol: 'circle', // 默认是空心圆（中间是白色的），改成实心圆
smooth: true,
color:'#947FEA',
color:'#C9FFD7',
lineStyle: {
normal: {
width: 2,
@ -238,9 +259,9 @@ export const lineChartData1 = function () {
x2: 0,
y2: 1,
colorStops: [{
offset: 0, color: 'rgba(148,127,234,0.2)'
offset: 0, color: 'rgba(201,255,215,0.2)'
}, {
offset: 1, color: 'rgba(148,127,234,0.2)'
offset: 1, color: 'rgba(201,255,215,0.2)'
}],
global: false
}

47
src/components/manage/right/manageRight.component.html
View File

@ -1,41 +1,42 @@
<div class="env-right emergency-part">
<div class="box-content">
<title-component :imgSrc="imgSrc">
能耗统计
燃料供给设备
</title-component>
<div class="block-box">
<div class="block">
<div class="inner-block" style="padding-top:20px">
<div class="full">燃料1</div>
<div class="full"><span class="count" v-run-number="parkData[0].count"></span><span>/{{parkData[0].total}}</span></div>
<div :style="{top:(-90 + 90*(parkData[0].count/parkData[0].total))+'px'}" class="wave wave1"></div>
<div :style="{top:(-90 + 90*(parkData[0].count/parkData[0].total))+'px'}" class="wave wave2"></div>
</div>
</div>
<div class="block red">
<div class="inner-block red-2">
<div class="full">燃料2</div>
<div class="full"> <span class="count active" v-run-number="parkData[1].count"></span><span>/{{parkData[1].total}}</span></div>
<div :style="{top:(-90 + 90*(parkData[1].count/parkData[1].total))+'px'}" class="wave wave1 red"></div>
<div :style="{top:(-90 + 90*(parkData[1].count/parkData[1].total))+'px'}" class="wave wave2 red"></div>
</div>
</div>
</div>
<hbt-echarts className="line-chart-emergency" :options="option"
@onChartInit="getEcharts($event,'lineChart')"></hbt-echarts>
</div>
<div class="box-content flex-15 margin-top-20 device-box">
<div class="box-content flex-0 margin-top-20 device-box height-auto">
<title-component :imgSrc="imgSrc">
设备在线统计
电器设备
</title-component>
<div class="energyRightTitle d-flex is-justify-space-between margin-top-23">
<div class="d-flex align-items-center">
<img src="~@/assets/img/home/security-equipment.png" alt="">
<span>安防设备</span>
<span>年累计用电量（kW·h）</span>
</div>
<span>100<span class="grayColor">/300</span></span>
</div>
<div class="energyRightTitle d-flex is-justify-space-between margin-top-10">
<div class="d-flex align-items-center">
<img src="~@/assets/img/home/training-devices.png" alt="">
<span>训练设备</span>
</div>
<span>100<span class="grayColor">/300</span></span>
</div>
<div class="energyRightTitle d-flex is-justify-space-between margin-top-10">
<div class="d-flex align-items-center">
<img src="~@/assets/img/home/logistics.png" alt="">
<span>配套设备</span>
</div>
<span>100<span class="grayColor">/300</span></span>
<span>1200</span>
</div>
</div>
<div class="box-content margin-top-20 emergency-part">
<title-component :imgSrc="imgSrc">
物资盘点
</title-component>
<hbt-echarts className="line-chart-emergency" :options="lineData1"
@onChartInit="getEcharts($event,'lineChart1')"></hbt-echarts>
</div>

20
src/components/manage/right/manageRight.component.ts
View File

@ -29,15 +29,24 @@ export default class ManageRightComponent extends Vue {
lineData1: any = {}
//折线图实例
lineChart1: any = {}
//球数据
public parkData = [{
count:345,
total:500
showPop = false
},{
count:400,
total:500
popTitle = '开启演练'
}]
//获取图表实例
getEcharts(e, type) {
console.log(e,'e')
console.log(type,'type')
this[type] = e
if (type === 'lineChart'){
this.initLineData()
@ -51,6 +60,7 @@ export default class ManageRightComponent extends Vue {
resize() {
setTimeout(() => {
this.lineChart.resize();
this.lineChart1.resize();
}, 300)
}
@ -59,8 +69,10 @@ export default class ManageRightComponent extends Vue {
//自动切换line图表数据
autoChangeLineData() {
this.timerForLineData = setInterval(() => {
this.lineChart.clear()
this.lineChart.setOption(this.option)
this.lineChart?.clear()
this.lineChart?.setOption(this.option)
this.lineChart1?.clear()
this.lineChart1?.setOption(this.lineData1)
}, 5000)
}

2
src/views/overview.component.html
View File

@ -1,6 +1,6 @@
<div class="overview-container">
<MapComponent id="map" @onLoaded="getMap" @onHandleChange="handleChange"></MapComponent>
<!-- <MapComponent id="map" @onLoaded="getMap" @onHandleChange="handleChange"></MapComponent>-->
<div class="bg-box left animate__animated">
<div class="panel-container">

1
src/views/overview.component.scss
View File

@ -51,6 +51,7 @@
}
&.right.none{
background: none;
pointer-events: none;
}
.panel-container {
//width: 330px;