Skip to content

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

提交

parent 69a8b2e8
Hide whitespace changes
Inline Side-by-side
Showing with 127 additions and 64 deletions
src/pages/eq/hall/page.vue
View file @ f27bf4f0
......@@ -3,32 +3,41 @@
<cardList cardListTitle="候车大厅控制">
<div slot="content">
<div>
<el-form :inline="true" :model="formData" label-width="100">
<el-row :gutter="10">
<el-col :span="12">
<el-form-item label="节能模式：">
<div class="switch-warp" style='transform: translateY(7px);'>
<div :class="[formData.saving == 1?'on':'']" @click="handleSwitch(1)">人工</div>
<div :class="[formData.saving == 2?'on':'']" @click="handleSwitch(2)">节能</div>
</div>
</el-form-item>
<span class="btn-group">
<el-form-item label="">
<el-button type="primary" size="mini">
<img src="../../home/image/sun_icon.png" alt="">
自然通风
</el-button>
<el-button type="primary" size="mini">
<img src="../../home/image/fan_icon.png" alt="">
机械通风
</el-button>
<el-button type="primary" size="mini">
<img src="../../home/image/nan_fan_icon.png" alt="">
供暖
</el-button>
<div class="switch-warp" style="transform: translateY(7px)">
<div
:class="[formData.saving == 1 ? 'on' : '']"
@click="handleSwitch(1)"
>
人工
</div>
<div
:class="[formData.saving == 2 ? 'on' : '']"
@click="handleSwitch(2)"
>
节能
</div>
</div>
</el-form-item>
</span>
<span class="btn-group">
<el-form-item label="">
<el-button
type="primary"
size="mini"
@click="currentId = item.id"
v-for="item in typeList"
:key="item.id"
:class="[item.id == currentId ? 'isActive' : '' , item.icon]"
>
<!-- <img :src="item.src" alt="" /> -->
{{ item.name }}
</el-button>
</el-form-item>
</span>
</el-col>
<el-col :span="24">
<el-form-item label="温度设定：">
......@@ -39,41 +48,72 @@
</el-form-item>
<el-form-item label="定时功能启止时间：">
<el-date-picker size="mini" style="width: 200px" type="date" placeholder="" v-model="formData.startTime">
<el-date-picker
size="mini"
style="width: 200px"
type="date"
placeholder=""
v-model="formData.startTime"
>
</el-date-picker>
<span style="padding: 0 10px">至</span>
<el-date-picker size="mini" style="width: 200px" type="date" placeholder="" v-model="formData.endTime">
<el-date-picker
size="mini"
style="width: 200px"
type="date"
placeholder=""
v-model="formData.endTime"
>
</el-date-picker>
</el-form-item>
</el-col>
</el-row>
</el-form>
</div>
<!-- tabs -->
<div style="margin-bottom: 20px">
<!-- <en-tabs :tabList="tabList"></en-tabs> -->
<div>
<el-tabs class="en-tabs" v-model="activeTab">
<el-tab-pane :label="item.label" :name="item.value" v-for="(item, index) in tabList" :key="index"></el-tab-pane>
<el-tab-pane
:label="item.label"
:name="item.value"
v-for="(item, index) in tabList"
:key="index"
></el-tab-pane>
</el-tabs>
</div>
</div>
<!-- table -->
<enTable :tableData="tableData" :tableColums="tableColums" :isShowOp="true" isShowPage="true">
<template v-slot:operation='scope'>
<el-button type="text" @click="statusHandle" >开启</el-button>
<enTable
:tableData="tableData"
:tableColums="tableColums"
:isShowOp="true"
isShowPage="true"
>
<template v-slot:operation="scope">
<el-button type="text" @click="statusHandle">开启</el-button>
<el-button type="text" @click="statusHandle">关闭</el-button>
<el-button type="text" @click="statusHandle" v-if="activeTab=='01'">故障复位</el-button>
<el-button type="text" @click="handleBtnClick" v-if="activeTab!='01'">设置频率</el-button>
<el-button
type="text"
@click="statusHandle"
v-if="activeTab == '01'"
>故障复位</el-button
>
<el-button
type="text"
@click="handleBtnClick"
v-if="activeTab != '01'"
>设置频率</el-button
>
</template>
</enTable>
</div>
</cardList>
<hall-modal v-on:cancelhandle="cancelhandle" :hallModalVisible="hallModalVisible"></hall-modal>
<hall-modal
v-on:cancelhandle="cancelhandle"
:hallModalVisible="hallModalVisible"
></hall-modal>
</div>
</template>
<script>
......@@ -116,6 +156,29 @@ export default {
},
data() {
return {
typeList: [
{
id: 1,
name: '自然通风',
src: require('../../home/image/fan_icon.png'),
icon: 'el-icon-wind-power'
},
{
id: 2,
name: '机械通风',
src: require('../../home/image/fan_icon.png'),
icon: 'el-icon-cpu'
},
{
id: 3,
name: '供暖',
src: require('../../home/image/nan_fan_icon.png'),
icon: 'el-icon-sunny'
}
],
currentId: 1,
activeTab: '01',
tableData: tableDataOne,
tableColums: tableColumsOne,
......@@ -148,9 +211,7 @@ export default {
handleBtnClick() {
this.hallModalVisible = true
},
statusHandle() {
},
statusHandle() {},
handleSwitch(state) {
this.formData.saving = state
}
......@@ -177,33 +238,35 @@ export default {
}
}
.switch-warp {
width: 93px;
height: 26px;
font-size: 12px;
line-height: 25px;
overflow: hidden;
.switch-warp {
width: 93px;
height: 26px;
font-size: 12px;
line-height: 25px;
overflow: hidden;
border-radius: 13px;
background: #d3d3d3;
border: 1px solid rgba(0, 0, 0, 0.03);
box-shadow: 0px 1px 0px 1px rgba(255, 255, 255, 0.25),
0px 2px 4px 0px rgba(0, 0, 0, 0.1);
div {
width: 45px;
height: 24px;
line-height: 24px;
float: left;
text-align: center;
cursor: pointer;
}
div.on {
background: #4cb527;
color: #fff;
border-radius: 13px;
background: #d3d3d3;
border: 1px solid rgba(0, 0, 0, 0.03);
box-shadow: 0px 1px 0px 1px rgba(255, 255, 255, 0.25),
0px 2px 4px 0px rgba(0, 0, 0, 0.1);
div {
width: 45px;
height: 24px;
line-height: 24px;
float: left;
text-align: center;
cursor: pointer;
}
div.on {
background: #4CB527;
color: #fff;
border-radius: 13px;
border: 1px solid rgba(23, 41, 71, 0.02);
box-shadow: 0px 1px 0px 0px rgba(255, 255, 255, 0.3),
0px 2px 0px 0px rgba(255, 255, 255, 0.15);
}
border: 1px solid rgba(23, 41, 71, 0.02);
box-shadow: 0px 1px 0px 0px rgba(255, 255, 255, 0.3),
0px 2px 0px 0px rgba(255, 255, 255, 0.15);
}
}
.isActive {
background: #4cb527 !important;
}
</style>
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