Skip to content

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

tj

parent 5983515a
Hide whitespace changes
Inline Side-by-side
Showing with 186 additions and 228 deletions
src/pages/analysis/energy/page.vue
View file @ a425c5db
<template> <template>
<div class="energy-page"> <div class="energy-page">
<cardList cardListTitle="能耗数据分析"> <cardList cardListTitle="能耗数据分析">
<div slot="right" > <div slot="right">
<!-- <span <!-- <span
:class="activeIndex === index ? 'active-hight-linght' : ''" :class="activeIndex === index ? 'active-hight-linght' : ''"
class="date-text" class="date-text"
@click="activehandle(item, index)" @click="activehandle(item, index)"
...@@ -21,120 +21,106 @@ ...@@ -21,120 +21,106 @@
<!-- <i style=" padding-left:20px;padding-right: 20px;color:#21acfc" class="el-icon-s-unfold"></i> --> <!-- <i style=" padding-left:20px;padding-right: 20px;color:#21acfc" class="el-icon-s-unfold"></i> -->
<!-- <i class="el-icon-printer" style="color:#21acfc"></i> --> <!-- <i class="el-icon-printer" style="color:#21acfc"></i> -->
<el-button size="mini" type="primary" @click="toPowerPage">图形/列表</el-button> <el-button size="mini" type="primary" @click="toPowerPage">图形/列表</el-button>
</div> </div>
<div slot="content" > <div slot="content" style='height:calc(100% - 70px)'>
<div > <div>
<!-- <enTabs :tabList="energyTabList"></enTabs> --> <!-- <enTabs :tabList="energyTabList"></enTabs> -->
<el-tabs class="en-tabs" v-model="activetap" > <el-tabs class="en-tabs" v-model="activetap">
<el-row style="padding-top:15px"> <el-row style="padding-top:15px">
<el-col :span="10"> <el-col :span="10">
<span>时间范围：</span> <span>时间范围：</span>
<el-date-picker <el-date-picker size="mini" type="daterange" range-separator="～" start-placeholder="开始日期" end-placeholder="结束日期">
size="mini" </el-date-picker>
type="daterange" </el-col>
range-separator="～" <el-col :span="4">
start-placeholder="开始日期" <el-button type="primary" size="mini" icon="el-icon-search">查询</el-button>
end-placeholder="结束日期" </el-col>
> </el-row>
</el-date-picker> <el-tab-pane :label="item.label" :name="item.value" v-for="(item, index) in energyTabList" :key="index"></el-tab-pane>
</el-col>
<el-col :span="4">
<el-button type="primary" size="mini" icon="el-icon-search">查询</el-button>
</el-col>
</el-row>
<el-tab-pane
:label="item.label"
:name="item.value"
v-for="(item, index) in energyTabList"
:key="index"
></el-tab-pane>
</el-tabs> </el-tabs>
</div> </div>
<el-row> <div style='height:calc(100% - 70px)'>
<el-col :span="24"> <energyChart></energyChart>
<energyChart></energyChart> </div>
</el-col>
</el-row>
</div> </div>
</cardList> </cardList>
</div> </div>
</template> </template>
<script> <script>
import cardList from "../../components/cardList"; import cardList from '../../components/cardList'
import enTabs from "../../components/enTabs"; import enTabs from '../../components/enTabs'
// import enTable from '../../eq/hall/components/enTable' // import enTable from '../../eq/hall/components/enTable'
import energyChart from "../../components/energyTotalCharts"; import energyChart from '../../components/energyTotalCharts'
export default { export default {
name: "energypage", name: 'energypage',
components: { components: {
cardList, cardList,
enTabs, enTabs,
energyChart, energyChart
}, },
data() { data() {
return { return {
activeIndex: 1, activeIndex: 1,
activetap: "01", activetap: '01',
dateList: [ dateList: [
// { // {
// value: "01", // value: "01",
// label: "时段", // label: "时段",
// }, // },
{ {
value: "02", value: '02',
label: "今日", label: '今日'
}, },
{ {
value: "03", value: '03',
label: "本周", label: '本周'
}, },
{ {
value: "04", value: '04',
label: "本月", label: '本月'
}, },
{ {
value: "05", value: '05',
label: "全年", label: '全年'
}, }
], ],
energyTabList: [ energyTabList: [
{ {
value: "01", value: '01',
label: "全部", label: '全部'
}, },
{ {
value: "02", value: '02',
label: "排风机", label: '排风机'
}, },
{ {
value: "03", value: '03',
label: "多联空调", label: '多联空调'
}, },
{ {
value: "04", value: '04',
label: " 多联新风", label: ' 多联新风'
}, }
], ]
}; }
}, },
methods: { methods: {
activehandle(item, index) { activehandle(item, index) {
this.activeIndex = index; this.activeIndex = index
}, },
toPowerPage(){ toPowerPage() {
this.$router.push({ this.$router.push({
path:'/kb/power' path: '/kb/power'
}) })
}, }
}, }
}; }
</script> </script>
<style lang="scss"> <style lang="scss">
.energy-page { .energy-page {
height: 100%; height: 100%;
padding: 0px 0px 40px 0px;
.date-text { .date-text {
padding-right: 20px; padding-right: 20px;
......
src/pages/analysis/fault/pie4.vue
View file @ a425c5db
...@@ -34,7 +34,7 @@ export default { ...@@ -34,7 +34,7 @@ export default {
} }
}, },
created() { created() {
// this.list = this.genData(30) this.list = this.genData(30)
}, },
mounted() { mounted() {
this.ring() this.ring()
...@@ -47,8 +47,8 @@ export default { ...@@ -47,8 +47,8 @@ export default {
let myCharts = this.$echarts.init(dom) let myCharts = this.$echarts.init(dom)
let option = { let option = {
tooltip: { tooltip: {
trigger: 'item' trigger: 'item',
// formatter: '{a} <br/>{b} : {c} ({d}%)' formatter: '{a} <br/>{b} : {c} ({d}%)'
}, },
legend: { legend: {
type: 'scroll', type: 'scroll',
...@@ -56,23 +56,21 @@ export default { ...@@ -56,23 +56,21 @@ export default {
right: 10, right: 10,
top: 20, top: 20,
bottom: 20, bottom: 20,
data: [1, 2, 3, 4, 5, 6], data: ['测试1', '测试2', '测试3', '测试4']
selected: [1, 2, 3, 4, 5, 6] // selected: this.list.selected
}, },
series: [ series: [
{ {
name: '姓名', name: '',
type: 'pie', type: 'pie',
radius: '55%', radius: '55%',
center: ['40%', '50%'], center: ['40%', '50%'],
data: [ data: [
{ name: 1, value: '123' }, { name: '测试', value: '100', itemStyle: { color: 'skyblue' } },
{ name: 1, value: '123' }, { name: '测试2', value: '130', itemStyle: { color: '#F2637B' } },
{ name: 1, value: '123' }, { name: '测试3', value: '400', itemStyle: { color: '#8EE0E0' } },
{ name: 1, value: '123' }, { name: '测试4', value: '100', itemStyle: { color: '#FFCC00' } }
{ name: 1, value: '123' },
{ name: 1, value: '123' }
], ],
emphasis: { emphasis: {
itemStyle: { itemStyle: {
......
src/pages/components/cardList.vue
View file @ a425c5db
...@@ -6,40 +6,40 @@ ...@@ -6,40 +6,40 @@
<slot name="right" /> <slot name="right" />
</div> </div>
</div> </div>
<div class="card-list-content"> <div class="card-list-content">
<slot name="content" /> <slot name="content" />
</div> </div>
</div> </div>
</template> </template>
<script> <script>
export default { export default {
name: "cardList", name: 'cardList',
props: { props: {
cardListTitle: { cardListTitle: {
type: String, type: String,
default: "能耗统计", default: '能耗统计'
}, }
}, },
data() { data() {
return {}; return {}
}, }
}; }
</script> </script>
<style lang="scss" scoped> <style lang="scss" scoped>
.card-list { .card-list {
width: 100%; width: 100%;
height: 100%; height: 100%;
background: #fff; background: #fff;
box-shadow: 0px 0px 10px 0px rgba(0, 0, 0, 0.1); box-shadow: 0px 0px 10px 0px rgba(0, 0, 0, 0.1);
&-line { &-line {
display: flex; display: flex;
justify-content: space-between; justify-content: space-between;
padding: 0 20px; padding: 0 20px;
border-bottom: 1px solid #d9d9d9; border-bottom: 1px solid #d9d9d9;
background: #F2FAFF; background: #f2faff;
height: 45px; height: 45px;
line-height: 45px; line-height: 45px;
.card-list-title { .card-list-title {
display: flex; display: flex;
...@@ -66,9 +66,9 @@ export default { ...@@ -66,9 +66,9 @@ export default {
// height: 16px; // height: 16px;
// background: #1890ff; // background: #1890ff;
// } // }
.card-list-content{ .card-list-content {
padding:20px; padding: 20px;
height: calc( 155 - 40px ); height: calc(100% - 90px);
} }
} }
</style> </style>
src/pages/components/enTable.vue
View file @ a425c5db
...@@ -26,7 +26,7 @@ ...@@ -26,7 +26,7 @@
</el-table-column> </el-table-column>
</template> </template>
<el-table-column align="center" label="操作" width="150" > <el-table-column align="center" label="操作" :width="opNum*80" >
<template slot-scope="scope" > <template slot-scope="scope" >
<slot name='operation' :scope='scope'></slot> <slot name='operation' :scope='scope'></slot>
</template> </template>
...@@ -53,37 +53,41 @@ ...@@ -53,37 +53,41 @@
<script > <script >
export default { export default {
name: "enTable", name: 'enTable',
props: { props: {
// ["", "tableColums",'isShowOp'.toString // ["", "tableColums",'isShowOp'.toString
tableData:{ tableData: {
type:Array, type: Array
}, },
tableColums:{ tableColums: {
type:Array, type: Array
}, },
isShowOp:{ isShowOp: {
type:Boolean, type: Boolean,
defaul:false, default: false
}, },
isShowPage:{ opNum: {
type: Number,
defaul:true, default: 3
}, },
isEdit:{ isShowPage: {
defaul:true,
default: true
},
isEdit: {
default: true
} }
}, },
data() { data() {
return {}; return {}
}, },
methods:{ methods: {
handleClick(){ handleClick() {
this.$emit('handleBtnClick') this.$emit('handleBtnClick')
} }
} }
}; }
</script> </script>
<style lang="scss"> <style lang="scss">
.record-color { .record-color {
......
src/pages/components/enTabs.vue
View file @ a425c5db
...@@ -14,38 +14,30 @@ ...@@ -14,38 +14,30 @@
</ul> </ul>
</div> </div>
</template> </template>
<script > <script >
import { Tabs } from 'element-ui'; import { Tabs } from 'element-ui'
export default { export default {
name: "elTabs", name: 'elTabs',
props: ["tabList"], props: ['tabList'],
data() { data() {
return { return {
isActiveIndex: 0, isActiveIndex: 0,
activeName: 'second', activeName: 'second'
}; }
}, },
methods: { methods: {
tabHandle(item, index) { tabHandle(item, index) {
this.isActiveIndex = index; this.isActiveIndex = index
// this.$emit("tabHandle"); // this.$emit("tabHandle");
}, }
}, }
}; }
</script> </script>
<style scoped lang="scss"> <style scoped lang="scss">
.en-tabs { .en-tabs {
.show-bar-border { .show-bar-border {
...@@ -80,5 +72,4 @@ export default { ...@@ -80,5 +72,4 @@ export default {
// } // }
} }
</style>
</style>
\ No newline at end of file
src/pages/components/energyTotalCharts.vue
View file @ a425c5db
<template> <template>
<div class="energy-total-charts"> <div id="energyChart" style="height:100%"></div>
<div id="energyChart" style="height: 385px"></div>
</div>
</template> </template>
<script> <script>
export default { export default {
name: "energyTotalCharts", name: 'energyTotalCharts',
data() { data() {
return { return {
energyChart: null, energyChart: null
}; }
}, },
mounted() { mounted() {
this.initChart(); this.initChart()
}, },
methods: { methods: {
initChart() { initChart() {
let energyChart = document.getElementById("energyChart"); let energyChart = document.getElementById('energyChart')
this.energyChart = this.$echarts.init(energyChart); this.energyChart = this.$echarts.init(energyChart)
let _this = this; let _this = this
const option = { const option = {
tooltip: { tooltip: {
trigger: "axis", trigger: 'axis',
axisPointer: { axisPointer: {
type: "cross", type: 'cross',
label: { label: {
// backgroundColor: "#21ACFC", // backgroundColor: "#21ACFC",
}, }
}, }
}, },
legend: { legend: {
data: [], data: []
}, },
grid: { grid: {
left: "3%", left: '3%',
right: "4%", right: '4%',
bottom: "3%", bottom: '3%',
containLabel: true, containLabel: true
}, },
// center: ['50%', '40%'], // center: ['50%', '40%'],
xAxis: [ xAxis: [
{ {
type: "category", type: 'category',
boundaryGap: false, boundaryGap: false,
data: [ data: [
"02-01", '02-01',
"02-01", '02-01',
"02-01", '02-01',
"02-01", '02-01',
"02-01", '02-01',
"02-01", '02-01',
"02-01", '02-01'
], ]
}, }
], ],
yAxis: [ yAxis: [
{ {
name: "单位：kwh", name: '单位：kwh',
type: "value", type: 'value'
// itemStyle : { // itemStyle : {
// normal : { // normal : {
// lineStyle:{ // lineStyle:{
// color:'#00FF00' // color:'#00FF00'
// } // }
// } // }
}, }
], ],
series: [ series: [
{ {
name: "能耗统计", name: '能耗统计',
type: "line", type: 'line',
showSymbol: false, showSymbol: false,
smooth: true, smooth: true,
stack: "总量", stack: '总量',
areaStyle: {}, areaStyle: {},
data: [120, 132, 101, 134, 90, 230, 210], data: [120, 132, 101, 134, 90, 230, 210],
lineStyle: { lineStyle: {
normal: { normal: {
width: 4, width: 4,
color: "#21ACFC", //设置实线的颜色 color: '#21ACFC' //设置实线的颜色
}, }
}, },
itemStyle: { itemStyle: {
normal: { normal: {
...@@ -98,37 +96,37 @@ export default { ...@@ -98,37 +96,37 @@ export default {
[ [
{ {
offset: 0, offset: 0,
color: "#21ACFC", color: '#21ACFC'
}, },
{ {
offset: 0.5, offset: 0.5,
color: "#21ACFC", color: '#21ACFC'
}, },
{ {
offset: 1, offset: 1,
color: "rgba(33, 172, 252, 0)", color: 'rgba(33, 172, 252, 0)'
}, }
] ]
), )
}, },
lineStyle: { lineStyle: {
//线的颜色 //线的颜色
color: "#349e85", color: '#349e85'
}, }
}, }
}, }
}, }
], ]
}; }
this.energyChart.setOption(option); this.energyChart.setOption(option)
window.addEventListener("resize", this.resizeHandle); window.addEventListener('resize', this.resizeHandle)
// background: linear-gradient(0deg, #21ACFC, rgba(33, 172, 252, 0)); // background: linear-gradient(0deg, #21ACFC, rgba(33, 172, 252, 0));
}, }
}, },
resizeHandle() { resizeHandle() {
this.energyChart.resize(); this.energyChart.resize()
}, }
}; }
</script> </script>
\ No newline at end of file
src/pages/components/myPies.vue
View file @ a425c5db
<template> <template>
<div class="my-pies"> <div id="myPies" style="height: 100%"></div>
<div id="myPies" style="height: 548px"></div>
</div>
</template> </template>
<script> <script>
......
src/pages/eq/hall/config.js
View file @ a425c5db
...@@ -102,14 +102,8 @@ ...@@ -102,14 +102,8 @@
C: '开/关/设定温度', C: '开/关/设定温度',
D: '今日用电量/本月用电量', D: '今日用电量/本月用电量',
E: 'DLW-A1' E: 'DLW-A1'
},
{
A: '多联空调A',
B: '左侧办公房屋',
C: '开/关/设定温度',
D: '今日用电量/本月用电量',
E: 'DLW-A1'
} }
] ]
export const tableDataTwo = [ export const tableDataTwo = [
......
src/pages/eq/hall/page.vue
View file @ a425c5db
<template> <template>
<div class="hall full-height"> <div class="hall">
<cardList cardListTitle="候车大厅控制"> <cardList cardListTitle="候车大厅控制">
<div slot="content"> <div slot="content">
<div> <div>
...@@ -36,7 +36,6 @@ ...@@ -36,7 +36,6 @@
</el-button> </el-button>
</el-form-item> </el-form-item>
</span> </span>
</el-row>
</el-form> </el-form>
...@@ -60,7 +59,6 @@ ...@@ -60,7 +59,6 @@
</div> </div>
</cardList> </cardList>
<hall-modal v-on:cancelhandle="cancelhandle" :hallModalVisible="hallModalVisible"></hall-modal> <hall-modal v-on:cancelhandle="cancelhandle" :hallModalVisible="hallModalVisible"></hall-modal>
hallModalVisible
</div> </div>
</template> </template>
<script> <script>
...@@ -147,7 +145,6 @@ export default { ...@@ -147,7 +145,6 @@ export default {
<style lang="scss" > <style lang="scss" >
.hall { .hall {
height: 100%; height: 100%;
padding: 0px 0 40px 0px;
.el-input__inner { .el-input__inner {
height: 30px; height: 30px;
} }
......
src/pages/eq/office/page.vue
View file @ a425c5db
<template> <template>
<div class="office-area-control" style="padding:0 0 40px 0"> <div class="office-area-control" style="height:100%;">
<cardList cardListTitle="办公区域控制"> <cardList cardListTitle="办公区域控制">
<div slot="content" > <div slot="content" >
<!-- <enTabs :tabList="officeTabList"></enTabs> --> <!-- <enTabs :tabList="officeTabList"></enTabs> -->
......
src/pages/home/page.vue
View file @ a425c5db
...@@ -23,9 +23,9 @@ ...@@ -23,9 +23,9 @@
</div> </div>
</div> </div>
<div class="home-page-content"> <div class="home-page-content">
<el-row :gutter="12"> <el-row :gutter="12" style='height:100%;'>
<el-col :span="16"> <el-col :span="16" style='height:100%;'>
<card-list :cardListTitle="cardListLeftTitle"> <card-list :cardListTitle="cardListLeftTitle">
<div slot="right"> <div slot="right">
<span <span
:class="activeIndex === index ? 'active-hight-linght' : ''" :class="activeIndex === index ? 'active-hight-linght' : ''"
...@@ -35,20 +35,11 @@ ...@@ -35,20 +35,11 @@
:key="item.value" :key="item.value"
>{{ item.label }}</span >{{ item.label }}</span
> >
<!-- <el-date-picker
type="daterange"
range-separator="～"
start-placeholder="开始日期"
end-placeholder="结束日期"
>
</el-date-picker> -->
</div> </div>
<div slot="content" class="content-wrap"> <div slot="content" class="content-wrap">
<!-- 卡片 -->
<el-row <el-row
:gutter="12" :gutter="12"
class="margin_top_25"
type="flex" type="flex"
justify="center" justify="center"
> >
...@@ -74,7 +65,7 @@ ...@@ -74,7 +65,7 @@
<el-col :span="6"> <el-col :span="6">
<div class="handle-mode-wrap"> <div class="handle-mode-wrap">
<div class="font-style font_14"> <div class="font-style font_14">
<span>节能模式</span> <span>运行时间</span>
</div> </div>
<div class="flex-save-warp"> <div class="flex-save-warp">
<div> <div>
...@@ -104,16 +95,15 @@ ...@@ -104,16 +95,15 @@
</div> </div>
</el-col> </el-col>
</el-row> </el-row>
<!-- echarts --> <div style="height:calc(100% - 130px);">
<div style="height: 100%">
<energy-total-charts></energy-total-charts> <energy-total-charts></energy-total-charts>
</div> </div>
</div> </div>
</card-list> </card-list>
</el-col> </el-col>
<el-col :span="8" style="padding-left: 0"> <el-col :span="8" style="padding-left: 0;height:100%;">
<card-list :cardListTitle="cardListRightTitle"> <card-list :cardListTitle="cardListRightTitle">
<div slot="content"> <div slot="content" style='height:100%;'>
<my-pies></my-pies> <my-pies></my-pies>
</div> </div>
</card-list> </card-list>
...@@ -206,10 +196,8 @@ export default { ...@@ -206,10 +196,8 @@ export default {
<style lang="scss" scoped> <style lang="scss" scoped>
@import '~@/assets/style/public.scss'; @import '~@/assets/style/public.scss';
.home-page { .home-page {
height: 100%; height:calc(100vh - 155px);
width: 100%; width: 100%;
padding: 0px 0px 40px 0px;
// overflow: auto;
&-top { &-top {
margin: 20px; margin: 20px;
margin-bottom: 24px; margin-bottom: 24px;
...@@ -254,6 +242,7 @@ export default { ...@@ -254,6 +242,7 @@ export default {
} }
.home-page-content { .home-page-content {
margin: 20px; margin: 20px;
height: calc(100vh - 450px);
.date-text { .date-text {
padding-right: 20px; padding-right: 20px;
font-size: 12px; font-size: 12px;
...@@ -268,6 +257,7 @@ export default { ...@@ -268,6 +257,7 @@ export default {
.content-wrap { .content-wrap {
// margin: 20px; // margin: 20px;
height: 100%;
.energy-save-mode-wrap { .energy-save-mode-wrap {
// width: ; // width: ;
box-sizing: border-box; box-sizing: border-box;
...@@ -279,19 +269,21 @@ export default { ...@@ -279,19 +269,21 @@ export default {
border-radius: 6px; border-radius: 6px;
.flex-save-warp { .flex-save-warp {
display: flex; display: flex;
justify-content: space-between; justify-content: space-around;
} }
} }
.handle-mode-wrap { .handle-mode-wrap {
background: #36cbcb; background: #36cbcb;
box-sizing: border-box; box-sizing: border-box;
padding: 24px 30px 25px 30px; // padding: 24px 30px 25px 30px;
padding-top: 24px;
height: 138px; height: 138px;
text-align: center; text-align: center;
border-radius: 6px; border-radius: 6px;
.flex-save-warp { .flex-save-warp {
display: flex; display: flex;
justify-content: space-between; justify-content: space-around;
} }
} }
.sys-save-mode-wrap { .sys-save-mode-wrap {
......
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