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 @@ ...@@ -3,32 +3,41 @@
<cardList cardListTitle="候车大厅控制"> <cardList cardListTitle="候车大厅控制">
<div slot="content"> <div slot="content">
<div> <div>
<el-form :inline="true" :model="formData" label-width="100"> <el-form :inline="true" :model="formData" label-width="100">
<el-row :gutter="10"> <el-row :gutter="10">
<el-col :span="12"> <el-col :span="12">
<el-form-item label="节能模式："> <el-form-item label="节能模式：">
<div class="switch-warp" style='transform: translateY(7px);'> <div class="switch-warp" style="transform: translateY(7px)">
<div :class="[formData.saving == 1?'on':'']" @click="handleSwitch(1)">人工</div> <div
<div :class="[formData.saving == 2?'on':'']" @click="handleSwitch(2)">节能</div> :class="[formData.saving == 1 ? 'on' : '']"
</div> @click="handleSwitch(1)"
</el-form-item> >
<span class="btn-group"> 人工
<el-form-item label=""> </div>
<el-button type="primary" size="mini"> <div
<img src="../../home/image/sun_icon.png" alt=""> :class="[formData.saving == 2 ? 'on' : '']"
自然通风 @click="handleSwitch(2)"
</el-button> >
<el-button type="primary" size="mini"> 节能
<img src="../../home/image/fan_icon.png" alt=""> </div>
机械通风 </div>
</el-button>
<el-button type="primary" size="mini">
<img src="../../home/image/nan_fan_icon.png" alt="">
供暖
</el-button>
</el-form-item> </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>
<el-col :span="24"> <el-col :span="24">
<el-form-item label="温度设定："> <el-form-item label="温度设定：">
...@@ -39,41 +48,72 @@ ...@@ -39,41 +48,72 @@
</el-form-item> </el-form-item>
<el-form-item label="定时功能启止时间："> <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> </el-date-picker>
<span style="padding: 0 10px">至</span> <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-date-picker>
</el-form-item> </el-form-item>
</el-col> </el-col>
</el-row> </el-row>
</el-form> </el-form>
</div> </div>
<!-- tabs --> <!-- tabs -->
<div style="margin-bottom: 20px"> <div style="margin-bottom: 20px">
<!-- <en-tabs :tabList="tabList"></en-tabs> --> <!-- <en-tabs :tabList="tabList"></en-tabs> -->
<div> <div>
<el-tabs class="en-tabs" v-model="activeTab"> <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> </el-tabs>
</div> </div>
</div> </div>
<!-- table --> <!-- table -->
<enTable :tableData="tableData" :tableColums="tableColums" :isShowOp="true" isShowPage="true"> <enTable
<template v-slot:operation='scope'> :tableData="tableData"
<el-button type="text" @click="statusHandle" >开启</el-button> :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">关闭</el-button>
<el-button type="text" @click="statusHandle" v-if="activeTab=='01'">故障复位</el-button> <el-button
<el-button type="text" @click="handleBtnClick" v-if="activeTab!='01'">设置频率</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> </template>
</enTable> </enTable>
</div> </div>
</cardList> </cardList>
<hall-modal v-on:cancelhandle="cancelhandle" :hallModalVisible="hallModalVisible"></hall-modal> <hall-modal
v-on:cancelhandle="cancelhandle"
:hallModalVisible="hallModalVisible"
></hall-modal>
</div> </div>
</template> </template>
<script> <script>
...@@ -116,6 +156,29 @@ export default { ...@@ -116,6 +156,29 @@ export default {
}, },
data() { data() {
return { 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', activeTab: '01',
tableData: tableDataOne, tableData: tableDataOne,
tableColums: tableColumsOne, tableColums: tableColumsOne,
...@@ -148,9 +211,7 @@ export default { ...@@ -148,9 +211,7 @@ export default {
handleBtnClick() { handleBtnClick() {
this.hallModalVisible = true this.hallModalVisible = true
}, },
statusHandle() { statusHandle() {},
},
handleSwitch(state) { handleSwitch(state) {
this.formData.saving = state this.formData.saving = state
} }
...@@ -177,33 +238,35 @@ export default { ...@@ -177,33 +238,35 @@ export default {
} }
} }
.switch-warp { .switch-warp {
width: 93px; width: 93px;
height: 26px; height: 26px;
font-size: 12px; font-size: 12px;
line-height: 25px; line-height: 25px;
overflow: hidden; 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; border-radius: 13px;
background: #d3d3d3; border: 1px solid rgba(23, 41, 71, 0.02);
border: 1px solid rgba(0, 0, 0, 0.03); box-shadow: 0px 1px 0px 0px rgba(255, 255, 255, 0.3),
box-shadow: 0px 1px 0px 1px rgba(255, 255, 255, 0.25), 0px 2px 0px 0px rgba(255, 255, 255, 0.15);
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);
}
} }
}
.isActive {
background: #4cb527 !important;
}
</style> </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