Compare commits
No commits in common. "b3d6a8aa29f6c78004b5137827b3511dd8f8941a" and "c9a45ca8f6dc09185670b252788ebe788f44eaaa" have entirely different histories.
b3d6a8aa29
...
c9a45ca8f6
|
|
@ -833,13 +833,7 @@
|
||||||
.font-size-14 {
|
.font-size-14 {
|
||||||
font-size: 14px;
|
font-size: 14px;
|
||||||
}
|
}
|
||||||
.font-size-20 {
|
|
||||||
font-size: 20px;
|
|
||||||
|
|
||||||
}
|
|
||||||
.font-weight-normal{
|
|
||||||
font-weight: normal;
|
|
||||||
}
|
|
||||||
.risk-pie-chart {
|
.risk-pie-chart {
|
||||||
width: 48%;
|
width: 48%;
|
||||||
height: 146px;
|
height: 146px;
|
||||||
|
|
@ -3130,12 +3124,3 @@ svg.loading-icon {
|
||||||
margin-right: 0;
|
margin-right: 0;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
.manage-part{
|
|
||||||
.eq-number{
|
|
||||||
color: rgba(255, 255, 255, 0.6);
|
|
||||||
}
|
|
||||||
.white{
|
|
||||||
color: #FFFFFF;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
|
|
|
||||||
|
|
@ -1,288 +0,0 @@
|
||||||
|
|
||||||
/**
|
|
||||||
* 左侧柱状图
|
|
||||||
* @param data
|
|
||||||
* @param xAxisData
|
|
||||||
* @param legend
|
|
||||||
* @param $echarts
|
|
||||||
* @returns {{yAxis: {axisLine: {lineStyle: {color: string}}, splitLine: {lineStyle: {color: string, type: string}, show: boolean}, type: string}, xAxis: {axisLabel: {show: boolean}, data, axisLine: {lineStyle: {color: string}}, splitLine: {lineStyle: {color: string, type: string}, show: boolean}, type: string}, color: string[], series, grid: {x: number, y: number, y2: number, x2: number}, legend: {formatter: (function(*=): *), padding: number[], itemGap: number, data, top: number, icon: string, width: string, itemWidth: number, textStyle: {verticalAlign: string, color: string, rich: {wxb: {verticalAlign: string, fontSize: number}, sub: {verticalAlign: string, fontSize: number}, wsb: {verticalAlign: string, fontSize: number}, sup: {verticalAlign: string, fontSize: number}}, lineHeight: number, fontSize: number}, align: string, selected}, tooltip: {alwaysShowContent: boolean, show: boolean, trigger: string}}}
|
|
||||||
*/
|
|
||||||
export const barChartData = function (data, xAxisData, legend,$echarts) {
|
|
||||||
const chartData = data.map((item,i)=>{
|
|
||||||
let color = [];
|
|
||||||
if (i === 0){
|
|
||||||
color = ['#BD7EFF','#947FEA']
|
|
||||||
}else{
|
|
||||||
color = ['#67D6FF','#7DAEFF']
|
|
||||||
}
|
|
||||||
return {
|
|
||||||
'data': item,
|
|
||||||
'type': 'bar',
|
|
||||||
'smooth': true,
|
|
||||||
"name": legend[i],
|
|
||||||
'barWidth': 4,
|
|
||||||
'barGap':'130%',
|
|
||||||
'itemStyle': {
|
|
||||||
'borderRadius': [2, 2, 0, 0],
|
|
||||||
'color': function (params) {
|
|
||||||
return new $echarts.graphic.LinearGradient(
|
|
||||||
0, 0, 0, 1,
|
|
||||||
[{
|
|
||||||
offset: 0,
|
|
||||||
color: color[0]
|
|
||||||
},
|
|
||||||
{
|
|
||||||
offset: 1,
|
|
||||||
color: color[1]
|
|
||||||
}
|
|
||||||
]
|
|
||||||
)
|
|
||||||
},
|
|
||||||
}
|
|
||||||
}
|
|
||||||
})
|
|
||||||
return {
|
|
||||||
title: {
|
|
||||||
text:'用水统计',
|
|
||||||
textStyle:{
|
|
||||||
color:'#ffffff',
|
|
||||||
fontWeight:'normal',
|
|
||||||
}
|
|
||||||
},
|
|
||||||
color: ['#947FEA','#7DAEFF'],
|
|
||||||
xAxis: {
|
|
||||||
type: 'category',
|
|
||||||
splitLine: {
|
|
||||||
show: true,
|
|
||||||
lineStyle: {
|
|
||||||
color: 'rgba(153,153,153,0.4)',
|
|
||||||
type: 'solid'
|
|
||||||
},
|
|
||||||
},
|
|
||||||
axisLabel: {
|
|
||||||
//x轴文字的配置
|
|
||||||
show: true,
|
|
||||||
interval: 0,//使x轴文字显示全
|
|
||||||
rotate:30,
|
|
||||||
fontSize:10
|
|
||||||
},
|
|
||||||
axisLine: {
|
|
||||||
lineStyle: {
|
|
||||||
color: '#999999',
|
|
||||||
}
|
|
||||||
},
|
|
||||||
|
|
||||||
data: xAxisData
|
|
||||||
},
|
|
||||||
yAxis: {
|
|
||||||
name:'单位：吨',
|
|
||||||
type: 'value',
|
|
||||||
splitLine: {
|
|
||||||
show: true,
|
|
||||||
lineStyle: {
|
|
||||||
color: 'rgba(153,153,153,0.4)',
|
|
||||||
type: 'solid'
|
|
||||||
},
|
|
||||||
},
|
|
||||||
axisLine: {
|
|
||||||
lineStyle: {
|
|
||||||
color: '#999999',
|
|
||||||
}
|
|
||||||
},
|
|
||||||
},
|
|
||||||
series: chartData,
|
|
||||||
tooltip: {
|
|
||||||
show: false,
|
|
||||||
alwaysShowContent: false,
|
|
||||||
trigger: 'item'
|
|
||||||
},
|
|
||||||
grid: {
|
|
||||||
x: 30,
|
|
||||||
y: 70,
|
|
||||||
x2: 22,
|
|
||||||
y2: 20,
|
|
||||||
},
|
|
||||||
legend: {
|
|
||||||
data: legend,
|
|
||||||
top: 10,
|
|
||||||
padding: [2, 2],
|
|
||||||
icon:'circle',
|
|
||||||
align:'left',
|
|
||||||
right:0,
|
|
||||||
itemGap:10,
|
|
||||||
width: "100%",
|
|
||||||
itemWidth:10,
|
|
||||||
// 设置文本样式
|
|
||||||
textStyle: {
|
|
||||||
// 未单独设置样式的图例（即非上下标）
|
|
||||||
lineHeight: 8,
|
|
||||||
verticalAlign: "middle",
|
|
||||||
fontSize: 10,
|
|
||||||
color: "#fff",
|
|
||||||
// 单独设置样式的图例（即上下标）
|
|
||||||
rich: {
|
|
||||||
// 数字下标
|
|
||||||
sub: {
|
|
||||||
verticalAlign: "bottom",
|
|
||||||
fontSize: 8
|
|
||||||
},
|
|
||||||
// 数字上标
|
|
||||||
sup: {
|
|
||||||
verticalAlign: "top",
|
|
||||||
fontSize: 8
|
|
||||||
},
|
|
||||||
// 文字下标
|
|
||||||
wxb: {
|
|
||||||
verticalAlign: "bottom",
|
|
||||||
fontSize: 7,
|
|
||||||
},
|
|
||||||
// 文字上标
|
|
||||||
wsb: {
|
|
||||||
verticalAlign: "top",
|
|
||||||
fontSize: 7,
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
|
|
||||||
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 {
|
|
||||||
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: 'rgba(153,153,153,0.4)',
|
|
||||||
type: 'solid'
|
|
||||||
},
|
|
||||||
},
|
|
||||||
axisLabel: {
|
|
||||||
//x轴文字的配置
|
|
||||||
show: true,
|
|
||||||
// interval: 0,//使x轴文字显示全
|
|
||||||
},
|
|
||||||
axisLine: {
|
|
||||||
lineStyle: {
|
|
||||||
color: '#999999',
|
|
||||||
}
|
|
||||||
},
|
|
||||||
data: xLabel
|
|
||||||
},
|
|
||||||
yAxis: {
|
|
||||||
type: 'value',
|
|
||||||
name:'单位：吨',
|
|
||||||
nameLocation:'end',
|
|
||||||
splitLine: {
|
|
||||||
show: true,
|
|
||||||
lineStyle: {
|
|
||||||
color: 'rgba(153,153,153,0.4)',
|
|
||||||
type: 'solid'
|
|
||||||
},
|
|
||||||
},
|
|
||||||
axisLine: {
|
|
||||||
lineStyle: {
|
|
||||||
color: '#999999',
|
|
||||||
}
|
|
||||||
},
|
|
||||||
},
|
|
||||||
series: [
|
|
||||||
{
|
|
||||||
name: '示例示例',
|
|
||||||
type: 'line',
|
|
||||||
symbol: 'circle', // 默认是空心圆（中间是白色的），改成实心圆
|
|
||||||
smooth: true,
|
|
||||||
color:'#FADFA4',
|
|
||||||
lineStyle: {
|
|
||||||
color:'#FADFA4',
|
|
||||||
normal: {
|
|
||||||
width: 2,
|
|
||||||
},
|
|
||||||
},
|
|
||||||
symbolSize: 4, //设定实心点的大小
|
|
||||||
data: dataValue,
|
|
||||||
areaStyle: {
|
|
||||||
normal: {
|
|
||||||
color: {
|
|
||||||
type: 'linear',
|
|
||||||
x: 0,
|
|
||||||
y: 0,
|
|
||||||
x2: 0,
|
|
||||||
y2: 1,
|
|
||||||
colorStops: [{
|
|
||||||
offset: 0, color: 'rgba(250,223,164,0.2)'
|
|
||||||
}, {
|
|
||||||
offset: 1, color: 'rgba(250,223,164,0.2)'
|
|
||||||
}],
|
|
||||||
global: false
|
|
||||||
}
|
|
||||||
},
|
|
||||||
},
|
|
||||||
},
|
|
||||||
{
|
|
||||||
name: '示例示例',
|
|
||||||
type: 'line',
|
|
||||||
symbol: 'circle', // 默认是空心圆（中间是白色的），改成实心圆
|
|
||||||
smooth: true,
|
|
||||||
color:'#947FEA',
|
|
||||||
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(148,127,234,0.2)'
|
|
||||||
}, {
|
|
||||||
offset: 1, color: 'rgba(148,127,234,0.2)'
|
|
||||||
}],
|
|
||||||
global: false
|
|
||||||
}
|
|
||||||
},
|
|
||||||
},
|
|
||||||
}
|
|
||||||
]
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
@ -1,48 +0,0 @@
|
||||||
<div class="env-left manage-part">
|
|
||||||
|
|
||||||
<div class="box-content flex-0 height-auto">
|
|
||||||
<div>
|
|
||||||
<h4>设备在线管理</h4>
|
|
||||||
<div class="d-flex align-items-center is-justify-space-around">
|
|
||||||
<span class="d-flex align-items-center"><img src="~@/assets/img/eme/xfz-icon.png" alt="">消防站</span>
|
|
||||||
<span class="eq-number">
|
|
||||||
<b class="font-size-20 font-weight-normal white">200</b>
|
|
||||||
/300</span>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<title-component :imgSrc="imgSrc">
|
|
||||||
供排水设备
|
|
||||||
</title-component>
|
|
||||||
<div class="energyRightTitle d-flex is-justify-space-between margin-top-10">
|
|
||||||
<div class="d-flex align-items-center">
|
|
||||||
<span>年累计用水（m³）</span>
|
|
||||||
</div>
|
|
||||||
<span>1200</span>
|
|
||||||
</div>
|
|
||||||
<div class="energyRightTitle d-flex is-justify-space-between margin-top-10">
|
|
||||||
<div class="d-flex align-items-center">
|
|
||||||
<span>专用蓄水池（m³）</span>
|
|
||||||
</div>
|
|
||||||
<span>2000</span>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div class="box-content margin-top-16">
|
|
||||||
<hbt-echarts className="right-bar-chart" :options="barChartData"
|
|
||||||
@onChartInit="getEcharts($event,'bar')"></hbt-echarts>
|
|
||||||
</div>
|
|
||||||
<div class="box-content flex-0 height-auto margin-top-47">
|
|
||||||
<title-component :imgSrc="imgSrc">
|
|
||||||
污水处理设备
|
|
||||||
</title-component>
|
|
||||||
<div class="energyRightTitle d-flex is-justify-space-between margin-top-10">
|
|
||||||
<div class="d-flex align-items-center">
|
|
||||||
<span>年累计处理污水（m³）</span>
|
|
||||||
</div>
|
|
||||||
<span>1200</span>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div class="box-content margin-top-16">
|
|
||||||
<hbt-echarts className="right-bar-chart" :options="lineChartData"
|
|
||||||
@onChartInit="getEcharts($event,'line')"></hbt-echarts>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
@ -1,70 +0,0 @@
|
||||||
import {Component, Emit, Vue} from 'vue-property-decorator';
|
|
||||||
import template from "./manageLeft.component.html"
|
|
||||||
import TitleComponent from "@/components/title.component.vue"
|
|
||||||
import {lineChartData,barChartData} from "./chartData";
|
|
||||||
import * as echarts from 'echarts';
|
|
||||||
import("@/assets/style/pageCommon.component.scss")
|
|
||||||
|
|
||||||
|
|
||||||
Component.registerHooks([
|
|
||||||
'beforeRouteLeave',
|
|
||||||
]);
|
|
||||||
@Component({
|
|
||||||
template,
|
|
||||||
components: {
|
|
||||||
TitleComponent,
|
|
||||||
},
|
|
||||||
})
|
|
||||||
export default class ManageLeftComponent extends Vue {
|
|
||||||
//标题左侧图标
|
|
||||||
imgSrc = require("@/assets/icons/png/env/env-title-icon.png");
|
|
||||||
//柱状图数据
|
|
||||||
barChartData:any = {}
|
|
||||||
//柱状图图例
|
|
||||||
bar:any = {}
|
|
||||||
//折线图数据
|
|
||||||
lineChartData:any = {}
|
|
||||||
//折线图图例
|
|
||||||
line:any = {}
|
|
||||||
//折线图x轴坐标
|
|
||||||
xAxisData = ['周一', '周二', '周三', '周四', '周五', '周六', '周日']
|
|
||||||
//图例
|
|
||||||
legend = ["水 (吨)",
|
|
||||||
"标准煤 (吨)"]
|
|
||||||
getEcharts(e,type){
|
|
||||||
this[type] = e
|
|
||||||
if (type === 'bar'){
|
|
||||||
this.barChartData= barChartData([[90, 55, 80, 85, 25, 60, 60], [160, 80, 130, 133, 40, 95, 95]], this.xAxisData, this.legend, echarts)
|
|
||||||
}else{
|
|
||||||
this.lineChartData = lineChartData()
|
|
||||||
}
|
|
||||||
|
|
||||||
}
|
|
||||||
//点击告警信息
|
|
||||||
@Emit()
|
|
||||||
getItem(item) {
|
|
||||||
// console.log('item', item)
|
|
||||||
}
|
|
||||||
|
|
||||||
count = 1
|
|
||||||
|
|
||||||
|
|
||||||
mounted() {
|
|
||||||
|
|
||||||
}
|
|
||||||
|
|
||||||
destroyed() {
|
|
||||||
|
|
||||||
}
|
|
||||||
|
|
||||||
changeMore() {
|
|
||||||
console.log(1)
|
|
||||||
}
|
|
||||||
|
|
||||||
changeClose() {
|
|
||||||
console.log(1)
|
|
||||||
}
|
|
||||||
|
|
||||||
|
|
||||||
}
|
|
||||||
|
|
||||||
|
|
@ -1,252 +0,0 @@
|
||||||
|
|
||||||
export const lineChartData = function () {
|
|
||||||
return {
|
|
||||||
color:['#FADFA4','#947FEA'],
|
|
||||||
xAxis: {
|
|
||||||
type: 'category',
|
|
||||||
splitLine: {
|
|
||||||
show: true,
|
|
||||||
lineStyle: {
|
|
||||||
color: '#999999',
|
|
||||||
type: 'solid'
|
|
||||||
},
|
|
||||||
},
|
|
||||||
axisLabel: {
|
|
||||||
//x轴文字的配置
|
|
||||||
show: true,
|
|
||||||
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'
|
|
||||||
}
|
|
||||||
]
|
|
||||||
},
|
|
||||||
yAxis: {
|
|
||||||
type: 'value',
|
|
||||||
splitLine: {
|
|
||||||
show: true,
|
|
||||||
lineStyle: {
|
|
||||||
color: '#999999',
|
|
||||||
type: 'solid'
|
|
||||||
},
|
|
||||||
},
|
|
||||||
axisLine: {
|
|
||||||
lineStyle: {
|
|
||||||
color: '#999999',
|
|
||||||
}
|
|
||||||
},
|
|
||||||
},
|
|
||||||
series: [
|
|
||||||
{
|
|
||||||
name:'应急事件',
|
|
||||||
data: [60,80,140,70,100],
|
|
||||||
type: 'line',
|
|
||||||
symbolSize: 4,
|
|
||||||
symbol: 'circle',
|
|
||||||
lineStyle: {
|
|
||||||
width: 2
|
|
||||||
},
|
|
||||||
smooth: true,
|
|
||||||
label: {
|
|
||||||
show: false,
|
|
||||||
position: 'top',
|
|
||||||
color: '#ffffff',
|
|
||||||
borderWidth: 0
|
|
||||||
},
|
|
||||||
},{
|
|
||||||
name:'应急演练',
|
|
||||||
data: [50,70,130,60,90],
|
|
||||||
type: 'line',
|
|
||||||
symbolSize: 4,
|
|
||||||
symbol: 'circle',
|
|
||||||
lineStyle: {
|
|
||||||
width: 2
|
|
||||||
},
|
|
||||||
smooth: true,
|
|
||||||
label: {
|
|
||||||
show: false,
|
|
||||||
position: 'top',
|
|
||||||
color: '#ffffff',
|
|
||||||
borderWidth: 0
|
|
||||||
},
|
|
||||||
}
|
|
||||||
],
|
|
||||||
|
|
||||||
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 () {
|
|
||||||
let xLabel = ['周一', '周二', '周三', '周四', '周五', '周六', '周日'];
|
|
||||||
let dataValue = ['50', '150', '60', '110', '60', '200', '150'];
|
|
||||||
let dataValue1 = ['10', '60', '25', '45', '60', '76', '60'];
|
|
||||||
return {
|
|
||||||
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: 'rgba(153,153,153,0.4)',
|
|
||||||
type: 'solid'
|
|
||||||
},
|
|
||||||
},
|
|
||||||
axisLabel: {
|
|
||||||
//x轴文字的配置
|
|
||||||
show: true,
|
|
||||||
// interval: 0,//使x轴文字显示全
|
|
||||||
},
|
|
||||||
axisLine: {
|
|
||||||
lineStyle: {
|
|
||||||
color: '#999999',
|
|
||||||
}
|
|
||||||
},
|
|
||||||
data: xLabel
|
|
||||||
},
|
|
||||||
yAxis: {
|
|
||||||
type: 'value',
|
|
||||||
name:'单位：吨',
|
|
||||||
nameLocation:'end',
|
|
||||||
splitLine: {
|
|
||||||
show: true,
|
|
||||||
lineStyle: {
|
|
||||||
color: 'rgba(153,153,153,0.4)',
|
|
||||||
type: 'solid'
|
|
||||||
},
|
|
||||||
},
|
|
||||||
axisLine: {
|
|
||||||
lineStyle: {
|
|
||||||
color: '#999999',
|
|
||||||
}
|
|
||||||
},
|
|
||||||
},
|
|
||||||
series: [
|
|
||||||
{
|
|
||||||
name: '示例示例',
|
|
||||||
type: 'line',
|
|
||||||
symbol: 'circle', // 默认是空心圆（中间是白色的），改成实心圆
|
|
||||||
smooth: true,
|
|
||||||
color:'#FADFA4',
|
|
||||||
lineStyle: {
|
|
||||||
color:'#FADFA4',
|
|
||||||
normal: {
|
|
||||||
width: 2,
|
|
||||||
},
|
|
||||||
},
|
|
||||||
symbolSize: 4, //设定实心点的大小
|
|
||||||
data: dataValue,
|
|
||||||
areaStyle: {
|
|
||||||
normal: {
|
|
||||||
color: {
|
|
||||||
type: 'linear',
|
|
||||||
x: 0,
|
|
||||||
y: 0,
|
|
||||||
x2: 0,
|
|
||||||
y2: 1,
|
|
||||||
colorStops: [{
|
|
||||||
offset: 0, color: 'rgba(250,223,164,0.2)'
|
|
||||||
}, {
|
|
||||||
offset: 1, color: 'rgba(250,223,164,0.2)'
|
|
||||||
}],
|
|
||||||
global: false
|
|
||||||
}
|
|
||||||
},
|
|
||||||
},
|
|
||||||
},
|
|
||||||
{
|
|
||||||
name: '示例示例',
|
|
||||||
type: 'line',
|
|
||||||
symbol: 'circle', // 默认是空心圆（中间是白色的），改成实心圆
|
|
||||||
smooth: true,
|
|
||||||
color:'#947FEA',
|
|
||||||
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(148,127,234,0.2)'
|
|
||||||
}, {
|
|
||||||
offset: 1, color: 'rgba(148,127,234,0.2)'
|
|
||||||
}],
|
|
||||||
global: false
|
|
||||||
}
|
|
||||||
},
|
|
||||||
},
|
|
||||||
}
|
|
||||||
]
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
@ -1,43 +0,0 @@
|
||||||
<div class="env-right emergency-part">
|
|
||||||
<div class="box-content">
|
|
||||||
<title-component :imgSrc="imgSrc">
|
|
||||||
能耗统计
|
|
||||||
</title-component>
|
|
||||||
<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">
|
|
||||||
<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>
|
|
||||||
</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>
|
|
||||||
</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>
|
|
||||||
|
|
||||||
</div>
|
|
||||||
|
|
@ -1,95 +0,0 @@
|
||||||
import {Component, Emit, Vue} from 'vue-property-decorator';
|
|
||||||
import template from "./manageRight.component.html"
|
|
||||||
import {lineChartData,lineChartData1} from "./chartData";
|
|
||||||
import TitleComponent from "@/components/title.component.vue"
|
|
||||||
import * as echarts from 'echarts';
|
|
||||||
|
|
||||||
import("@/assets/style/pageCommon.component.scss")
|
|
||||||
|
|
||||||
|
|
||||||
Component.registerHooks([
|
|
||||||
'beforeRouteLeave',
|
|
||||||
]);
|
|
||||||
@Component({
|
|
||||||
template,
|
|
||||||
components: {
|
|
||||||
TitleComponent,
|
|
||||||
},
|
|
||||||
})
|
|
||||||
export default class ManageRightComponent extends Vue {
|
|
||||||
//标题图片
|
|
||||||
imgSrc = require("@/assets/icons/png/env/env-title-icon.png");
|
|
||||||
//定时器
|
|
||||||
timer: any = null;
|
|
||||||
//折线图数据
|
|
||||||
option: any = {}
|
|
||||||
//折线图实例
|
|
||||||
lineChart: any = {}
|
|
||||||
//折线图2数据
|
|
||||||
lineData1: any = {}
|
|
||||||
//折线图实例
|
|
||||||
lineChart1: any = {}
|
|
||||||
|
|
||||||
showPop = false
|
|
||||||
|
|
||||||
popTitle = '开启演练'
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
//获取图表实例
|
|
||||||
getEcharts(e, type) {
|
|
||||||
this[type] = e
|
|
||||||
if (type === 'lineChart'){
|
|
||||||
this.initLineData()
|
|
||||||
}else{
|
|
||||||
this.lineData1 = lineChartData1()
|
|
||||||
}
|
|
||||||
|
|
||||||
}
|
|
||||||
|
|
||||||
//图表自适应
|
|
||||||
resize() {
|
|
||||||
setTimeout(() => {
|
|
||||||
this.lineChart.resize();
|
|
||||||
}, 300)
|
|
||||||
}
|
|
||||||
|
|
||||||
timerForLineData: any = null;
|
|
||||||
|
|
||||||
//自动切换line图表数据
|
|
||||||
autoChangeLineData() {
|
|
||||||
this.timerForLineData = setInterval(() => {
|
|
||||||
this.lineChart.clear()
|
|
||||||
this.lineChart.setOption(this.option)
|
|
||||||
}, 5000)
|
|
||||||
}
|
|
||||||
|
|
||||||
//获取范围内随机数
|
|
||||||
getRandomInt(min: number, max: number) {
|
|
||||||
min = Math.ceil(min);
|
|
||||||
max = Math.floor(max);
|
|
||||||
return Math.floor(Math.random() * (max - min)) + min; //不含最大值，含最小值
|
|
||||||
}
|
|
||||||
|
|
||||||
mounted() {
|
|
||||||
this.autoChangeLineData()
|
|
||||||
window.addEventListener("resize", this.resize);
|
|
||||||
}
|
|
||||||
|
|
||||||
//初始化line图表
|
|
||||||
initLineData() {
|
|
||||||
this.option = lineChartData()
|
|
||||||
}
|
|
||||||
|
|
||||||
beforeDestroy() {
|
|
||||||
clearInterval(this.timer)
|
|
||||||
clearInterval(this.timerForLineData)
|
|
||||||
}
|
|
||||||
|
|
||||||
destroyed() {
|
|
||||||
window.removeEventListener("resize", this.resize)
|
|
||||||
}
|
|
||||||
|
|
||||||
|
|
||||||
}
|
|
||||||
|
|
||||||
|
|
@ -8,9 +8,6 @@
|
||||||
<HomeLeftComponent v-if="currentNav === 'home'" class="animate__animated animate__fadeInLeft"></HomeLeftComponent>
|
<HomeLeftComponent v-if="currentNav === 'home'" class="animate__animated animate__fadeInLeft"></HomeLeftComponent>
|
||||||
<!-- 导览-->
|
<!-- 导览-->
|
||||||
<ViewLeftComponent @showView="showView" @showViewRight="showViewRight" v-if="currentNav === 'view'" class="animate__animated animate__fadeInLeft"></ViewLeftComponent>
|
<ViewLeftComponent @showView="showView" @showViewRight="showViewRight" v-if="currentNav === 'view'" class="animate__animated animate__fadeInLeft"></ViewLeftComponent>
|
||||||
|
|
||||||
<!-- 运营管理-->
|
|
||||||
<ManageLeftComponent v-if="currentNav === 'manage'" class="animate__animated animate__fadeInLeft"></ManageLeftComponent>
|
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div class="bg-box right main animate__animated" :class="showBackGround">
|
<div class="bg-box right main animate__animated" :class="showBackGround">
|
||||||
|
|
@ -20,8 +17,6 @@
|
||||||
class="animate__animated animate__fadeInRight"></HomeRightComponent>
|
class="animate__animated animate__fadeInRight"></HomeRightComponent>
|
||||||
<!-- 导览-->
|
<!-- 导览-->
|
||||||
<ViewRightComponent @showDetail="showDetail" v-if="currentNav === 'view' && viewRightShow" class="animate__animated animate__fadeInLeft"></ViewRightComponent>
|
<ViewRightComponent @showDetail="showDetail" v-if="currentNav === 'view' && viewRightShow" class="animate__animated animate__fadeInLeft"></ViewRightComponent>
|
||||||
<!-- 运营管理-->
|
|
||||||
<ManageRightComponent v-if="currentNav === 'manage'" class="animate__animated animate__fadeInLeft"></ManageRightComponent>
|
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
|
|
|
||||||
|
|
@ -8,8 +8,6 @@ import HomeLeftComponent from "@/components/home/left/homeLeft.component";
|
||||||
import HomeRightComponent from "@/components/home/right/homeRight.component";
|
import HomeRightComponent from "@/components/home/right/homeRight.component";
|
||||||
import ViewLeftComponent from "@/components/view/left/viewLeft.component";
|
import ViewLeftComponent from "@/components/view/left/viewLeft.component";
|
||||||
import ViewRightComponent from "@/components/view/right/viewRight.component";
|
import ViewRightComponent from "@/components/view/right/viewRight.component";
|
||||||
import ManageLeftComponent from "@/components/manage/left/manageLeft.component";
|
|
||||||
import ManageRightComponent from "@/components/manage/right/manageRight.component";
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
@ -19,8 +17,6 @@ import ManageRightComponent from "@/components/manage/right/manageRight.componen
|
||||||
HomeRightComponent,
|
HomeRightComponent,
|
||||||
ViewLeftComponent,
|
ViewLeftComponent,
|
||||||
ViewRightComponent,
|
ViewRightComponent,
|
||||||
ManageLeftComponent,
|
|
||||||
ManageRightComponent
|
|
||||||
}
|
}
|
||||||
})
|
})
|
||||||
export default class OverViewComponent extends BaseComponent {
|
export default class OverViewComponent extends BaseComponent {
|
||||||
|
|
|
||||||
Loading…
Reference in New Issue