1、新增1920*1080看板布局
This commit is contained in:
lankuixing
parent
26377853ab
commit
8a26b4a7b0
|
|
@ -17,3 +17,8 @@
|
|||
font-family: MicrosoftYaHei-Bold;
|
||||
src: url("./Microsoft-YaHei-Bold.ttf") format("truetype");
|
||||
}
|
||||
|
||||
@font-face {
|
||||
font-family: 思源黑体;
|
||||
src: url("./思源黑体1 SourceHanSansCN-ExtraLight.otf") format("truetype");
|
||||
}
|
||||
|
|
|
|||
Binary file not shown.
|
After Width: | Height: | Size: 4.7 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 2.4 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 2.7 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 2.5 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 3.0 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 3.0 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 3.0 KiB |
|
|
@ -0,0 +1,166 @@
|
|||
<!--空气质量变化趋势-->
|
||||
<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: 'AirRateCharts',
|
||||
props: {
|
||||
rateNum: {
|
||||
type: Number,
|
||||
default: 0
|
||||
},
|
||||
color: {
|
||||
type: Array,
|
||||
default: () => [
|
||||
'#FDBD00',
|
||||
'#00D5FF',
|
||||
'#1978E5'
|
||||
]
|
||||
}
|
||||
},
|
||||
data() {
|
||||
return {}
|
||||
},
|
||||
watch: {
|
||||
rateNum: {
|
||||
deep: true,
|
||||
immediate: true,
|
||||
handler(value) {
|
||||
if (value) {
|
||||
this.$nextTick(() => {
|
||||
this.init()
|
||||
})
|
||||
}
|
||||
}
|
||||
}
|
||||
},
|
||||
mounted() {
|
||||
},
|
||||
|
||||
methods: {
|
||||
init() {
|
||||
let myCharts = echarts.init(this.$refs.charts)
|
||||
let barCharts = this.$refs.charts
|
||||
let sexdata = [{
|
||||
value: this.rateNum,
|
||||
symbol: 'rect',
|
||||
symbolClip: true,
|
||||
symbolRepeat: true,
|
||||
symbolSize: [
|
||||
'40%', // 50% of the width of reference bar.
|
||||
"80%" // 100% of the height of reference bar.
|
||||
]
|
||||
}]
|
||||
let option = {
|
||||
legend: {},
|
||||
//在坐标系内绘制
|
||||
grid: [{
|
||||
left: 10,
|
||||
bottom: 10,
|
||||
top: 10,
|
||||
right: 60
|
||||
}],
|
||||
//x 轴
|
||||
xAxis: {
|
||||
max: 100,
|
||||
splitLine: {
|
||||
show: false
|
||||
},
|
||||
axisLabel: {
|
||||
show: false
|
||||
},
|
||||
axisTick: {
|
||||
show: false
|
||||
},
|
||||
axisLine: {
|
||||
show: false
|
||||
},
|
||||
},
|
||||
//y 轴
|
||||
yAxis: {
|
||||
data: ['a'],
|
||||
axisLine: {
|
||||
show: false
|
||||
},
|
||||
axisTick: {
|
||||
show: false
|
||||
},
|
||||
splitLine: {
|
||||
show: false
|
||||
},
|
||||
axisLabel: {
|
||||
show: false
|
||||
}
|
||||
},
|
||||
//展示层
|
||||
series: [
|
||||
//目标数据
|
||||
{
|
||||
type: 'pictorialBar',
|
||||
symbolBoundingData: 100,
|
||||
itemStyle: {
|
||||
normal: {
|
||||
color: 'rgba(76,184,255,1)'
|
||||
}
|
||||
},
|
||||
z: 20,
|
||||
data: sexdata
|
||||
},
|
||||
//背景数据
|
||||
{
|
||||
type: 'pictorialBar',
|
||||
symbolBoundingData: 100,
|
||||
z: 15,
|
||||
itemStyle: {
|
||||
normal: {
|
||||
color: '#1B2940'
|
||||
}
|
||||
},
|
||||
label: {
|
||||
show: true,
|
||||
position: 'right',
|
||||
distance: 16,
|
||||
color: '#fff',
|
||||
fontSize: 16,
|
||||
formatter(params) {
|
||||
return sexdata[0].value + " % "
|
||||
}
|
||||
},
|
||||
data: [{
|
||||
symbol: 'rect',
|
||||
value: 100,
|
||||
symbolClip: true,
|
||||
symbolRepeat: true,
|
||||
symbolSize: [
|
||||
'40%', // 50% of the width of reference bar.
|
||||
"80%" // 100% of the height of reference bar.
|
||||
]
|
||||
}]
|
||||
}
|
||||
]
|
||||
};
|
||||
|
||||
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,206 @@
|
|||
<!--空气质量变化趋势-->
|
||||
<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: 'ChangesPollutantsCharts',
|
||||
props: {
|
||||
dataSource: {
|
||||
type: Array,
|
||||
default: () => []
|
||||
},
|
||||
color: {
|
||||
type: Array,
|
||||
default: () => [
|
||||
'#FDBD00',
|
||||
'#00D5FF',
|
||||
'#1978E5'
|
||||
]
|
||||
}
|
||||
},
|
||||
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 color = this.color;
|
||||
let areaStartColor = ['rgba(20,153,255,0.1)', 'rgba(20,224,214,0.1)', 'rgba(224,214,101,0.1)']
|
||||
let areaEndColor = ['rgba(20,153,255,1)', 'rgba(20,224,214,1)', 'rgba(224,214,101,1)']
|
||||
let chartData = this.dataSource;
|
||||
//将数据根据attr进行分组
|
||||
let dataSourceByAttrObj = lodash.groupBy(chartData, 'attr')
|
||||
//将不同对象的值转换成不同的数组
|
||||
let dataSource = Object.values(dataSourceByAttrObj)
|
||||
//过滤x轴名称
|
||||
let xAxisName = []
|
||||
let nameLengthMaxIndex = 0
|
||||
let nameLength = 0
|
||||
//找出name最多的数据
|
||||
for (const index in dataSource) {
|
||||
let xAxisNameList = dataSource[index].map(item => item.name) || []
|
||||
if (xAxisNameList.length > nameLength) {
|
||||
nameLength = xAxisNameList.length
|
||||
nameLengthMaxIndex = index
|
||||
}
|
||||
}
|
||||
//将挑选的name作为x轴数据
|
||||
xAxisName = dataSource[nameLengthMaxIndex].map(item => item.name) || []
|
||||
//获取y周值
|
||||
let attrNames = Object.keys(dataSourceByAttrObj)
|
||||
let seriesList = []
|
||||
for (const index in dataSource) {
|
||||
let yAxisDataSource = dataSource[index].map(item => item.value)
|
||||
let series = {
|
||||
name: attrNames[index],
|
||||
type: 'pictorialBar',
|
||||
barGap: '-20%',
|
||||
symbol: 'path://M18,3 L46,3 78,68 18,68 46,3 z',
|
||||
|
||||
itemStyle: {
|
||||
color: {
|
||||
type: 'linear',
|
||||
x: 0,
|
||||
y: 0,
|
||||
x2: 0,
|
||||
y2: 1,
|
||||
colorStops: [
|
||||
{
|
||||
offset: 0,
|
||||
color: areaEndColor[index],
|
||||
},
|
||||
{
|
||||
offset: 1,
|
||||
color: areaStartColor[index],
|
||||
},
|
||||
],
|
||||
global: false, // 缺省为 false
|
||||
},
|
||||
},
|
||||
emphasis: {
|
||||
itemStyle: {
|
||||
opacity: 1,
|
||||
},
|
||||
},
|
||||
data: yAxisDataSource,
|
||||
}
|
||||
seriesList.push(series)
|
||||
}
|
||||
let option = {
|
||||
color: color,
|
||||
legend: {
|
||||
top: 20,
|
||||
left: '30%',
|
||||
itemWidth: 11,
|
||||
itemHeight: 11,
|
||||
icon: 'circle',
|
||||
textStyle: {
|
||||
color: 'rgba(106,196,255,0.60)',
|
||||
fontSize: 12,
|
||||
padding: [0, 0, 0, 10]
|
||||
}
|
||||
},
|
||||
tooltip: {
|
||||
trigger: 'axis',
|
||||
},
|
||||
grid: {
|
||||
top: 50,
|
||||
bottom: 10,
|
||||
left: 10,
|
||||
right: 10,
|
||||
containLabel: true,
|
||||
},
|
||||
xAxis: [
|
||||
{
|
||||
type: 'category',
|
||||
boundaryGap: true,
|
||||
axisLabel: {
|
||||
fontSize: 12,
|
||||
color: 'rgba(106,196,255,0.60)'
|
||||
},
|
||||
axisLine: {
|
||||
show: true,
|
||||
lineStyle: {
|
||||
color: 'rgba(176,215,255,0.40)',
|
||||
},
|
||||
},
|
||||
axisTick: {
|
||||
show: false
|
||||
},
|
||||
data: xAxisName,
|
||||
},
|
||||
],
|
||||
yAxis: [
|
||||
{
|
||||
type: 'value',
|
||||
splitNumber: 5,
|
||||
axisLabel: {
|
||||
fontSize: 12,
|
||||
color: 'rgba(106,196,255,0.60)'
|
||||
},
|
||||
nameTextStyle: {
|
||||
color: 'rgba(106,196,255,0.60)',
|
||||
fontSize: 12,
|
||||
lineHeight: 20,
|
||||
},
|
||||
// 分割线
|
||||
splitLine: {
|
||||
lineStyle: {
|
||||
color: 'rgba(176,215,255,0.40)',
|
||||
type: 'dashed'
|
||||
},
|
||||
},
|
||||
axisLine: {
|
||||
show: false,
|
||||
},
|
||||
axisTick: {
|
||||
show: false,
|
||||
},
|
||||
}
|
||||
],
|
||||
series: seriesList,
|
||||
};
|
||||
|
||||
|
||||
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,205 @@
|
|||
<!--空气质量变化趋势-->
|
||||
<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: 'PeakAirQualityTrendCharts',
|
||||
props: {
|
||||
dataSource: {
|
||||
type: Array,
|
||||
default: () => []
|
||||
},
|
||||
color: {
|
||||
type: Array,
|
||||
default: () => [
|
||||
'rgba(28,162,251,1)',
|
||||
'rgba(17,208,242,1)',
|
||||
'#1978E5'
|
||||
]
|
||||
}
|
||||
},
|
||||
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 color = this.color;
|
||||
let areaStartColor = ['rgba(28,162,251,0.5)', 'rgba(17,208,242,0.5)',]
|
||||
let areaEndColor = ['rgba(28,162,251,0.1)', 'rgba(17,208,242,0.1)',]
|
||||
let chartData = this.dataSource;
|
||||
//将数据根据attr进行分组
|
||||
let dataSourceByAttrObj = lodash.groupBy(chartData, 'attr')
|
||||
//将不同对象的值转换成不同的数组
|
||||
let dataSource = Object.values(dataSourceByAttrObj)
|
||||
//过滤x轴名称
|
||||
let xAxisName = []
|
||||
let nameLengthMaxIndex = 0
|
||||
let nameLength = 0
|
||||
//找出name最多的数据
|
||||
for (const index in dataSource) {
|
||||
let xAxisNameList = dataSource[index].map(item => item.name) || []
|
||||
if (xAxisNameList.length > nameLength) {
|
||||
nameLength = xAxisNameList.length
|
||||
nameLengthMaxIndex = index
|
||||
}
|
||||
}
|
||||
//将挑选的name作为x轴数据
|
||||
xAxisName = dataSource[nameLengthMaxIndex].map(item => item.name) || []
|
||||
//获取y周值
|
||||
let attrNames = Object.keys(dataSourceByAttrObj)
|
||||
let seriesList = []
|
||||
for (const index in dataSource) {
|
||||
let yAxisDataSource = dataSource[index].map(item => item.value)
|
||||
let series = {
|
||||
name: attrNames[index],
|
||||
type: 'line',
|
||||
smooth: false,
|
||||
zlevel: 3,
|
||||
symbol: 'none', //数据交叉点样式
|
||||
data: yAxisDataSource,
|
||||
yAxisIndex: 0, // 通过这个判断左右
|
||||
lineStyle: {
|
||||
width: 3,
|
||||
},
|
||||
areaStyle: {
|
||||
color: {
|
||||
x: 0,
|
||||
y: 0,
|
||||
x2: 0,
|
||||
y2: 1,
|
||||
colorStops: [
|
||||
{
|
||||
offset: 0,
|
||||
color: areaStartColor[index] // 0% 处的颜色
|
||||
},
|
||||
{
|
||||
offset: 1,
|
||||
color: areaEndColor[index] // 100% 处的颜色
|
||||
}
|
||||
],
|
||||
global: false // 缺省为 false
|
||||
}
|
||||
},
|
||||
}
|
||||
seriesList.push(series)
|
||||
}
|
||||
let option = {
|
||||
color: color,
|
||||
legend: {
|
||||
top: 20,
|
||||
left: '30%',
|
||||
itemWidth: 11,
|
||||
itemHeight: 11,
|
||||
icon: 'circle',
|
||||
textStyle: {
|
||||
color: 'rgba(106,196,255,0.60)',
|
||||
fontSize: 12,
|
||||
padding: [0, 0, 0, 10]
|
||||
}
|
||||
},
|
||||
tooltip: {
|
||||
trigger: 'axis',
|
||||
},
|
||||
grid: {
|
||||
top: 50,
|
||||
bottom: 10,
|
||||
left: 10,
|
||||
right: 10,
|
||||
containLabel: true,
|
||||
},
|
||||
xAxis: [
|
||||
{
|
||||
type: 'category',
|
||||
boundaryGap: true,
|
||||
axisLabel: {
|
||||
fontSize: 12,
|
||||
color: 'rgba(106,196,255,0.60)'
|
||||
},
|
||||
axisLine: {
|
||||
show: true,
|
||||
lineStyle: {
|
||||
color: 'rgba(176,215,255,0.40)',
|
||||
},
|
||||
},
|
||||
axisTick: {
|
||||
show: false
|
||||
},
|
||||
data: xAxisName,
|
||||
},
|
||||
],
|
||||
yAxis: [
|
||||
{
|
||||
type: 'value',
|
||||
splitNumber: 5,
|
||||
axisLabel: {
|
||||
fontSize: 12,
|
||||
color: 'rgba(106,196,255,0.60)'
|
||||
},
|
||||
nameTextStyle: {
|
||||
color: 'rgba(106,196,255,0.60)',
|
||||
fontSize: 12,
|
||||
lineHeight: 20,
|
||||
},
|
||||
// 分割线
|
||||
splitLine: {
|
||||
show: false,
|
||||
lineStyle: {
|
||||
color: 'rgba(176,215,255,0.40)',
|
||||
type: 'dashed'
|
||||
},
|
||||
},
|
||||
axisLine: {
|
||||
show: false,
|
||||
},
|
||||
axisTick: {
|
||||
show: false,
|
||||
},
|
||||
}
|
||||
],
|
||||
series: seriesList,
|
||||
};
|
||||
|
||||
|
||||
myCharts.setOption(option)
|
||||
let listener = function () {
|
||||
myCharts.resize()
|
||||
}
|
||||
EleResize.on(barCharts, listener)
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped lang="less">
|
||||
#charts {
|
||||
height: 100%;
|
||||
width: 100%;
|
||||
}
|
||||
</style>
|
||||
|
|
@ -1,6 +1,15 @@
|
|||
<template>
|
||||
<div class="alarm-overview">
|
||||
<peak-secondary-title :title="title"/>
|
||||
<peak-secondary-title :title="title">
|
||||
<template>
|
||||
<div class="right-tab">
|
||||
<div class="tab-type" v-for="item of tabDataList" :class="activeDateTab === item.value? 'active-tab':''"
|
||||
@click="tabDateChange(item.value)">
|
||||
{{ item.name }}
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
</peak-secondary-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 }}
|
||||
|
|
@ -38,13 +47,35 @@ export default {
|
|||
value: 2
|
||||
}
|
||||
],
|
||||
activeTab: 1
|
||||
activeTab: 1,
|
||||
tabDataList: [
|
||||
{
|
||||
name: '全部',
|
||||
value: '0'
|
||||
},
|
||||
{
|
||||
name: '待审批',
|
||||
value: '1'
|
||||
},
|
||||
{
|
||||
name: '带研判',
|
||||
value: '2'
|
||||
},
|
||||
{
|
||||
name: '已归档',
|
||||
value: '3'
|
||||
}
|
||||
],
|
||||
activeDateTab:'0',
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
tabChange(val) {
|
||||
this.activeTab = val
|
||||
}
|
||||
},
|
||||
tabDateChange(val) {
|
||||
this.activeDateTab = val
|
||||
},
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
|
@ -95,5 +126,35 @@ export default {
|
|||
height: 100%;
|
||||
}
|
||||
}
|
||||
|
||||
.right-tab {
|
||||
height: 100%;
|
||||
.flex-row;
|
||||
justify-content: space-between;
|
||||
width: 249px;
|
||||
|
||||
.tab-type {
|
||||
margin-bottom: 15px;
|
||||
width: 57px;
|
||||
height: 30px;
|
||||
.bg("~/assets/peakCoalImages/left/pollutant-type-default-bg.png");
|
||||
font-family: MicrosoftYaHei;
|
||||
font-size: 14px;
|
||||
color: rgba(216, 240, 255, 0.50);
|
||||
letter-spacing: 0;
|
||||
text-align: center;
|
||||
line-height: 30px;
|
||||
text-shadow: 0 0 11px #0091FF;
|
||||
font-weight: 400;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.active-tab {
|
||||
.bg("~/assets/peakCoalImages/left/pollutant-type-active-bg.png");
|
||||
color: #D8F0FF;
|
||||
text-shadow: 0 0 33px #0091FF;
|
||||
font-weight: 400;
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
|
|
|||
|
|
@ -2,18 +2,27 @@
|
|||
<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 class="tab-item" v-for="item of tabList" :class="item.value === activeTab?'active-tab':''"
|
||||
@click="tabChange(item.value)">{{ item.label }}
|
||||
</div>
|
||||
</div>
|
||||
<div class="charts-info">
|
||||
<peak-air-quality v-if="activeTab === 1"/>
|
||||
<changes-pollutants v-if="activeTab === 2"/>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import PeakSecondaryTitle from "@/components/peak-coal-monitoring/PeakSecondaryTitle";
|
||||
import ChangesPollutants from "@/components/peak-coal-monitoring/ChangesPollutants";
|
||||
import PeakAirQuality from "@/components/peak-coal-monitoring/PeakAirQuality";
|
||||
|
||||
export default {
|
||||
name: "AtmosphericModule",
|
||||
components: {PeakSecondaryTitle},
|
||||
data(){
|
||||
return{
|
||||
components: {PeakAirQuality, ChangesPollutants, PeakSecondaryTitle},
|
||||
data() {
|
||||
return {
|
||||
title: '大气质量信息总览',
|
||||
tabList: [
|
||||
{
|
||||
|
|
@ -29,7 +38,7 @@ export default {
|
|||
}
|
||||
},
|
||||
methods: {
|
||||
tabChange(val){
|
||||
tabChange(val) {
|
||||
this.activeTab = val
|
||||
}
|
||||
}
|
||||
|
|
@ -38,16 +47,19 @@ export default {
|
|||
|
||||
<style scoped lang="less">
|
||||
@import "../../assets/styles/mixin";
|
||||
.atmospheric-module{
|
||||
|
||||
.atmospheric-module {
|
||||
height: 100%;
|
||||
width: 100%;
|
||||
.flex-column;
|
||||
._tab{
|
||||
|
||||
._tab {
|
||||
margin-top: 10px;
|
||||
width: 100%;
|
||||
height: 30px;
|
||||
.flex-row;
|
||||
.tab-item{
|
||||
|
||||
.tab-item {
|
||||
width: 50%;
|
||||
height: 100%;
|
||||
font-family: MicrosoftYaHei-Bold;
|
||||
|
|
@ -55,14 +67,20 @@ export default {
|
|||
color: #FFFFFF;
|
||||
letter-spacing: 0;
|
||||
text-align: center;
|
||||
text-shadow: 0 2px 2px rgba(0,0,0,0.50);
|
||||
text-shadow: 0 2px 2px rgba(0, 0, 0, 0.50);
|
||||
font-weight: 700;
|
||||
cursor: pointer;
|
||||
}
|
||||
.active-tab{
|
||||
|
||||
.active-tab {
|
||||
background: url("~/assets/peakCoalMonitoring/common/tab-active-bg.png") no-repeat;
|
||||
background-size: 100% 100%;
|
||||
}
|
||||
}
|
||||
|
||||
.charts-info {
|
||||
flex: 1;
|
||||
height: 0;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
|
|
|||
|
|
@ -0,0 +1,134 @@
|
|||
<!--污染物变化趋势-->
|
||||
<template>
|
||||
<div class="changes-pollutants">
|
||||
<changes-pollutants-charts :data-source="dataSource"/>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import ChangesPollutantsCharts from "@/components/charts/ChangesPollutantsCharts";
|
||||
export default {
|
||||
name: "ChangesPollutants",
|
||||
components: {ChangesPollutantsCharts},
|
||||
data(){
|
||||
return{
|
||||
dataSource: [
|
||||
{
|
||||
name: '星期一',
|
||||
value: 3,
|
||||
attr: '一氧化碳'
|
||||
},
|
||||
{
|
||||
name: '星期二',
|
||||
value: 4,
|
||||
attr: '一氧化碳'
|
||||
},
|
||||
{
|
||||
name: '星期三',
|
||||
value: 1,
|
||||
attr: '一氧化碳'
|
||||
},
|
||||
{
|
||||
name: '星期四',
|
||||
value: 4,
|
||||
attr: '一氧化碳'
|
||||
},
|
||||
{
|
||||
name: '星期五',
|
||||
value: 6,
|
||||
attr: '一氧化碳'
|
||||
},
|
||||
{
|
||||
name: '星期六',
|
||||
value: 1,
|
||||
attr: '一氧化碳'
|
||||
},
|
||||
{
|
||||
name: '星期日',
|
||||
value: 8,
|
||||
attr: '一氧化碳'
|
||||
},
|
||||
{
|
||||
name: '星期一',
|
||||
value: 1,
|
||||
attr: 'PM2.5'
|
||||
},
|
||||
{
|
||||
name: '星期二',
|
||||
value: 4,
|
||||
attr: 'PM2.5'
|
||||
},
|
||||
{
|
||||
name: '星期三',
|
||||
value: 7,
|
||||
attr: 'PM2.5'
|
||||
},
|
||||
{
|
||||
name: '星期四',
|
||||
value: 8,
|
||||
attr: 'PM2.5'
|
||||
},
|
||||
{
|
||||
name: '星期五',
|
||||
value: 2,
|
||||
attr: 'PM2.5'
|
||||
},
|
||||
{
|
||||
name: '星期六',
|
||||
value: 7,
|
||||
attr: 'PM2.5'
|
||||
},
|
||||
{
|
||||
name: '星期日',
|
||||
value: 1,
|
||||
attr: 'PM2.5'
|
||||
},
|
||||
{
|
||||
name: '星期一',
|
||||
value: 1,
|
||||
attr: 'PM10'
|
||||
},
|
||||
{
|
||||
name: '星期二',
|
||||
value: 4,
|
||||
attr: 'PM10'
|
||||
},
|
||||
{
|
||||
name: '星期三',
|
||||
value: 7,
|
||||
attr: 'PM10'
|
||||
},
|
||||
{
|
||||
name: '星期四',
|
||||
value: 8,
|
||||
attr: 'PM10'
|
||||
},
|
||||
{
|
||||
name: '星期五',
|
||||
value: 2,
|
||||
attr: 'PM10'
|
||||
},
|
||||
{
|
||||
name: '星期六',
|
||||
value: 7,
|
||||
attr: 'PM10'
|
||||
},
|
||||
{
|
||||
name: '星期日',
|
||||
value: 1,
|
||||
attr: 'PM10'
|
||||
}
|
||||
]
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped lang="less">
|
||||
@import "../../assets/styles/mixin";
|
||||
|
||||
.changes-pollutants {
|
||||
height: 100%;
|
||||
width: 100%;
|
||||
}
|
||||
</style>
|
||||
|
|
@ -1,6 +1,43 @@
|
|||
<template>
|
||||
<div class="device-overview">
|
||||
<peak-secondary-title :title="title" />
|
||||
<div class="device-total">
|
||||
<div class="device-item">
|
||||
<div class="point-icon"></div>
|
||||
<div class="title-value">
|
||||
<div class="_title">监控点</div>
|
||||
<div class="_value">287</div>
|
||||
</div>
|
||||
<div class="title-value">
|
||||
<div class="_title">在线率</div>
|
||||
<div class="_value">98%</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="_line"></div>
|
||||
<div class="device-item">
|
||||
<div class="microsite-icon"></div>
|
||||
<div class="title-value">
|
||||
<div class="_title">微站</div>
|
||||
<div class="_value">287</div>
|
||||
</div>
|
||||
<div class="title-value">
|
||||
<div class="_title">在线率</div>
|
||||
<div class="_value">98%</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="_line"></div>
|
||||
<div class="device-item">
|
||||
<div class="tester-icon"></div>
|
||||
<div class="title-value">
|
||||
<div class="_title">检测仪</div>
|
||||
<div class="_value">287</div>
|
||||
</div>
|
||||
<div class="title-value">
|
||||
<div class="_title">在线率</div>
|
||||
<div class="_value">98%</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
|
|
@ -22,5 +59,59 @@ export default {
|
|||
.device-overview{
|
||||
height: 100%;
|
||||
width: 100%;
|
||||
.flex-column;
|
||||
.device-total{
|
||||
flex: 1;
|
||||
height: 0;
|
||||
.flex-row;
|
||||
justify-content: space-around;
|
||||
.device-item{
|
||||
height: 60%;
|
||||
width: 140px;
|
||||
.flex-column;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
.point-icon{
|
||||
width: 61px;
|
||||
height: 61px;
|
||||
background: url("~/assets/peakCoalMonitoring/right/point-icon.png") no-repeat;
|
||||
}
|
||||
.microsite-icon{
|
||||
width: 61px;
|
||||
height: 61px;
|
||||
background: url("~/assets/peakCoalMonitoring/right/microsite-icon.png") no-repeat;
|
||||
}
|
||||
.tester-icon{
|
||||
width: 61px;
|
||||
height: 61px;
|
||||
background: url("~/assets/peakCoalMonitoring/right/tester-icon.png") no-repeat;
|
||||
}
|
||||
.title-value{
|
||||
.flex-row;
|
||||
._title{
|
||||
font-family: MicrosoftYaHei;
|
||||
font-size: 14px;
|
||||
color: #6AC4FF;
|
||||
letter-spacing: 2.26px;
|
||||
font-weight: 400;
|
||||
}
|
||||
._value {
|
||||
padding-left: 10px;
|
||||
font-family: YouSheBiaoTiHei;
|
||||
font-size: 18px;
|
||||
color: #FFFFFF;
|
||||
letter-spacing: 5.64px;
|
||||
font-weight: 400;
|
||||
text-align: right;
|
||||
.text-ellipsis;
|
||||
}
|
||||
}
|
||||
}
|
||||
._line{
|
||||
width: 1px;
|
||||
height: 160px;
|
||||
background: #1A4157;
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
|
|
|||
|
|
@ -1,6 +1,15 @@
|
|||
<template>
|
||||
<div class="energy-profile">
|
||||
<peak-secondary-title :title="title"/>
|
||||
<peak-secondary-title :title="title">
|
||||
<template>
|
||||
<div class="right-tab">
|
||||
<div class="tab-type" v-for="item of tabDataList" :class="activeDateTab === item.value? 'active-tab':''"
|
||||
@click="tabDateChange(item.value)">
|
||||
{{ item.name }}
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
</peak-secondary-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 }}
|
||||
|
|
@ -38,13 +47,31 @@ export default {
|
|||
value: 2
|
||||
}
|
||||
],
|
||||
tabDataList: [
|
||||
{
|
||||
name: '今日',
|
||||
value: '0'
|
||||
},
|
||||
{
|
||||
name: '本月',
|
||||
value: '1'
|
||||
},
|
||||
{
|
||||
name: '上月',
|
||||
value: '2'
|
||||
}
|
||||
],
|
||||
activeDateTab:'0',
|
||||
activeTab: 1
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
tabChange(val) {
|
||||
this.activeTab = val
|
||||
}
|
||||
},
|
||||
tabDateChange(val) {
|
||||
this.activeDateTab = val
|
||||
},
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
|
@ -93,5 +120,35 @@ export default {
|
|||
height: 100%;
|
||||
}
|
||||
}
|
||||
|
||||
.right-tab {
|
||||
height: 100%;
|
||||
.flex-row;
|
||||
justify-content: space-between;
|
||||
width: 220px;
|
||||
|
||||
.tab-type {
|
||||
margin-bottom: 15px;
|
||||
width: 67px;
|
||||
height: 30px;
|
||||
.bg("~/assets/peakCoalImages/left/pollutant-type-default-bg.png");
|
||||
font-family: MicrosoftYaHei;
|
||||
font-size: 14px;
|
||||
color: rgba(216, 240, 255, 0.50);
|
||||
letter-spacing: 0;
|
||||
text-align: center;
|
||||
line-height: 30px;
|
||||
text-shadow: 0 0 11px #0091FF;
|
||||
font-weight: 400;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.active-tab {
|
||||
.bg("~/assets/peakCoalImages/left/pollutant-type-active-bg.png");
|
||||
color: #D8F0FF;
|
||||
text-shadow: 0 0 33px #0091FF;
|
||||
font-weight: 400;
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
|
|
|||
|
|
@ -0,0 +1,132 @@
|
|||
<template>
|
||||
<div class="peak-air-quality">
|
||||
<div class="line-charts">
|
||||
<peak-air-quality-trend-charts :data-source="airQualityTrendDataSource"/>
|
||||
</div>
|
||||
<div class="bar-charts">
|
||||
<div class="_title"></div>
|
||||
<div class="_bar">
|
||||
<air-rate-charts :rate-num="60"/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import PeakAirQualityTrendCharts from "@/components/charts/PeakAirQualityTrendCharts";
|
||||
import AirRateCharts from "@/components/charts/AirRateCharts";
|
||||
|
||||
export default {
|
||||
name: "PeakAirQuality",
|
||||
components: {AirRateCharts, PeakAirQualityTrendCharts},
|
||||
data() {
|
||||
return {
|
||||
airQualityTrendDataSource: [
|
||||
{
|
||||
name: '1',
|
||||
value: 3,
|
||||
attr: '2021'
|
||||
},
|
||||
{
|
||||
name: '2',
|
||||
value: 4,
|
||||
attr: '2021'
|
||||
},
|
||||
{
|
||||
name: '3',
|
||||
value: 1,
|
||||
attr: '2021'
|
||||
},
|
||||
{
|
||||
name: '4',
|
||||
value: 4,
|
||||
attr: '2021'
|
||||
},
|
||||
{
|
||||
name: '5',
|
||||
value: 6,
|
||||
attr: '2021'
|
||||
},
|
||||
{
|
||||
name: '6',
|
||||
value: 1,
|
||||
attr: '2021'
|
||||
},
|
||||
{
|
||||
name: '7',
|
||||
value: 8,
|
||||
attr: '2021'
|
||||
},
|
||||
{
|
||||
name: '1',
|
||||
value: 1,
|
||||
attr: '2022'
|
||||
},
|
||||
{
|
||||
name: '2',
|
||||
value: 4,
|
||||
attr: '2022'
|
||||
},
|
||||
{
|
||||
name: '3',
|
||||
value: 7,
|
||||
attr: '2022'
|
||||
},
|
||||
{
|
||||
name: '4',
|
||||
value: 8,
|
||||
attr: '2022'
|
||||
},
|
||||
{
|
||||
name: '5',
|
||||
value: 2,
|
||||
attr: '2022'
|
||||
},
|
||||
{
|
||||
name: '6',
|
||||
value: 7,
|
||||
attr: '2022'
|
||||
},
|
||||
{
|
||||
name: '7',
|
||||
value: 1,
|
||||
attr: '2022'
|
||||
}
|
||||
]
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped lang="less">
|
||||
@import "../../assets/styles/mixin";
|
||||
|
||||
.peak-air-quality {
|
||||
height: 100%;
|
||||
width: 100%;
|
||||
.flex-column;
|
||||
|
||||
.line-charts {
|
||||
height: 170px;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.bar-charts {
|
||||
flex: 1;
|
||||
height: 0;
|
||||
width: 100%;
|
||||
.flex-column;
|
||||
|
||||
._title {
|
||||
width: 300px;
|
||||
height: 30px;
|
||||
background: url("~/assets/peakCoalMonitoring/left/air-rate-bg.png") no-repeat;
|
||||
}
|
||||
|
||||
._bar {
|
||||
flex: 1;
|
||||
height: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
|
@ -1,17 +1,88 @@
|
|||
<template>
|
||||
<div class="pollution-information">
|
||||
<peak-secondary-title :title="title"/>
|
||||
</div>
|
||||
<div class="pollution-information">
|
||||
<peak-secondary-title :title="title"/>
|
||||
<div class="pollution-content">
|
||||
<div class="pollution-item" v-for="item of dataSource">
|
||||
<div class="pollution-icon" :class="getPollutionIcon(item.state)"></div>
|
||||
<div class="total-info">
|
||||
<div class="title-value">
|
||||
<div class="_value">{{ item.pollutionValue }}</div>
|
||||
<div class="_title">{{ item.pollutionName }}</div>
|
||||
</div>
|
||||
<div class="unit-value">
|
||||
<div class="standard-title">标准:</div>
|
||||
<div class="standard-value">{{ item.standardValue }}{{ item.pollutionUnit }}</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import PeakSecondaryTitle from "@/components/peak-coal-monitoring/PeakSecondaryTitle";
|
||||
|
||||
export default {
|
||||
name: "PollutionInformation",
|
||||
components: {PeakSecondaryTitle},
|
||||
data(){
|
||||
return{
|
||||
title: '污染物信息总览'
|
||||
data() {
|
||||
return {
|
||||
title: '污染物信息总览',
|
||||
dataSource: [
|
||||
{
|
||||
pollutionName: '一氧化碳',
|
||||
pollutionValue: '9.0',
|
||||
pollutionUnit: 'ug/m³',
|
||||
standardValue: '6',
|
||||
state: 1
|
||||
},
|
||||
{
|
||||
pollutionName: '氮氧化物',
|
||||
pollutionValue: '9.0',
|
||||
pollutionUnit: 'ug/m³',
|
||||
standardValue: '6',
|
||||
state: 2
|
||||
},
|
||||
{
|
||||
pollutionName: 'PM10',
|
||||
pollutionValue: '9.0',
|
||||
pollutionUnit: 'ug/m³',
|
||||
standardValue: '16',
|
||||
state: 0
|
||||
},
|
||||
{
|
||||
pollutionName: 'PM2.5',
|
||||
pollutionValue: '9.0',
|
||||
pollutionUnit: 'ug/m³',
|
||||
standardValue: '6',
|
||||
state: 1
|
||||
},
|
||||
{
|
||||
pollutionName: '二氧化硫',
|
||||
pollutionValue: '9.0',
|
||||
pollutionUnit: 'ug/m³',
|
||||
standardValue: '6',
|
||||
state: 1
|
||||
},
|
||||
{
|
||||
pollutionName: '臭氧',
|
||||
pollutionValue: '9.0',
|
||||
pollutionUnit: 'ug/m³',
|
||||
standardValue: '6',
|
||||
state: 0
|
||||
}
|
||||
]
|
||||
}
|
||||
},
|
||||
methods:{
|
||||
getPollutionIcon(val){
|
||||
if(val === 1){
|
||||
return 'you-icon'
|
||||
} else if(val === 2){
|
||||
return 'chi-ping-icon'
|
||||
} else {
|
||||
return 'cha-icon'
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -19,8 +90,102 @@ export default {
|
|||
|
||||
<style scoped lang="less">
|
||||
@import "assets/styles/mixin";
|
||||
.pollution-information{
|
||||
|
||||
.pollution-information {
|
||||
height: 100%;
|
||||
width: 100%;
|
||||
.flex-column;
|
||||
|
||||
.pollution-content {
|
||||
padding-top: 10px;
|
||||
flex: 1;
|
||||
height: 0;
|
||||
display: flex;
|
||||
flex-flow: row;
|
||||
justify-content: start;
|
||||
flex-wrap: wrap;
|
||||
.pollution-item {
|
||||
height: 66px;
|
||||
width: 200px;
|
||||
.flex-row;
|
||||
&:nth-child(2n){
|
||||
margin-left: 20px;
|
||||
}
|
||||
.pollution-icon{
|
||||
width: 66px;
|
||||
height: 66px;
|
||||
}
|
||||
|
||||
.you-icon{
|
||||
background: url("~/assets/peakCoalMonitoring/left/pollution-you.png") no-repeat;
|
||||
}
|
||||
|
||||
.chi-ping-icon{
|
||||
background: url("~/assets/peakCoalMonitoring/left/pollution-chi-ping.png") no-repeat;
|
||||
}
|
||||
|
||||
.cha-icon{
|
||||
background: url("~/assets/peakCoalMonitoring/left/pollution-cha.png") no-repeat;
|
||||
}
|
||||
|
||||
.total-info{
|
||||
flex: 1;
|
||||
width: 0;
|
||||
.flex-column;
|
||||
justify-content: space-between;
|
||||
.title-value{
|
||||
width: 100%;
|
||||
.flex-row;
|
||||
justify-content: space-between;
|
||||
._value{
|
||||
padding-left: 10px;
|
||||
font-family: YouSheBiaoTiHei;
|
||||
font-size: 18px;
|
||||
color: #24DCF7;
|
||||
letter-spacing: 5.64px;
|
||||
font-weight: 400;
|
||||
text-align: right;
|
||||
.text-ellipsis;
|
||||
}
|
||||
._title{
|
||||
font-family: MicrosoftYaHei;
|
||||
font-size: 14px;
|
||||
color: #24DCF7;
|
||||
letter-spacing: 2.26px;
|
||||
font-weight: 400;
|
||||
}
|
||||
}
|
||||
.unit-value{
|
||||
width: 100%;
|
||||
.flex-row;
|
||||
justify-content: space-between;
|
||||
.standard-value{
|
||||
font-family: 思源黑体;
|
||||
font-size: 12px;
|
||||
color: #FFFFFF;
|
||||
letter-spacing: 5.64px;
|
||||
font-weight: 400;
|
||||
text-align: right;
|
||||
.text-ellipsis;
|
||||
}
|
||||
.standard-title{
|
||||
padding-left: 10px;
|
||||
font-family: 思源黑体;
|
||||
font-size: 12px;
|
||||
color: #FFFFFF;
|
||||
letter-spacing: 2.26px;
|
||||
font-weight: 400;
|
||||
}
|
||||
.standard-unit{
|
||||
font-family: 思源黑体;
|
||||
font-size: 12px;
|
||||
color: #FFFFFF;
|
||||
letter-spacing: 2.26px;
|
||||
font-weight: 400;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
|
|
|||
|
|
@ -7,7 +7,9 @@
|
|||
</div>
|
||||
|
||||
<div class="header-panel">
|
||||
<div class="header-content"></div>
|
||||
<div class="header-content">
|
||||
<div class="_title">峰煤智慧监控应用系统</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
|
|
@ -98,6 +100,18 @@ body, html, #__nuxt, #__layout {
|
|||
background-size: 100% 100%;
|
||||
position: absolute;
|
||||
top: -123px;
|
||||
._title{
|
||||
padding-top: 140px;
|
||||
width: 100%;
|
||||
height: 60px;
|
||||
font-family: AlimamaShuHeiTi-Bold;
|
||||
font-size: 32px;
|
||||
color: #D8F0FF;
|
||||
letter-spacing: 7.68px;
|
||||
text-align: center;
|
||||
text-shadow: 0 0 11px #000000;
|
||||
font-weight: 700;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
|
|
|||
Loading…
Reference in New Issue