Skip to content

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

日期调整

parent 1f13c248
Hide whitespace changes
Inline Side-by-side
Showing with 437 additions and 437 deletions
src/pages/analysis/energy/page.vue
View file @ 37766bda
...@@ -28,25 +28,32 @@ ...@@ -28,25 +28,32 @@
<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-form :inline="true" size="mini" style='padding-top:15px;'>
<el-col :span="7"> <el-form-item label="时间范围：">
<span>时间范围：</span>
<el-date-picker <el-date-picker
size="mini" v-model="startTime"
type="daterange" align="right"
range-separator="～" type="date"
start-placeholder="开始日期" placeholder="选择日期"
end-placeholder="结束日期" :picker-options="pickerOptions"
v-model="date"
> >
</el-date-picker> </el-date-picker>
</el-col> <span style="padding: 0 10px">至</span>
<el-col :span="2"> <el-date-picker
<el-button type="primary" size="mini" icon="el-icon-search" v-model="endTime"
>查询</el-button align="right"
type="date"
placeholder="选择日期"
:picker-options="pickerOptions"
> >
</el-col> </el-date-picker>
</el-row> </el-form-item>
<el-button type="primary" size="mini" icon="el-icon-search"
>查询</el-button
>
</el-form>
<el-tab-pane <el-tab-pane
:label="item.label" :label="item.label"
:name="item.value" :name="item.value"
...@@ -77,7 +84,8 @@ export default { ...@@ -77,7 +84,8 @@ export default {
}, },
data() { data() {
return { return {
date: [], startTime: '',
endTime: '',
activeIndex: 1, activeIndex: 1,
activetap: '01', activetap: '01',
dateList: [ dateList: [
......
src/pages/analysis/fault/index.vue
View file @ 37766bda
<template lang='pug'> <template lang='pug'>
card-warp(title="故障报警分析" height='45px' showBackground) card-warp(title="故障报警分析", height="45px", showBackground)
div(slot="content") div(slot="content")
el-form(:inline='true' size="mini" ) el-form(:inline="true", size="mini")
el-form-item(label='时间范围：') el-form-item(label="时间范围：")
el-date-picker( el-date-picker(
size='mini' size="mini",
v-model="dateValue", v-model="startTime",
type="daterange", align="right",
align="right", type="date",
unlink-panels, placeholder="选择日期",
range-separator="至", :picker-options="pickerOptions"
start-placeholder="开始日期", )
end-placeholder="结束日期", span(style="padding: 0 10px") 至
:picker-options="pickerOptions" el-date-picker(
) size="mini",
el-button(size='mini' type='primary') 查询 v-model="endTime",
.echartsWarp(width="100%", flex) align="right",
//- div type="date",
//- .title 设备故障统计 placeholder="选择日期",
//- pie :picker-options="pickerOptions"
//- div )
//- .title 设备报警统计 el-button(size="mini", type="primary") 查询
//- pie2 .echartsWarp(width="100%", flex)
div //- div
.title 设备类型故障数量统计 //- .title 设备故障统计
pie3 //- pie
div //- div
.title 设备故障数量统计 //- .title 设备报警统计
pie4 //- pie2
div
.title 设备类型故障数量统计
pie3
div
.title 设备故障数量统计
pie4
</template> </template>
<script> <script>
...@@ -36,92 +42,87 @@ card-warp(title="故障报警分析" height='45px' showBackground) ...@@ -36,92 +42,87 @@ card-warp(title="故障报警分析" height='45px' showBackground)
import pie3 from './pie3' import pie3 from './pie3'
import pie4 from './pie4' import pie4 from './pie4'
export default { export default {
components: { components: {
// pie, // pie,
// pie2, // pie2,
pie3, pie3,
pie4 pie4
}, },
data() { data() {
return { return {
dateValue: '', startTime: '',
endTime: '',
pickerOptions: { pickerOptions: {
shortcuts: [ shortcuts: [
{ {
text: '最近一周', text: '最近一周',
onClick(picker) { onClick(picker) {
const end = new Date() const end = new Date()
const start = new Date() const start = new Date()
start.setTime( start.setTime(start.getTime() - 3600 * 1000 * 24 * 7)
start.getTime() - 3600 * 1000 * 24 * 7 picker.$emit('pick', [start, end])
) }
picker.$emit('pick', [start, end]) },
} {
}, text: '最近一个月',
{ onClick(picker) {
text: '最近一个月', const end = new Date()
onClick(picker) { const start = new Date()
const end = new Date() start.setTime(start.getTime() - 3600 * 1000 * 24 * 30)
const start = new Date() picker.$emit('pick', [start, end])
start.setTime(
start.getTime() - 3600 * 1000 * 24 * 30
)
picker.$emit('pick', [start, end])
}
},
{
text: '最近三个月',
onClick(picker) {
const end = new Date()
const start = new Date()
start.setTime(
start.getTime() - 3600 * 1000 * 24 * 90
)
picker.$emit('pick', [start, end])
}
}
]
} }
} },
}, {
methods: { text: '最近三个月',
tabClick(tab, event) { onClick(picker) {
console.log(tab, event) const end = new Date()
} const start = new Date()
start.setTime(start.getTime() - 3600 * 1000 * 24 * 90)
picker.$emit('pick', [start, end])
}
}
]
}
}
},
methods: {
tabClick(tab, event) {
console.log(tab, event)
} }
}
} }
</script> </script>
<style lang="scss" scoped> <style lang="scss" scoped>
.echartsWarp { .echartsWarp {
display: flex; display: flex;
justify-content: space-between; justify-content: space-between;
flex-wrap: wrap; flex-wrap: wrap;
height: calc(100vh - 280px); height: calc(100vh - 280px);
> div { > div {
width: 47%; width: 47%;
// height: calc(90% / 2); // height: calc(90% / 2);
height: 95%; height: 95%;
margin: 3px; margin: 3px;
padding: 13px; padding: 13px;
box-shadow: 0px 0px 10px 0px rgba(0, 0, 0, 0.1); box-shadow: 0px 0px 10px 0px rgba(0, 0, 0, 0.1);
.title { .title {
font-size: 16px; font-size: 16px;
font-family: Microsoft YaHei; font-family: Microsoft YaHei;
font-weight: 600; font-weight: 600;
color: #000000; color: #000000;
line-height: 40px; line-height: 40px;
&::before { &::before {
content: ""; content: "";
display: inline-block; display: inline-block;
width: 10px; width: 10px;
height: 10px; height: 10px;
border-radius: 50%; border-radius: 50%;
background: #0097ff; background: #0097ff;
margin: 0 10px; margin: 0 10px;
} }
}
} }
}
} }
</style> </style>
src/pages/analysis/indoor/index.vue
View file @ 37766bda
<template lang="pug"> <template lang="pug">
card-warp(title="室内气象分析" height='45px' showBackground) card-warp(title="室内气象分析", height="45px", showBackground)
div(slot="right") div(slot="right")
//- span 时间范围： //- span 时间范围：
//- el-date-picker.margin-lr-20( //- el-date-picker.margin-lr-20(
//- size='mini' //- size='mini'
//- v-model="dateValue", //- v-model="dateValue",
//- type="daterange", //- type="daterange",
//- align="right", //- align="right",
//- unlink-panels, //- unlink-panels,
//- range-separator="至", //- range-separator="至",
//- start-placeholder="开始日期", //- start-placeholder="开始日期",
//- end-placeholder="结束日期", //- end-placeholder="结束日期",
//- :picker-options="pickerOptions" //- :picker-options="pickerOptions"
//- ) //- )
//- el-button(size='mini' type='primary') 查询 //- el-button(size='mini' type='primary') 查询
router-link.margin-lr-20(:to="{name:'kb-indoor'}") router-link.margin-lr-20(:to="{ name: 'kb-indoor' }")
el-button(size='mini' type='primary') 图形 / 列表 el-button(size="mini", type="primary") 图形 / 列表
//- el-button(size='mini' type='primary' icon='el-icon-download') 下载 //- el-button(size='mini' type='primary' icon='el-icon-download') 下载
div(slot="content", style="height: 90%")
el-tabs.myTabs(v-model="activeName", @tab-click="tabClick")
el-tab-pane(label="候车室区域", name="1")
el-tab-pane(label="办公区域", name="2")
el-form(:inline='true' size="mini" )
el-form-item(label='时间范围：')
el-date-picker.margin-lr-20(
size='mini'
v-model="dateValue",
type="daterange",
align="right",
unlink-panels,
range-separator="至",
start-placeholder="开始日期",
end-placeholder="结束日期",
:picker-options="pickerOptions"
)
el-form-item(label='')
el-button(size='mini' type='primary') 查询
.echartsWarp(width="100%", flex)
div
chart
div
chart2
div
chart3
div
chart4
div(slot="content", style="height: 90%")
el-tabs.myTabs(v-model="activeName", @tab-click="tabClick")
el-tab-pane(label="候车室区域", name="1")
el-tab-pane(label="办公区域", name="2")
el-form(:inline="true", size="mini")
el-form-item(label="时间范围：")
el-date-picker(
size="mini",
v-model="startTime",
align="right",
type="date",
placeholder="选择日期",
:picker-options="pickerOptions"
)
span(style="padding: 0 10px") 至
el-date-picker(
size="mini",
v-model="endTime",
align="right",
type="date",
placeholder="选择日期",
:picker-options="pickerOptions"
)
el-form-item(label="")
el-button(size="mini", type="primary") 查询
.echartsWarp(width="100%", flex)
div
chart
div
chart2
div
chart3
div
chart4
</template> </template>
<script> <script>
...@@ -55,119 +60,112 @@ import chart2 from './chart2' ...@@ -55,119 +60,112 @@ import chart2 from './chart2'
import chart3 from './chart3' import chart3 from './chart3'
import chart4 from './chart4' import chart4 from './chart4'
export default { export default {
components: { components: {
chart, chart,
chart2, chart2,
chart3, chart3,
chart4 chart4
}, },
data() { data() {
return { return {
activeName: '1', activeName: '1',
dateValue: '', startTime: '',
pickerOptions: { endTime: '',
shortcuts: [ pickerOptions: {
{ shortcuts: [
text: '最近一周', {
onClick(picker) { text: '最近一周',
const end = new Date() onClick(picker) {
const start = new Date() const end = new Date()
start.setTime( const start = new Date()
start.getTime() - 3600 * 1000 * 24 * 7 start.setTime(start.getTime() - 3600 * 1000 * 24 * 7)
) picker.$emit('pick', [start, end])
picker.$emit('pick', [start, end])
}
},
{
text: '最近一个月',
onClick(picker) {
const end = new Date()
const start = new Date()
start.setTime(
start.getTime() - 3600 * 1000 * 24 * 30
)
picker.$emit('pick', [start, end])
}
},
{
text: '最近三个月',
onClick(picker) {
const end = new Date()
const start = new Date()
start.setTime(
start.getTime() - 3600 * 1000 * 24 * 90
)
picker.$emit('pick', [start, end])
}
}
]
} }
} },
}, {
methods: { text: '最近一个月',
tabClick(tab, event) { onClick(picker) {
console.log(tab, event) const end = new Date()
}, const start = new Date()
getDataList() { start.setTime(start.getTime() - 3600 * 1000 * 24 * 30)
picker.$emit('pick', [start, end])
} }
},
{
text: '最近三个月',
onClick(picker) {
const end = new Date()
const start = new Date()
start.setTime(start.getTime() - 3600 * 1000 * 24 * 90)
picker.$emit('pick', [start, end])
}
}
]
}
} }
},
methods: {
tabClick(tab, event) {
console.log(tab, event)
},
getDataList() {}
}
} }
</script> </script>
<style lang="scss" scoped> <style lang="scss" scoped>
.myTabs { .myTabs {
/deep/ .el-tabs__nav-wrap::after { /deep/ .el-tabs__nav-wrap::after {
height: 0; height: 0;
} }
/deep/.el-tabs__nav-wrap { /deep/.el-tabs__nav-wrap {
background: #f2f4f5; background: #f2f4f5;
.el-tabs__nav { .el-tabs__nav {
// background: #E5E9EC; // background: #E5E9EC;
border-bottom: 1px solid #e5e9ec; border-bottom: 1px solid #e5e9ec;
}
}
/deep/ .el-tabs__header {
border: 1px solid #e5e9ec;
}
/deep/ .el-tabs__item:nth-child(2) {
padding: 0 20px;
}
/deep/ .el-tabs__item:last-child {
padding: 0 20px;
}
/deep/ .el-tabs__item.is-active {
background: #fff;
} }
}
/deep/ .el-tabs__header {
border: 1px solid #e5e9ec;
}
/deep/ .el-tabs__item:nth-child(2) {
padding: 0 20px;
}
/deep/ .el-tabs__item:last-child {
padding: 0 20px;
}
/deep/ .el-tabs__item.is-active {
background: #fff;
}
} }
.echartsWarp { .echartsWarp {
display: flex; display: flex;
justify-content: space-between; justify-content: space-between;
flex-wrap: wrap; flex-wrap: wrap;
height: calc(100vh - 350px); height: calc(100vh - 350px);
> div { > div {
width: 48%; width: 48%;
height: calc(90% / 2); height: calc(90% / 2);
margin: 3px; margin: 3px;
padding: 13px; padding: 13px;
box-shadow: 0px 0px 10px 0px rgba(0, 0, 0, 0.1); box-shadow: 0px 0px 10px 0px rgba(0, 0, 0, 0.1);
.title { .title {
font-size: 16px; font-size: 16px;
font-family: Microsoft YaHei; font-family: Microsoft YaHei;
font-weight: 600; font-weight: 600;
color: #000000; color: #000000;
line-height: 40px; line-height: 40px;
&::before { &::before {
content: ""; content: "";
display: inline-block; display: inline-block;
width: 10px; width: 10px;
height: 10px; height: 10px;
border-radius: 50%; border-radius: 50%;
background: #0097ff; background: #0097ff;
margin: 0 10px; margin: 0 10px;
} }
}
} }
}
} }
</style> </style>
src/pages/analysis/outdoor/index.vue
View file @ 37766bda
<template lang="pug"> <template lang="pug">
card-warp(title="室外气象分析" height='45px' showBackground) card-warp(title="室外气象分析", height="45px", showBackground)
div(slot="right") div(slot="right")
//- router-link.margin-lr-20(:to="{name:'kb-indoor'}") //- router-link.margin-lr-20(:to="{name:'kb-indoor'}")
//- el-button(size='mini' type='primary') 图形 / 列表 //- el-button(size='mini' type='primary') 图形 / 列表
div(slot="content", style="height: 90%") div(slot="content", style="height: 90%")
el-form(:inline='true' size="mini" ) el-form(:inline="true", size="mini")
el-form-item(label='设备名称：') el-form-item(label="设备名称：")
el-input(type='primary' size='mini') el-input(type="primary", size="mini")
el-form-item(label='时间范围：') el-form-item(label="时间范围：")
el-date-picker( el-date-picker(
size='mini' size="mini",
v-model="dateValue", v-model="startTime",
type="daterange", align="right",
align="right", type="date",
unlink-panels, placeholder="选择日期",
range-separator="至", :picker-options="pickerOptions"
start-placeholder="开始日期", )
end-placeholder="结束日期", span(style="padding: 0 10px") 至
:picker-options="pickerOptions" el-date-picker(
) size="mini",
el-button(size='mini' type='primary') 查询 v-model="endTime",
.echartsWarp(width="100%", flex) align="right",
div type="date",
chart placeholder="选择日期",
div :picker-options="pickerOptions"
chart2 )
div el-button(size="mini", type="primary") 查询
chart3 .echartsWarp(width="100%", flex)
div div
chart4 chart
div div
chart5 chart2
div div
chart6 chart3
div div
chart7 chart4
div div
pie8 chart5
div
chart6
div
chart7
div
pie8
</template> </template>
<script> <script>
...@@ -50,96 +55,86 @@ import chart6 from './chart6' ...@@ -50,96 +55,86 @@ import chart6 from './chart6'
import chart7 from './chart7' import chart7 from './chart7'
import pie8 from './pie8' import pie8 from './pie8'
export default { export default {
components: { components: {
chart, chart,
chart2, chart2,
chart3, chart3,
chart4, chart4,
chart5, chart5,
chart6, chart6,
chart7, chart7,
pie8 pie8
}, },
data() { data() {
return { return {
activeName: '1', activeName: '1',
dateValue: '', startTime: '',
pickerOptions: { endTime: '',
shortcuts: [ pickerOptions: {
{ disabledDate(time) {
text: '最近一周', return time.getTime() > Date.now()
onClick(picker) { },
const end = new Date() shortcuts: [
const start = new Date() {
start.setTime( text: '今天',
start.getTime() - 3600 * 1000 * 24 * 7 onClick(picker) {
) picker.$emit('pick', new Date())
picker.$emit('pick', [start, end])
}
},
{
text: '最近一个月',
onClick(picker) {
const end = new Date()
const start = new Date()
start.setTime(
start.getTime() - 3600 * 1000 * 24 * 30
)
picker.$emit('pick', [start, end])
}
},
{
text: '最近三个月',
onClick(picker) {
const end = new Date()
const start = new Date()
start.setTime(
start.getTime() - 3600 * 1000 * 24 * 90
)
picker.$emit('pick', [start, end])
}
}
]
} }
} },
}, {
methods: { text: '昨天',
onClick(picker) {
getDataList() { const date = new Date()
date.setTime(date.getTime() - 3600 * 1000 * 24)
} picker.$emit('pick', date)
}
},
{
text: '一周前',
onClick(picker) {
const date = new Date()
date.setTime(date.getTime() - 3600 * 1000 * 24 * 7)
picker.$emit('pick', date)
}
}
]
}
} }
},
methods: {
getDataList() {}
}
} }
</script> </script>
<style lang="scss" scoped> <style lang="scss" scoped>
.echartsWarp { .echartsWarp {
display: flex; display: flex;
justify-content: space-between; justify-content: space-between;
flex-wrap: wrap; flex-wrap: wrap;
height: calc(100vh - 300px); height: calc(100vh - 300px);
> div { > div {
width: 22%; width: 22%;
height: calc(85% / 2); height: calc(85% / 2);
margin: 3px; margin: 3px;
padding: 13px; padding: 13px;
box-shadow: 0px 0px 10px 0px rgba(0, 0, 0, 0.1); box-shadow: 0px 0px 10px 0px rgba(0, 0, 0, 0.1);
.title { .title {
font-size: 16px; font-size: 16px;
font-family: Microsoft YaHei; font-family: Microsoft YaHei;
font-weight: 600; font-weight: 600;
color: #000000; color: #000000;
line-height: 40px; line-height: 40px;
&::before { &::before {
content: ""; content: "";
display: inline-block; display: inline-block;
width: 10px; width: 10px;
height: 10px; height: 10px;
border-radius: 50%; border-radius: 50%;
background: #0097ff; background: #0097ff;
margin: 0 10px; margin: 0 10px;
} }
}
} }
}
} }
</style> </style>
src/pages/eq/hall/page.vue
View file @ 37766bda
...@@ -30,8 +30,10 @@ ...@@ -30,8 +30,10 @@
@click="currentId = item.id" @click="currentId = item.id"
v-for="item in typeList" v-for="item in typeList"
:key="item.id" :key="item.id"
:class="[
:class="[item.id == currentId ? 'isActive' : '' , item.icon]" item.id == currentId ? 'isActive' : '',
item.icon,
]"
> >
<!-- <img :src="item.src" alt="" /> --> <!-- <img :src="item.src" alt="" /> -->
{{ item.name }} {{ item.name }}
...@@ -48,23 +50,28 @@ ...@@ -48,23 +50,28 @@
</el-form-item> </el-form-item>
<el-form-item label="定时功能启止时间："> <el-form-item label="定时功能启止时间：">
<el-date-picker <el-time-select
size="mini" placeholder="起始时间"
style="width: 200px"
type="date"
placeholder=""
v-model="formData.startTime" v-model="formData.startTime"
:picker-options="{
start: '00:00',
step: '00:15',
end: '24:00',
}"
> >
</el-date-picker> </el-time-select>
<span style="padding: 0 10px">至</span> <span style="padding: 0 10px">至</span>
<el-date-picker <el-time-select
size="mini" placeholder="结束时间"
style="width: 200px"
type="date"
placeholder=""
v-model="formData.endTime" v-model="formData.endTime"
:picker-options="{
start: '00:00',
step: '00:15',
end: '24:00',
minTime: formData.startTime,
}"
> >
</el-date-picker> </el-time-select>
</el-form-item> </el-form-item>
</el-col> </el-col>
</el-row> </el-row>
...@@ -162,14 +169,12 @@ export default { ...@@ -162,14 +169,12 @@ export default {
name: '自然通风', name: '自然通风',
src: require('../../home/image/fan_icon.png'), src: require('../../home/image/fan_icon.png'),
icon: 'iconfont icon-feng' icon: 'iconfont icon-feng'
}, },
{ {
id: 2, id: 2,
name: '机械通风', name: '机械通风',
src: require('../../home/image/fan_icon.png'), src: require('../../home/image/fan_icon.png'),
icon: 'iconfont icon-feng2' icon: 'iconfont icon-feng2'
}, },
{ {
id: 3, id: 3,
......
src/pages/kb/power/page.vue
View file @ 37766bda
...@@ -21,33 +21,26 @@ ...@@ -21,33 +21,26 @@
</div> </div>
<div> <div>
<el-form :inline="true"> <el-form :inline="true">
<el-row> <el-form-item label="设备名称：">
<el-col :span="7"> <el-input size="mini" placeholder=""></el-input>
<el-form-item label="设备名称："> </el-form-item>
<el-input size="mini" placeholder=""></el-input>
</el-form-item> <el-form-item label="设备编号：">
</el-col> <el-input size="mini" placeholder=""></el-input>
<el-col :span="7"> </el-form-item>
<el-form-item label="设备编号：">
<el-input size="mini" placeholder=""></el-input> <el-form-item label="运行状态：">
</el-form-item> <el-select size="mini" placeholder="">
</el-col> <el-option label="正常" value="shanghai"></el-option>
<el-col :span="7"> <el-option label="不正常" value="beijing"></el-option>
<el-form-item label="运行状态："> </el-select>
<el-select size="mini" placeholder=""> </el-form-item>
<el-option label="正常" value="shanghai"></el-option>
<el-option label="不正常" value="beijing"></el-option> <el-form-item>
</el-select> <el-button icon="el-icon-search" size="mini" type="primary"
</el-form-item> >查询</el-button
</el-col> >
<el-col :span="3"> </el-form-item>
<el-form-item>
<el-button icon="el-icon-search" size="mini" type="primary"
>查询</el-button
>
</el-form-item>
</el-col>
</el-row>
</el-form> </el-form>
</div> </div>
......
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