1、新增1920*1080看板布局
This commit is contained in:
lankuixing
parent
a2d59e84ea
commit
26377853ab
Binary file not shown.
|
After Width: | Height: | Size: 3.1 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 266 B |
Binary file not shown.
|
After Width: | Height: | Size: 1.0 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 33 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 5.4 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 303 B |
Binary file not shown.
|
After Width: | Height: | Size: 2.2 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 3.4 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 2.2 KiB |
|
|
@ -0,0 +1,211 @@
|
|||
<!--能源使用情况-->
|
||||
<template>
|
||||
<div id="charts" ref="charts">
|
||||
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import * as echarts from 'echarts'
|
||||
import {EleResize} from '@/utils/esresize';
|
||||
|
||||
const lodash = require('lodash')
|
||||
export default {
|
||||
name: 'PeakEnergyUseChart',
|
||||
props: {
|
||||
dataSource: {
|
||||
type: Array,
|
||||
default: () => []
|
||||
},
|
||||
color: {
|
||||
type: Array,
|
||||
default: () => [
|
||||
'#00F6FF',
|
||||
'#007CFF',
|
||||
'#FDBD00'
|
||||
]
|
||||
}
|
||||
},
|
||||
data() {
|
||||
return {}
|
||||
},
|
||||
watch: {
|
||||
dataSource: {
|
||||
deep: true,
|
||||
immediate: true,
|
||||
handler(value) {
|
||||
if (value.length) {
|
||||
this.$nextTick(() => {
|
||||
this.init()
|
||||
})
|
||||
}
|
||||
}
|
||||
}
|
||||
},
|
||||
mounted() {
|
||||
this.$nextTick(() => {
|
||||
this.init()
|
||||
})
|
||||
},
|
||||
|
||||
methods: {
|
||||
init() {
|
||||
let myCharts = echarts.init(this.$refs.charts)
|
||||
let barCharts = this.$refs.charts
|
||||
// 复制代码
|
||||
|
||||
let color = this.color;
|
||||
|
||||
let xAxisData = this.dataSource.map(item => item.name);
|
||||
let yAxisData1 = this.dataSource.map(item => item.value1);
|
||||
let yAxisData2 = this.dataSource.map(item => item.value2);
|
||||
|
||||
let option = {
|
||||
color: color,
|
||||
legend: {
|
||||
top: 0,
|
||||
right: 0,
|
||||
itemWidth: 11,
|
||||
itemHeight: 11,
|
||||
icon: 'circle',
|
||||
textStyle: {
|
||||
color: '#B8D3F1',
|
||||
fontSize: 12,
|
||||
|
||||
}
|
||||
},
|
||||
tooltip: {
|
||||
trigger: 'axis',
|
||||
},
|
||||
grid: {
|
||||
top: 50,
|
||||
bottom: 10,
|
||||
left: 20,
|
||||
right: 20,
|
||||
containLabel: true,
|
||||
},
|
||||
xAxis: [
|
||||
{
|
||||
type: 'category',
|
||||
boundaryGap: true,
|
||||
axisLabel: {
|
||||
fontSize: 12,
|
||||
color: '#B8D3F1'
|
||||
},
|
||||
axisLine: {
|
||||
show: true,
|
||||
lineStyle: {
|
||||
color: 'rgba(176,215,255,0.40)',
|
||||
},
|
||||
},
|
||||
axisTick: {
|
||||
show: false
|
||||
},
|
||||
data: xAxisData,
|
||||
},
|
||||
],
|
||||
yAxis: [
|
||||
{
|
||||
type: 'value',
|
||||
position: 'left',
|
||||
splitNumber: 5,
|
||||
name: '单位：t',
|
||||
axisLabel: {
|
||||
fontSize: 12,
|
||||
color: '#B8D3F1'
|
||||
},
|
||||
nameTextStyle: {
|
||||
color: '#B8D3F1',
|
||||
fontSize: 12,
|
||||
lineHeight: 10,
|
||||
},
|
||||
// 分割线
|
||||
splitLine: {
|
||||
show: false,
|
||||
lineStyle: {
|
||||
color: 'rgba(176,215,255,0.40)',
|
||||
type: 'dashed'
|
||||
},
|
||||
},
|
||||
axisLine: {
|
||||
show: false,
|
||||
},
|
||||
axisTick: {
|
||||
show: false,
|
||||
},
|
||||
},
|
||||
{
|
||||
type: 'value',
|
||||
position: 'right',
|
||||
name: '单位：KWH',
|
||||
splitNumber: 5,
|
||||
axisLabel: {
|
||||
fontSize: 12,
|
||||
color: '#B8D3F1'
|
||||
},
|
||||
nameTextStyle: {
|
||||
color: '#B8D3F1',
|
||||
fontSize: 12,
|
||||
lineHeight: 10,
|
||||
},
|
||||
// 分割线
|
||||
splitLine: {
|
||||
show: false,
|
||||
lineStyle: {
|
||||
color: 'rgba(176,215,255,0.40)',
|
||||
type: 'dashed'
|
||||
},
|
||||
},
|
||||
axisLine: {
|
||||
show: false,
|
||||
},
|
||||
axisTick: {
|
||||
show: false,
|
||||
},
|
||||
},
|
||||
],
|
||||
series: [
|
||||
{
|
||||
name: '用电',
|
||||
type: 'line',
|
||||
smooth: false,
|
||||
zlevel: 3,
|
||||
symbol: 'none', //数据交叉点样式
|
||||
data: yAxisData1,
|
||||
yAxisIndex: 0, // 通过这个判断左右
|
||||
lineStyle: {
|
||||
width: 3,
|
||||
}
|
||||
},
|
||||
{
|
||||
name: '用水',
|
||||
type: 'line',
|
||||
smooth: false,
|
||||
zlevel: 3,
|
||||
symbol: 'none', //数据交叉点样式 (实心点)
|
||||
data: yAxisData2,
|
||||
yAxisIndex: 1, // 通过这个判断左右
|
||||
lineStyle: {
|
||||
width: 3,
|
||||
}
|
||||
}
|
||||
],
|
||||
};
|
||||
|
||||
|
||||
myCharts.setOption(option)
|
||||
let listener = function () {
|
||||
myCharts.resize()
|
||||
}
|
||||
EleResize.on(barCharts, listener)
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped lang="less">
|
||||
#charts {
|
||||
height: 100%;
|
||||
width: 100%;
|
||||
}
|
||||
</style>
|
||||
|
|
@ -0,0 +1,224 @@
|
|||
<!--生产趋势-->
|
||||
<template>
|
||||
<div id="charts" ref="charts">
|
||||
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import * as echarts from 'echarts'
|
||||
import {EleResize} from '@/utils/esresize';
|
||||
|
||||
const lodash = require('lodash')
|
||||
export default {
|
||||
name: 'PeakProduceTrendChart',
|
||||
props: {
|
||||
dataSource: {
|
||||
type: Array,
|
||||
default: () => []
|
||||
},
|
||||
color: {
|
||||
type: Array,
|
||||
default: () => [
|
||||
'#00F6FF',
|
||||
'#007CFF',
|
||||
'#FF8D1A'
|
||||
]
|
||||
}
|
||||
},
|
||||
data() {
|
||||
return {}
|
||||
},
|
||||
watch: {
|
||||
dataSource: {
|
||||
deep: true,
|
||||
immediate: true,
|
||||
handler(value) {
|
||||
if (value.length) {
|
||||
this.$nextTick(() => {
|
||||
this.init()
|
||||
})
|
||||
}
|
||||
}
|
||||
}
|
||||
},
|
||||
mounted() {
|
||||
this.$nextTick(() => {
|
||||
this.init()
|
||||
})
|
||||
},
|
||||
|
||||
methods: {
|
||||
init() {
|
||||
let myCharts = echarts.init(this.$refs.charts)
|
||||
let barCharts = this.$refs.charts
|
||||
// 复制代码
|
||||
|
||||
let color = this.color;
|
||||
|
||||
let xAxisData = this.dataSource.map(item => item.name);
|
||||
let yAxisData1 = this.dataSource.map(item => item.value1);
|
||||
let yAxisData2 = this.dataSource.map(item => item.value2);
|
||||
let yAxisData3 = this.dataSource.map(item => item.value3)
|
||||
|
||||
let option = {
|
||||
color: color,
|
||||
legend: {
|
||||
top: 0,
|
||||
right: 0,
|
||||
itemWidth: 11,
|
||||
itemHeight: 11,
|
||||
icon: 'circle',
|
||||
textStyle: {
|
||||
color: '#B8D3F1',
|
||||
fontSize: 12,
|
||||
|
||||
}
|
||||
},
|
||||
tooltip: {
|
||||
trigger: 'axis',
|
||||
},
|
||||
grid: {
|
||||
top: 50,
|
||||
bottom: 10,
|
||||
left: 20,
|
||||
right: 20,
|
||||
containLabel: true,
|
||||
},
|
||||
xAxis: [
|
||||
{
|
||||
type: 'category',
|
||||
boundaryGap: true,
|
||||
axisLabel: {
|
||||
fontSize: 12,
|
||||
color: '#B8D3F1'
|
||||
},
|
||||
axisLine: {
|
||||
show: true,
|
||||
lineStyle: {
|
||||
color: 'rgba(176,215,255,0.40)',
|
||||
},
|
||||
},
|
||||
axisTick: {
|
||||
show: false
|
||||
},
|
||||
data: xAxisData,
|
||||
},
|
||||
],
|
||||
yAxis: [
|
||||
{
|
||||
type: 'value',
|
||||
position: 'left',
|
||||
splitNumber: 5,
|
||||
name: '单位：t',
|
||||
axisLabel: {
|
||||
fontSize: 12,
|
||||
color: '#B8D3F1'
|
||||
},
|
||||
nameTextStyle: {
|
||||
color: '#B8D3F1',
|
||||
fontSize: 12,
|
||||
lineHeight: 10,
|
||||
},
|
||||
// 分割线
|
||||
splitLine: {
|
||||
show: false,
|
||||
lineStyle: {
|
||||
color: 'rgba(176,215,255,0.40)',
|
||||
type: 'dashed'
|
||||
},
|
||||
},
|
||||
axisLine: {
|
||||
show: false,
|
||||
},
|
||||
axisTick: {
|
||||
show: false,
|
||||
},
|
||||
},
|
||||
{
|
||||
type: 'value',
|
||||
position: 'right',
|
||||
name: '单位：m³',
|
||||
splitNumber: 5,
|
||||
axisLabel: {
|
||||
fontSize: 12,
|
||||
color: '#B8D3F1'
|
||||
},
|
||||
nameTextStyle: {
|
||||
color: '#B8D3F1',
|
||||
fontSize: 12,
|
||||
lineHeight: 10,
|
||||
},
|
||||
// 分割线
|
||||
splitLine: {
|
||||
show: false,
|
||||
lineStyle: {
|
||||
color: 'rgba(176,215,255,0.40)',
|
||||
type: 'dashed'
|
||||
},
|
||||
},
|
||||
axisLine: {
|
||||
show: false,
|
||||
},
|
||||
axisTick: {
|
||||
show: false,
|
||||
},
|
||||
},
|
||||
],
|
||||
series: [
|
||||
{
|
||||
name: '石油',
|
||||
type: 'line',
|
||||
smooth: false,
|
||||
zlevel: 3,
|
||||
symbol: 'none', //数据交叉点样式
|
||||
data: yAxisData1,
|
||||
yAxisIndex: 0, // 通过这个判断左右
|
||||
lineStyle: {
|
||||
width: 3,
|
||||
}
|
||||
},
|
||||
{
|
||||
name: '氧气',
|
||||
type: 'line',
|
||||
smooth: false,
|
||||
zlevel: 3,
|
||||
symbol: 'none', //数据交叉点样式 (实心点)
|
||||
data: yAxisData2,
|
||||
yAxisIndex: 1, // 通过这个判断左右
|
||||
lineStyle: {
|
||||
width: 3,
|
||||
}
|
||||
},
|
||||
{
|
||||
name: '氮气',
|
||||
type: 'line',
|
||||
smooth: false,
|
||||
zlevel: 3,
|
||||
symbol: 'none', //数据交叉点样式 (实心点)
|
||||
data: yAxisData3,
|
||||
yAxisIndex: 1, // 通过这个判断左右
|
||||
lineStyle: {
|
||||
width: 3,
|
||||
}
|
||||
},
|
||||
],
|
||||
};
|
||||
|
||||
|
||||
myCharts.setOption(option)
|
||||
let listener = function () {
|
||||
myCharts.resize()
|
||||
}
|
||||
EleResize.on(barCharts, listener)
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped lang="less">
|
||||
#charts {
|
||||
height: 100%;
|
||||
width: 100%;
|
||||
}
|
||||
</style>
|
||||
|
|
@ -0,0 +1,180 @@
|
|||
<!--预警类型分布饼图-->
|
||||
<template>
|
||||
<div id="charts" ref="charts">
|
||||
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import * as echarts from 'echarts'
|
||||
import {EleResize} from '@/utils/esresize';
|
||||
|
||||
export default {
|
||||
name: 'PeakWarningTypeChart',
|
||||
props: {
|
||||
dataSource: {
|
||||
type: Array,
|
||||
default: () => []
|
||||
},
|
||||
color: {
|
||||
type: Array,
|
||||
default: () => [
|
||||
'#F8F661',
|
||||
'#61F8F6',
|
||||
'#1872FF'
|
||||
]
|
||||
}
|
||||
},
|
||||
data() {
|
||||
return {}
|
||||
},
|
||||
watch: {
|
||||
dataSource: {
|
||||
deep: true,
|
||||
immediate: true,
|
||||
handler(value) {
|
||||
if (value.length) {
|
||||
this.$nextTick(() => {
|
||||
this.init()
|
||||
})
|
||||
}
|
||||
}
|
||||
}
|
||||
},
|
||||
mounted() {
|
||||
},
|
||||
|
||||
methods: {
|
||||
init() {
|
||||
let myCharts = echarts.init(this.$refs.charts)
|
||||
let barCharts = this.$refs.charts
|
||||
// 复制代码
|
||||
let chartData = this.dataSource;
|
||||
const colorList = this.color;
|
||||
const bgColorList = ['rgba(255,221,48,0.2)', 'rgba(84,255,210,0.2)', 'rgba(24,114,255,0.2)']
|
||||
const pieData1 = [];
|
||||
const sum = chartData.reduce((per, cur) => per + cur.value, 0);
|
||||
const gap = (1 * sum) / 100;
|
||||
const gapData = {
|
||||
name: '',
|
||||
value: gap,
|
||||
itemStyle: {
|
||||
color: 'transparent',
|
||||
},
|
||||
};
|
||||
//图标位置显示
|
||||
let lefts = ['40%', '40%', '40%', '40%'];
|
||||
let aligns = ['left', 'left', 'left', 'left'];
|
||||
let tops = ['15%', '40%', '65%', '90%'];
|
||||
let legendData = [];
|
||||
for (let i = 0; i < chartData.length; i++) {
|
||||
// 第一圈数据
|
||||
pieData1.push({
|
||||
...chartData[i],
|
||||
itemStyle: {
|
||||
borderRadius: 0,
|
||||
},
|
||||
});
|
||||
pieData1.push(gapData);
|
||||
|
||||
// 分散图例
|
||||
legendData.push({
|
||||
show: true,
|
||||
icon: 'rect', //'circle', 'rect', 'roundRect', 'triangle', 'diamond', 'pin', 'arrow', 'none'
|
||||
left: lefts[i],
|
||||
top: tops[i],
|
||||
align: aligns[i],
|
||||
itemWidth: 10,
|
||||
itemHeight: 20,
|
||||
itemStyle: {
|
||||
color: colorList[i],
|
||||
},
|
||||
formatter:
|
||||
'{b|' + (chartData[i].name.length > 6 ? chartData[i].name.substr(0, 6) + '...' : chartData[i].name) + '}' + '{c|' + chartData[i].rate + '}' +'{a|' + chartData[i].value + '}',
|
||||
textStyle: {
|
||||
fontWeight: 'lighter',
|
||||
fontSize: 14,
|
||||
width: 210,
|
||||
height: 20,
|
||||
padding: [0, 10, 0, 10],
|
||||
backgroundColor: bgColorList[i],
|
||||
lineHeight: 20,
|
||||
rich: {
|
||||
a: {
|
||||
align: 'right',
|
||||
color: '#C1DEFF',
|
||||
fontSize: 12,
|
||||
fontWeight: 700
|
||||
},
|
||||
b: {
|
||||
align: 'left',
|
||||
color: '#C1DEFF',
|
||||
fontSize: 12,
|
||||
padding: [0, 0, 0, 10]
|
||||
},
|
||||
c:{
|
||||
align: 'center',
|
||||
color: '#C1DEFF',
|
||||
fontSize: 12,
|
||||
padding: [0, 0, 0, 10]
|
||||
}
|
||||
}
|
||||
},
|
||||
data: [chartData[i].name],
|
||||
});
|
||||
}
|
||||
|
||||
let option = {
|
||||
tooltip: {
|
||||
show: true,
|
||||
backgroundColor: 'rgba(0, 0, 0,.8)',
|
||||
textStyle: {
|
||||
color: '#fff',
|
||||
},
|
||||
},
|
||||
legend: legendData,
|
||||
grid: {
|
||||
top: 10,
|
||||
right: 0,
|
||||
bottom: 0,
|
||||
left: 0,
|
||||
},
|
||||
color: colorList,
|
||||
series: [
|
||||
{
|
||||
name: '',
|
||||
type: 'pie',
|
||||
roundCap: true,
|
||||
radius: ['26%', '50%'],
|
||||
center: ['20%', '50%'],
|
||||
label: {
|
||||
show: false
|
||||
},
|
||||
labelLine: {
|
||||
show: false
|
||||
},
|
||||
itemStyle: {
|
||||
borderRadius: 0,
|
||||
borderWidth: 5
|
||||
},
|
||||
data: pieData1
|
||||
},
|
||||
],
|
||||
}
|
||||
|
||||
myCharts.setOption(option)
|
||||
let listener = function () {
|
||||
myCharts.resize()
|
||||
}
|
||||
EleResize.on(barCharts, listener)
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped lang="less">
|
||||
#charts {
|
||||
height: 100%;
|
||||
width: 100%;
|
||||
}
|
||||
</style>
|
||||
|
|
@ -0,0 +1,99 @@
|
|||
<template>
|
||||
<div class="alarm-overview">
|
||||
<peak-secondary-title :title="title"/>
|
||||
<div class="_tab">
|
||||
<div class="tab-item" v-for="item of tabList" :class="item.value === activeTab?'active-tab':''"
|
||||
@click="tabChange(item.value)">{{ item.label }}
|
||||
</div>
|
||||
</div>
|
||||
<div class="alarm-data">
|
||||
<div class="alarm-total" v-if="activeTab === 1">
|
||||
<peak-warning-statistics/>
|
||||
</div>
|
||||
<div class="alarm-details" v-if="activeTab === 2">
|
||||
<peak-latest-warning/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import PeakSecondaryTitle from "@/components/peak-coal-monitoring/PeakSecondaryTitle";
|
||||
import PeakLatestWarning from "@/components/peak-coal-monitoring/PeakLatestWarning";
|
||||
import PeakWarningStatistics from "@/components/peak-coal-monitoring/PeakWarningStatistics";
|
||||
|
||||
export default {
|
||||
name: "AlarmOverview",
|
||||
components: {PeakWarningStatistics, PeakLatestWarning, PeakSecondaryTitle},
|
||||
data() {
|
||||
return {
|
||||
title: '智能预警概况',
|
||||
tabList: [
|
||||
{
|
||||
label: '智能预警统计',
|
||||
value: 1
|
||||
},
|
||||
{
|
||||
label: '智能预警详情',
|
||||
value: 2
|
||||
}
|
||||
],
|
||||
activeTab: 1
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
tabChange(val) {
|
||||
this.activeTab = val
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped lang="less">
|
||||
@import "../../assets/styles/mixin";
|
||||
|
||||
.alarm-overview {
|
||||
height: 100%;
|
||||
width: 100%;
|
||||
.flex-column;
|
||||
|
||||
._tab {
|
||||
margin-top: 10px;
|
||||
width: 100%;
|
||||
height: 30px;
|
||||
.flex-row;
|
||||
|
||||
.tab-item {
|
||||
width: 50%;
|
||||
height: 100%;
|
||||
font-family: MicrosoftYaHei-Bold;
|
||||
font-size: 14px;
|
||||
color: #FFFFFF;
|
||||
letter-spacing: 0;
|
||||
text-align: center;
|
||||
text-shadow: 0 2px 2px rgba(0, 0, 0, 0.50);
|
||||
font-weight: 700;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.active-tab {
|
||||
background: url("~/assets/peakCoalMonitoring/common/tab-active-bg.png") no-repeat;
|
||||
background-size: 100% 100%;
|
||||
}
|
||||
}
|
||||
|
||||
.alarm-data {
|
||||
flex: 1;
|
||||
height: 0;
|
||||
|
||||
.alarm-total {
|
||||
height: 100%;
|
||||
padding-top: 20px;
|
||||
}
|
||||
|
||||
.alarm-details {
|
||||
height: 100%;
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
|
@ -0,0 +1,68 @@
|
|||
<template>
|
||||
<div class="atmospheric-module">
|
||||
<peak-secondary-title :title="title"/>
|
||||
<div class="_tab">
|
||||
<div class="tab-item" v-for="item of tabList" :class="item.value === activeTab?'active-tab':''" @click="tabChange(item.value)">{{ item.label }}</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import PeakSecondaryTitle from "@/components/peak-coal-monitoring/PeakSecondaryTitle";
|
||||
export default {
|
||||
name: "AtmosphericModule",
|
||||
components: {PeakSecondaryTitle},
|
||||
data(){
|
||||
return{
|
||||
title: '大气质量信息总览',
|
||||
tabList: [
|
||||
{
|
||||
label: '空气质量指数',
|
||||
value: 1
|
||||
},
|
||||
{
|
||||
label: '重要污染物变化趋势',
|
||||
value: 2
|
||||
}
|
||||
],
|
||||
activeTab: 1
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
tabChange(val){
|
||||
this.activeTab = val
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped lang="less">
|
||||
@import "../../assets/styles/mixin";
|
||||
.atmospheric-module{
|
||||
height: 100%;
|
||||
width: 100%;
|
||||
.flex-column;
|
||||
._tab{
|
||||
margin-top: 10px;
|
||||
width: 100%;
|
||||
height: 30px;
|
||||
.flex-row;
|
||||
.tab-item{
|
||||
width: 50%;
|
||||
height: 100%;
|
||||
font-family: MicrosoftYaHei-Bold;
|
||||
font-size: 14px;
|
||||
color: #FFFFFF;
|
||||
letter-spacing: 0;
|
||||
text-align: center;
|
||||
text-shadow: 0 2px 2px rgba(0,0,0,0.50);
|
||||
font-weight: 700;
|
||||
cursor: pointer;
|
||||
}
|
||||
.active-tab{
|
||||
background: url("~/assets/peakCoalMonitoring/common/tab-active-bg.png") no-repeat;
|
||||
background-size: 100% 100%;
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
|
@ -0,0 +1,26 @@
|
|||
<template>
|
||||
<div class="device-overview">
|
||||
<peak-secondary-title :title="title" />
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import PeakSecondaryTitle from "@/components/peak-coal-monitoring/PeakSecondaryTitle";
|
||||
export default {
|
||||
name: "DeviceOverview",
|
||||
components: {PeakSecondaryTitle},
|
||||
data(){
|
||||
return{
|
||||
title: '设备概况'
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped lang="less">
|
||||
@import "assets/styles/mixin";
|
||||
.device-overview{
|
||||
height: 100%;
|
||||
width: 100%;
|
||||
}
|
||||
</style>
|
||||
|
|
@ -0,0 +1,97 @@
|
|||
<template>
|
||||
<div class="energy-profile">
|
||||
<peak-secondary-title :title="title"/>
|
||||
<div class="_tab">
|
||||
<div class="tab-item" v-for="item of tabList" :class="item.value === activeTab?'active-tab':''"
|
||||
@click="tabChange(item.value)">{{ item.label }}
|
||||
</div>
|
||||
</div>
|
||||
<div class="energy-content">
|
||||
<div class="peak-energy-use" v-if="activeTab === 1">
|
||||
<peak-energy-use/>
|
||||
</div>
|
||||
<div class="peak-enterprise-operations">
|
||||
<peak-enterprise-operations v-if="activeTab === 2"/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import PeakSecondaryTitle from "@/components/peak-coal-monitoring/PeakSecondaryTitle";
|
||||
import PeakEnergyUse from "@/components/peak-coal-monitoring/PeakEnergyUse";
|
||||
import PeakEnterpriseOperations from "@/components/peak-coal-monitoring/PeakEnterpriseOperations";
|
||||
|
||||
export default {
|
||||
name: "EnergyProfile",
|
||||
components: {PeakEnterpriseOperations, PeakEnergyUse, PeakSecondaryTitle},
|
||||
data() {
|
||||
return {
|
||||
title: '能源概况',
|
||||
tabList: [
|
||||
{
|
||||
label: '能源使用情况',
|
||||
value: 1
|
||||
},
|
||||
{
|
||||
label: '企业运营情况',
|
||||
value: 2
|
||||
}
|
||||
],
|
||||
activeTab: 1
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
tabChange(val) {
|
||||
this.activeTab = val
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped lang="less">
|
||||
@import "assets/styles/mixin";
|
||||
|
||||
.energy-profile {
|
||||
height: 100%;
|
||||
width: 100%;
|
||||
.flex-column;
|
||||
|
||||
._tab {
|
||||
margin-top: 10px;
|
||||
width: 100%;
|
||||
height: 30px;
|
||||
.flex-row;
|
||||
|
||||
.tab-item {
|
||||
width: 50%;
|
||||
height: 100%;
|
||||
font-family: MicrosoftYaHei-Bold;
|
||||
font-size: 14px;
|
||||
color: #FFFFFF;
|
||||
letter-spacing: 0;
|
||||
text-align: center;
|
||||
text-shadow: 0 2px 2px rgba(0, 0, 0, 0.50);
|
||||
font-weight: 700;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.active-tab {
|
||||
background: url("~/assets/peakCoalMonitoring/common/tab-active-bg.png") no-repeat;
|
||||
background-size: 100% 100%;
|
||||
}
|
||||
}
|
||||
|
||||
.energy-content {
|
||||
flex: 1;
|
||||
height: 0;
|
||||
.peak-energy-use{
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
.peak-enterprise-operations{
|
||||
height: 100%;
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
|
@ -0,0 +1,361 @@
|
|||
<template>
|
||||
<div class="monitor-data">
|
||||
<peak-secondary-title :title="title"/>
|
||||
<div class="table-content">
|
||||
<peak-custom-table :table-title="tableTitle" :data-source="dataSource"/>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import PeakSecondaryTitle from "@/components/peak-coal-monitoring/PeakSecondaryTitle";
|
||||
import PeakCustomTable from "@/components/peak-coal-monitoring/PeakCustomTable";
|
||||
export default {
|
||||
name: "MonitorData",
|
||||
components: {PeakCustomTable, PeakSecondaryTitle},
|
||||
data(){
|
||||
return{
|
||||
title: '实时监测数据',
|
||||
tableTitle: [
|
||||
{
|
||||
title: '监测设备',
|
||||
dataIndex: 'pointName',
|
||||
dataUnit: null,
|
||||
width: '25%'
|
||||
},
|
||||
{
|
||||
title: '一氧化碳',
|
||||
dataIndex: 'COValue',
|
||||
dataUnit: 'COUnit',
|
||||
width: '15%'
|
||||
},
|
||||
{
|
||||
title: '二氧化硫',
|
||||
dataIndex: 'SO2Value',
|
||||
dataUnit: 'SO2Unit',
|
||||
width: '15%'
|
||||
},
|
||||
{
|
||||
title: '氮氧化物',
|
||||
dataIndex: 'NOValue',
|
||||
dataUnit: 'NOUnit',
|
||||
width: '15%'
|
||||
},
|
||||
{
|
||||
title: '臭氧',
|
||||
dataIndex: 'O3Value',
|
||||
dataUnit: 'O3Unit',
|
||||
width: '15%'
|
||||
},
|
||||
{
|
||||
title: 'PM10',
|
||||
dataIndex: 'PM10Value',
|
||||
dataUnit: 'PM10Unit',
|
||||
width: '15%'
|
||||
}
|
||||
],
|
||||
dataSource: [
|
||||
{
|
||||
pointName: '监测设备名称',
|
||||
COValue: 2,
|
||||
COUnit: '%VOL',
|
||||
SO2Value: 30,
|
||||
SO2Unit: 'mg/m³',
|
||||
NOValue: 20,
|
||||
NOUnit: 'mg/L',
|
||||
O3Value: 10,
|
||||
O3Unit: 'ppm',
|
||||
PM10Value: 10,
|
||||
PM10Unit: 'μg/m³',
|
||||
PM25Value: 30,
|
||||
PM25Unit: 'μg/m³'
|
||||
},
|
||||
{
|
||||
pointName: '监测设备名称',
|
||||
COValue: 2,
|
||||
COUnit: '%VOL',
|
||||
SO2Value: 30,
|
||||
SO2Unit: 'mg/m³',
|
||||
NOValue: 20,
|
||||
NOUnit: 'mg/L',
|
||||
O3Value: 10,
|
||||
O3Unit: 'ppm',
|
||||
PM10Value: 10,
|
||||
PM10Unit: 'μg/m³',
|
||||
PM25Value: 30,
|
||||
PM25Unit: 'μg/m³'
|
||||
},
|
||||
{
|
||||
pointName: '监测设备名称',
|
||||
COValue: 2,
|
||||
COUnit: '%VOL',
|
||||
SO2Value: 30,
|
||||
SO2Unit: 'mg/m³',
|
||||
NOValue: 20,
|
||||
NOUnit: 'mg/L',
|
||||
O3Value: 10,
|
||||
O3Unit: 'ppm',
|
||||
PM10Value: 10,
|
||||
PM10Unit: 'μg/m³',
|
||||
PM25Value: 30,
|
||||
PM25Unit: 'μg/m³'
|
||||
},
|
||||
{
|
||||
pointName: '监测设备名称',
|
||||
COValue: 2,
|
||||
COUnit: '%VOL',
|
||||
SO2Value: 30,
|
||||
SO2Unit: 'mg/m³',
|
||||
NOValue: 20,
|
||||
NOUnit: 'mg/L',
|
||||
O3Value: 10,
|
||||
O3Unit: 'ppm',
|
||||
PM10Value: 10,
|
||||
PM10Unit: 'μg/m³',
|
||||
PM25Value: 30,
|
||||
PM25Unit: 'μg/m³'
|
||||
},
|
||||
{
|
||||
pointName: '监测设备名称',
|
||||
COValue: 2,
|
||||
COUnit: '%VOL',
|
||||
SO2Value: 30,
|
||||
SO2Unit: 'mg/m³',
|
||||
NOValue: 20,
|
||||
NOUnit: 'mg/L',
|
||||
O3Value: 10,
|
||||
O3Unit: 'ppm',
|
||||
PM10Value: 10,
|
||||
PM10Unit: 'μg/m³',
|
||||
PM25Value: 30,
|
||||
PM25Unit: 'μg/m³'
|
||||
},
|
||||
{
|
||||
pointName: '监测设备名称',
|
||||
COValue: 2,
|
||||
COUnit: '%VOL',
|
||||
SO2Value: 30,
|
||||
SO2Unit: 'mg/m³',
|
||||
NOValue: 20,
|
||||
NOUnit: 'mg/L',
|
||||
O3Value: 10,
|
||||
O3Unit: 'ppm',
|
||||
PM10Value: 10,
|
||||
PM10Unit: 'μg/m³',
|
||||
PM25Value: 30,
|
||||
PM25Unit: 'μg/m³'
|
||||
},
|
||||
{
|
||||
pointName: '监测设备名称',
|
||||
COValue: 2,
|
||||
COUnit: '%VOL',
|
||||
SO2Value: 30,
|
||||
SO2Unit: 'mg/m³',
|
||||
NOValue: 20,
|
||||
NOUnit: 'mg/L',
|
||||
O3Value: 10,
|
||||
O3Unit: 'ppm',
|
||||
PM10Value: 10,
|
||||
PM10Unit: 'μg/m³',
|
||||
PM25Value: 30,
|
||||
PM25Unit: 'μg/m³'
|
||||
},
|
||||
{
|
||||
pointName: '监测设备名称',
|
||||
COValue: 2,
|
||||
COUnit: '%VOL',
|
||||
SO2Value: 30,
|
||||
SO2Unit: 'mg/m³',
|
||||
NOValue: 20,
|
||||
NOUnit: 'mg/L',
|
||||
O3Value: 10,
|
||||
O3Unit: 'ppm',
|
||||
PM10Value: 10,
|
||||
PM10Unit: 'μg/m³',
|
||||
PM25Value: 30,
|
||||
PM25Unit: 'μg/m³'
|
||||
},
|
||||
{
|
||||
pointName: '监测设备名称',
|
||||
COValue: 2,
|
||||
COUnit: '%VOL',
|
||||
SO2Value: 30,
|
||||
SO2Unit: 'mg/m³',
|
||||
NOValue: 20,
|
||||
NOUnit: 'mg/L',
|
||||
O3Value: 10,
|
||||
O3Unit: 'ppm',
|
||||
PM10Value: 10,
|
||||
PM10Unit: 'μg/m³',
|
||||
PM25Value: 30,
|
||||
PM25Unit: 'μg/m³'
|
||||
},
|
||||
{
|
||||
pointName: '监测设备名称',
|
||||
COValue: 2,
|
||||
COUnit: '%VOL',
|
||||
SO2Value: 30,
|
||||
SO2Unit: 'mg/m³',
|
||||
NOValue: 20,
|
||||
NOUnit: 'mg/L',
|
||||
O3Value: 10,
|
||||
O3Unit: 'ppm',
|
||||
PM10Value: 10,
|
||||
PM10Unit: 'μg/m³',
|
||||
PM25Value: 30,
|
||||
PM25Unit: 'μg/m³'
|
||||
},
|
||||
{
|
||||
pointName: '监测设备名称',
|
||||
COValue: 2,
|
||||
COUnit: '%VOL',
|
||||
SO2Value: 30,
|
||||
SO2Unit: 'mg/m³',
|
||||
NOValue: 20,
|
||||
NOUnit: 'mg/L',
|
||||
O3Value: 10,
|
||||
O3Unit: 'ppm',
|
||||
PM10Value: 10,
|
||||
PM10Unit: 'μg/m³',
|
||||
PM25Value: 30,
|
||||
PM25Unit: 'μg/m³'
|
||||
},
|
||||
{
|
||||
pointName: '监测设备名称',
|
||||
COValue: 2,
|
||||
COUnit: '%VOL',
|
||||
SO2Value: 30,
|
||||
SO2Unit: 'mg/m³',
|
||||
NOValue: 20,
|
||||
NOUnit: 'mg/L',
|
||||
O3Value: 10,
|
||||
O3Unit: 'ppm',
|
||||
PM10Value: 10,
|
||||
PM10Unit: 'μg/m³',
|
||||
PM25Value: 30,
|
||||
PM25Unit: 'μg/m³'
|
||||
},
|
||||
{
|
||||
pointName: '监测设备名称',
|
||||
COValue: 2,
|
||||
COUnit: '%VOL',
|
||||
SO2Value: 30,
|
||||
SO2Unit: 'mg/m³',
|
||||
NOValue: 20,
|
||||
NOUnit: 'mg/L',
|
||||
O3Value: 10,
|
||||
O3Unit: 'ppm',
|
||||
PM10Value: 10,
|
||||
PM10Unit: 'μg/m³',
|
||||
PM25Value: 30,
|
||||
PM25Unit: 'μg/m³'
|
||||
},
|
||||
{
|
||||
pointName: '监测设备名称',
|
||||
COValue: 2,
|
||||
COUnit: '%VOL',
|
||||
SO2Value: 30,
|
||||
SO2Unit: 'mg/m³',
|
||||
NOValue: 20,
|
||||
NOUnit: 'mg/L',
|
||||
O3Value: 10,
|
||||
O3Unit: 'ppm',
|
||||
PM10Value: 10,
|
||||
PM10Unit: 'μg/m³',
|
||||
PM25Value: 30,
|
||||
PM25Unit: 'μg/m³'
|
||||
},
|
||||
{
|
||||
pointName: '监测设备名称',
|
||||
COValue: 2,
|
||||
COUnit: '%VOL',
|
||||
SO2Value: 30,
|
||||
SO2Unit: 'mg/m³',
|
||||
NOValue: 20,
|
||||
NOUnit: 'mg/L',
|
||||
O3Value: 10,
|
||||
O3Unit: 'ppm',
|
||||
PM10Value: 10,
|
||||
PM10Unit: 'μg/m³',
|
||||
PM25Value: 30,
|
||||
PM25Unit: 'μg/m³'
|
||||
},
|
||||
{
|
||||
pointName: '监测设备名称',
|
||||
COValue: 2,
|
||||
COUnit: '%VOL',
|
||||
SO2Value: 30,
|
||||
SO2Unit: 'mg/m³',
|
||||
NOValue: 20,
|
||||
NOUnit: 'mg/L',
|
||||
O3Value: 10,
|
||||
O3Unit: 'ppm',
|
||||
PM10Value: 10,
|
||||
PM10Unit: 'μg/m³',
|
||||
PM25Value: 30,
|
||||
PM25Unit: 'μg/m³'
|
||||
},
|
||||
{
|
||||
pointName: '监测设备名称',
|
||||
COValue: 2,
|
||||
COUnit: '%VOL',
|
||||
SO2Value: 30,
|
||||
SO2Unit: 'mg/m³',
|
||||
NOValue: 20,
|
||||
NOUnit: 'mg/L',
|
||||
O3Value: 10,
|
||||
O3Unit: 'ppm',
|
||||
PM10Value: 10,
|
||||
PM10Unit: 'μg/m³',
|
||||
PM25Value: 30,
|
||||
PM25Unit: 'μg/m³'
|
||||
},
|
||||
{
|
||||
pointName: '监测设备名称',
|
||||
COValue: 2,
|
||||
COUnit: '%VOL',
|
||||
SO2Value: 30,
|
||||
SO2Unit: 'mg/m³',
|
||||
NOValue: 20,
|
||||
NOUnit: 'mg/L',
|
||||
O3Value: 10,
|
||||
O3Unit: 'ppm',
|
||||
PM10Value: 10,
|
||||
PM10Unit: 'μg/m³',
|
||||
PM25Value: 30,
|
||||
PM25Unit: 'μg/m³'
|
||||
},
|
||||
{
|
||||
pointName: '监测设备名称',
|
||||
COValue: 2,
|
||||
COUnit: '%VOL',
|
||||
SO2Value: 30,
|
||||
SO2Unit: 'mg/m³',
|
||||
NOValue: 20,
|
||||
NOUnit: 'mg/L',
|
||||
O3Value: 10,
|
||||
O3Unit: 'ppm',
|
||||
PM10Value: 10,
|
||||
PM10Unit: 'μg/m³',
|
||||
PM25Value: 30,
|
||||
PM25Unit: 'μg/m³'
|
||||
}
|
||||
]
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped lang="less">
|
||||
@import "assets/styles/mixin";
|
||||
.monitor-data{
|
||||
height: 100%;
|
||||
width: 100%;
|
||||
.flex-column;
|
||||
.table-content{
|
||||
padding-top: 20px;
|
||||
flex: 1;
|
||||
height: 0;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
|
@ -0,0 +1,229 @@
|
|||
<!--自定义table-->
|
||||
<template>
|
||||
<div class="custom-table">
|
||||
<div class="check-data-info">
|
||||
<div class="table-info">
|
||||
<div class="table-header">
|
||||
<span class="table-header-item" v-for="(item,index) of tableTitle"
|
||||
:style="`width:${item.width};`">
|
||||
{{ item.title }}
|
||||
</span>
|
||||
</div>
|
||||
<div class="table-body" v-if="dataSource.length && tableRoll">
|
||||
<vue-seamless-scroll
|
||||
v-if="dataSource.length && tableRoll"
|
||||
ref="vueSeamless"
|
||||
:data="dataSource"
|
||||
class="seamless-scroll"
|
||||
:class-option="defaultOption"
|
||||
>
|
||||
<div class="table-item-body" v-for="item of dataSource">
|
||||
<span class="data-content" v-for="dataIndex of tableTitle" :style="`width:${dataIndex.width};`">
|
||||
<div class="_content">
|
||||
<div class="point-name">
|
||||
<div class="_value">{{ item[dataIndex.dataIndex] }}</div>
|
||||
<div class="_unit" v-if="dataIndex.dataUnit">{{ item[dataIndex.dataUnit] }}</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</span>
|
||||
</div>
|
||||
</vue-seamless-scroll>
|
||||
</div>
|
||||
<div class="table-body" v-if="dataSource.length && !tableRoll">
|
||||
<div class="table-item-body" v-for="item of dataSource">
|
||||
<span class="data-content" v-for="dataIndex of tableTitle" :style="`width:${dataIndex.width};`">
|
||||
<div class="_content">
|
||||
<div class="point-name">
|
||||
<div class="_value">{{ item[dataIndex.dataIndex] }}</div>
|
||||
<div class="_unit" v-if="dataIndex.dataUnit">{{ item[dataIndex.dataUnit] }}</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
<script>
|
||||
import vueSeamlessScroll from 'vue-seamless-scroll'
|
||||
export default {
|
||||
name: "PeakCustomTable",
|
||||
components: {vueSeamlessScroll},
|
||||
props: {
|
||||
tableTitle: {
|
||||
type: Array,
|
||||
default: () => []
|
||||
},
|
||||
dataSource: {
|
||||
type: Array,
|
||||
default: () => []
|
||||
},
|
||||
tableRoll: {
|
||||
type: Boolean,
|
||||
default: true
|
||||
}
|
||||
},
|
||||
data() {
|
||||
return {}
|
||||
},
|
||||
computed: {
|
||||
defaultOption() {
|
||||
return {
|
||||
step: 0.3, // 数值越大速度滚动越快
|
||||
limitMoveNum: 9, // 开始无缝滚动的数据量 this.dataList.length
|
||||
hoverStop: true, // 是否开启鼠标悬停stop
|
||||
direction: 1, // 0向下 1向上 2向左 3向右
|
||||
openWatch: true, // 开启数据实时监控刷新dom
|
||||
singleHeight: 0, // 单步运动停止的高度(默认值0是无缝不停止的滚动) direction => 0/1
|
||||
singleWidth: 0, // 单步运动停止的宽度(默认值0是无缝不停止的滚动) direction => 2/3
|
||||
waitTime: 1000 // 单步运动停止的时间(默认值1000ms)
|
||||
}
|
||||
},
|
||||
},
|
||||
methods: {}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped lang="less">
|
||||
@import "assets/styles/mixin";
|
||||
|
||||
.custom-table {
|
||||
height: 100%;
|
||||
width: 100%;
|
||||
overflow: auto;
|
||||
|
||||
.check-data-info {
|
||||
height: 100%;
|
||||
width: 100%;
|
||||
|
||||
.table-info {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
overflow: auto;
|
||||
|
||||
.table-header {
|
||||
position: sticky;
|
||||
top: 0;
|
||||
height: 30px;
|
||||
white-space: nowrap;
|
||||
background-color: #063367;
|
||||
|
||||
.table-header-item {
|
||||
background-color: rgba(35, 140, 255, 0.2);
|
||||
display: inline-block;
|
||||
font-family: MicrosoftYaHei-Bold;
|
||||
font-size: 14px;
|
||||
color: #37EAFF;
|
||||
letter-spacing: 0;
|
||||
text-align: center;
|
||||
line-height: 30px;
|
||||
font-weight: 700;
|
||||
}
|
||||
}
|
||||
|
||||
.table-body {
|
||||
height: calc(100% - 30px);
|
||||
|
||||
.seamless-scroll {
|
||||
height: 100%;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.table-item-body {
|
||||
height: 30px;
|
||||
margin-top: 10px;
|
||||
width: 100%;
|
||||
white-space: nowrap;
|
||||
|
||||
.data-content {
|
||||
display: inline-block;
|
||||
height: 30px;
|
||||
background: rgba(21, 77, 160, 0.20);
|
||||
|
||||
._content {
|
||||
height: 100%;
|
||||
width: 100%;
|
||||
.flex-row;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.point-name {
|
||||
.text-ellipsis;
|
||||
.flex-row;
|
||||
|
||||
._value {
|
||||
font-family: MicrosoftYaHei-Bold;
|
||||
font-size: 14px;
|
||||
color: #FFFFFF;
|
||||
letter-spacing: 0;
|
||||
font-weight: 700;
|
||||
}
|
||||
|
||||
._unit {
|
||||
font-family: MicrosoftYaHei-Bold;
|
||||
font-size: 12px;
|
||||
color: #FFFFFF;
|
||||
letter-spacing: 0;
|
||||
font-weight: 700;
|
||||
}
|
||||
}
|
||||
|
||||
._icon {
|
||||
}
|
||||
}
|
||||
|
||||
.odds-ratio-up-icon {
|
||||
width: 23px;
|
||||
height: 25px;
|
||||
background: url("assets/peakCoalImages/left/odds-ratio-up-icon.png") no-repeat;
|
||||
padding-left: 20px;
|
||||
}
|
||||
|
||||
.odds-ratio-reduction-icon {
|
||||
width: 22px;
|
||||
height: 26px;
|
||||
background: url("assets/peakCoalImages/left/odds-ratio-reduction-icon.png") no-repeat;
|
||||
padding-left: 20px;
|
||||
}
|
||||
|
||||
|
||||
.data-value {
|
||||
.flex-row;
|
||||
justify-content: center;
|
||||
|
||||
._value {
|
||||
font-family: MicrosoftYaHei-Bold;
|
||||
font-size: 14px;
|
||||
color: #FFFFFF;
|
||||
letter-spacing: 0;
|
||||
text-align: center;
|
||||
font-weight: 700;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
::-webkit-scrollbar {
|
||||
width: 4px;
|
||||
height: 4px;
|
||||
}
|
||||
|
||||
::-webkit-scrollbar-thumb {
|
||||
border-radius: 5px;
|
||||
-webkit-box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.2);
|
||||
background-color: rgba(21, 77, 160, 0.20);;
|
||||
}
|
||||
|
||||
::-webkit-scrollbar-track {
|
||||
-webkit-box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.2);
|
||||
border-radius: 5px;
|
||||
background-color: #d3dce6;
|
||||
}
|
||||
</style>
|
||||
|
|
@ -0,0 +1,167 @@
|
|||
<!--能源使用情况-->
|
||||
<template>
|
||||
<div class="energy-use">
|
||||
<div class="electricity-water-usage">
|
||||
<div class="electricity-usage">
|
||||
<div class="electricity-icon"></div>
|
||||
<div class="electricity-info">
|
||||
<div class="_title">今日用电[kwh]</div>
|
||||
<div class="_value">
|
||||
<Number :num="1244"/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="water-usage">
|
||||
<div class="water-icon"></div>
|
||||
<div class="water-info">
|
||||
<div class="_title">今日用水[m³]</div>
|
||||
<div class="_value">
|
||||
<Number :num="185"/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<peak-third-level-label :title="thirdLevelLabel"/>
|
||||
<div class="electricity-water-trends">
|
||||
<peak-energy-use-chart :data-source="electricityWaterDataSource"/>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
|
||||
import ElectricityWaterCharts from "@/components/charts/ElectricityWaterCharts";
|
||||
import PeakThirdLevelLabel from "@/components/peak-coal-monitoring/PeakThirdLevelLabel";
|
||||
import PeakEnergyUseChart from "@/components/charts/PeakEnergyUseChart";
|
||||
|
||||
export default {
|
||||
name: "PeakEnergyUse",
|
||||
components: {PeakEnergyUseChart, PeakThirdLevelLabel, ElectricityWaterCharts},
|
||||
data() {
|
||||
return {
|
||||
title: '能源使用情况',
|
||||
thirdLevelLabel: '水电使用情况',
|
||||
electricityWaterDataSource: [
|
||||
{
|
||||
name: '00:00',
|
||||
value1: '10',
|
||||
value2: '30',
|
||||
value3: '20'
|
||||
},
|
||||
{
|
||||
name: '01:00',
|
||||
value1: '30',
|
||||
value2: '20',
|
||||
value3: '10'
|
||||
},
|
||||
{
|
||||
name: '02:00',
|
||||
value1: '20',
|
||||
value2: '10',
|
||||
value3: '20'
|
||||
},
|
||||
{
|
||||
name: '03:00',
|
||||
value1: '20',
|
||||
value2: '30',
|
||||
value3: '60'
|
||||
},
|
||||
{
|
||||
name: '04:00',
|
||||
value1: '30',
|
||||
value2: '40',
|
||||
value3: '50'
|
||||
},
|
||||
{
|
||||
name: '05:00',
|
||||
value1: '10',
|
||||
value2: '20',
|
||||
value3: '30'
|
||||
},
|
||||
{
|
||||
name: '06:00',
|
||||
value1: '16',
|
||||
value2: '17',
|
||||
value3: '18'
|
||||
},
|
||||
{
|
||||
name: '07:00',
|
||||
value1: '30',
|
||||
value2: '20',
|
||||
value3: '10'
|
||||
}
|
||||
],
|
||||
electricityWaterTab: 0
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped lang="less">
|
||||
@import "assets/styles/mixin";
|
||||
|
||||
.energy-use {
|
||||
height: 100%;
|
||||
width: 100%;
|
||||
.flex-column;
|
||||
|
||||
|
||||
.electricity-water-usage {
|
||||
height: 80px;
|
||||
.flex-row;
|
||||
justify-content: space-between;
|
||||
|
||||
.electricity-usage {
|
||||
.flex-row;
|
||||
|
||||
.electricity-icon {
|
||||
width: 49px;
|
||||
height: 49px;
|
||||
.bg("~/assets/peakCoalMonitoring/right/electricity-icon.png");
|
||||
}
|
||||
|
||||
.electricity-info {
|
||||
padding-left: 20px;
|
||||
}
|
||||
}
|
||||
|
||||
.water-usage {
|
||||
.flex-row;
|
||||
|
||||
.water-icon {
|
||||
width: 49px;
|
||||
height: 49px;
|
||||
.bg("~/assets/peakCoalMonitoring/right/water-icon.png");
|
||||
}
|
||||
|
||||
.water-info {
|
||||
padding-left: 20px;
|
||||
}
|
||||
}
|
||||
|
||||
._title {
|
||||
font-family: MicrosoftYaHei;
|
||||
font-size: 14px;
|
||||
color: #6AC4FF;
|
||||
letter-spacing: 2.26px;
|
||||
font-weight: 400;
|
||||
}
|
||||
|
||||
._value {
|
||||
font-family: YouSheBiaoTiHei;
|
||||
font-size: 20px;
|
||||
color: #FFFFFF;
|
||||
letter-spacing: 5.64px;
|
||||
font-weight: 400;
|
||||
}
|
||||
}
|
||||
|
||||
.electricity-water-trends {
|
||||
flex: 1;
|
||||
height: 0;
|
||||
}
|
||||
|
||||
}
|
||||
</style>
|
||||
|
|
@ -0,0 +1,176 @@
|
|||
<!--企业运营情况-->
|
||||
<template>
|
||||
<div class="enterprise-operations">
|
||||
<div class="operational-value-info">
|
||||
<div class="operational-value-item-info">
|
||||
<div class="_title">氮气外供[m³]</div>
|
||||
<div class="_value">
|
||||
<Number :num="124"/>
|
||||
</div>
|
||||
<div class="_icon"></div>
|
||||
</div>
|
||||
<div class="operational-value-item-info">
|
||||
<div class="_title">液化石油气[t]</div>
|
||||
<div class="_value">
|
||||
<Number :num="1123"/>
|
||||
</div>
|
||||
<div class="_icon"></div>
|
||||
</div>
|
||||
<div class="operational-value-item-info">
|
||||
<div class="_title">氧气外供[m³]</div>
|
||||
<div class="_value">
|
||||
<Number :num="185"/>
|
||||
</div>
|
||||
<div class="_icon"></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<peak-third-level-label :title="thirdLevelLabel"/>
|
||||
|
||||
<div class="produce-trend-chart">
|
||||
<peak-produce-trend-chart :data-source="produceTrendDataSource"/>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import ProduceTrendChart from "@/components/charts/ProduceTrendChart";
|
||||
import PeakThirdLevelLabel from "@/components/peak-coal-monitoring/PeakThirdLevelLabel";
|
||||
import PeakProduceTrendChart from "@/components/charts/PeakProduceTrendChart";
|
||||
|
||||
export default {
|
||||
name: "PeakEnterpriseOperations",
|
||||
components: {PeakProduceTrendChart, PeakThirdLevelLabel, ProduceTrendChart},
|
||||
|
||||
data() {
|
||||
return {
|
||||
thirdLevelLabel: '生产趋势',
|
||||
produceTrendDataSource: [
|
||||
{
|
||||
name: '00:00',
|
||||
value1: '10',
|
||||
value2: '30',
|
||||
value3: '20'
|
||||
},
|
||||
{
|
||||
name: '01:00',
|
||||
value1: '30',
|
||||
value2: '20',
|
||||
value3: '10'
|
||||
},
|
||||
{
|
||||
name: '02:00',
|
||||
value1: '20',
|
||||
value2: '10',
|
||||
value3: '20'
|
||||
},
|
||||
{
|
||||
name: '03:00',
|
||||
value1: '20',
|
||||
value2: '30',
|
||||
value3: '60'
|
||||
},
|
||||
{
|
||||
name: '04:00',
|
||||
value1: '30',
|
||||
value2: '40',
|
||||
value3: '50'
|
||||
},
|
||||
{
|
||||
name: '05:00',
|
||||
value1: '10',
|
||||
value2: '20',
|
||||
value3: '30'
|
||||
},
|
||||
{
|
||||
name: '06:00',
|
||||
value1: '16',
|
||||
value2: '17',
|
||||
value3: '18'
|
||||
},
|
||||
{
|
||||
name: '07:00',
|
||||
value1: '30',
|
||||
value2: '20',
|
||||
value3: '10'
|
||||
}
|
||||
],
|
||||
tabDataList: [
|
||||
{
|
||||
name: '今日',
|
||||
value: '0'
|
||||
},
|
||||
{
|
||||
name: '本月',
|
||||
value: '1'
|
||||
},
|
||||
{
|
||||
name: '上月',
|
||||
value: '2'
|
||||
}
|
||||
],
|
||||
activeTab: '0'
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
tabChange(val) {
|
||||
this.activeTab = val
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped lang="less">
|
||||
@import "assets/styles/mixin";
|
||||
|
||||
.enterprise-operations {
|
||||
height: 100%;
|
||||
width: 100%;
|
||||
.flex-column;
|
||||
|
||||
.operational-value-info {
|
||||
padding-top: 10px;
|
||||
height: 100px;
|
||||
display: flex;
|
||||
flex-flow: row;
|
||||
justify-content: space-between;
|
||||
|
||||
.operational-value-item-info {
|
||||
position: relative;
|
||||
|
||||
._title {
|
||||
font-family: MicrosoftYaHei;
|
||||
font-size: 14px;
|
||||
color: #6AC4FF;
|
||||
letter-spacing: 2.26px;
|
||||
font-weight: 400;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
._value {
|
||||
font-family: YouSheBiaoTiHei;
|
||||
font-size: 20px;
|
||||
color: #FFFFFF;
|
||||
letter-spacing: 5.64px;
|
||||
font-weight: 400;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
._icon {
|
||||
position: absolute;
|
||||
bottom: 10px;
|
||||
width: 80px;
|
||||
height: 48px;
|
||||
left: 10px;
|
||||
.bg("~/assets/peakCoalMonitoring/right/num-bottom-bg.png");
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.produce-trend-chart {
|
||||
flex: 1;
|
||||
height: 0;
|
||||
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
|
@ -0,0 +1,105 @@
|
|||
<!--最新预警-->
|
||||
<template>
|
||||
<div class="latest-warning">
|
||||
<div class="warning-data-list">
|
||||
<vue-seamless-scroll
|
||||
v-if="warningDataList.length"
|
||||
ref="vueSeamless"
|
||||
:data="warningDataList"
|
||||
class="seamless-scroll"
|
||||
:class-option="defaultOption"
|
||||
>
|
||||
<div v-for="item of warningDataList" :key="item.indexCode" class="event-item">
|
||||
<peak-warning-info-item :data-item="item"/>
|
||||
</div>
|
||||
</vue-seamless-scroll>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import vueSeamlessScroll from 'vue-seamless-scroll'
|
||||
import PeakWarningInfoItem from "@/components/peak-coal-monitoring/PeakWarningInfoItem";
|
||||
|
||||
export default {
|
||||
name: "PeakLatestWarning",
|
||||
components: {PeakWarningInfoItem, vueSeamlessScroll},
|
||||
data() {
|
||||
return {
|
||||
warningDataList: [
|
||||
{
|
||||
indexCode: '001',
|
||||
snapImgUrl: 'https://img1.baidu.com/it/u=1579566612,4009913306&fm=253&fmt=auto&app=138&f=JPEG?w=693&h=417',
|
||||
warningName: '区域入侵',
|
||||
site: 'xxx地区西门',
|
||||
warningTime: '2023-12-12 12:32:45',
|
||||
state: 1
|
||||
},
|
||||
{
|
||||
indexCode: '002',
|
||||
snapImgUrl: 'https://img1.baidu.com/it/u=1579566612,4009913306&fm=253&fmt=auto&app=138&f=JPEG?w=693&h=417',
|
||||
warningName: '区域入侵',
|
||||
site: 'xxx地区西门',
|
||||
warningTime: '2023-12-12 12:32:45',
|
||||
state: 0
|
||||
},
|
||||
{
|
||||
indexCode: '003',
|
||||
snapImgUrl: 'https://img1.baidu.com/it/u=1579566612,4009913306&fm=253&fmt=auto&app=138&f=JPEG?w=693&h=417',
|
||||
warningName: '区域入侵',
|
||||
site: 'xxx地区西门',
|
||||
warningTime: '2023-12-12 12:32:45',
|
||||
state: 1
|
||||
},
|
||||
{
|
||||
indexCode: '004',
|
||||
snapImgUrl: 'https://img1.baidu.com/it/u=1579566612,4009913306&fm=253&fmt=auto&app=138&f=JPEG?w=693&h=417',
|
||||
warningName: '区域入侵',
|
||||
site: 'xxx地区西门',
|
||||
warningTime: '2023-12-12 12:32:45',
|
||||
state: 1
|
||||
}
|
||||
]
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
defaultOption() {
|
||||
return {
|
||||
step: 0.3, // 数值越大速度滚动越快
|
||||
limitMoveNum: 4, // 开始无缝滚动的数据量 this.dataList.length
|
||||
hoverStop: true, // 是否开启鼠标悬停stop
|
||||
direction: 1, // 0向下 1向上 2向左 3向右
|
||||
openWatch: true, // 开启数据实时监控刷新dom
|
||||
singleHeight: 0, // 单步运动停止的高度(默认值0是无缝不停止的滚动) direction => 0/1
|
||||
singleWidth: 0, // 单步运动停止的宽度(默认值0是无缝不停止的滚动) direction => 2/3
|
||||
waitTime: 1000 // 单步运动停止的时间(默认值1000ms)
|
||||
}
|
||||
},
|
||||
},
|
||||
methods: {}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped lang="less">
|
||||
@import "assets/styles/mixin";
|
||||
|
||||
.latest-warning {
|
||||
height: 100%;
|
||||
width: 100%;
|
||||
|
||||
.warning-data-list {
|
||||
height: 100%;
|
||||
padding-top: 20px;
|
||||
|
||||
.seamless-scroll {
|
||||
height: 100%;
|
||||
overflow: hidden;
|
||||
|
||||
.event-item {
|
||||
margin-top: 20px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
</style>
|
||||
|
|
@ -0,0 +1,62 @@
|
|||
<!--二级标题-->
|
||||
<template>
|
||||
<div class="secondary-title">
|
||||
<div class="_title">{{ title }}</div>
|
||||
<div class="_right">
|
||||
<slot></slot>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
name: "PeakSecondaryTitle",
|
||||
props: {
|
||||
longBg: {
|
||||
type: Boolean,
|
||||
default: false
|
||||
},
|
||||
title: {
|
||||
type: String,
|
||||
default: ''
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped lang="less">
|
||||
@import "assets/styles/mixin";
|
||||
|
||||
.secondary-title {
|
||||
width: 100%;
|
||||
height: 41px;
|
||||
.bg("~/assets/peakCoalMonitoring/common/title-bg.png");
|
||||
.clear-fix;
|
||||
|
||||
._title {
|
||||
height: 100%;
|
||||
line-height: 26px;
|
||||
padding-left: 30px;
|
||||
float: left;
|
||||
font-family: AlimamaShuHeiTi-Bold;
|
||||
font-size: 18px;
|
||||
color: #D8F0FF;
|
||||
letter-spacing: 3.04px;
|
||||
text-shadow: 0 0 25px rgba(0, 145, 255, 0.50);
|
||||
font-weight: 700;
|
||||
}
|
||||
|
||||
._right {
|
||||
float: right;
|
||||
height: 100%;
|
||||
}
|
||||
}
|
||||
|
||||
/*
|
||||
.longBg {
|
||||
width: 100%;
|
||||
height: 84px;
|
||||
background: url("assets/peakCoalImages/common/long-seconfary-title-bg.png") no-repeat;
|
||||
background-size: 100% 100%;
|
||||
}*/
|
||||
</style>
|
||||
|
|
@ -0,0 +1,72 @@
|
|||
<!--二级标题-->
|
||||
<template>
|
||||
<div class="secondary-title">
|
||||
<div class="_icon"></div>
|
||||
<div class="_title">{{ title }}</div>
|
||||
<div class="_right">
|
||||
<slot></slot>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
name: "PeakThirdLevelLabel",
|
||||
props: {
|
||||
longBg: {
|
||||
type: Boolean,
|
||||
default: false
|
||||
},
|
||||
title: {
|
||||
type: String,
|
||||
default: ''
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped lang="less">
|
||||
@import "assets/styles/mixin";
|
||||
|
||||
.secondary-title {
|
||||
width: 100%;
|
||||
height: 16px;
|
||||
.clear-fix;
|
||||
|
||||
._icon {
|
||||
width: 10px;
|
||||
height: 16px;
|
||||
.bg("~/assets/peakCoalMonitoring/right/charts-title-icon.png");
|
||||
float: left;
|
||||
position: relative;
|
||||
top: 50%;
|
||||
transform: translateY(-50%);
|
||||
}
|
||||
|
||||
._title {
|
||||
height: 100%;
|
||||
line-height: 16px;
|
||||
padding-left: 20px;
|
||||
float: left;
|
||||
font-family: PingFangSC-Medium;
|
||||
font-size: 16px;
|
||||
color: #D8F0FF;
|
||||
letter-spacing: 0;
|
||||
text-shadow: 0 0 11px #0091FF;
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
._right {
|
||||
float: right;
|
||||
height: 100%;
|
||||
}
|
||||
}
|
||||
|
||||
/*
|
||||
.longBg {
|
||||
width: 100%;
|
||||
height: 84px;
|
||||
background: url("assets/peakCoalImages/common/long-seconfary-title-bg.png") no-repeat;
|
||||
background-size: 100% 100%;
|
||||
}*/
|
||||
</style>
|
||||
|
|
@ -0,0 +1,138 @@
|
|||
<!--预警数据卡片-->
|
||||
<template>
|
||||
<div class="warning-data-card">
|
||||
<div class="warning-state">
|
||||
{{ warningStateValue }}
|
||||
</div>
|
||||
<div class="snap-img">
|
||||
<img :src="dataItem.snapImgUrl" v-if="dataItem.snapImgUrl">
|
||||
<img :src="noData" v-else>
|
||||
</div>
|
||||
<div class="warning-data-info">
|
||||
<div class="warning-name" :title="dataItem.warningName">{{ dataItem.warningName }}</div>
|
||||
<div class="warning-site-time">
|
||||
<div class="site-icon"></div>
|
||||
<div class="_value" :title="dataItem.site">{{ dataItem.site }}</div>
|
||||
</div>
|
||||
<div class="warning-site-time">
|
||||
<div class="warning-time-icon"></div>
|
||||
<div class="_value" :title="dataItem.warningTime">{{ dataItem.warningTime }}</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import noData from 'assets/peakCoalImages/common/no-data.png'
|
||||
|
||||
export default {
|
||||
name: "PeakWarningInfoItem",
|
||||
props: {
|
||||
dataItem: {
|
||||
type: Object,
|
||||
default: () => {
|
||||
}
|
||||
}
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
noData
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
warningStateValue() {
|
||||
if (this.dataItem.state === 1) {
|
||||
return '代研判'
|
||||
} else if (this.dataItem.state === 0) {
|
||||
return '待审批'
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped lang="less">
|
||||
@import "assets/styles/mixin";
|
||||
|
||||
.warning-data-card {
|
||||
height: 78px;
|
||||
width: 415px;
|
||||
.bg("~/assets/peakCoalImages/right/warning-card-bg.png");
|
||||
padding-left: 10px;
|
||||
position: relative;
|
||||
.flex-row;
|
||||
|
||||
.snap-img {
|
||||
width: 93px;
|
||||
height: 66px;
|
||||
|
||||
img {
|
||||
height: 100%;
|
||||
width: 100%;
|
||||
}
|
||||
}
|
||||
|
||||
.warning-data-info {
|
||||
height:100%;
|
||||
width: 0;
|
||||
flex: 1;
|
||||
padding-left: 20px;
|
||||
.flex-column;
|
||||
justify-content: space-around;
|
||||
|
||||
.warning-name {
|
||||
width: 100%;
|
||||
font-family: MicrosoftYaHei-Bold;
|
||||
font-size: 14px;
|
||||
color: #F6B545;
|
||||
letter-spacing: 0;
|
||||
font-weight: 700;
|
||||
.text-ellipsis;
|
||||
}
|
||||
|
||||
.warning-site-time {
|
||||
width: 100%;
|
||||
.flex-row;
|
||||
|
||||
.site-icon {
|
||||
width: 10px;
|
||||
height: 10px;
|
||||
.bg("~/assets/peakCoalImages/right/warning-site-icon.png");
|
||||
}
|
||||
|
||||
.warning-time-icon {
|
||||
width: 10px;
|
||||
height: 10px;
|
||||
.bg("~/assets/peakCoalImages/right/warning-time-icon.png");
|
||||
|
||||
}
|
||||
|
||||
._value {
|
||||
width: calc(100% - 26px);
|
||||
padding-left: 10px;
|
||||
font-family: MicrosoftYaHei;
|
||||
font-size: 14px;
|
||||
color: rgba(202, 244, 255, 0.9);
|
||||
font-weight: 400;
|
||||
.text-ellipsis;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.warning-state {
|
||||
width: 60px;
|
||||
height: 20px;
|
||||
position: absolute;
|
||||
right: 0px;
|
||||
top: 10px;
|
||||
font-family: PingFangSC-Semibold;
|
||||
font-size: 12px;
|
||||
color: #B8D3F1;
|
||||
letter-spacing: 0;
|
||||
text-align: center;
|
||||
line-height: 20px;
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
}
|
||||
</style>
|
||||
|
|
@ -0,0 +1,115 @@
|
|||
<!--智能预警统计-->
|
||||
<template>
|
||||
<div class="warning-statistics">
|
||||
<div class="warning-total-info">
|
||||
<div class="warning-data">
|
||||
<div class="warning-icon"></div>
|
||||
<div class="_title">报警总数</div>
|
||||
<div class="_value">
|
||||
<Number :num="286"/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<peak-third-level-label :title="warningTypeTitle"/>
|
||||
|
||||
<div class="warning-type-pie">
|
||||
<div class="_bg"></div>
|
||||
<peak-warning-type-chart :data-source="warningTypeDataSource"/>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import WarningTypeChart from "@/components/charts/WarningTypeChart";
|
||||
import PeakWarningTypeChart from "@/components/charts/PeakWarningTypeChart";
|
||||
import PeakThirdLevelLabel from "@/components/peak-coal-monitoring/PeakThirdLevelLabel";
|
||||
|
||||
export default {
|
||||
name: "PeakWarningStatistics",
|
||||
components: {PeakThirdLevelLabel, PeakWarningTypeChart, WarningTypeChart},
|
||||
data() {
|
||||
return {
|
||||
warningTypeTitle: '报警类型分布',
|
||||
warningTypeDataSource: [
|
||||
{
|
||||
name: '断电掉线',
|
||||
value: 214,
|
||||
rate: '38%'
|
||||
},
|
||||
{
|
||||
name: '区域入侵',
|
||||
value: 342,
|
||||
rate: '32%'
|
||||
},
|
||||
{
|
||||
name: '污染超标',
|
||||
value: 12,
|
||||
rate: '30%'
|
||||
}
|
||||
]
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped lang="less">
|
||||
@import "assets/styles/mixin";
|
||||
|
||||
.warning-statistics {
|
||||
height: 100%;
|
||||
width: 100%;
|
||||
.flex-column;
|
||||
|
||||
.warning-total-info {
|
||||
height: 60px;
|
||||
.flex-row;
|
||||
margin-bottom: 20px;
|
||||
.warning-data {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
background: rgba(1, 120, 198, 0.30);
|
||||
.flex-row;
|
||||
justify-content: space-around;
|
||||
|
||||
.warning-icon {
|
||||
width: 60px;
|
||||
height: 40px;
|
||||
.bg("~/assets/peakCoalImages/right/warning-icon.png");
|
||||
}
|
||||
|
||||
._title {
|
||||
font-family: MicrosoftYaHei;
|
||||
font-size: 14px;
|
||||
color: #6AC4FF;
|
||||
letter-spacing: 2.26px;
|
||||
font-weight: 400;
|
||||
}
|
||||
|
||||
._value {
|
||||
font-family: YouSheBiaoTiHei;
|
||||
font-size:20px;
|
||||
color: #FFFFFF;
|
||||
letter-spacing: 5.64px;
|
||||
font-weight: 400;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.warning-type-pie {
|
||||
flex: 1;
|
||||
height: 0;
|
||||
position: relative;
|
||||
|
||||
._bg {
|
||||
position: absolute;
|
||||
left: 26px;
|
||||
top: 24px;
|
||||
width: 120px;
|
||||
height: 120px;
|
||||
background: url("~/assets/peakCoalImages/right/warning-type-pie-bg.png") no-repeat;
|
||||
background-size: 100% 100%;
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
|
@ -0,0 +1,26 @@
|
|||
<template>
|
||||
<div class="pollution-information">
|
||||
<peak-secondary-title :title="title"/>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import PeakSecondaryTitle from "@/components/peak-coal-monitoring/PeakSecondaryTitle";
|
||||
export default {
|
||||
name: "PollutionInformation",
|
||||
components: {PeakSecondaryTitle},
|
||||
data(){
|
||||
return{
|
||||
title: '污染物信息总览'
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped lang="less">
|
||||
@import "assets/styles/mixin";
|
||||
.pollution-information{
|
||||
height: 100%;
|
||||
width: 100%;
|
||||
}
|
||||
</style>
|
||||
|
|
@ -1,13 +1,55 @@
|
|||
<!--峰煤监控系统-->
|
||||
<template>
|
||||
<div class="peak-coal-monitoring">
|
||||
<div class="header-content"></div>
|
||||
|
||||
<div class="center-panel">
|
||||
|
||||
</div>
|
||||
|
||||
<div class="header-panel">
|
||||
<div class="header-content"></div>
|
||||
</div>
|
||||
|
||||
|
||||
<div class="left-panel">
|
||||
<div class="atmospheric-module-module">
|
||||
<atmospheric-module />
|
||||
</div>
|
||||
<div class="pollution-information-module">
|
||||
<pollution-information/>
|
||||
</div>
|
||||
<div class="monitor-data-module">
|
||||
<monitor-data/>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="right-panel">
|
||||
<div class="energy-profile-module">
|
||||
<energy-profile/>
|
||||
</div>
|
||||
<div class="device-overview-module">
|
||||
<device-overview/>
|
||||
</div>
|
||||
<div class="alarm-overview-module">
|
||||
<alarm-overview/>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
<div class="footer-panel"></div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import AtmosphericModule from "@/components/peak-coal-monitoring/AtmosphericModule";
|
||||
import PollutionInformation from "@/components/peak-coal-monitoring/PollutionInformation";
|
||||
import MonitorData from "@/components/peak-coal-monitoring/MonitorData";
|
||||
import EnergyProfile from "@/components/peak-coal-monitoring/EnergyProfile";
|
||||
import DeviceOverview from "@/components/peak-coal-monitoring/DeviceOverview";
|
||||
import AlarmOverview from "@/components/peak-coal-monitoring/AlarmOverview";
|
||||
export default {
|
||||
name: "PeakCoalMonitoring"
|
||||
name: "PeakCoalMonitoring",
|
||||
components: {AlarmOverview, DeviceOverview, EnergyProfile, MonitorData, PollutionInformation, AtmosphericModule}
|
||||
}
|
||||
</script>
|
||||
|
||||
|
|
@ -16,6 +58,7 @@ body, html, #__nuxt, #__layout {
|
|||
width: 100%;
|
||||
height: 100%;
|
||||
overflow: hidden;
|
||||
background: #09151F;
|
||||
}
|
||||
|
||||
.list-enter-active, .list-leave-active {
|
||||
|
|
@ -37,14 +80,90 @@ body, html, #__nuxt, #__layout {
|
|||
width: 100%;
|
||||
height: 100%;
|
||||
position: relative;
|
||||
.header-content{
|
||||
|
||||
.header-panel {
|
||||
position: absolute;
|
||||
left: 50%;
|
||||
transform: translateX(-50%);
|
||||
width: 100%;
|
||||
height: 80px;
|
||||
background: url("~/assets/peakCoalMonitoring/header/header-bg.png") no-repeat center center;
|
||||
background-size: 1000px 80px;
|
||||
height: 160px;
|
||||
display: flex;
|
||||
flex-flow: row;
|
||||
justify-content: center;
|
||||
background: url("~/assets/peakCoalMonitoring/header/header-shadow.png") no-repeat;
|
||||
background-size: 100% 100%;
|
||||
|
||||
.header-content {
|
||||
height: 360px;
|
||||
width: 100%;
|
||||
background: url("~/assets/peakCoalMonitoring/header/header-bg.png") no-repeat;
|
||||
background-size: 100% 100%;
|
||||
position: absolute;
|
||||
top: -123px;
|
||||
}
|
||||
}
|
||||
|
||||
.left-panel {
|
||||
width: 430px;
|
||||
position: absolute;
|
||||
left: 20px;
|
||||
height: 960px;
|
||||
top: 50%;
|
||||
transform: translateY(-50%);
|
||||
.flex-column;
|
||||
|
||||
.atmospheric-module-module{
|
||||
height: 336px;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.pollution-information-module{
|
||||
height: 260px;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.monitor-data-module{
|
||||
flex: 1;
|
||||
height: 0;
|
||||
width: 100%;
|
||||
}
|
||||
}
|
||||
|
||||
.right-panel {
|
||||
width: 430px;
|
||||
position: absolute;
|
||||
right: 20px;
|
||||
height: 960px;
|
||||
top: 50%;
|
||||
transform: translateY(-50%);
|
||||
.flex-column;
|
||||
.energy-profile-module{
|
||||
height: 336px;
|
||||
width: 100%;
|
||||
}
|
||||
.device-overview-module{
|
||||
height: 260px;
|
||||
width: 100%;
|
||||
}
|
||||
.alarm-overview-module{
|
||||
flex: 1;
|
||||
height: 0;
|
||||
width: 100%;
|
||||
}
|
||||
}
|
||||
|
||||
.center-panel{
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
position: absolute;
|
||||
left: 0;
|
||||
}
|
||||
|
||||
.footer-panel{
|
||||
width: 100%;
|
||||
height: 50px;
|
||||
background: url("~/assets/peakCoalMonitoring/footer/footer-bg.png") no-repeat;
|
||||
background-size: 100% 100%;
|
||||
position: absolute;
|
||||
bottom: -6px;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
|
|
|||
Loading…
Reference in New Issue