Skip to content

E
energyai_vue
Commit 0e64fad7 authored by xiexingan's avatar xiexingan
Browse files
Options

tj

parent 41bb57b3
Show whitespace changes
Inline Side-by-side
Showing with 777 additions and 654 deletions
public/config.js
View file @ 0e64fad7
...@@ -7,9 +7,9 @@ CONFIG.TITLE = '拉灵线-山南站AI节能系统' ...@@ -7,9 +7,9 @@ CONFIG.TITLE = '拉灵线-山南站AI节能系统'
// CONFIG.requestPath = 'http://localhost:8046' // CONFIG.requestPath = 'http://localhost:8046'
CONFIG.requestPath = 'http://10.20.72.31:8046' // CONFIG.requestPath = 'http://10.20.72.31:8046'
// CONFIG.requestPath = 'http://59.110.43.122:8046' CONFIG.requestPath = 'http://59.110.43.122:8046'
// 文件上传 // 文件上传
CONFIG.urlPath = 'http://10.20.72.31/' // CONFIG.urlPath = 'http://10.20.72.31/'
// CONFIG.urlPath = 'http://59.110.43.122/' CONFIG.urlPath = 'http://59.110.43.122/'
src/layout/header-aside/layout.vue
View file @ 0e64fad7
...@@ -10,7 +10,11 @@ ...@@ -10,7 +10,11 @@
<div class="d2-layout-header-aside-content" flex="dir:top"> <div class="d2-layout-header-aside-content" flex="dir:top">
<!-- 顶栏 --> <!-- 顶栏 -->
<div class="d2-theme-header" flex-box="0" flex> <div class="d2-theme-header" flex-box="0" flex>
<div class="logo-group" :style="{ width: asideWidth }" flex-box="0"> <div
class="logo-group"
:style="{ width: asideWidth }"
flex-box="0"
>
<img src="./imgs/logo2.png" /> <img src="./imgs/logo2.png" />
</div> </div>
<div style="width: 100%"> <div style="width: 100%">
...@@ -18,8 +22,12 @@ ...@@ -18,8 +22,12 @@
<!-- 顶栏右侧 --> <!-- 顶栏右侧 -->
<div class="d2-header-right"> <div class="d2-header-right">
<div class="time-container"> <div class="time-container">
<div class="current-time">{{ time | formatDate }}</div> <div class="current-time">
<div class="current-date">{{ time | formatDate2 }}</div> {{ time | formatDate }}
</div>
<div class="current-date">
{{ time | formatDate2 }}
</div>
</div> </div>
<div class="weather-container"> <div class="weather-container">
<div class="user-img">室内</div> <div class="user-img">室内</div>
...@@ -59,23 +67,45 @@ ...@@ -59,23 +67,45 @@
<div class="d2-theme-container" flex-box="1" flex> <div class="d2-theme-container" flex-box="1" flex>
<!-- 主体 侧边栏 --> <!-- 主体 侧边栏 -->
<div <div
v-if="isShow"
flex-box="0" flex-box="0"
ref="aside" ref="aside"
class="d2-theme-container-aside" class="d2-theme-container-aside"
:style="{ :style="{
width: asideWidth, width: asideWidth,
opacity: this.searchActive ? 0.5 : 1 opacity: this.searchActive ? 0.5 : 1,
}" }"
> >
<d2-menu-side /> <d2-menu-side />
</div> </div>
<div
class="semi-circle"
:style="{ left: isShow ? '256px' : '1px' }"
@click="isShow = !isShow"
>
<i
:class="[
isShow
? 'el-icon-caret-left'
: 'el-icon-caret-right',
]"
></i>
</div>
<!-- <el-button circle size="mini" :style="{left:isShow?'240px':'1px'}" :class="[isShow?'el-icon-caret-left':'el-icon-caret-right' ,'openOrClose']" @click='isShow=!isShow' ></el-button> -->
<!-- 主体 --> <!-- 主体 -->
<div class="d2-theme-container-main" flex-box="1" flex> <div class="d2-theme-container-main" flex-box="1" flex>
<!-- 内容 --> <!-- 内容 -->
<transition name="fade-scale"> <transition name="fade-scale">
<div class="d2-theme-container-main-layer" flex="dir:top"> <div
class="d2-theme-container-main-layer"
flex="dir:top"
>
<!-- 页面 --> <!-- 页面 -->
<div class="d2-theme-container-main-body" flex-box="1"> <div
class="d2-theme-container-main-body"
flex-box="1"
>
<!-- <bim></bim> --> <!-- <bim></bim> -->
<keep-alive :include="keepAlive"> <keep-alive :include="keepAlive">
<router-view /> <router-view />
...@@ -85,9 +115,12 @@ ...@@ -85,9 +115,12 @@
</transition> </transition>
</div> </div>
</div> </div>
<div style="z-index: 9999 !important; user-select: none" class="mfooter"> <div
Copyright (C) 2021-2022. XXXXX信息工程有限公司 蜀ICP备1202XXXX号-1 style="z-index: 9999 !important; user-select: none"
电话：86-028-689XXXX 传真：86-028-6893XXXX class="mfooter"
>
Copyright (C) 2021-2022. XXXXX信息工程有限公司
蜀ICP备1202XXXX号-1 电话：86-028-689XXXX 传真：86-028-6893XXXX
</div> </div>
</div> </div>
</div> </div>
...@@ -108,6 +141,8 @@ export default { ...@@ -108,6 +141,8 @@ export default {
}, },
data() { data() {
return { return {
awidth: '250px',
isShow: true,
drawer: false, drawer: false,
// [侧边栏宽度] 正常状态 // [侧边栏宽度] 正常状态
asideWidth: '256px', asideWidth: '256px',
...@@ -128,7 +163,7 @@ export default { ...@@ -128,7 +163,7 @@ export default {
this.countNum = this.size this.countNum = this.size
}, },
filters: { filters: {
formatDate: function (value) { formatDate: function(value) {
let date = new Date(value) let date = new Date(value)
let h = date.getHours() let h = date.getHours()
h = h < 10 ? '0' + h : h h = h < 10 ? '0' + h : h
...@@ -138,7 +173,7 @@ export default { ...@@ -138,7 +173,7 @@ export default {
s = s < 10 ? '0' + s : s s = s < 10 ? '0' + s : s
return ` ${h}:${m}:${s}` return ` ${h}:${m}:${s}`
}, },
formatDate2: function (value) { formatDate2: function(value) {
let date = new Date(value) let date = new Date(value)
let y = date.getFullYear() let y = date.getFullYear()
let MM = date.getMonth() + 1 let MM = date.getMonth() + 1
...@@ -376,4 +411,23 @@ export default { ...@@ -376,4 +411,23 @@ export default {
font-weight: 400; font-weight: 400;
color: rgba(255, 255, 255, 0.75); color: rgba(255, 255, 255, 0.75);
} }
.semi-circle {
position: absolute;
top: 40%;
z-index: 99;
width: 10px;
height: 20px;
line-height: 20px;
background-color: #fff;
border: 1px solid #d8d4d4;
border-radius: 0 50px 50px 0; /* 左上、右上、右下、左下 */
text-align: left;
cursor: pointer;
i{
color: #1190da;
transform: scale(.5);
transform: translateX(-3px);
}
}
</style> </style>
src/pages/analysis/fault/pie.vue
View file @ 0e64fad7
...@@ -3,6 +3,8 @@ div(:id="id", :style="{ width: '100%', height: '90%' }") ...@@ -3,6 +3,8 @@ div(:id="id", :style="{ width: '100%', height: '90%' }")
</template> </template>
<script> <script>
import elementResizeDetectorMaker from 'element-resize-detector'
export default { export default {
props: ['data', 'id'], props: ['data', 'id'],
watch: { watch: {
...@@ -12,6 +14,16 @@ export default { ...@@ -12,6 +14,16 @@ export default {
}, },
mounted() { mounted() {
this.initPie() this.initPie()
const erd = elementResizeDetectorMaker()
erd.listenTo(document.getElementById(this.id), () => {
this.$nextTick(() => {
//监听到事件后执行的业务逻辑
this.initPie()
})
})
},
destroyed() {
window.onresize = null
}, },
methods: { methods: {
initPie() { initPie() {
...@@ -55,6 +67,10 @@ export default { ...@@ -55,6 +67,10 @@ export default {
] ]
} }
myCharts.setOption(option) myCharts.setOption(option)
myCharts.resize()
window.addEventListener('resize', function() {
myCharts.resize()
})
} }
} }
} }
......
src/pages/analysis/fault/pie2.vue
View file @ 0e64fad7
...@@ -3,6 +3,8 @@ div(:id="id", :style="{ width: '100%', height: '90%' }") ...@@ -3,6 +3,8 @@ div(:id="id", :style="{ width: '100%', height: '90%' }")
</template> </template>
<script> <script>
import elementResizeDetectorMaker from 'element-resize-detector'
export default { export default {
props: ['data', 'id', 'legendData'], props: ['data', 'id', 'legendData'],
data() { data() {
...@@ -18,6 +20,16 @@ export default { ...@@ -18,6 +20,16 @@ export default {
mounted() { mounted() {
this.initPie2() this.initPie2()
const erd = elementResizeDetectorMaker()
erd.listenTo(document.getElementById(this.id), () => {
this.$nextTick(() => {
//监听到事件后执行的业务逻辑
this.initPie2()
})
})
},
destroyed() {
window.onresize = null
}, },
methods: { methods: {
initPie2() { initPie2() {
...@@ -75,6 +87,10 @@ export default { ...@@ -75,6 +87,10 @@ export default {
] ]
} }
myCharts.setOption(option) myCharts.setOption(option)
myCharts.resize()
window.addEventListener('resize', function() {
myCharts.resize()
})
} }
} }
} }
......
src/pages/analysis/indoor/index.vue
View file @ 0e64fad7
...@@ -164,7 +164,7 @@ export default { ...@@ -164,7 +164,7 @@ export default {
flex-wrap: wrap; flex-wrap: wrap;
height: calc(100vh - 350px); height: calc(100vh - 350px);
> div { > div {
width: 48%; width: 47%;
height: calc(90% / 2); height: calc(90% / 2);
margin: 3px; margin: 3px;
padding: 13px; padding: 13px;
......
src/pages/components/chart.vue
View file @ 0e64fad7
// 曲线图 ==》 （首页，数据分析） // 曲线图 ==》 （首页，数据分析）
<template lang='pug'> <template lang="pug">
div(:id="id", :style="{ width: '100%', height: '90%' }") div(:id="id", :style="{ width: '100%', height: '90%' }")
</template> </template>
<script> <script>
import elementResizeDetectorMaker from 'element-resize-detector'
export default { export default {
props: ['id', 'data', 'title', 'color', 'yAxisName'], props: ['id', 'data', 'title', 'color', 'yAxisName'],
watch: { watch: {
...@@ -17,6 +19,16 @@ export default { ...@@ -17,6 +19,16 @@ export default {
}, },
mounted() { mounted() {
this.initChart() this.initChart()
const erd = elementResizeDetectorMaker()
erd.listenTo(document.getElementById(this.id), () => {
this.$nextTick(() => {
//监听到事件后执行的业务逻辑
this.initChart()
})
})
},
destroyed() {
window.onresize = null
}, },
methods: { methods: {
initChart() { initChart() {
...@@ -48,7 +60,6 @@ export default { ...@@ -48,7 +60,6 @@ export default {
{ {
type: 'value', type: 'value',
name: this.yAxisName name: this.yAxisName
} }
], ],
series: [ series: [
...@@ -63,7 +74,12 @@ export default { ...@@ -63,7 +74,12 @@ export default {
// }, // },
areaStyle: { areaStyle: {
normal: { normal: {
color: new this.$echarts.graphic.LinearGradient(0, 0, 0, 1, [ color: new this.$echarts.graphic.LinearGradient(
0,
0,
0,
1,
[
{ {
offset: 0, offset: 0,
color: this.color // 0% 处的颜色 color: this.color // 0% 处的颜色
...@@ -72,7 +88,8 @@ export default { ...@@ -72,7 +88,8 @@ export default {
offset: 1, offset: 1,
color: '#fff' // 100% 处的颜色 color: '#fff' // 100% 处的颜色
} }
]) ]
)
} }
}, },
lineStyle: { lineStyle: {
...@@ -91,10 +108,14 @@ export default { ...@@ -91,10 +108,14 @@ export default {
] ]
} }
myCharts.setOption(option, true) myCharts.setOption(option, true)
myCharts.resize()
window.addEventListener('resize', function() {
myCharts.resize()
})
} }
} }
} }
</script> </script>
<style lang="scss" scoped> <style lang="scss" scoped></style>
</style>
src/pages/components/myPies.vue
View file @ 0e64fad7
...@@ -3,6 +3,8 @@ ...@@ -3,6 +3,8 @@
</template> </template>
<script> <script>
import elementResizeDetectorMaker from 'element-resize-detector'
export default { export default {
name: 'myPies', name: 'myPies',
data() { data() {
...@@ -13,8 +15,14 @@ export default { ...@@ -13,8 +15,14 @@ export default {
mounted() { mounted() {
this.initPie() this.initPie()
const erd = elementResizeDetectorMaker()
erd.listenTo(document.getElementById('myPies'), () => {
this.$nextTick(() => {
//监听到事件后执行的业务逻辑
this.initPie()
})
})
}, },
methods: { methods: {
initPie() { initPie() {
let myPie = document.getElementById('myPies') let myPie = document.getElementById('myPies')
...@@ -39,7 +47,7 @@ export default { ...@@ -39,7 +47,7 @@ export default {
itemGap: 35, itemGap: 35,
icon: 'circle', icon: 'circle',
data: data, data: data,
formatter: function (name) { formatter: function(name) {
var total = 0 var total = 0
var target var target
var value var value
...@@ -50,7 +58,12 @@ export default { ...@@ -50,7 +58,12 @@ export default {
target = data[i].value target = data[i].value
} }
} }
return name + ' ' + ((target / total) * 100).toFixed(0) + '%' return (
name +
' ' +
((target / total) * 100).toFixed(0) +
'%'
)
}, },
textStyle: { textStyle: {
rich: { rich: {
...@@ -89,7 +102,7 @@ export default { ...@@ -89,7 +102,7 @@ export default {
normal: { normal: {
show: true, show: true,
position: 'center', position: 'center',
formatter: function () { formatter: function() {
return `\r\n20000` return `\r\n20000`
}, },
textStyle: { textStyle: {
...@@ -113,7 +126,9 @@ export default { ...@@ -113,7 +126,9 @@ export default {
} }
] ]
} }
this.myPies.setOption(option) this.myPies.setOption(option)
this.myPies.resize()
} }
} }
} }
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment