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