Skip to content

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

tj

parent 41bb57b3
Hide 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
<template> <template>
<div <div
class="d2-layout-header-aside-group" class="d2-layout-header-aside-group"
:style="styleLayoutMainGroup" :style="styleLayoutMainGroup"
:class="{ grayMode: grayActive }" :class="{ grayMode: grayActive }"
> >
<!-- 半透明遮罩 --> <!-- 半透明遮罩 -->
<div class="d2-layout-header-aside-mask"></div> <div class="d2-layout-header-aside-mask"></div>
<!-- 主体内容 --> <!-- 主体内容 -->
<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
<img src="./imgs/logo2.png" /> class="logo-group"
</div> :style="{ width: asideWidth }"
<div style="width: 100%"> flex-box="0"
<div flex-box="1"></div> >
<!-- 顶栏右侧 --> <img src="./imgs/logo2.png" />
<div class="d2-header-right"> </div>
<div class="time-container"> <div style="width: 100%">
<div class="current-time">{{ time | formatDate }}</div> <div flex-box="1"></div>
<div class="current-date">{{ time | formatDate2 }}</div> <!-- 顶栏右侧 -->
</div> <div class="d2-header-right">
<div class="weather-container"> <div class="time-container">
<div class="user-img">室内</div> <div class="current-time">
<div class="weather-info" v-if="snqxzBean"> {{ time | formatDate }}
<!-- <span :class="station.length < 6 ? 'lineFeed' : ''">{{station }}</span> --> </div>
<div>温度 {{ snqxzBean.temperature }}℃</div> <div class="current-date">
<div>湿度 {{ snqxzBean.humidity }}%</div> {{ time | formatDate2 }}
</div> </div>
</div> </div>
<div class="weather-container"> <div class="weather-container">
<div class="user-img">室外</div> <div class="user-img">室内</div>
<div class="weather-info" v-if="swqxzBean"> <div class="weather-info" v-if="snqxzBean">
<!-- <span :class="station.length < 6 ? 'lineFeed' : ''">{{station }}</span> --> <!-- <span :class="station.length < 6 ? 'lineFeed' : ''">{{station }}</span> -->
<div>温度 {{ swqxzBean.temperature }}℃</div> <div>温度 {{ snqxzBean.temperature }}℃</div>
<div>湿度 {{ swqxzBean.humidity }}%</div> <div>湿度 {{ snqxzBean.humidity }}%</div>
</div> </div>
</div> </div>
<!-- <d2-header-theme /> --> <div class="weather-container">
<!-- <el-badge class="msg-img" :value="countNum == 0 ? '' : countNum > 99 ? '99+' : countNum" type="danger"> <div class="user-img">室外</div>
<div class="weather-info" v-if="swqxzBean">
<!-- <span :class="station.length < 6 ? 'lineFeed' : ''">{{station }}</span> -->
<div>温度 {{ swqxzBean.temperature }}℃</div>
<div>湿度 {{ swqxzBean.humidity }}%</div>
</div>
</div>
<!-- <d2-header-theme /> -->
<!-- <el-badge class="msg-img" :value="countNum == 0 ? '' : countNum > 99 ? '99+' : countNum" type="danger">
<div title="报警中心" style="cursor: pointer" @click="toAlarms"> <div title="报警中心" style="cursor: pointer" @click="toAlarms">
<img src="./imgs/msg.png" /> <img src="./imgs/msg.png" />
</div> </div>
</el-badge> --> </el-badge> -->
<d2-header-user /> <d2-header-user />
<div <div
title="退出" title="退出"
class="msg-img" class="msg-img"
style="cursor: pointer" style="cursor: pointer"
@click="logOff" @click="logOff"
> >
<img src="./imgs/out.png" /> <img src="./imgs/out.png" />
</div> </div>
</div> </div>
</div> </div>
</div> </div>
<!-- 下面 主体 --> <!-- 下面 主体 -->
<div class="d2-theme-container" flex-box="1" flex> <div class="d2-theme-container" flex-box="1" flex>
<!-- 主体 侧边栏 --> <!-- 主体 侧边栏 -->
<div <div
flex-box="0" v-if="isShow"
ref="aside" flex-box="0"
class="d2-theme-container-aside" ref="aside"
:style="{ class="d2-theme-container-aside"
width: asideWidth, :style="{
opacity: this.searchActive ? 0.5 : 1 width: asideWidth,
}" opacity: this.searchActive ? 0.5 : 1,
> }"
<d2-menu-side /> >
</div> <d2-menu-side />
<!-- 主体 --> </div>
<div class="d2-theme-container-main" flex-box="1" flex> <div
<!-- 内容 --> class="semi-circle"
<transition name="fade-scale"> :style="{ left: isShow ? '256px' : '1px' }"
<div class="d2-theme-container-main-layer" flex="dir:top"> @click="isShow = !isShow"
<!-- 页面 --> >
<div class="d2-theme-container-main-body" flex-box="1"> <i
<!-- <bim></bim> --> :class="[
<keep-alive :include="keepAlive"> isShow
<router-view /> ? 'el-icon-caret-left'
</keep-alive> : 'el-icon-caret-right',
</div> ]"
</div> ></i>
</transition> </div>
</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>
<div style="z-index: 9999 !important; user-select: none" class="mfooter"> <!-- 主体 -->
Copyright (C) 2021-2022. XXXXX信息工程有限公司 蜀ICP备1202XXXX号-1 <div class="d2-theme-container-main" flex-box="1" flex>
电话：86-028-689XXXX 传真：86-028-6893XXXX <!-- 内容 -->
</div> <transition name="fade-scale">
</div> <div
</div> class="d2-theme-container-main-layer"
flex="dir:top"
>
<!-- 页面 -->
<div
class="d2-theme-container-main-body"
flex-box="1"
>
<!-- <bim></bim> -->
<keep-alive :include="keepAlive">
<router-view />
</keep-alive>
</div>
</div>
</transition>
</div>
</div>
<div
style="z-index: 9999 !important; user-select: none"
class="mfooter"
>
Copyright (C) 2021-2022. XXXXX信息工程有限公司
蜀ICP备1202XXXX号-1 电话：86-028-689XXXX 传真：86-028-6893XXXX
</div>
</div>
</div>
</template> </template>
<script> <script>
...@@ -98,282 +131,303 @@ import { mapState, mapGetters, mapActions } from 'vuex' ...@@ -98,282 +131,303 @@ import { mapState, mapGetters, mapActions } from 'vuex'
import mixinSearch from './mixins/search' import mixinSearch from './mixins/search'
export default { export default {
name: 'd2-layout-header-aside', name: 'd2-layout-header-aside',
mixins: [mixinSearch], mixins: [mixinSearch],
components: { components: {
'd2-menu-side': () => import('./components/menu-side'), 'd2-menu-side': () => import('./components/menu-side'),
'd2-menu-header': () => import('./components/menu-header'), 'd2-menu-header': () => import('./components/menu-header'),
'd2-header-theme': () => import('./components/header-theme'), 'd2-header-theme': () => import('./components/header-theme'),
'd2-header-user': () => import('./components/header-user') 'd2-header-user': () => import('./components/header-user')
}, },
data() { data() {
return { return {
drawer: false, awidth: '250px',
// [侧边栏宽度] 正常状态 isShow: true,
asideWidth: '256px', drawer: false,
// [侧边栏宽度] 折叠状态 // [侧边栏宽度] 正常状态
asideWidthCollapse: '65px', asideWidth: '256px',
time: new Date(), // [侧边栏宽度] 折叠状态
timer: null, asideWidthCollapse: '65px',
logTimeout: null, time: new Date(),
countNum: 0, timer: null,
station: '', logTimeout: null,
snqxzBean: {}, countNum: 0,
swqxzBean: {} station: '',
} snqxzBean: {},
}, swqxzBean: {}
mounted() { }
this.getStation() },
this.getDate() mounted() {
this.countNum = this.size this.getStation()
}, this.getDate()
filters: { this.countNum = this.size
formatDate: function (value) { },
let date = new Date(value) filters: {
let h = date.getHours() formatDate: function(value) {
h = h < 10 ? '0' + h : h let date = new Date(value)
let m = date.getMinutes() let h = date.getHours()
m = m < 10 ? '0' + m : m h = h < 10 ? '0' + h : h
let s = date.getSeconds() let m = date.getMinutes()
s = s < 10 ? '0' + s : s m = m < 10 ? '0' + m : m
return ` ${h}:${m}:${s}` let s = date.getSeconds()
}, s = s < 10 ? '0' + s : s
formatDate2: function (value) { return ` ${h}:${m}:${s}`
let date = new Date(value) },
let y = date.getFullYear() formatDate2: function(value) {
let MM = date.getMonth() + 1 let date = new Date(value)
MM = MM < 10 ? '0' + MM : MM let y = date.getFullYear()
let d = date.getDate() let MM = date.getMonth() + 1
d = d < 10 ? '0' + d : d MM = MM < 10 ? '0' + MM : MM
let week = date.getDay() let d = date.getDate()
let weeks = ['日', '一', '二', '三', '四', '五', '六'] d = d < 10 ? '0' + d : d
let getWeek = '星期' + weeks[week] let week = date.getDay()
// return `${y}/${MM}/${d} ${getWeek} ` let weeks = ['日', '一', '二', '三', '四', '五', '六']
return `${MM}/${d} ${getWeek} ` let getWeek = '星期' + weeks[week]
} // return `${y}/${MM}/${d} ${getWeek} `
}, return `${MM}/${d} ${getWeek} `
}
},
computed: { computed: {
...mapState('d2admin', { ...mapState('d2admin', {
keepAlive: (state) => state.page.keepAlive, keepAlive: (state) => state.page.keepAlive,
grayActive: (state) => state.gray.active, grayActive: (state) => state.gray.active,
transitionActive: (state) => state.transition.active, transitionActive: (state) => state.transition.active,
asideCollapse: (state) => state.menu.asideCollapse asideCollapse: (state) => state.menu.asideCollapse
}), }),
...mapState('d2admin/menu', ['header']), ...mapState('d2admin/menu', ['header']),
...mapState('d2admin/toast', ['size']), ...mapState('d2admin/toast', ['size']),
...mapGetters('d2admin', { ...mapGetters('d2admin', {
themeActiveSetting: 'theme/activeSetting' themeActiveSetting: 'theme/activeSetting'
}), }),
...mapState('d2admin/paramsList', ['list']), ...mapState('d2admin/paramsList', ['list']),
/** /**
* @description 最外层容器的背景图片样式 * @description 最外层容器的背景图片样式
*/ */
styleLayoutMainGroup() { styleLayoutMainGroup() {
return { return {
// ...(this.themeActiveSetting.backgroundImage // ...(this.themeActiveSetting.backgroundImage
// ? { // ? {
// backgroundImage: `url('${this.$baseUrl}${this.themeActiveSetting.backgroundImage}')` // backgroundImage: `url('${this.$baseUrl}${this.themeActiveSetting.backgroundImage}')`
// } // }
// : {}) // : {})
} }
} }
}, },
watch: { watch: {
size(val) { size(val) {
this.countNum = val this.countNum = val
}, },
list: { list: {
handler(n, o) { handler(n, o) {
if (n) { if (n) {
this.setData() this.setData()
} }
}, },
deep: true deep: true
} }
}, },
methods: { methods: {
...mapActions('d2admin/menu', ['asideCollapseToggle']), ...mapActions('d2admin/menu', ['asideCollapseToggle']),
/** /**
* 接收点击切换侧边栏的按钮 * 接收点击切换侧边栏的按钮
*/ */
handleToggleAside() { handleToggleAside() {
console.log(111111) console.log(111111)
this.asideCollapseToggle() this.asideCollapseToggle()
}, },
...mapActions('d2admin/account', ['logout']), ...mapActions('d2admin/account', ['logout']),
/** /**
* @description 登出 * @description 登出
*/ */
logOff() { logOff() {
this.logout({ this.logout({
vm: this, vm: this,
confirm: true confirm: true
}) })
}, },
getDate() { getDate() {
let _this = this let _this = this
this.timer = setInterval(() => { this.timer = setInterval(() => {
_this.time = new Date() _this.time = new Date()
}, 1000) }, 1000)
}, },
// out() { // out() {
// this.$router.push('/') // this.$router.push('/')
// }, // },
toAlarms() { toAlarms() {
this.header.forEach((res) => { this.header.forEach((res) => {
if (res.path === '/alarms') { if (res.path === '/alarms') {
this.$router.push({ path: res.list[0].path }) this.$router.push({ path: res.list[0].path })
} }
}) })
}, },
//读取站点名称 //读取站点名称
getStation() { getStation() {
this.station = JSON.parse(localStorage.getItem('sysSystem')).name this.station = JSON.parse(localStorage.getItem('sysSystem')).name
if (!this.station || this.station == 'undefined') { if (!this.station || this.station == 'undefined') {
setTimeout(this.getStation, 3000) setTimeout(this.getStation, 3000)
} }
}, },
setData() { setData() {
console.log('list:', this.list) console.log('list:', this.list)
if (this.list) { if (this.list) {
if (this.list.snqxzList.length > 0) { if (this.list.snqxzList.length > 0) {
this.snqxzBean = this.list.snqxzList[0] this.snqxzBean = this.list.snqxzList[0]
} }
if (this.list.swqxzList.length > 0) { if (this.list.swqxzList.length > 0) {
this.swqxzBean = this.list.swqxzList[0] this.swqxzBean = this.list.swqxzList[0]
} }
} }
console.log('snqxzBean:', this.snqxzBean) console.log('snqxzBean:', this.snqxzBean)
console.log('swqxzBean:', this.swqxzBean) console.log('swqxzBean:', this.swqxzBean)
}, },
setSwqxzData() {} setSwqxzData() {}
} }
} }
</script> </script>
<style lang="scss"> <style lang="scss">
.lineFeed { .lineFeed {
line-height: 36px; line-height: 36px;
padding-top: 0px !important; padding-top: 0px !important;
} }
.time-container { .time-container {
width: 93px; width: 93px;
text-align: center; text-align: center;
// border:1px solid red; // border:1px solid red;
padding: 2px; padding: 2px;
.current-time { .current-time {
font-size: 18px; font-size: 18px;
font-weight: 500; font-weight: 500;
color: rgba(255, 255, 255, 0.75); color: rgba(255, 255, 255, 0.75);
} }
.current-date { .current-date {
font-size: 12px; font-size: 12px;
color: rgba(255, 255, 255, 0.75); color: rgba(255, 255, 255, 0.75);
} }
} }
.msg-img { .msg-img {
margin-right: 10px; margin-right: 10px;
img { img {
width: 37px; width: 37px;
height: 37px; height: 37px;
vertical-align: middle; vertical-align: middle;
} }
} }
.weather-container { .weather-container {
display: flex; display: flex;
align-items: center; align-items: center;
.user-img { .user-img {
width: 37px; width: 37px;
height: 36px; height: 36px;
line-height: 37px; line-height: 37px;
text-align: center; text-align: center;
font-size: 14px; font-size: 14px;
color: #a0a8b4; color: #a0a8b4;
border: 1px solid #a0a8b4; border: 1px solid #a0a8b4;
border-radius: 50%; border-radius: 50%;
img { img {
width: 37px; width: 37px;
height: 36px; height: 36px;
vertical-align: middle; vertical-align: middle;
} }
} }
.weather-info { .weather-info {
width: 90px; width: 90px;
height: 36px; height: 36px;
border: 1px solid; border: 1px solid;
border-color: #a0a8b4 #a0a8b4 #a0a8b4 transparent; border-color: #a0a8b4 #a0a8b4 #a0a8b4 transparent;
border-top-right-radius: 5px; border-top-right-radius: 5px;
border-bottom-right-radius: 5px; border-bottom-right-radius: 5px;
transform: translateX(-19px); transform: translateX(-19px);
div { div {
text-indent: 25px; text-indent: 25px;
font-size: 12px; font-size: 12px;
transform: translateY(1px); transform: translateY(1px);
font-family: Microsoft YaHei; font-family: Microsoft YaHei;
font-weight: 400; font-weight: 400;
color: rgba(255, 255, 255, 0.75); color: rgba(255, 255, 255, 0.75);
} }
} }
} }
.drop-down img { .drop-down img {
transform: translateX(-15px); transform: translateX(-15px);
} }
.d2-theme-header { .d2-theme-header {
height: 90px !important; height: 90px !important;
display: flex; display: flex;
align-items: center; align-items: center;
position: relative !important; position: relative !important;
box-shadow: 0px 2px 8px 0px rgba(0, 0, 0, 0.07) !important; box-shadow: 0px 2px 8px 0px rgba(0, 0, 0, 0.07) !important;
background-image: url(./imgs/d2menu2x.png); background-image: url(./imgs/d2menu2x.png);
background-size: 100% 100% !important; background-size: 100% 100% !important;
} }
// 菜单 // 菜单
.menu-header { .menu-header {
width: 100%; width: 100%;
height: 90px; height: 90px;
} }
//container //container
.d2-theme-container { .d2-theme-container {
transform: translateY(60px); transform: translateY(60px);
} }
// 注册主题 // 注册主题
@import '~@/assets/style/theme/register.scss'; @import '~@/assets/style/theme/register.scss';
// 左上角logo // 左上角logo
.d2-layout-header-aside-group .d2-layout-header-aside-group
.d2-layout-header-aside-content .d2-layout-header-aside-content
.d2-theme-header .d2-theme-header
.logo-group { .logo-group {
height: 36px; height: 36px;
width: 300px; width: 300px;
display: flex; display: flex;
img { img {
padding-left: 20px; padding-left: 20px;
height: 36px; height: 36px;
&:last-child { &:last-child {
padding-left: 10px; padding-left: 10px;
} }
} }
} }
.mfooter { .mfooter {
width: 100%; width: 100%;
height: 60px; height: 60px;
line-height: 60px; line-height: 60px;
text-align: center; text-align: center;
font-size: 12px; font-size: 12px;
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,60 +3,76 @@ div(:id="id", :style="{ width: '100%', height: '90%' }") ...@@ -3,60 +3,76 @@ 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: {
data() { data() {
this.initPie() this.initPie()
} }
}, },
mounted() { mounted() {
this.initPie() this.initPie()
}, const erd = elementResizeDetectorMaker()
methods: { erd.listenTo(document.getElementById(this.id), () => {
initPie() { this.$nextTick(() => {
let dom = document.getElementById(this.id) //监听到事件后执行的业务逻辑
if (!dom) return this.initPie()
let myCharts = this.$echarts.init(dom) })
let option = { })
color: ['skyblue', '#F2637B', '#8EE0E0', '#FFCC00', '#4ECB74'], },
tooltip: { destroyed() {
trigger: 'item' window.onresize = null
}, },
legend: { methods: {
orient: 'horizontal', initPie() {
top: '1%' let dom = document.getElementById(this.id)
}, if (!dom) return
series: [ let myCharts = this.$echarts.init(dom)
{ let option = {
type: 'pie', color: ['skyblue', '#F2637B', '#8EE0E0', '#FFCC00', '#4ECB74'],
radius: '50%', tooltip: {
data: this.data trigger: 'item'
// data: [ },
// { legend: {
// value: 1048, orient: 'horizontal',
// name: '风冷热泵机组', top: '1%'
// itemStyle: { color: 'skyblue' } },
// }, series: [
// { {
// value: 735, type: 'pie',
// name: '室内机风柜', radius: '50%',
// itemStyle: { color: '#F2637B' } data: this.data
// }, // data: [
// { value: 580, name: '水泵', itemStyle: { color: '#8EE0E0' } }, // {
// { // value: 1048,
// value: 484, // name: '风冷热泵机组',
// name: '多联室内机', // itemStyle: { color: 'skyblue' }
// itemStyle: { color: '#4ECB74' } // },
// }, // {
// { value: 300, name: '排风机', itemStyle: { color: '#FFCC00' } } // value: 735,
// ] // name: '室内机风柜',
} // itemStyle: { color: '#F2637B' }
] // },
} // { value: 580, name: '水泵', itemStyle: { color: '#8EE0E0' } },
myCharts.setOption(option) // {
} // value: 484,
} // name: '多联室内机',
// itemStyle: { color: '#4ECB74' }
// },
// { value: 300, name: '排风机', itemStyle: { color: '#FFCC00' } }
// ]
}
]
}
myCharts.setOption(option)
myCharts.resize()
window.addEventListener('resize', function() {
myCharts.resize()
})
}
}
} }
</script> </script>
......
src/pages/analysis/fault/pie2.vue
View file @ 0e64fad7
...@@ -3,80 +3,96 @@ div(:id="id", :style="{ width: '100%', height: '90%' }") ...@@ -3,80 +3,96 @@ 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() {
return { return {
list: {} list: {}
} }
}, },
watch: { watch: {
data() { data() {
this.initPie2() this.initPie2()
} }
}, },
mounted() { mounted() {
this.initPie2() this.initPie2()
}, const erd = elementResizeDetectorMaker()
methods: { erd.listenTo(document.getElementById(this.id), () => {
initPie2() { this.$nextTick(() => {
let dom = document.getElementById(this.id) //监听到事件后执行的业务逻辑
if (!dom) return this.initPie2()
let myCharts = this.$echarts.init(dom) })
let option = { })
color: ['skyblue', '#F2637B', '#8EE0E0', '#FFCC00', '#4ECB74'], },
tooltip: { destroyed() {
trigger: 'item', window.onresize = null
formatter: '{a} <br/>{b} : {c} ({d}%)' },
}, methods: {
legend: { initPie2() {
type: 'scroll', let dom = document.getElementById(this.id)
orient: 'vertical', if (!dom) return
right: 10, let myCharts = this.$echarts.init(dom)
top: 20, let option = {
bottom: 20, color: ['skyblue', '#F2637B', '#8EE0E0', '#FFCC00', '#4ECB74'],
// data: ['风冷热泵机组', '室内机风柜', '水泵', '多联室内机'] tooltip: {
data: this.legendData trigger: 'item',
}, formatter: '{a} <br/>{b} : {c} ({d}%)'
series: [ },
{ legend: {
name: '', type: 'scroll',
type: 'pie', orient: 'vertical',
radius: '55%', right: 10,
center: ['40%', '50%'], top: 20,
data: this.data, bottom: 20,
// data: [ // data: ['风冷热泵机组', '室内机风柜', '水泵', '多联室内机']
// { data: this.legendData
// name: '风冷热泵机组', },
// value: '100', series: [
// itemStyle: { color: 'skyblue' } {
// }, name: '',
// { type: 'pie',
// name: '室内机风柜', radius: '55%',
// value: '130', center: ['40%', '50%'],
// itemStyle: { color: '#F2637B' } data: this.data,
// }, // data: [
// { name: '水泵', value: '400', itemStyle: { color: '#8EE0E0' } }, // {
// { // name: '风冷热泵机组',
// name: '多联室内机', // value: '100',
// value: '100', // itemStyle: { color: 'skyblue' }
// itemStyle: { color: '#FFCC00' } // },
// } // {
// ], // name: '室内机风柜',
emphasis: { // value: '130',
itemStyle: { // itemStyle: { color: '#F2637B' }
shadowBlur: 10, // },
shadowOffsetX: 0, // { name: '水泵', value: '400', itemStyle: { color: '#8EE0E0' } },
shadowColor: 'rgba(0, 0, 0, 0.5)' // {
} // name: '多联室内机',
} // value: '100',
} // itemStyle: { color: '#FFCC00' }
] // }
} // ],
myCharts.setOption(option) emphasis: {
} itemStyle: {
} shadowBlur: 10,
shadowOffsetX: 0,
shadowColor: 'rgba(0, 0, 0, 0.5)'
}
}
}
]
}
myCharts.setOption(option)
myCharts.resize()
window.addEventListener('resize', function() {
myCharts.resize()
})
}
}
} }
</script> </script>
......
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: {
data: { data: {
immediate: true, immediate: true,
deep: true, deep: true,
handler(newValue, oldValue) { handler(newValue, oldValue) {
this.initChart() this.initChart()
} }
} }
}, },
mounted() { mounted() {
this.initChart() this.initChart()
}, const erd = elementResizeDetectorMaker()
methods: { erd.listenTo(document.getElementById(this.id), () => {
initChart() { this.$nextTick(() => {
let dom = document.getElementById(this.id) //监听到事件后执行的业务逻辑
if (!dom) return this.initChart()
let myCharts = this.$echarts.init(dom) })
let option = { })
// color:['#D0F0FF'], },
title: { destroyed() {
text: this.title window.onresize = null
}, },
tooltip: { methods: {
trigger: 'axis', initChart() {
transitionDuration: 0 let dom = document.getElementById(this.id)
}, if (!dom) return
grid: { let myCharts = this.$echarts.init(dom)
left: '3%', let option = {
bottom: '3%', // color:['#D0F0FF'],
containLabel: true title: {
}, text: this.title
xAxis: [ },
{ tooltip: {
// type: 'category', trigger: 'axis',
type: 'time', transitionDuration: 0
boundaryGap: false },
} grid: {
], left: '3%',
yAxis: [ bottom: '3%',
{ containLabel: true
type: 'value', },
name: this.yAxisName xAxis: [
{
// type: 'category',
type: 'time',
boundaryGap: false
}
],
yAxis: [
{
type: 'value',
name: this.yAxisName
}
],
series: [
{
name: '',
type: 'line',
stack: '总量',
smooth: true,
// label: {
// show: true,
// position: 'top'
// },
areaStyle: {
normal: {
color: new this.$echarts.graphic.LinearGradient(
0,
0,
0,
1,
[
{
offset: 0,
color: this.color // 0% 处的颜色
},
{
offset: 1,
color: '#fff' // 100% 处的颜色
}
]
)
}
},
lineStyle: {
color: this.color
},
itemStyle: {
normal: {
color: '#13B0FF'
}
},
emphasis: {
focus: 'series'
},
data: this.data
}
]
}
myCharts.setOption(option, true)
myCharts.resize()
} window.addEventListener('resize', function() {
], myCharts.resize()
series: [ })
{ }
name: '', }
type: 'line',
stack: '总量',
smooth: true,
// label: {
// show: true,
// position: 'top'
// },
areaStyle: {
normal: {
color: new this.$echarts.graphic.LinearGradient(0, 0, 0, 1, [
{
offset: 0,
color: this.color // 0% 处的颜色
},
{
offset: 1,
color: '#fff' // 100% 处的颜色
}
])
}
},
lineStyle: {
color: this.color
},
itemStyle: {
normal: {
color: '#13B0FF'
}
},
emphasis: {
focus: 'series'
},
data: this.data
}
]
}
myCharts.setOption(option, true)
}
}
} }
</script> </script>
<style lang="scss" scoped> <style lang="scss" scoped></style>
</style>
src/pages/components/myPies.vue
View file @ 0e64fad7
<template> <template>
<div id="myPies" style="height: 100%"></div> <div id="myPies" style="height: 100%"></div>
</template> </template>
<script> <script>
import elementResizeDetectorMaker from 'element-resize-detector'
export default { export default {
name: 'myPies', name: 'myPies',
data() { data() {
return { return {
myPies: null myPies: null
} }
}, },
mounted() { mounted() {
this.initPie() this.initPie()
}, const erd = elementResizeDetectorMaker()
erd.listenTo(document.getElementById('myPies'), () => {
this.$nextTick(() => {
//监听到事件后执行的业务逻辑
this.initPie()
})
})
},
methods: {
initPie() {
let myPie = document.getElementById('myPies')
this.myPies = this.$echarts.init(myPie)
const data = [
{ name: '冷', value: 500 },
{ name: '适中', value: 900 },
{ name: '热', value: 600 }
]
const option = {
tooltip: {
trigger: 'item'
},
methods: { legend: {
initPie() { show: true,
let myPie = document.getElementById('myPies') orient: 'horizontal',
this.myPies = this.$echarts.init(myPie) // left: "center",
const data = [ bottom: '0',
{ name: '冷', value: 500 }, itemHeight: 13,
{ name: '适中', value: 900 }, itemWidth: 13,
{ name: '热', value: 600 } itemGap: 35,
] icon: 'circle',
const option = { data: data,
tooltip: { formatter: function(name) {
trigger: 'item' var total = 0
}, var target
var value
for (let i = 0, l = data.length; i < l; i++) {
value = data[i].value
total += data[i].value
if (data[i].name == name) {
target = data[i].value
}
}
return (
name +
' ' +
((target / total) * 100).toFixed(0) +
'%'
)
},
textStyle: {
rich: {
a: {
color: '#333333',
// verticalAlign: "top",
// align: "center",
// fontSize: 12,
// padding: [10, 0, 28, 0]
padding: 20
},
b: {
// align: "left",
// fontSize: 18,
padding: [10, 10, 10, 0],
// // lineHeight: 25,
color: '#333333'
}
}
}
},
color: [
'rgba(72,154,254,1)',
'rgba(247,243,204,1)',
'rgba(236,73,104,1)'
],
series: [
{
type: 'pie',
radius: ['50%', '70%'],
center: ['50%', '40%'],
avoidLabelOverlap: false,
label: {
show: false,
position: 'center',
normal: {
show: true,
position: 'center',
formatter: function() {
return `\r\n20000`
},
textStyle: {
fontSize: 30,
lineHeight: 20,
color: '#36CBCB'
}
}
},
emphasis: {
label: {
show: false,
fontSize: '20',
fontWeight: 'bold'
}
},
labelLine: {
show: false
},
data: [...data]
}
]
}
legend: { this.myPies.setOption(option)
show: true, this.myPies.resize()
orient: 'horizontal', }
// left: "center", }
bottom: '0',
itemHeight: 13,
itemWidth: 13,
itemGap: 35,
icon: 'circle',
data: data,
formatter: function (name) {
var total = 0
var target
var value
for (let i = 0, l = data.length; i < l; i++) {
value = data[i].value
total += data[i].value
if (data[i].name == name) {
target = data[i].value
}
}
return name + ' ' + ((target / total) * 100).toFixed(0) + '%'
},
textStyle: {
rich: {
a: {
color: '#333333',
// verticalAlign: "top",
// align: "center",
// fontSize: 12,
// padding: [10, 0, 28, 0]
padding: 20
},
b: {
// align: "left",
// fontSize: 18,
padding: [10, 10, 10, 0],
// // lineHeight: 25,
color: '#333333'
}
}
}
},
color: [
'rgba(72,154,254,1)',
'rgba(247,243,204,1)',
'rgba(236,73,104,1)'
],
series: [
{
type: 'pie',
radius: ['50%', '70%'],
center: ['50%', '40%'],
avoidLabelOverlap: false,
label: {
show: false,
position: 'center',
normal: {
show: true,
position: 'center',
formatter: function () {
return `\r\n20000`
},
textStyle: {
fontSize: 30,
lineHeight: 20,
color: '#36CBCB'
}
}
},
emphasis: {
label: {
show: false,
fontSize: '20',
fontWeight: 'bold'
}
},
labelLine: {
show: false
},
data: [...data]
}
]
}
this.myPies.setOption(option)
}
}
} }
</script> </script>
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