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