yanghongwei
/
lg_frontend
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

1、新增图表看板

This commit is contained in:
lankuixing 2024-02-23 22:52:11 +08:00
parent 5b5ad82daa
commit fbe7631373
10 changed files with 272 additions and 69 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

10
components/WarningStatistics.vue
View File

@ -14,6 +14,7 @@
<third-level-label :title="warningTypeTitle"/>
<div class="warning-type-pie">
<div class="_bg"></div>
<warning-type-chart :data-source="warningTypeDataSource"/>
</div>
</div>
@ -109,7 +110,14 @@ export default {
.warning-type-pie {
flex: 1;
height: 0;
.bg("~/assets/peakCoalImages/right/warning-type-pie-bg.png", left, 20px);
position: relative;
._bg{
position: absolute;
width: 314px;
height: 313px;
background: url("~/assets/peakCoalImages/right/warning-type-pie-bg.png") no-repeat 16px 48px;
background-size: 100% 100%;
}
}
}
}

21
components/charts/AirQualityTrendCharts.vue
View File

@ -84,7 +84,7 @@ export default {
data: yAxisDataSource,
yAxisIndex: 0, // 通过这个判断左右
lineStyle: {
width: 6,
width: 3,
}
}
seriesList.push(series)
@ -94,20 +94,21 @@ export default {
legend: {
top: 20,
left: '30%',
itemWidth: 22,
itemHeight: 22,
itemWidth: 11,
itemHeight: 11,
icon: 'circle',
textStyle: {
color: 'rgba(106,196,255,0.60)',
fontSize: 30,
padding: [0, 0, 0, 20]
fontSize: 15,
padding: [0, 0, 0, 10]
}
},
tooltip: {
trigger: 'axis',
},
grid: {
top: 100,
top: 50,
bottom: 10,
containLabel: true,
},
xAxis: [
@ -115,7 +116,7 @@ export default {
type: 'category',
boundaryGap: true,
axisLabel: {
fontSize: 30,
fontSize: 15,
color: 'rgba(106,196,255,0.60)'
},
axisLine: {
@ -135,13 +136,13 @@ export default {
type: 'value',
splitNumber: 5,
axisLabel: {
fontSize: 30,
fontSize: 15,
color: 'rgba(106,196,255,0.60)'
},
nameTextStyle: {
color: 'rgba(106,196,255,0.60)',
fontSize: 30,
lineHeight: 40,
fontSize: 15,
lineHeight: 20,
},
// 分割线
splitLine: {

21
components/charts/COTrendCharts.vue
View File

@ -89,7 +89,7 @@ export default {
data: yAxisDataSource,
yAxisIndex: 0, // 通过这个判断左右
lineStyle: {
width: 6,
width: 3,
},
areaStyle: {
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
@ -111,22 +111,23 @@ export default {
let option = {
color: color,
legend: {
top: 20,
top: 10,
right: '10%',
itemWidth: 22,
itemHeight: 22,
itemWidth: 11,
itemHeight: 11,
icon: 'circle',
textStyle: {
color: 'rgba(106,196,255,0.60)',
fontSize: 30,
padding: [0, 0, 0, 20]
fontSize: 15,
padding: [0, 0, 0, 10]
}
},
tooltip: {
trigger: 'axis',
},
grid: {
top: 100,
top: 50,
bottom: 10,
containLabel: true,
left: 0
},
@ -135,7 +136,7 @@ export default {
type: 'category',
boundaryGap: true,
axisLabel: {
fontSize: 30,
fontSize: 15,
color: 'rgba(106,196,255,0.60)'
},
axisLine: {
@ -155,12 +156,12 @@ export default {
type: 'value',
splitNumber: 5,
axisLabel: {
fontSize: 30,
fontSize: 15,
color: 'rgba(106,196,255,0.60)'
},
nameTextStyle: {
color: 'rgba(106,196,255,0.60)',
fontSize: 30,
fontSize: 15,
lineHeight: 40,
},
// 分割线

24
components/charts/ElectricityWaterCharts.vue
View File

@ -85,7 +85,7 @@ export default {
type: 'bar',
color: 'transparent',
yAxisIndex: 0,
barWidth: '60',
barWidth: '30',
data: yAxisDataSource,
}
let topBar =
@ -96,13 +96,12 @@ export default {
color: color[index],
symbol: 'rect',
symbolPosition: 'end', // 在数据结尾显示
symbolSize: [60, 20], // 「树叶大小」
symbolSize: [30, 10], // 「树叶大小」
symbolOffset: ['0', '0'], //「偏移量」
}
seriesList.push(topBar)
seriesList.push(series)
console.log()
}
let option = {
color: color,
@ -110,20 +109,21 @@ export default {
show: false,
top: 20,
left: '30%',
itemWidth: 22,
itemHeight: 22,
itemWidth: 11,
itemHeight: 11,
icon: 'circle',
textStyle: {
color: 'rgba(106,196,255,0.60)',
fontSize: 30,
padding: [0, 0, 0, 20]
fontSize: 15,
padding: [0, 0, 0, 10]
}
},
tooltip: {
trigger: 'axis',
},
grid: {
top: 60,
top: 30,
bottom: 10,
containLabel: true,
},
xAxis: [
@ -131,7 +131,7 @@ export default {
type: 'category',
boundaryGap: true,
axisLabel: {
fontSize: 30,
fontSize: 15,
color: 'rgba(106,196,255,0.60)'
},
axisLine: {
@ -151,13 +151,13 @@ export default {
type: 'value',
splitNumber: 5,
axisLabel: {
fontSize: 30,
fontSize: 15,
color: 'rgba(106,196,255,0.60)'
},
nameTextStyle: {
color: 'rgba(106,196,255,0.60)',
fontSize: 30,
lineHeight: 40,
fontSize: 15,
lineHeight: 20,
},
// 分割线
splitLine: {

27
components/charts/PollutantTrendCharts.vue
View File

@ -89,7 +89,7 @@ export default {
data: yAxisDataSource,
yAxisIndex: 0, // 通过这个判断左右
lineStyle: {
width: 6,
width: 3,
}
}
} else if (index == 0) {
@ -97,7 +97,7 @@ export default {
name: attrNames[index],
type: 'bar',
color: color[index],
barWidth: '50%',
barWidth: '25%',
data: yAxisDataSource,
}
}
@ -108,22 +108,23 @@ export default {
color: color,
legend: {
show: false,
top: 20,
left: '30%',
itemWidth: 22,
itemHeight: 22,
top: 10,
left: '15%%',
itemWidth: 11,
itemHeight: 11,
icon: 'circle',
textStyle: {
color: 'rgba(106,196,255,0.60)',
fontSize: 30,
padding: [0, 0, 0, 20]
fontSize: 15,
padding: [0, 0, 0, 10]
}
},
tooltip: {
trigger: 'axis',
},
grid: {
top: 60,
top: 30,
bottom: 10,
containLabel: true,
},
xAxis: [
@ -131,7 +132,7 @@ export default {
type: 'category',
boundaryGap: true,
axisLabel: {
fontSize: 30,
fontSize: 15,
color: 'rgba(106,196,255,0.60)'
},
axisLine: {
@ -151,13 +152,13 @@ export default {
type: 'value',
splitNumber: 5,
axisLabel: {
fontSize: 30,
fontSize: 15,
color: 'rgba(106,196,255,0.60)'
},
nameTextStyle: {
color: 'rgba(106,196,255,0.60)',
fontSize: 30,
lineHeight: 40,
fontSize: 15,
lineHeight: 20,
},
// 分割线
splitLine: {

29
components/charts/ProduceTrendChart.vue
View File

@ -66,12 +66,12 @@ export default {
legend: {
top: 0,
right: 0,
itemWidth: 22,
itemHeight: 22,
itemWidth: 11,
itemHeight: 11,
icon: 'circle',
textStyle: {
color: 'rgba(106,196,255,0.60)',
fontSize: 30,
fontSize: 15,
}
},
@ -79,7 +79,8 @@ export default {
trigger: 'axis',
},
grid: {
top: 100,
top: 50,
bottom: 10,
containLabel: true,
},
xAxis: [
@ -87,7 +88,7 @@ export default {
type: 'category',
boundaryGap: true,
axisLabel: {
fontSize: 30,
fontSize: 15,
color: 'rgba(106,196,255,0.60)'
},
axisLine: {
@ -109,13 +110,13 @@ export default {
splitNumber: 5,
name: '单位：t',
axisLabel: {
fontSize: 30,
fontSize: 15,
color: 'rgba(106,196,255,0.60)'
},
nameTextStyle: {
color: 'rgba(106,196,255,0.60)',
fontSize: 30,
lineHeight: 40,
fontSize: 15,
lineHeight: 20,
},
// 分割线
splitLine: {
@ -137,13 +138,13 @@ export default {
name: '单位：m³',
splitNumber: 5,
axisLabel: {
fontSize: 30,
fontSize: 15,
color: 'rgba(106,196,255,0.60)'
},
nameTextStyle: {
color: 'rgba(106,196,255,0.60)',
fontSize: 30,
lineHeight: 40,
fontSize: 15,
lineHeight: 20,
},
// 分割线
splitLine: {
@ -170,7 +171,7 @@ export default {
data: yAxisData1,
yAxisIndex: 0, // 通过这个判断左右
lineStyle: {
width: 6,
width: 3,
}
},
{
@ -182,7 +183,7 @@ export default {
data: yAxisData2,
yAxisIndex: 1, // 通过这个判断左右
lineStyle: {
width: 6,
width: 3,
}
},
{
@ -194,7 +195,7 @@ export default {
data: yAxisData3,
yAxisIndex: 1, // 通过这个判断左右
lineStyle: {
width: 6,
width: 3,
}
},
],

18
components/charts/WarningTypeChart.vue
View File

@ -84,8 +84,8 @@ export default {
left: lefts[i],
top: tops[i],
align: aligns[i],
itemWidth: 19,
itemHeight: 74,
itemWidth: 10,
itemHeight: 37,
itemStyle: {
color: colorList[i],
},
@ -94,28 +94,28 @@ export default {
textStyle: {
fontWeight: 'lighter',
fontSize: 14,
width: 460,
height: 74,
width: 230,
height: 37,
padding: [0, 10, 0, 10],
backgroundColor: bgColorList[i],
lineHeight: 74,
lineHeight: 37,
rich: {
a: {
align: 'right',
color: '#C1DEFF',
fontSize: 42,
fontSize: 17,
fontWeight: 700
},
b: {
align: 'left',
color: '#C1DEFF',
fontSize: 34,
fontSize: 17,
padding: [0, 0, 0, 10]
},
c:{
align: 'center',
color: '#C1DEFF',
fontSize: 34,
fontSize: 17,
padding: [0, 0, 0, 10]
}
}
@ -155,7 +155,7 @@ export default {
},
itemStyle: {
borderRadius: 0,
borderWidth: 10
borderWidth: 5
},
data: pieData1
},

78
mixins/screen-scale-mixin_v2.js Normal file
View File

@ -0,0 +1,78 @@
import {sendMessage} from '@/utils/iframe';
const VISUAL_CONFIG = {width: 9450, height: 3000}
export default {
data() {
return {
autoStyle: {}
}
},
computed: {
},
mounted() {
this.getAutoStyle()
this.initScaleEvent()
},
beforeDestroy() {
this._removeScaleEvent()
},
methods: {
getAutoStyle() {
const innerHeight = window.innerHeight
const innerWidth = window.innerWidth
const {scale, origin, position, type} = this.getScale()
sendMessage('scale', {scale, type, innerHeight, innerWidth})
localStorage.setItem('scale', JSON.stringify({scale, type, innerHeight, innerWidth}))
this.autoStyle = {
width: VISUAL_CONFIG.width + 'px',
height: VISUAL_CONFIG.height + 'px',
transform: `scale(${scale})`,
transformOrigin: origin,
...position
}
},
getScale() {
let scale = 1
// 1 按照高度缩放 2 按照宽度缩放
let type = 1
let origin = 'top center'
const innerWidth = window.innerWidth
const innerHeight = window.innerHeight
const widthScale = innerWidth / VISUAL_CONFIG.width
const scaleHeight = VISUAL_CONFIG.height * widthScale
const position = {left: 0, top: 0, marginTop: 0, marginLeft: 0}
if (scaleHeight <= innerHeight) {
origin = 'left center'
scale = widthScale
position.left = 0
position.top = '50%'
position.marginTop = -VISUAL_CONFIG.height / 2 + 'px'
position.marginLeft = 0
let type = 2
if (scale > 1) {
origin = 'left top'
position.left = 0
position.top = 0
position.marginTop = 0
position.marginLeft = 0
}
} else {
scale = innerHeight / VISUAL_CONFIG.height
position.left = '50%'
position.top = 0
position.marginTop = 0
position.marginLeft = -VISUAL_CONFIG.width / 2 + 'px'
}
return {scale, origin, position, type}
},
initScaleEvent() {
window.addEventListener('resize', this.getAutoStyle.bind(this))
},
_removeScaleEvent() {
window.removeEventListener('resize', this.getAutoStyle.bind(this))
}
}
}

86
pages/autovisual/index.vue Normal file
View File

@ -0,0 +1,86 @@
<!--
* @description:
* @component: index
* @author: wangzhigang11
* @date: 2023/8/21 19:30
-->
<template>
<div class="index">
<div :style="autoStyle" class="iframe-container">
<iframe
ref="iframe"
:src="src"
frameborder="0"
height="100%"
width="100%"
marginheight="0"
marginwidth="0"
scrolling="auto"
allowfullscreen="true"
webkitallowfullscreen="true"
mozallowfullscreen="true"
/>
</div>
</div>
</template>
<script>
import screenScaleMixin from '@/mixins/screen-scale-mixin_v2';
import {urlJoin} from '@northeast-utils/core'
export default {
name: 'Index',
components: {
},
mixins: [
screenScaleMixin
],
props: {},
data() {
return {
}
},
computed: {
src() {
const {href} = this.$router.resolve({name: '/visual/PeakCoalView'})
return urlJoin(href)
}
},
watch: {},
created() {
},
beforeDestroy() {
},
mounted() {
},
methods: {
},
}
</script>
<style>
#overviewBody {
height: 100vh;
}
</style>
<style lang='scss' scoped>
.index {
width: 100vw;
height: 100vh;
overflow: hidden;
background-color: #000;
position: relative;
.iframe-container {
position: absolute;
> iframe {
background-color: transparent;
}
}
.basin-dialog {
position: absolute;
}
}
</style>

27
utils/iframe.js Normal file
View File

@ -0,0 +1,27 @@
export const onMessage = function (eventName, cb) {
window.parent.addEventListener('message', function (e) { // 监听 message 事件
if ( e.data) {
const _eventName = e.data.type
if (eventName === _eventName) {
cb && cb(e.data.data)
}
}
});
}
export function sendMessage (eventName, message) {
window.postMessage({
type: eventName,
data: message
}, '/')
}
export function sendSelfMessage (eventName, message) {
window.postMessage({
type: eventName,
data: message
}, '/')
}
window.sendSelfMessage = sendSelfMessage