joylink/rt-sim-training-client
6
0
Fork 0
Code Issues 3 Pull Requests Actions Packages Projects Releases Wiki Activity

iscs 小系统模式表

Browse Source
This commit is contained in:
fan 2020-06-09 14:39:32 +08:00
parent 0902d10f4b
commit 4b67f81cf0
9 changed files with 1884 additions and 609 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
src/utils/baseUrl.js
View File

@ -2,11 +2,11 @@ export function getBaseUrl() {
let BASE_API;
if (process.env.NODE_ENV === 'development') {
// BASE_API = 'https://joylink.club/jlcloud';
BASE_API = 'https://test.joylink.club/jlcloud';
// BASE_API = 'https://test.joylink.club/jlcloud';
// BASE_API = 'http://192.168.3.5:9000'; // 袁琪
// BASE_API = 'http://192.168.3.6:9000'; // 旭强
// BASE_API = 'http://192.168.3.41:9000'; // 张赛
// BASE_API = 'http://192.168.3.82:9000'; // 杜康
BASE_API = 'http://192.168.3.82:9000'; // 杜康
// BASE_API = 'http://b29z135112.zicp.vip';
// BASE_API = 'http://2925963m2a.zicp.vip'; // 杜康
// BASE_API = 'http://2i38984j47.qicp.vip'; // 张赛

636
src/views/iscs/iscsSystem/config/bas/controlBAS.vue
View File

@ -2,247 +2,12 @@
<div class="control-bas-box">
<div class="title-name">{{ $route.query.stationName + modeName }}</div>
<div class="control-bas">
<el-table v-if="mode==='bigSystem'" ref="table1" :data="tableData" :header-row-style="tableTitleStyle" :cell-style="rowStyle" :span-method="objectSpanMethod" style="float: left;">
<el-table-column label="日期" width="300">
<template slot="header">
<div class="title-0">全年运行工况</div>
<div class="title-0">运行模式号</div>
<div class="title-0">模式状态</div>
<div class="title-0">火灾指示灯:</div>
</template>
<template slot-scope="scope">
<div v-if="scope.$index == 0" class="table-0-top">
<div class="left">
<div>正常</div>
<div>运行</div>
</div>
<div class="right">
<div class="button-box" style="width: 100%;height: 28px;line-height: 28px;" @click="showModeDialog(0)">小新风空调</div>
<div class="button-box" style="width: 100%;height: 28px;line-height: 28px;" @click="showModeDialog(1)">全新风空调</div>
<div class="button-box" style="width: 100%;height: 28px;line-height: 28px;" @click="showModeDialog(2)">非空调季节</div>
<div class="button-box" style="width: 100%;height: 28px;line-height: 28px;" @click="showModeDialog(3)">冬季模式</div>
</div>
</div>
<div v-if="scope.$index == 4" class="table-4-top">
<div class="left">
<div>火灾</div>
<div>模式</div>
</div>
<div class="right">
<div class="button-box" style="width: 100%;height: 28px;line-height: 28px;" @click="showModeDialog(4)">站厅公共区火灾</div>
<div class="button-box" style="width: 100%;height: 28px;line-height: 28px;" @click="showModeDialog(5)">站台公共区火灾</div>
</div>
<div class="button-box" style="width: 100%;height: 28px;line-height: 28px;" @click="showModeDialog(6)">非火灾工况突发事件</div>
<div class="button-box" style="width: 100%;height: 28px;line-height: 28px;" @click="showModeDialog(7)">全停模式</div>
</div>
<div v-if="scope.$index == 8" class="table-8-top">设备实际运行状态</div>
<div v-if="scope.$index == 9" class="table-9-top">状态比较</div>
</template>
</el-table-column>
<el-table-column prop="code" width="120">
<template slot="header">
<div style="width: 100%">模式</div>
<div style="width: 100%">编号</div>
</template>
</el-table-column>
<el-table-column label="大系统模式表">
<el-table-column label="新风机">
<el-table-column prop="faf1" label="FAF-1" width="120" />
<el-table-column prop="faf2" label="FAF-2" width="120" />
</el-table-column>
<el-table-column label="组合式空调器">
<el-table-column prop="ahu1" label="AHU-1" width="120" />
<el-table-column prop="ahu2" label="AHU-2" width="120" />
</el-table-column>
<el-table-column label="回排风机">
<el-table-column prop="raf1" label="RAF/SEF-1" width="120" />
<el-table-column prop="raf2" label="RAF/SEF-2" width="120" />
</el-table-column>
<el-table-column label="风机1">
<el-table-column prop="md1" label="MD-1" width="120" />
<el-table-column prop="md1" label="MD-2" width="120" />
<el-table-column prop="md1" label="MD-3" width="120" />
<el-table-column prop="md1" label="MD-4" width="120" />
<el-table-column prop="md1" label="MD-5" width="120" />
<el-table-column prop="md1" label="MD-6" width="120" />
<el-table-column prop="md1" label="MD-7" width="120" />
<el-table-column prop="md1" label="MD-8" width="120" />
<el-table-column prop="md1" label="MD-9" width="120" />
<el-table-column prop="md1" label="MD-10" width="120" />
<el-table-column prop="md1" label="MD-11" width="120" />
<el-table-column prop="md1" label="MD-12" width="120" />
<el-table-column prop="md1" label="MD-13" width="120" />
</el-table-column>
</el-table-column>
</el-table>
<el-table v-else-if="mode === 'smallSystem1'" ref="table2" :data="tableData1" :header-row-style="tableTitleStyle" :cell-style="rowStyle" :span-method="objectSpanMethod1" style="float: left;">
<el-table-column type="index" width="20" class-name="index-column">
<template slot="header">
<div style="width: 100%;height: 26px;background: #FFF" />
<div class="index-column-cell">1</div>
<div class="index-column-cell">2</div>
<div class="index-column-cell">3</div>
</template>
<template slot-scope="scope">
<div class="index-column-cell">{{ scope.$index + 4 }}</div>
</template>
</el-table-column>
<el-table-column width="300">
<template slot="header">
<div style="font-size: 0;text-align: center;">
<div class="index-row-cell">1</div>
<div class="index-row-cell">2</div>
<div class="index-row-cell">3</div>
</div>
<div class="title-0">全年运行工况</div>
<div class="title-0">运行模式号</div>
<div class="title-0">模式状态</div>
<div class="title-0">火灾指示灯:</div>
</template>
<template slot-scope="scope">
<div v-if="scope.$index == 0" class="table-0-top">
<div class="left" style="width: 100px;">
<div>正</div>
<div>常</div>
<div>运</div>
<div>行</div>
</div>
<div class="right" style="width: 195px;">
<div class="button-box" style="width: 100%;height: 28px;line-height: 28px;" @click="showModeDialog(0)">小新风空调</div>
<div class="button-box" style="width: 100%;height: 28px;line-height: 28px;" @click="showModeDialog(1)">小新风空调</div>
<div class="button-box" style="width: 100%;height: 28px;line-height: 28px;" @click="showModeDialog(2)">非空调工况</div>
<div class="button-box" style="width: 100%;height: 27px;line-height: 27px;" @click="showModeDialog(3)">35KV开关柜室事故排风</div>
</div>
</div>
<div v-if="scope.$index == 4" style="display: flex;">
<div style="width: 100px;display: inline-block;margin: auto;">
<div>火</div>
<div>灾</div>
<div>模</div>
<div>式</div>
</div>
<div style="width: 100px;display: inline-block;">
<div style="height: 56px; border: 1px solid #FFF;">控制室</div>
<div style="height: 56px; border: 1px solid #FFF;">
<div>35KV</div>
<div>开关柜室</div>
</div>
<div style="height: 56px; border: 1px solid #FFF;">
<div>整流变频</div>
<div>压器室1</div>
</div>
<div style="height: 56px; border: 1px solid #FFF;">
<div>整流变频</div>
<div>压器室2</div>
</div>
<div style="height: 56px; border: 1px solid #FFF;">
<div>直流开</div>
<div>关柜室</div>
</div>
<div style="height: 56px; border: 1px solid #FFF;">
<div>0.4KV</div>
<div>低压柜室</div>
</div>
</div>
<div style="width: 100px;display: inline-block;">
<div class="button-box" style="width: 100%;height: 28px;line-height: 28px;" @click="showModeDialog(4)">灭火</div>
<div class="button-box" style="width: 100%;height: 28px;line-height: 28px;" @click="showModeDialog(5)">排气</div>
<div class="button-box" style="width: 100%;height: 28px;line-height: 28px;" @click="showModeDialog(4)">灭火</div>
<div class="button-box" style="width: 100%;height: 28px;line-height: 28px;" @click="showModeDialog(5)">排气</div>
<div class="button-box" style="width: 100%;height: 28px;line-height: 28px;" @click="showModeDialog(4)">灭火</div>
<div class="button-box" style="width: 100%;height: 28px;line-height: 28px;" @click="showModeDialog(5)">排气</div>
<div class="button-box" style="width: 100%;height: 28px;line-height: 28px;" @click="showModeDialog(4)">灭火</div>
<div class="button-box" style="width: 100%;height: 28px;line-height: 28px;" @click="showModeDialog(5)">排气</div>
<div class="button-box" style="width: 100%;height: 28px;line-height: 28px;" @click="showModeDialog(4)">灭火</div>
<div class="button-box" style="width: 100%;height: 28px;line-height: 28px;" @click="showModeDialog(5)">排气</div>
<div class="button-box" style="width: 100%;height: 28px;line-height: 28px;" @click="showModeDialog(4)">灭火</div>
<div class="button-box" style="width: 100%;height: 27px;line-height: 27px;" @click="showModeDialog(5)">排气</div>
</div>
</div>
<div v-if="scope.$index === 16" style="height: 28px;line-height: 28px;">设备实际运行状态</div>
<div v-if="scope.$index === 17">状态比较</div>
</template>
</el-table-column>
<el-table-column :key="11" prop="code" label="模式编号" width="90">
<template slot="header">
<div style="font-size: 0;text-align: center;height: 100%;">
<div class="index-row-cell" style="width: 90px;margin-left: -1px;">4</div>
<div style="font-size: 14px;height: 80px;line-height: 80px;">模式编号</div>
</div>
</template>
</el-table-column>
<el-table-column prop="smallSystem1">
<template slot="header">
<div style="font-size: 0;text-align: center;height: 100%;">
<div class="index-row-cell" style="width: 90px;">5</div>
<div class="index-row-cell" style="width: 90px;">6</div>
<div class="index-row-cell" style="width: 90px;">7</div>
<div class="index-row-cell" style="width: 90px;">8</div>
<div class="index-row-cell" style="width: 90px;">9</div>
<div class="index-row-cell" style="width: 90px;">10</div>
<div class="index-row-cell" style="width: 90px;">11</div>
<div class="index-row-cell" style="width: 89px;">12</div>
<div style="font-size: 14px;">小系统1</div>
</div>
</template>
<el-table-column prop="airConditioner" label="空调机">
<el-table-column prop="ahu1" width="90" label="AHU-B101" />
</el-table-column>
<el-table-column prop="exhaustFan" label="回排风机">
<el-table-column prop="raf1" width="90" label="RAF-B101" />
</el-table-column>
<el-table-column prop="flowControl" label="电动风量调节阀">
<el-table-column prop="md1" width="90" label="MD-B101" />
<el-table-column prop="md2" width="90" label="MD-B102" />
<el-table-column prop="md3" width="90" label="MD-B103" />
<el-table-column prop="md4" width="90" label="MD-B104" />
<el-table-column prop="md5" width="90" label="MD-B105" />
<el-table-column prop="md6" width="90" label="MD-B106" />
</el-table-column>
</el-table-column>
<el-table-column prop="smallSystem2">
<template slot="header">
<div style="font-size: 0;text-align: center;height: 100%;">
<div class="index-row-cell" style="width: 90px;">13</div>
<div class="index-row-cell" style="width: 99px;">14</div>
<div style="font-size: 14px;">小系统2</div>
</div>
</template>
<el-table-column prop="exhaustFan" label="排风机">
<el-table-column prop="eaf" width="90" label="EAF-B201" />
</el-table-column>
<el-table-column prop="flowControl" label="电动风量调节阀">
<el-table-column prop="md7" width="100" label="MD-B201" />
</el-table-column>
</el-table-column>
<el-table-column prop="smallSystem4">
<template slot="header">
<div style="font-size: 0;text-align: center;height: 100%;">
<div class="index-row-cell" style="width: 90px;">15</div>
<div class="index-row-cell" style="width: 90px;">16</div>
<div class="index-row-cell" style="width: 90px;">17</div>
<div class="index-row-cell" style="width: 90px;">18</div>
<div class="index-row-cell" style="width: 90px;">19</div>
<div class="index-row-cell" style="width: 90px;">20</div>
<div class="index-row-cell" style="width: 89px;">21</div>
<div style="font-size: 14px;">小系统4</div>
</div>
</template>
<el-table-column prop="airConditioner" label="空调机">
<el-table-column prop="ahu2" width="90" label="AHU-B401" />
</el-table-column>
<el-table-column prop="exhaustFan" label="回排风机">
<el-table-column prop="raf2" width="90" label="RAF-B401" />
</el-table-column>
<el-table-column prop="flowControl" label="电动风量调节阀">
<el-table-column prop="md8" width="90" label="MD-B401" />
<el-table-column prop="md9" width="90" label="MD-B402" />
<el-table-column prop="md10" width="90" label="MD-B403" />
<el-table-column prop="md11" width="90" label="MD-B404" />
<el-table-column prop="md12" width="90" label="MD-B405" />
</el-table-column>
</el-table-column>
</el-table>
<big-system-table v-if="mode === 'bigSystem'" @showModeDialog="showModeDialog" />
<small-system1-table v-else-if="mode === 'smallSystem1'" @showModeDialog="showModeDialog" />
<small-system2-table v-else-if="mode === 'smallSystem2'" @showModeDialog="showModeDialog" />
<ventilation v-else-if="mode === 'ventilation'" @showModeDialog="showModeDialog" />
<ventilation1 v-else-if="mode=== 'ventilation1'" @showModeDialog="showModeDialog" />
<ventilation2 v-else-if="mode === 'ventilation2'" @showModeDialog="showModeDialog" />
</div>
<div style="width: 100%;display:flex;justify-content:space-around;">
<div class="button-box" style="padding: 5px;" @click="switchedSystems('bigSystem')">至大系统模式表</div>
@ -254,153 +19,30 @@
<div class="button-box" style="padding: 5px;" @click="switchedSystems('ventilation3')">至隧道通风系模式表3</div>
<div class="button-box" style="padding: 5px;" @click="switchedSystems('lightingSystem')">至照明模式表</div>
</div>
<el-dialog title="" :visible.sync="dialogVisible" width="600px" class="iscs_device_control_dialog">
<div>
<div class="dialog-box">
<div class="title">模式类别</div>
<div class="content">
<div class="stand-title">{{ modeModel.stationName }}</div>
<div class="stand-control">{{ modeModel.controlName }}</div>
</div>
</div>
<div class="dialog-box">
<div class="title">启动模式号</div>
<div class="content">
<div class="model">{{ modeModel.modeCode }}</div>
</div>
</div>
</div>
<div class="dialog-footer" style="margin-top: 20px; text-align: center;">
<el-button style="margin-right: 13px;" @click="dialogVisible = false">取 消</el-button>
<el-button type="primary" @click="dialogVisible = false">执 行</el-button>
</div>
</el-dialog>
<mode-type ref="modeType" />
</div>
</template>
<script>
import BigSystemTable from './controlChild/bigSystemTable';
import SmallSystem1Table from './controlChild/smallSystem1Table';
import SmallSystem2Table from './controlChild/smallSystem2Table';
import ModeType from './controlChild/modeType';
import Ventilation from './controlChild/ventilation';
import Ventilation1 from './controlChild/ventilation1';
import Ventilation2 from './controlChild/ventilation2';
export default {
components: {
BigSystemTable,
SmallSystem1Table,
ModeType,
SmallSystem2Table,
Ventilation,
Ventilation1,
Ventilation2
},
data() {
return {
mode:'bigSystem',
dialogVisible: false,
modeModel: {
stationName: this.$route.query.stationName,
controlName: '系统模式控制',
modeCode: ''
},
tableTitleStyle: {'text-align': 'center', 'height': '28px', 'padding': '0', 'background': '#45607B'},
rowStyle: {'text-align': 'center', 'height': '28px', 'padding': '0', 'background': '#45607B' },
tableData: [{
code: '101',
faf1: '打开',
faf2: '打开',
ahu1: '打开',
ahu2: '打开',
raf1: '打开',
raf2: '打开',
md1: '关闭'
}, {
code: '102',
faf1: '打开',
faf2: '打开',
ahu1: '打开',
ahu2: '打开',
raf1: '打开',
raf2: '打开',
md1: '打开'
}, {
code: '103',
faf1: '打开',
faf2: '打开',
ahu1: '打开',
ahu2: '打开',
raf1: '打开',
raf2: '打开',
md1: '关闭'
}, {
code: '104',
faf1: '打开',
faf2: '关闭',
ahu1: '打开',
ahu2: '打开',
raf1: '打开',
raf2: '打开',
md1: '打开'
}, {
code: '105',
faf1: '打开',
faf2: '打开',
ahu1: '打开',
ahu2: '打开',
raf1: '打开',
raf2: '打开',
md1: '关闭'
}, {
code: '106',
faf1: '打开',
faf2: '关闭',
ahu1: '打开',
ahu2: '打开',
raf1: '打开',
raf2: '打开',
md1: '打开'
}, {
code: '107',
faf1: '打开',
faf2: '打开',
ahu1: '打开',
ahu2: '打开',
raf1: '打开',
raf2: '打开',
md1: '打开'
}, {
code: '108',
faf1: '打开',
faf2: '关闭',
ahu1: '打开',
ahu2: '打开',
raf1: '打开',
raf2: '打开',
md1: '打开'
}, {
code: '',
faf1: '打开',
faf2: '打开',
ahu1: '打开',
ahu2: '打开',
raf1: '打开',
raf2: '打开',
md1: '打开'
}, {
code: '',
faf1: '打开',
faf2: '打开',
ahu1: '打开',
ahu2: '打开',
raf1: '打开',
raf2: '打开',
md1: '打开'
}],
tableData1: [
{code: '301', ahu1: '打开', raf1: '打开', md1: '半开', md2: '半开', md3: '半开', md4: '打开', md5: '打开', md6: '关闭', eaf: '打开', md7: '打开', ahu2: '打开', raf2: '打开', md8: '打开', md9: '打开', md10: '打开', md11: '打开', md12: '打开'},
{code: '302', ahu1: '打开', raf1: '打开', md1: '半开', md2: '半开', md3: '半开', md4: '打开', md5: '打开', md6: '关闭', eaf: '打开', md7: '打开', ahu2: '打开', raf2: '打开', md8: '打开', md9: '打开', md10: '打开', md11: '打开', md12: '打开'},
{code: '303', ahu1: '打开', raf1: '打开', md1: '半开', md2: '半开', md3: '半开', md4: '打开', md5: '打开', md6: '关闭', eaf: '打开', md7: '打开', ahu2: '打开', raf2: '打开', md8: '打开', md9: '打开', md10: '打开', md11: '打开', md12: '打开'},
{code: '304', ahu1: '打开', raf1: '打开', md1: '半开', md2: '半开', md3: '半开', md4: '打开', md5: '打开', md6: '关闭', eaf: '打开', md7: '打开', ahu2: '打开', raf2: '打开', md8: '打开', md9: '打开', md10: '打开', md11: '打开', md12: '打开'},
{code: '305', ahu1: '打开', raf1: '打开', md1: '半开', md2: '半开', md3: '半开', md4: '打开', md5: '打开', md6: '关闭', eaf: '打开', md7: '打开', ahu2: '打开', raf2: '打开', md8: '打开', md9: '打开', md10: '打开', md11: '打开', md12: '打开'},
{code: '306', ahu1: '打开', raf1: '打开', md1: '半开', md2: '半开', md3: '半开', md4: '打开', md5: '打开', md6: '关闭', eaf: '打开', md7: '打开', ahu2: '打开', raf2: '打开', md8: '打开', md9: '打开', md10: '打开', md11: '打开', md12: '打开'},
{code: '307', ahu1: '打开', raf1: '打开', md1: '半开', md2: '半开', md3: '半开', md4: '打开', md5: '打开', md6: '关闭', eaf: '打开', md7: '打开', ahu2: '打开', raf2: '打开', md8: '打开', md9: '打开', md10: '打开', md11: '打开', md12: '打开'},
{code: '308', ahu1: '打开', raf1: '打开', md1: '半开', md2: '半开', md3: '半开', md4: '打开', md5: '打开', md6: '关闭', eaf: '打开', md7: '打开', ahu2: '打开', raf2: '打开', md8: '打开', md9: '打开', md10: '打开', md11: '打开', md12: '打开'},
{code: '309', ahu1: '打开', raf1: '打开', md1: '半开', md2: '半开', md3: '半开', md4: '打开', md5: '打开', md6: '关闭', eaf: '打开', md7: '打开', ahu2: '打开', raf2: '打开', md8: '打开', md9: '打开', md10: '打开', md11: '打开', md12: '打开'},
{code: '310', ahu1: '打开', raf1: '打开', md1: '半开', md2: '半开', md3: '半开', md4: '打开', md5: '打开', md6: '关闭', eaf: '打开', md7: '打开', ahu2: '打开', raf2: '打开', md8: '打开', md9: '打开', md10: '打开', md11: '打开', md12: '打开'},
{code: '311', ahu1: '打开', raf1: '打开', md1: '半开', md2: '半开', md3: '半开', md4: '打开', md5: '打开', md6: '关闭', eaf: '打开', md7: '打开', ahu2: '打开', raf2: '打开', md8: '打开', md9: '打开', md10: '打开', md11: '打开', md12: '打开'},
{code: '312', ahu1: '打开', raf1: '打开', md1: '半开', md2: '半开', md3: '半开', md4: '打开', md5: '打开', md6: '关闭', eaf: '打开', md7: '打开', ahu2: '打开', raf2: '打开', md8: '打开', md9: '打开', md10: '打开', md11: '打开', md12: '打开'},
{code: '313', ahu1: '打开', raf1: '打开', md1: '半开', md2: '半开', md3: '半开', md4: '打开', md5: '打开', md6: '关闭', eaf: '打开', md7: '打开', ahu2: '打开', raf2: '打开', md8: '打开', md9: '打开', md10: '打开', md11: '打开', md12: '打开'},
{code: '314', ahu1: '打开', raf1: '打开', md1: '半开', md2: '半开', md3: '半开', md4: '打开', md5: '打开', md6: '关闭', eaf: '打开', md7: '打开', ahu2: '打开', raf2: '打开', md8: '打开', md9: '打开', md10: '打开', md11: '打开', md12: '打开'},
{code: '315', ahu1: '打开', raf1: '打开', md1: '半开', md2: '半开', md3: '半开', md4: '打开', md5: '打开', md6: '关闭', eaf: '打开', md7: '打开', ahu2: '打开', raf2: '打开', md8: '打开', md9: '打开', md10: '打开', md11: '打开', md12: '打开'},
{code: '316', ahu1: '打开', raf1: '打开', md1: '半开', md2: '半开', md3: '半开', md4: '打开', md5: '打开', md6: '关闭', eaf: '打开', md7: '打开', ahu2: '打开', raf2: '打开', md8: '打开', md9: '打开', md10: '打开', md11: '打开', md12: '打开'},
{code: '', ahu1: '打开', raf1: '打开', md1: '半开', md2: '半开', md3: '半开', md4: '打开', md5: '打开', md6: '关闭', eaf: '打开', md7: '打开', ahu2: '打开', raf2: '打开', md8: '打开', md9: '打开', md10: '打开', md11: '打开', md12: '打开'},
{}
]
mode:'bigSystem'
};
},
computed: {
@ -433,74 +75,8 @@ export default {
}
},
methods: {
objectSpanMethod({ row, column, rowIndex, columnIndex }) {
if (columnIndex === 0) { // 只有第一行合并
if (rowIndex == 0 || rowIndex == 4) {
return {
rowspan: 4,
colspan: 1
};
} else if (rowIndex >= 8) {
return {
rowspan: 1,
colspan: 2
};
} else {
return {
rowspan: 0,
colspan: 0
};
}
}
if (columnIndex == 1) {
if (rowIndex >= 8) {
return {
rowspan: 0,
colspan: 0
};
}
}
},
objectSpanMethod1( {row, column, rowIndex, columnIndex}) {
if (columnIndex === 1) {
if (rowIndex === 0) {
return {
rowspan: 4,
colspan: 1
};
} else if (rowIndex === 4) {
return {
rowspan: 12,
colspan: 1
};
} else if (rowIndex === 16 || rowIndex === 17) {
return {
rowspan: 1,
colspan: 2
};
} else {
return {
rowspan: 0,
colspan: 0
};
}
} else if (columnIndex === 2) {
if (rowIndex === 16 || rowIndex === 17) {
return {
rowspan: 0,
colspan: 0
};
} else {
return {
rowspan: 1,
colspan: 1
};
}
}
},
showModeDialog(index) {
this.modeModel.modeCode = this.tableData[index].code;
this.dialogVisible = true;
showModeDialog(code) {
this.$refs.modeType.doShow(code);
},
switchedSystems(mode) {
this.mode = mode;
@ -517,36 +93,6 @@ export default {
text-align: left;
padding-left: 14px;
}
.table-0-top{
overflow: hidden;
.left{
float: left;
width: 40%;
display: flex;
flex-direction: column;
height: 110px;
justify-content: center;
}
.right{
float: right;
width: 60%;
}
}
.table-4-top{
overflow: hidden;
.left{
float: left;
height: 56px;
width: 40%;
display: flex;
flex-direction: column;
justify-content: center;
}
.right{
float: right;
width: 60%;
}
}
.button-box{
text-align: center;
background-color: #ccc;
@ -569,46 +115,6 @@ export default {
border-bottom: 1px solid #fff;
}
}
.dialog-box{
width: 100%;
overflow: hidden;
margin-bottom: 10px;
.title{
float: left;
width: 90px;
text-align: left;
color:#6F49FE;
font-size: 14px;
}
.content{
float: left;
width: 400px;
background: #efefef;
height: 40px;
padding-left: 15px;
.stand-title{
float: left;
margin-right: 50px;
height: 40px;
line-height: 40px;
color:#6F49FE;
font-size: 14px;
}
.stand-control{
float: left;
height: 40px;
line-height: 40px;
color:#6F49FE;
font-size: 14px;
}
.model{
height: 40px;
line-height: 40px;
color:#6F49FE;
font-size: 14px;
}
}
}
}
.control-bas{
margin: 30px;
@ -627,26 +133,6 @@ export default {
margin-top: 30px;
color: #56E5DE;
}
.index-column-cell {
text-align:center;
width: 100%;
height: 28px;
border-top: 1px solid #203244;
border-left: 2px solid #A3A3A3;
border-bottom: 1px solid #203244;
border-right: 1px solid #203244;
}
.index-row-cell {
width: 99px;
height: 20px;
font-size: 14px;
line-height: 20px;
display: inline-block;
border-top: 2px solid #A3A3A3;
border-left: 1px solid #203244;
border-bottom: 2px solid #203244;
border-right: 1px solid #203244;
}
/deep/{
.el-table--border{
background: #45607B;
@ -656,6 +142,9 @@ export default {
.index-column{
border: 0 !important;
}
.cyan-label{
color: #56E5DE;
}
.el-table th, .el-table tr{
background: #45607B;
color: #fff;
@ -682,70 +171,3 @@ export default {
}
}
</style>
<style>
.iscs_device_control_dialog .el-dialog .el-dialog__header {
width: 100%;
height: 30px;
background-image: linear-gradient(#F0DBCE,#ECB85E, #F0DBCE);
}
.iscs_device_control_dialog .el-dialog .el-dialog__headerbtn{
position: absolute;
top: 5px;
right: 10px;
padding: 0;
background: 0 0;
outline: 0;
cursor: pointer;
font-size: 16px;
border: 1px solid #FFF;
width: 20px;
height: 18px;
}
.iscs_device_control_dialog .el-dialog .el-dialog__body {
padding: 30px 20px;
color: #606266;
font-size: 14px;
word-break: break-all;
background: #CDC6C0;
}
.iscs_device_control_dialog .el-dialog .el-button {
display: inline-block;
line-height: 1;
white-space: nowrap;
cursor: pointer;
background: #CACACA;
border-top: 1px solid #3D3B39;
border-left: 1px solid #3D3B39;
border-bottom: 1px solid #847B77;
border-right: 1px solid #847B77;
color: #000;
-webkit-appearance: none;
text-align: center;
-webkit-box-sizing: border-box;
box-sizing: border-box;
outline: 0;
margin: 0;
-webkit-transition: .1s;
transition: .1s;
padding: 0;
font-weight: 500;
font-size: 12px;
height: 30px;
width: 70px;
border-radius: 0;
position: relative;
}
.iscs_device_control_dialog .el-dialog .el-button :before {
content: '';
width: 70px;
height: 30px;
border-top: 1px solid #FFF;
border-left: 1px solid #FFF;
position: absolute;
top: -2px;
left: -2px;
}
.iscs_device_control_dialog .el-dialog .el-button:hover {
background-image: linear-gradient(#E2E4E5,#D5D6D8,#E2E4E5);
}
</style>

221
src/views/iscs/iscsSystem/config/bas/controlChild/bigSystemTable.vue Normal file
View File

@ -0,0 +1,221 @@
<template>
<el-table ref="table1" class="table-box" :data="tableData" :header-row-style="tableTitleStyle" :cell-style="rowStyleFunction" :span-method="objectSpanMethod" style="float: left;">
<el-table-column label="日期" fixed width="300">
<template slot="header">
<div class="title-0">全年运行工况</div>
<div class="title-0">运行模式号</div>
<div class="title-0">模式状态</div>
<div class="title-0">火灾指示灯:</div>
</template>
<template slot-scope="scope">
<div v-if="scope.$index == 0" class="table-0-top">
<div class="left">
<div>正常</div>
<div>运行</div>
</div>
<div class="right">
<div class="button-box" style="width: 100%;height: 28px;line-height: 28px;" @click="showModeDialog(0)">小新风空调</div>
<div class="button-box" style="width: 100%;height: 28px;line-height: 28px;" @click="showModeDialog(1)">全新风空调</div>
<div class="button-box" style="width: 100%;height: 28px;line-height: 28px;" @click="showModeDialog(2)">非空调季节</div>
<div class="button-box" style="width: 100%;height: 28px;line-height: 28px;" @click="showModeDialog(3)">冬季模式</div>
</div>
</div>
<div v-if="scope.$index == 4" class="table-4-top">
<div class="left">
<div>火灾</div>
<div>模式</div>
</div>
<div class="right">
<div class="button-box" style="width: 100%;height: 28px;line-height: 28px;" @click="showModeDialog(4)">站厅公共区火灾</div>
<div class="button-box" style="width: 100%;height: 28px;line-height: 28px;" @click="showModeDialog(5)">站台公共区火灾</div>
</div>
<div class="button-box" style="width: 100%;height: 28px;line-height: 28px;" @click="showModeDialog(6)">非火灾工况突发事件</div>
<div class="button-box" style="width: 100%;height: 28px;line-height: 28px;" @click="showModeDialog(7)">全停模式</div>
</div>
<div v-if="scope.$index == 8" class="table-8-top">设备实际运行状态</div>
<div v-if="scope.$index == 9" class="table-9-top">状态比较</div>
</template>
</el-table-column>
<el-table-column prop="code" width="120">
<template slot="header">
<div style="width: 100%">模式</div>
<div style="width: 100%">编号</div>
</template>
</el-table-column>
<el-table-column label="大系统模式表">
<el-table-column label="新风机">
<el-table-column prop="faf1" label-class-name="cyan-label" label="FAF-1" width="120" />
<el-table-column prop="faf2" label-class-name="cyan-label" label="FAF-2" width="120" />
</el-table-column>
<el-table-column label="组合式空调器">
<el-table-column prop="ahu1" label-class-name="cyan-label" label="AHU-1" width="120" />
<el-table-column prop="ahu2" label-class-name="cyan-label" label="AHU-2" width="120" />
</el-table-column>
<el-table-column label="回排风机">
<el-table-column prop="raf1" label-class-name="cyan-label" label="RAF/SEF-1" width="120" />
<el-table-column prop="raf2" label-class-name="cyan-label" label="RAF/SEF-2" width="120" />
</el-table-column>
<el-table-column label="风机1">
<el-table-column prop="md1" label-class-name="cyan-label" label="MD-1" width="120" />
<el-table-column prop="md1" label-class-name="cyan-label" label="MD-2" width="120" />
<el-table-column prop="md1" label-class-name="cyan-label" label="MD-3" width="120" />
<el-table-column prop="md1" label-class-name="cyan-label" label="MD-4" width="120" />
<el-table-column prop="md1" label-class-name="cyan-label" label="MD-5" width="120" />
<el-table-column prop="md1" label-class-name="cyan-label" label="MD-6" width="120" />
<el-table-column prop="md1" label-class-name="cyan-label" label="MD-7" width="120" />
<el-table-column prop="md1" label-class-name="cyan-label" label="MD-8" width="120" />
<el-table-column prop="md1" label-class-name="cyan-label" label="MD-9" width="120" />
<el-table-column prop="md1" label-class-name="cyan-label" label="MD-10" width="120" />
<el-table-column prop="md1" label-class-name="cyan-label" label="MD-11" width="120" />
<el-table-column prop="md1" label-class-name="cyan-label" label="MD-12" width="120" />
<el-table-column prop="md1" label-class-name="cyan-label" label="MD-13" width="120" />
</el-table-column>
</el-table-column>
</el-table>
</template>
<script>
export default {
name: 'BigSystemTable',
data() {
return {
tableTitleStyle: {'text-align': 'center', 'height': '28px', 'padding': '0', 'background': '#45607B'},
tableData: [
{code: '101', faf1: '打开', faf2: '打开', ahu1: '打开', ahu2: '打开', raf1: '打开', raf2: '打开', md1: '关闭'},
{code: '102', faf1: '打开', faf2: '打开', ahu1: '打开', ahu2: '打开', raf1: '打开', raf2: '打开', md1: '打开'},
{code: '103', faf1: '打开', faf2: '打开', ahu1: '打开', ahu2: '打开', raf1: '打开', raf2: '打开', md1: '关闭'},
{code: '104', faf1: '打开', faf2: '关闭', ahu1: '打开', ahu2: '打开', raf1: '打开', raf2: '打开', md1: '打开'},
{code: '105', faf1: '打开', faf2: '打开', ahu1: '打开', ahu2: '打开', raf1: '打开', raf2: '打开', md1: '关闭'},
{code: '106', faf1: '打开', faf2: '关闭', ahu1: '打开', ahu2: '打开', raf1: '打开', raf2: '打开', md1: '打开'},
{code: '107', faf1: '打开', faf2: '打开', ahu1: '打开', ahu2: '打开', raf1: '打开', raf2: '打开', md1: '打开'},
{code: '108', faf1: '打开', faf2: '关闭', ahu1: '打开', ahu2: '打开', raf1: '打开', raf2: '打开', md1: '打开'},
{code: '', faf1: '打开', faf2: '打开', ahu1: '打开', ahu2: '打开', raf1: '打开', raf2: '打开', md1: '打开'}, {}
// {code: '', faf1: '打开', faf2: '打开', ahu1: '打开', ahu2: '打开', raf1: '打开', raf2: '打开', md1: '打开'}
]
};
},
methods: {
rowStyleFunction({row, column, rowIndex, columnIndex}) {
if (rowIndex === 8 && columnIndex > 1) {
return {
'text-align': 'center',
'height': '28px',
'padding': '0',
'background': '#45607B',
'color': '#0F0'
};
} else if (columnIndex === 1) {
return {
'text-align': 'center',
'height': '28px',
'padding': '0',
'background': '#45607B',
'color': '#56E5DE'
};
} else {
return {
'text-align': 'center',
'height': '28px',
'padding': '0',
'background': '#45607B'
};
}
},
objectSpanMethod({ row, column, rowIndex, columnIndex }) {
if (columnIndex === 0) { // 只有第一行合并
if (rowIndex == 0 || rowIndex == 4) {
return {
rowspan: 4,
colspan: 1
};
} else if (rowIndex >= 8) {
return {
rowspan: 1,
colspan: 2
};
} else {
return {
rowspan: 0,
colspan: 0
};
}
}
if (columnIndex == 1) {
if (rowIndex >= 8) {
return {
rowspan: 0,
colspan: 0
};
}
}
},
showModeDialog(index) {
this.$emit('showModeDialog', this.tableData[index].code);
}
}
};
</script>
<style lang="scss" scoped>
.table-box {
width: 100%;
.title-0{
width: 100%;
line-height: 20px;
text-align: left;
padding-left: 14px;
}
.table-0-top{
overflow: hidden;
.left{
float: left;
width: 40%;
display: flex;
flex-direction: column;
height: 110px;
justify-content: center;
}
.right{
float: right;
width: 60%;
}
}
.table-4-top{
overflow: hidden;
.left{
float: left;
height: 56px;
width: 40%;
display: flex;
flex-direction: column;
justify-content: center;
}
.right{
float: right;
width: 60%;
}
}
.button-box{
text-align: center;
background-color: #ccc;
float: left;
font-size: 12px;
color: #333;
font-weight: bold;
box-sizing: border-box;
border-top: 2px solid #fff;
border-left: 2px solid #fff;
border-right: 2px solid #565656;
border-bottom: 2px solid #565656;
cursor: pointer;
&.active,
&:hover{
background: #EBB570;
border-top: 2px solid #795B31;
border-left: 2px solid #795B31;
border-right: 1px solid #fff;
border-bottom: 1px solid #fff;
}
}
}
</style>

154
src/views/iscs/iscsSystem/config/bas/controlChild/modeType.vue Normal file
View File

@ -0,0 +1,154 @@
<template>
<el-dialog title="" :visible.sync="dialogVisible" width="600px" class="iscs_device_control_dialog">
<div>
<div class="dialog-box">
<div class="title">模式类别</div>
<div class="content">
<div class="stand-title">{{ modeModel.stationName }}</div>
<div class="stand-control">{{ modeModel.controlName }}</div>
</div>
</div>
<div class="dialog-box">
<div class="title">启动模式号</div>
<div class="content">
<div class="model">{{ modeModel.modeCode }}</div>
</div>
</div>
</div>
<div class="dialog-footer" style="margin-top: 20px; text-align: center;">
<el-button style="margin-right: 13px;" @click="dialogVisible = false">取 消</el-button>
<el-button type="primary" @click="dialogVisible = false">执 行</el-button>
</div>
</el-dialog>
</template>
<script>
export default {
name: 'ModeType',
data() {
return {
dialogVisible: false,
modeModel: {
stationName: this.$route.query.stationName,
controlName: '系统模式控制',
modeCode: ''
}
};
},
methods: {
doShow(code) {
this.modeModel.modeCode = code;
this.dialogVisible = true;
}
}
};
</script>
<style slot="scope" lang="scss">
.dialog-box{
width: 100%;
overflow: hidden;
margin-bottom: 10px;
.title{
float: left;
width: 90px;
text-align: left;
color:#6F49FE;
font-size: 14px;
}
.content{
float: left;
width: 400px;
background: #efefef;
height: 40px;
padding-left: 15px;
.stand-title{
float: left;
margin-right: 50px;
height: 40px;
line-height: 40px;
color:#6F49FE;
font-size: 14px;
}
.stand-control{
float: left;
height: 40px;
line-height: 40px;
color:#6F49FE;
font-size: 14px;
}
.model{
height: 40px;
line-height: 40px;
color:#6F49FE;
font-size: 14px;
}
}
}
</style>
<style>
.iscs_device_control_dialog .el-dialog .el-dialog__header {
width: 100%;
height: 30px;
background-image: linear-gradient(#F0DBCE,#ECB85E, #F0DBCE);
}
.iscs_device_control_dialog .el-dialog .el-dialog__headerbtn{
position: absolute;
top: 5px;
right: 10px;
padding: 0;
background: 0 0;
outline: 0;
cursor: pointer;
font-size: 16px;
border: 1px solid #FFF;
width: 20px;
height: 18px;
}
.iscs_device_control_dialog .el-dialog .el-dialog__body {
padding: 30px 20px;
color: #606266;
font-size: 14px;
word-break: break-all;
background: #CDC6C0;
}
.iscs_device_control_dialog .el-dialog .el-button {
display: inline-block;
line-height: 1;
white-space: nowrap;
cursor: pointer;
background: #CACACA;
border-top: 1px solid #3D3B39;
border-left: 1px solid #3D3B39;
border-bottom: 1px solid #847B77;
border-right: 1px solid #847B77;
color: #000;
-webkit-appearance: none;
text-align: center;
-webkit-box-sizing: border-box;
box-sizing: border-box;
outline: 0;
margin: 0;
-webkit-transition: .1s;
transition: .1s;
padding: 0;
font-weight: 500;
font-size: 12px;
height: 30px;
width: 70px;
border-radius: 0;
position: relative;
}
.iscs_device_control_dialog .el-dialog .el-button :before {
content: '';
width: 70px;
height: 30px;
border-top: 1px solid #FFF;
border-left: 1px solid #FFF;
position: absolute;
top: -2px;
left: -2px;
}
.iscs_device_control_dialog .el-dialog .el-button:hover {
background-image: linear-gradient(#E2E4E5,#D5D6D8,#E2E4E5);
}
</style>

320
src/views/iscs/iscsSystem/config/bas/controlChild/smallSystem1Table.vue Normal file
View File

@ -0,0 +1,320 @@
<template>
<el-table ref="table2" :data="tableData" :header-row-style="tableTitleStyle" :cell-style="rowStyleFunction" :span-method="objectSpanMethod" style="float: left;">
<el-table-column type="index" width="20" fixed class-name="index-column">
<template slot="header">
<div style="width: 100%;height: 26px;background: #FFF" />
<div class="index-column-cell">1</div>
<div class="index-column-cell">2</div>
<div class="index-column-cell">3</div>
</template>
<template slot-scope="scope">
<div class="index-column-cell">{{ scope.$index + 4 }}</div>
</template>
</el-table-column>
<el-table-column fixed width="300">
<template slot="header">
<div style="font-size: 0;text-align: center;">
<div class="index-row-cell">1</div>
<div class="index-row-cell">2</div>
<div class="index-row-cell">3</div>
</div>
<div class="title-0">全年运行工况</div>
<div class="title-0">运行模式号</div>
<div class="title-0">模式状态</div>
<div class="title-0">火灾指示灯:</div>
</template>
<template slot-scope="scope">
<div v-if="scope.$index == 0" style="display: flex;">
<div style="width: 100px;">
<div>正</div>
<div>常</div>
<div>运</div>
<div>行</div>
</div>
<div style="width: 199px;">
<div class="button-box" style="width: 100%;height: 28px;line-height: 28px;" @click="showModeDialog(0)">小新风空调</div>
<div class="button-box" style="width: 100%;height: 28px;line-height: 28px;" @click="showModeDialog(1)">小新风空调</div>
<div class="button-box" style="width: 100%;height: 28px;line-height: 28px;" @click="showModeDialog(2)">非空调工况</div>
<div class="button-box" style="width: 100%;height: 27px;line-height: 27px;" @click="showModeDialog(3)">35KV开关柜室事故排风</div>
</div>
</div>
<div v-if="scope.$index == 4" style="display: flex;">
<div style="width: 100px;display: inline-block;margin: auto;">
<div>火</div>
<div>灾</div>
<div>模</div>
<div>式</div>
</div>
<div style="width: 100px;display: inline-block;">
<div style="height: 56px; border: 1px solid #FFF;">控制室</div>
<div style="height: 56px; border: 1px solid #FFF;">
<div>35KV</div>
<div>开关柜室</div>
</div>
<div style="height: 56px; border: 1px solid #FFF;">
<div>整流变频</div>
<div>压器室1</div>
</div>
<div style="height: 56px; border: 1px solid #FFF;">
<div>整流变频</div>
<div>压器室2</div>
</div>
<div style="height: 56px; border: 1px solid #FFF;">
<div>直流开</div>
<div>关柜室</div>
</div>
<div style="height: 56px; border: 1px solid #FFF;">
<div>0.4KV</div>
<div>低压柜室</div>
</div>
</div>
<div style="width: 100px;display: inline-block;">
<div class="button-box" style="width: 100%;height: 28px;line-height: 28px;" @click="showModeDialog(4)">灭火</div>
<div class="button-box" style="width: 100%;height: 28px;line-height: 28px;" @click="showModeDialog(5)">排气</div>
<div class="button-box" style="width: 100%;height: 28px;line-height: 28px;" @click="showModeDialog(4)">灭火</div>
<div class="button-box" style="width: 100%;height: 28px;line-height: 28px;" @click="showModeDialog(5)">排气</div>
<div class="button-box" style="width: 100%;height: 28px;line-height: 28px;" @click="showModeDialog(4)">灭火</div>
<div class="button-box" style="width: 100%;height: 28px;line-height: 28px;" @click="showModeDialog(5)">排气</div>
<div class="button-box" style="width: 100%;height: 28px;line-height: 28px;" @click="showModeDialog(4)">灭火</div>
<div class="button-box" style="width: 100%;height: 28px;line-height: 28px;" @click="showModeDialog(5)">排气</div>
<div class="button-box" style="width: 100%;height: 28px;line-height: 28px;" @click="showModeDialog(4)">灭火</div>
<div class="button-box" style="width: 100%;height: 28px;line-height: 28px;" @click="showModeDialog(5)">排气</div>
<div class="button-box" style="width: 100%;height: 28px;line-height: 28px;" @click="showModeDialog(4)">灭火</div>
<div class="button-box" style="width: 100%;height: 27px;line-height: 27px;" @click="showModeDialog(5)">排气</div>
</div>
</div>
<div v-if="scope.$index === 16" style="height: 28px;line-height: 28px;">设备实际运行状态</div>
<div v-if="scope.$index === 17">状态比较</div>
</template>
</el-table-column>
<el-table-column :key="11" prop="code" label="模式编号" width="90">
<template slot="header">
<div style="font-size: 0;text-align: center;height: 100%;">
<div class="index-row-cell" style="width: 90px;margin-left: -1px;">4</div>
<div style="font-size: 14px;height: 80px;line-height: 80px;">模式编号</div>
</div>
</template>
</el-table-column>
<el-table-column prop="smallSystem1">
<template slot="header">
<div style="font-size: 0;text-align: center;height: 100%;">
<div class="index-row-cell" style="width: 90px;">5</div>
<div class="index-row-cell" style="width: 90px;">6</div>
<div class="index-row-cell" style="width: 90px;">7</div>
<div class="index-row-cell" style="width: 90px;">8</div>
<div class="index-row-cell" style="width: 90px;">9</div>
<div class="index-row-cell" style="width: 90px;">10</div>
<div class="index-row-cell" style="width: 90px;">11</div>
<div class="index-row-cell" style="width: 89px;">12</div>
<div style="font-size: 14px;">小系统1</div>
</div>
</template>
<el-table-column prop="airConditioner" label="空调机">
<el-table-column prop="ahu1" width="90" label-class-name="cyan-label" label="AHU-B101" />
</el-table-column>
<el-table-column prop="exhaustFan" label="回排风机">
<el-table-column prop="raf1" width="90" label-class-name="cyan-label" label="RAF-B101" />
</el-table-column>
<el-table-column prop="flowControl" label="电动风量调节阀">
<el-table-column prop="md1" width="90" label-class-name="cyan-label" label="MD-B101" />
<el-table-column prop="md2" width="90" label-class-name="cyan-label" label="MD-B102" />
<el-table-column prop="md3" width="90" label-class-name="cyan-label" label="MD-B103" />
<el-table-column prop="md4" width="90" label-class-name="cyan-label" label="MD-B104" />
<el-table-column prop="md5" width="90" label-class-name="cyan-label" label="MD-B105" />
<el-table-column prop="md6" width="90" label-class-name="cyan-label" label="MD-B106" />
</el-table-column>
</el-table-column>
<el-table-column prop="smallSystem2">
<template slot="header">
<div style="font-size: 0;text-align: center;height: 100%;">
<div class="index-row-cell" style="width: 90px;">13</div>
<div class="index-row-cell" style="width: 99px;">14</div>
<div style="font-size: 14px;">小系统2</div>
</div>
</template>
<el-table-column prop="exhaustFan" label="排风机">
<el-table-column prop="eaf" width="90" label-class-name="cyan-label" label="EAF-B201" />
</el-table-column>
<el-table-column prop="flowControl" label="电动风量调节阀">
<el-table-column prop="md7" width="100" label-class-name="cyan-label" label="MD-B201" />
</el-table-column>
</el-table-column>
<el-table-column prop="smallSystem4">
<template slot="header">
<div style="font-size: 0;text-align: center;height: 100%;">
<div class="index-row-cell" style="width: 90px;">15</div>
<div class="index-row-cell" style="width: 90px;">16</div>
<div class="index-row-cell" style="width: 90px;">17</div>
<div class="index-row-cell" style="width: 90px;">18</div>
<div class="index-row-cell" style="width: 90px;">19</div>
<div class="index-row-cell" style="width: 90px;">20</div>
<div class="index-row-cell" style="width: 89px;">21</div>
<div style="font-size: 14px;">小系统4</div>
</div>
</template>
<el-table-column prop="airConditioner" label="空调机">
<el-table-column prop="ahu2" width="90" label-class-name="cyan-label" label="AHU-B401" />
</el-table-column>
<el-table-column prop="exhaustFan" label="回排风机">
<el-table-column prop="raf2" width="90" label-class-name="cyan-label" label="RAF-B401" />
</el-table-column>
<el-table-column prop="flowControl" label="电动风量调节阀">
<el-table-column prop="md8" width="90" label-class-name="cyan-label" label="MD-B401" />
<el-table-column prop="md9" width="90" label-class-name="cyan-label" label="MD-B402" />
<el-table-column prop="md10" width="90" label-class-name="cyan-label" label="MD-B403" />
<el-table-column prop="md11" width="90" label-class-name="cyan-label" label="MD-B404" />
<el-table-column prop="md12" width="90" label-class-name="cyan-label" label="MD-B405" />
</el-table-column>
</el-table-column>
</el-table>
</template>
<script>
export default {
name: 'SmallSystem1Table',
data() {
return {
tableTitleStyle: {'text-align': 'center', 'height': '28px', 'padding': '0', 'background': '#45607B'},
tableData: [
{code: '301', ahu1: '打开', raf1: '打开', md1: '半开', md2: '半开', md3: '半开', md4: '打开', md5: '打开', md6: '关闭', eaf: '打开', md7: '打开', ahu2: '打开', raf2: '打开', md8: '打开', md9: '打开', md10: '打开', md11: '打开', md12: '打开'},
{code: '302', ahu1: '打开', raf1: '打开', md1: '半开', md2: '半开', md3: '半开', md4: '打开', md5: '打开', md6: '关闭', eaf: '打开', md7: '打开', ahu2: '打开', raf2: '打开', md8: '打开', md9: '打开', md10: '打开', md11: '打开', md12: '打开'},
{code: '303', ahu1: '打开', raf1: '打开', md1: '半开', md2: '半开', md3: '半开', md4: '打开', md5: '打开', md6: '关闭', eaf: '打开', md7: '打开', ahu2: '打开', raf2: '打开', md8: '打开', md9: '打开', md10: '打开', md11: '打开', md12: '打开'},
{code: '304', ahu1: '打开', raf1: '打开', md1: '半开', md2: '半开', md3: '半开', md4: '打开', md5: '打开', md6: '关闭', eaf: '打开', md7: '打开', ahu2: '打开', raf2: '打开', md8: '打开', md9: '打开', md10: '打开', md11: '打开', md12: '打开'},
{code: '305', ahu1: '打开', raf1: '打开', md1: '半开', md2: '半开', md3: '半开', md4: '打开', md5: '打开', md6: '关闭', eaf: '打开', md7: '打开', ahu2: '打开', raf2: '打开', md8: '打开', md9: '打开', md10: '打开', md11: '打开', md12: '打开'},
{code: '306', ahu1: '打开', raf1: '打开', md1: '半开', md2: '半开', md3: '半开', md4: '打开', md5: '打开', md6: '关闭', eaf: '打开', md7: '打开', ahu2: '打开', raf2: '打开', md8: '打开', md9: '打开', md10: '打开', md11: '打开', md12: '打开'},
{code: '307', ahu1: '打开', raf1: '打开', md1: '半开', md2: '半开', md3: '半开', md4: '打开', md5: '打开', md6: '关闭', eaf: '打开', md7: '打开', ahu2: '打开', raf2: '打开', md8: '打开', md9: '打开', md10: '打开', md11: '打开', md12: '打开'},
{code: '308', ahu1: '打开', raf1: '打开', md1: '半开', md2: '半开', md3: '半开', md4: '打开', md5: '打开', md6: '关闭', eaf: '打开', md7: '打开', ahu2: '打开', raf2: '打开', md8: '打开', md9: '打开', md10: '打开', md11: '打开', md12: '打开'},
{code: '309', ahu1: '打开', raf1: '打开', md1: '半开', md2: '半开', md3: '半开', md4: '打开', md5: '打开', md6: '关闭', eaf: '打开', md7: '打开', ahu2: '打开', raf2: '打开', md8: '打开', md9: '打开', md10: '打开', md11: '打开', md12: '打开'},
{code: '310', ahu1: '打开', raf1: '打开', md1: '半开', md2: '半开', md3: '半开', md4: '打开', md5: '打开', md6: '关闭', eaf: '打开', md7: '打开', ahu2: '打开', raf2: '打开', md8: '打开', md9: '打开', md10: '打开', md11: '打开', md12: '打开'},
{code: '311', ahu1: '打开', raf1: '打开', md1: '半开', md2: '半开', md3: '半开', md4: '打开', md5: '打开', md6: '关闭', eaf: '打开', md7: '打开', ahu2: '打开', raf2: '打开', md8: '打开', md9: '打开', md10: '打开', md11: '打开', md12: '打开'},
{code: '312', ahu1: '打开', raf1: '打开', md1: '半开', md2: '半开', md3: '半开', md4: '打开', md5: '打开', md6: '关闭', eaf: '打开', md7: '打开', ahu2: '打开', raf2: '打开', md8: '打开', md9: '打开', md10: '打开', md11: '打开', md12: '打开'},
{code: '313', ahu1: '打开', raf1: '打开', md1: '半开', md2: '半开', md3: '半开', md4: '打开', md5: '打开', md6: '关闭', eaf: '打开', md7: '打开', ahu2: '打开', raf2: '打开', md8: '打开', md9: '打开', md10: '打开', md11: '打开', md12: '打开'},
{code: '314', ahu1: '打开', raf1: '打开', md1: '半开', md2: '半开', md3: '半开', md4: '打开', md5: '打开', md6: '关闭', eaf: '打开', md7: '打开', ahu2: '打开', raf2: '打开', md8: '打开', md9: '打开', md10: '打开', md11: '打开', md12: '打开'},
{code: '315', ahu1: '打开', raf1: '打开', md1: '半开', md2: '半开', md3: '半开', md4: '打开', md5: '打开', md6: '关闭', eaf: '打开', md7: '打开', ahu2: '打开', raf2: '打开', md8: '打开', md9: '打开', md10: '打开', md11: '打开', md12: '打开'},
{code: '316', ahu1: '打开', raf1: '打开', md1: '半开', md2: '半开', md3: '半开', md4: '打开', md5: '打开', md6: '关闭', eaf: '打开', md7: '打开', ahu2: '打开', raf2: '打开', md8: '打开', md9: '打开', md10: '打开', md11: '打开', md12: '打开'},
{code: '', ahu1: '打开', raf1: '打开', md1: '半开', md2: '半开', md3: '半开', md4: '打开', md5: '打开', md6: '关闭', eaf: '打开', md7: '打开', ahu2: '打开', raf2: '打开', md8: '打开', md9: '打开', md10: '打开', md11: '打开', md12: '打开'},
{}
]
};
},
methods: {
rowStyleFunction({row, column, rowIndex, columnIndex}) {
if (rowIndex === 16 && columnIndex > 1) {
return {
'text-align': 'center',
'height': '28px',
'padding': '0',
'background': '#45607B',
'color': '#0F0'
};
} else if (columnIndex === 2) {
return {
'text-align': 'center',
'height': '28px',
'padding': '0',
'background': '#45607B',
'color': '#56E5DE'
};
} else {
return {
'text-align': 'center',
'height': '28px',
'padding': '0',
'background': '#45607B'
};
}
},
objectSpanMethod({ row, column, rowIndex, columnIndex }) {
if (columnIndex === 1) {
if (rowIndex === 0) {
return {
rowspan: 4,
colspan: 1
};
} else if (rowIndex === 4) {
return {
rowspan: 12,
colspan: 1
};
} else if (rowIndex === 16 || rowIndex === 17) {
return {
rowspan: 1,
colspan: 2
};
} else {
return {
rowspan: 0,
colspan: 0
};
}
} else if (columnIndex === 2) {
if (rowIndex === 16 || rowIndex === 17) {
return {
rowspan: 0,
colspan: 0
};
} else {
return {
rowspan: 1,
colspan: 1
};
}
}
},
showModeDialog(index) {
}
}
};
</script>
<style scoped>
.title-0{
width: 100%;
line-height: 20px;
text-align: left;
padding-left: 14px;
}
.index-column-cell {
text-align:center;
width: 100%;
height: 28px;
border-top: 1px solid #203244;
border-left: 2px solid #A3A3A3;
border-bottom: 1px solid #203244;
border-right: 1px solid #203244;
}
.index-row-cell {
width: 99px;
height: 20px;
font-size: 14px;
line-height: 20px;
display: inline-block;
border-top: 2px solid #A3A3A3;
border-left: 1px solid #203244;
border-bottom: 2px solid #203244;
border-right: 1px solid #203244;
}
.button-box{
text-align: center;
background-color: #ccc;
float: left;
font-size: 12px;
color: #333;
font-weight: bold;
box-sizing: border-box;
border-top: 2px solid #fff;
border-left: 2px solid #fff;
border-right: 2px solid #565656;
border-bottom: 2px solid #565656;
cursor: pointer;
}
.button-box.active,
.button-box:hover{
background: #EBB570;
border-top: 2px solid #795B31;
border-left: 2px solid #795B31;
border-right: 1px solid #fff;
border-bottom: 1px solid #fff;
}
</style>

315
src/views/iscs/iscsSystem/config/bas/controlChild/smallSystem2Table.vue Normal file
View File

@ -0,0 +1,315 @@
<template>
<el-table ref="table2" :data="tableData" :header-row-style="tableTitleStyle" :cell-style="rowStyleFunction" :span-method="objectSpanMethod" style="float: left;">
<el-table-column type="index" fixed width="20" class-name="index-column">
<template slot="header">
<div style="width: 100%;height: 26px;background: #FFF" />
<div class="index-column-cell">1</div>
<div class="index-column-cell">2</div>
<div class="index-column-cell">3</div>
</template>
<template slot-scope="scope">
<div class="index-column-cell">{{ scope.$index + 4 }}</div>
</template>
</el-table-column>
<el-table-column fixed width="300">
<template slot="header">
<div style="font-size: 0;text-align: center;">
<div class="index-row-cell">1</div>
<div class="index-row-cell">2</div>
<div class="index-row-cell">3</div>
</div>
<div class="title-0">全年运行工况</div>
<div class="title-0">运行模式号</div>
<div class="title-0">模式状态</div>
<div class="title-0">火灾指示灯:</div>
</template>
<template slot-scope="scope">
<div v-if="scope.$index == 0" style="display: flex;">
<div style="width: 100px;">
<div>正</div>
<div>常</div>
<div>运</div>
<div>行</div>
</div>
<div style="width: 100px;">
<div style="height: 56px; border: 1px solid #FFF;">
<div>商用通信</div>
<div>设备室</div>
</div>
<div style="height: 56px; border: 1px solid #FFF;">
<div>再生制动</div>
<div>监控室</div>
</div>
</div>
<div style="width: 99px;">
<div class="button-box" style="width: 100%;height: 28px;line-height: 28px;" @click="showModeDialog(4)">灭火</div>
<div class="button-box" style="width: 100%;height: 28px;line-height: 28px;" @click="showModeDialog(5)">排气</div>
<div class="button-box" style="width: 100%;height: 28px;line-height: 28px;" @click="showModeDialog(4)">灭火</div>
<div class="button-box" style="width: 100%;height: 28px;line-height: 28px;" @click="showModeDialog(5)">排气</div>
</div>
</div>
<div v-if="scope.$index == 4" style="display: flex;">
<div style="width: 100px;display: inline-block;margin: auto;">
<div>火</div>
<div>灾</div>
<div>模</div>
<div>式</div>
</div>
<div style="width: 200px;display: inline-block;">
<div style="width: 200px;display: flex;">
<div style="width: 100px;display: inline-block;height: 56px; border: 1px solid #FFF;">
<div>再生制动</div>
<div>电阻室</div>
</div>
<div style="display: inline-block;width: 100px;">
<div class="button-box" style="width: 100px;height: 28px;line-height: 28px;" @click="showModeDialog(4)">灭火</div>
<div class="button-box" style="width: 100px;height: 28px;line-height: 28px;" @click="showModeDialog(5)">排气</div>
</div>
</div>
<div class="button-box" style="width: 100%;height: 28px;line-height: 28px;" @click="showModeDialog(4)">车站控制室</div>
<div class="button-box" style="width: 100%;height: 28px;line-height: 28px;" @click="showModeDialog(5)">站厅B端环控电控室</div>
<div class="button-box" style="width: 100%;height: 28px;line-height: 28px;" @click="showModeDialog(4)">站厅B端空调机房</div>
<div class="button-box" style="width: 100%;height: 28px;line-height: 28px;" @click="showModeDialog(5)">站厅A端冷水机房</div>
<div class="button-box" style="width: 100%;height: 28px;line-height: 28px;" @click="showModeDialog(4)">站厅A端空调机房</div>
<div class="button-box" style="width: 100%;height: 28px;line-height: 28px;" @click="showModeDialog(5)">站厅A端环控电控室</div>
<div class="button-box" style="width: 100%;height: 28px;line-height: 28px;" @click="showModeDialog(4)">站厅A端走廊</div>
<div class="button-box" style="width: 100%;height: 28px;line-height: 28px;" @click="showModeDialog(5)">B端其余房间火灾</div>
<div class="button-box" style="width: 100%;height: 28px;line-height: 28px;" @click="showModeDialog(4)">A端其余房间火灾</div>
<div class="button-box" style="width: 100%;height: 27px;line-height: 27px;" @click="showModeDialog(5)">全停模式</div>
</div>
</div>
<div v-if="scope.$index === 16" style="height: 28px;line-height: 28px;">设备实际运行状态</div>
<div v-if="scope.$index === 17">状态比较</div>
</template>
</el-table-column>
<el-table-column :key="11" prop="code" label="模式编号" width="90">
<template slot="header">
<div style="font-size: 0;text-align: center;height: 100%;">
<div class="index-row-cell" style="width: 90px;margin-left: -1px;">4</div>
<div style="font-size: 14px;height: 80px;line-height: 80px;">模式编号</div>
</div>
</template>
</el-table-column>
<el-table-column prop="smallSystem1">
<template slot="header">
<div style="font-size: 0;text-align: center;height: 100%;">
<div class="index-row-cell" style="width: 90px;">5</div>
<div class="index-row-cell" style="width: 90px;">6</div>
<div class="index-row-cell" style="width: 90px;">7</div>
<div class="index-row-cell" style="width: 90px;">8</div>
<div class="index-row-cell" style="width: 90px;">9</div>
<div class="index-row-cell" style="width: 90px;">10</div>
<div class="index-row-cell" style="width: 90px;">11</div>
<div class="index-row-cell" style="width: 89px;">12</div>
<div style="font-size: 14px;">小系统1</div>
</div>
</template>
<el-table-column prop="airConditioner" label="空调机">
<el-table-column label-class-name="cyan-label" prop="ahu1" width="90" label="AHU-B101" />
</el-table-column>
<el-table-column prop="exhaustFan" label="回排风机">
<el-table-column label-class-name="cyan-label" prop="raf1" width="90" label="RAF-B101" />
</el-table-column>
<el-table-column prop="flowControl" label="电动风量调节阀">
<el-table-column prop="md1" width="90" label-class-name="cyan-label" label="MD-B101" />
<el-table-column prop="md2" width="90" label-class-name="cyan-label" label="MD-B102" />
<el-table-column prop="md3" width="90" label-class-name="cyan-label" label="MD-B103" />
<el-table-column prop="md4" width="90" label-class-name="cyan-label" label="MD-B104" />
<el-table-column prop="md5" width="90" label-class-name="cyan-label" label="MD-B105" />
<el-table-column prop="md6" width="90" label-class-name="cyan-label" label="MD-B106" />
</el-table-column>
</el-table-column>
<el-table-column prop="smallSystem2">
<template slot="header">
<div style="font-size: 0;text-align: center;height: 100%;">
<div class="index-row-cell" style="width: 90px;">13</div>
<div class="index-row-cell" style="width: 99px;">14</div>
<div style="font-size: 14px;">小系统2</div>
</div>
</template>
<el-table-column prop="exhaustFan" label="排风机">
<el-table-column prop="eaf" width="90" label-class-name="cyan-label" label="EAF-B201" />
</el-table-column>
<el-table-column prop="flowControl" label="电动风量调节阀">
<el-table-column prop="md7" width="100" label-class-name="cyan-label" label="MD-B201" />
</el-table-column>
</el-table-column>
<el-table-column prop="smallSystem4">
<template slot="header">
<div style="font-size: 0;text-align: center;height: 100%;">
<div class="index-row-cell" style="width: 90px;">15</div>
<div class="index-row-cell" style="width: 90px;">16</div>
<div class="index-row-cell" style="width: 90px;">17</div>
<div class="index-row-cell" style="width: 90px;">18</div>
<div class="index-row-cell" style="width: 90px;">19</div>
<div class="index-row-cell" style="width: 90px;">20</div>
<div class="index-row-cell" style="width: 89px;">21</div>
<div style="font-size: 14px;">小系统4</div>
</div>
</template>
<el-table-column prop="airConditioner" label="空调机">
<el-table-column prop="ahu2" width="90" label-class-name="cyan-label" label="AHU-B401" />
</el-table-column>
<el-table-column prop="exhaustFan" label="回排风机">
<el-table-column prop="raf2" width="90" label-class-name="cyan-label" label="RAF-B401" />
</el-table-column>
<el-table-column prop="flowControl" label="电动风量调节阀">
<el-table-column prop="md8" width="90" label-class-name="cyan-label" label="MD-B401" />
<el-table-column prop="md9" width="90" label-class-name="cyan-label" label="MD-B402" />
<el-table-column prop="md10" width="90" label-class-name="cyan-label" label="MD-B403" />
<el-table-column prop="md11" width="90" label-class-name="cyan-label" label="MD-B404" />
<el-table-column prop="md12" width="90" label-class-name="cyan-label" label="MD-B405" />
</el-table-column>
</el-table-column>
</el-table>
</template>
<script>
export default {
name: 'SmallSystem1Table',
data() {
return {
tableTitleStyle: {'text-align': 'center', 'height': '28px', 'padding': '0', 'background': '#45607B'},
tableData: [
{code: '317', ahu1: '打开', raf1: '打开', md1: '半开', md2: '半开', md3: '半开', md4: '打开', md5: '打开', md6: '关闭', eaf: '打开', md7: '打开', ahu2: '打开', raf2: '打开', md8: '打开', md9: '打开', md10: '打开', md11: '打开', md12: '打开'},
{code: '318', ahu1: '打开', raf1: '打开', md1: '半开', md2: '半开', md3: '半开', md4: '打开', md5: '打开', md6: '关闭', eaf: '打开', md7: '打开', ahu2: '打开', raf2: '打开', md8: '打开', md9: '打开', md10: '打开', md11: '打开', md12: '打开'},
{code: '319', ahu1: '打开', raf1: '打开', md1: '半开', md2: '半开', md3: '半开', md4: '打开', md5: '打开', md6: '关闭', eaf: '打开', md7: '打开', ahu2: '打开', raf2: '打开', md8: '打开', md9: '打开', md10: '打开', md11: '打开', md12: '打开'},
{code: '320', ahu1: '打开', raf1: '打开', md1: '半开', md2: '半开', md3: '半开', md4: '打开', md5: '打开', md6: '关闭', eaf: '打开', md7: '打开', ahu2: '打开', raf2: '打开', md8: '打开', md9: '打开', md10: '打开', md11: '打开', md12: '打开'},
{code: '321', ahu1: '打开', raf1: '打开', md1: '半开', md2: '半开', md3: '半开', md4: '打开', md5: '打开', md6: '关闭', eaf: '打开', md7: '打开', ahu2: '打开', raf2: '打开', md8: '打开', md9: '打开', md10: '打开', md11: '打开', md12: '打开'},
{code: '322', ahu1: '打开', raf1: '打开', md1: '半开', md2: '半开', md3: '半开', md4: '打开', md5: '打开', md6: '关闭', eaf: '打开', md7: '打开', ahu2: '打开', raf2: '打开', md8: '打开', md9: '打开', md10: '打开', md11: '打开', md12: '打开'},
{code: '323', ahu1: '打开', raf1: '打开', md1: '半开', md2: '半开', md3: '半开', md4: '打开', md5: '打开', md6: '关闭', eaf: '打开', md7: '打开', ahu2: '打开', raf2: '打开', md8: '打开', md9: '打开', md10: '打开', md11: '打开', md12: '打开'},
{code: '324', ahu1: '打开', raf1: '打开', md1: '半开', md2: '半开', md3: '半开', md4: '打开', md5: '打开', md6: '关闭', eaf: '打开', md7: '打开', ahu2: '打开', raf2: '打开', md8: '打开', md9: '打开', md10: '打开', md11: '打开', md12: '打开'},
{code: '325', ahu1: '打开', raf1: '打开', md1: '半开', md2: '半开', md3: '半开', md4: '打开', md5: '打开', md6: '关闭', eaf: '打开', md7: '打开', ahu2: '打开', raf2: '打开', md8: '打开', md9: '打开', md10: '打开', md11: '打开', md12: '打开'},
{code: '326', ahu1: '打开', raf1: '打开', md1: '半开', md2: '半开', md3: '半开', md4: '打开', md5: '打开', md6: '关闭', eaf: '打开', md7: '打开', ahu2: '打开', raf2: '打开', md8: '打开', md9: '打开', md10: '打开', md11: '打开', md12: '打开'},
{code: '327', ahu1: '打开', raf1: '打开', md1: '半开', md2: '半开', md3: '半开', md4: '打开', md5: '打开', md6: '关闭', eaf: '打开', md7: '打开', ahu2: '打开', raf2: '打开', md8: '打开', md9: '打开', md10: '打开', md11: '打开', md12: '打开'},
{code: '328', ahu1: '打开', raf1: '打开', md1: '半开', md2: '半开', md3: '半开', md4: '打开', md5: '打开', md6: '关闭', eaf: '打开', md7: '打开', ahu2: '打开', raf2: '打开', md8: '打开', md9: '打开', md10: '打开', md11: '打开', md12: '打开'},
{code: '329', ahu1: '打开', raf1: '打开', md1: '半开', md2: '半开', md3: '半开', md4: '打开', md5: '打开', md6: '关闭', eaf: '打开', md7: '打开', ahu2: '打开', raf2: '打开', md8: '打开', md9: '打开', md10: '打开', md11: '打开', md12: '打开'},
{code: '330', ahu1: '打开', raf1: '打开', md1: '半开', md2: '半开', md3: '半开', md4: '打开', md5: '打开', md6: '关闭', eaf: '打开', md7: '打开', ahu2: '打开', raf2: '打开', md8: '打开', md9: '打开', md10: '打开', md11: '打开', md12: '打开'},
{code: '331', ahu1: '打开', raf1: '打开', md1: '半开', md2: '半开', md3: '半开', md4: '打开', md5: '打开', md6: '关闭', eaf: '打开', md7: '打开', ahu2: '打开', raf2: '打开', md8: '打开', md9: '打开', md10: '打开', md11: '打开', md12: '打开'},
{code: '332', ahu1: '打开', raf1: '打开', md1: '半开', md2: '半开', md3: '半开', md4: '打开', md5: '打开', md6: '关闭', eaf: '打开', md7: '打开', ahu2: '打开', raf2: '打开', md8: '打开', md9: '打开', md10: '打开', md11: '打开', md12: '打开'},
{code: '', ahu1: '打开', raf1: '打开', md1: '半开', md2: '半开', md3: '半开', md4: '打开', md5: '打开', md6: '关闭', eaf: '打开', md7: '打开', ahu2: '打开', raf2: '打开', md8: '打开', md9: '打开', md10: '打开', md11: '打开', md12: '打开'},
{}
]
};
},
methods: {
rowStyleFunction({row, column, rowIndex, columnIndex}) {
if (rowIndex === 16 && columnIndex > 1) {
return {
'text-align': 'center',
'height': '28px',
'padding': '0',
'background': '#45607B',
'color': '#0F0'
};
} else if (columnIndex === 2) {
return {
'text-align': 'center',
'height': '28px',
'padding': '0',
'background': '#45607B',
'color': '#56E5DE'
};
} else {
return {
'text-align': 'center',
'height': '28px',
'padding': '0',
'background': '#45607B'
};
}
},
objectSpanMethod({ row, column, rowIndex, columnIndex }) {
if (columnIndex === 1) {
if (rowIndex === 0) {
return {
rowspan: 4,
colspan: 1
};
} else if (rowIndex === 4) {
return {
rowspan: 12,
colspan: 1
};
} else if (rowIndex === 16 || rowIndex === 17) {
return {
rowspan: 1,
colspan: 2
};
} else {
return {
rowspan: 0,
colspan: 0
};
}
} else if (columnIndex === 2) {
if (rowIndex === 16 || rowIndex === 17) {
return {
rowspan: 0,
colspan: 0
};
} else {
return {
rowspan: 1,
colspan: 1
};
}
}
},
showModeDialog(index) {
}
}
};
</script>
<style scoped>
.title-0{
width: 100%;
line-height: 20px;
text-align: left;
padding-left: 14px;
}
.index-column-cell {
text-align:center;
width: 100%;
height: 28px;
border-top: 1px solid #203244;
border-left: 2px solid #A3A3A3;
border-bottom: 1px solid #203244;
border-right: 1px solid #203244;
}
.index-row-cell {
width: 99px;
height: 20px;
font-size: 14px;
line-height: 20px;
display: inline-block;
border-top: 2px solid #A3A3A3;
border-left: 1px solid #203244;
border-bottom: 2px solid #203244;
border-right: 1px solid #203244;
}
.button-box{
text-align: center;
background-color: #ccc;
float: left;
font-size: 12px;
color: #333;
font-weight: bold;
box-sizing: border-box;
border-top: 2px solid #fff;
border-left: 2px solid #fff;
border-right: 2px solid #565656;
border-bottom: 2px solid #565656;
cursor: pointer;
}
.button-box.active,
.button-box:hover{
background: #EBB570;
border-top: 2px solid #795B31;
border-left: 2px solid #795B31;
border-right: 1px solid #fff;
border-bottom: 1px solid #fff;
}
</style>

286
src/views/iscs/iscsSystem/config/bas/controlChild/ventilation.vue Normal file
View File

@ -0,0 +1,286 @@
<template>
<el-table ref="table2" :data="tableData" :header-row-style="tableTitleStyle" :cell-style="rowStyleFunction" :span-method="objectSpanMethod" style="float: left;">
<el-table-column type="index" width="20" fixed class-name="index-column">
<template slot="header">
<div style="width: 100%;height: 26px;background: #FFF" />
<div class="index-column-cell">1</div>
<div class="index-column-cell">2</div>
<div class="index-column-cell">3</div>
</template>
<template slot-scope="scope">
<div class="index-column-cell">{{ scope.$index + 4 }}</div>
</template>
</el-table-column>
<el-table-column fixed width="300">
<template slot="header">
<div style="font-size: 0;text-align: center;">
<div class="index-row-cell">1</div>
<div class="index-row-cell">2</div>
<div class="index-row-cell">3</div>
</div>
<div class="title-0">全年运行工况</div>
<div class="title-0">运行模式号</div>
<div class="title-0">模式状态</div>
<div class="title-0">火灾指示灯:</div>
</template>
<template slot-scope="scope">
<div v-if="scope.$index == 0" style="display: flex;">
<div style="width: 299px;">
<div class="button-box" style="width: 100%;height: 28px;line-height: 28px;" @click="showModeDialog(0)">正常运营</div>
<div class="button-box" style="width: 100%;height: 28px;line-height: 28px;" @click="showModeDialog(1)">夜间停运</div>
<div class="button-box" style="width: 100%;height: 28px;line-height: 28px;" @click="showModeDialog(2)">月检测</div>
<div class="button-box" style="width: 100%;height: 27px;line-height: 27px;" @click="showModeDialog(3)">月检测</div>
<div class="button-box" style="width: 100%;height: 28px;line-height: 28px;" @click="showModeDialog(2)">早晚运行-早间通风</div>
<div class="button-box" style="width: 100%;height: 27px;line-height: 27px;" @click="showModeDialog(3)">早晚运行-晚间通风</div>
</div>
</div>
<div v-if="scope.$index == 6">
<div style="width: 299px;display: flex;">
<div style="width: 199px;display: inline-block;">
<div style="height: 56px;border: 1px solid #FFF;">
<div>站台火灾开启</div>
<div>上行屏蔽门</div>
</div>
<div style="height: 56px;border: 1px solid #FFF;">
<div>站台火灾开启</div>
<div>下行屏蔽门</div>
</div>
</div>
<div style="width: 100px;display: inline-block">
<div class="button-box" style="width: 100%;height: 28px;line-height: 28px;" @click="showModeDialog(0)">首选</div>
<div class="button-box" style="width: 100%;height: 28px;line-height: 28px;" @click="showModeDialog(0)">备选</div>
<div class="button-box" style="width: 100%;height: 28px;line-height: 28px;" @click="showModeDialog(0)">首选</div>
<div class="button-box" style="width: 100%;height: 28px;line-height: 28px;" @click="showModeDialog(0)">备选</div>
</div>
</div>
<div style="width: 299px;display: flex;">
<div style="display: inline-block;width: 100px;border: 1px solid #FFF;height: 112px;line-height: 112px;">车站隧道火灾</div>
<div style="display: inline-block;width: 100px;">
<div style="width: 100%; border: 1px solid #FFF; height: 56px;line-height: 56px;">上行</div>
<div style="width: 100%; border: 1px solid #FFF; height: 56px;line-height: 56px;">下行</div>
</div>
<div style="width: 100px;display: inline-block">
<div class="button-box" style="width: 100%;height: 28px;line-height: 28px;" @click="showModeDialog(0)">首选</div>
<div class="button-box" style="width: 100%;height: 28px;line-height: 28px;" @click="showModeDialog(0)">备选</div>
<div class="button-box" style="width: 100%;height: 28px;line-height: 28px;" @click="showModeDialog(0)">首选</div>
<div class="button-box" style="width: 100%;height: 28px;line-height: 28px;" @click="showModeDialog(0)">备选</div>
</div>
</div>
</div>
<div v-if="scope.$index === 14" style="height: 28px;line-height: 28px;">设备实际运行状态</div>
<div v-if="scope.$index === 15">状态比较</div>
</template>
</el-table-column>
<el-table-column :key="11" prop="code" label="模式编号" width="90">
<template slot="header">
<div style="font-size: 0;text-align: center;height: 100%;">
<div class="index-row-cell" style="width: 90px;margin-left: -1px;">4</div>
<div style="font-size: 14px;height: 80px;line-height: 80px;">模式编号</div>
</div>
</template>
</el-table-column>
<el-table-column prop="smallSystem1">
<template slot="header">
<div style="font-size: 0;text-align: center;height: 100%;">
<div class="index-row-cell" style="width: 90px;">5</div>
<div class="index-row-cell" style="width: 90px;">6</div>
<div class="index-row-cell" style="width: 90px;">7</div>
<div class="index-row-cell" style="width: 90px;">8</div>
<div class="index-row-cell" style="width: 90px;">9</div>
<div class="index-row-cell" style="width: 90px;">10</div>
<div class="index-row-cell" style="width: 90px;">11</div>
<div class="index-row-cell" style="width: 89px;">12</div>
<div class="index-row-cell" style="width: 90px;">13</div>
<div class="index-row-cell" style="width: 90px;">14</div>
<div class="index-row-cell" style="width: 90px;">15</div>
<div class="index-row-cell" style="width: 90px;">16</div>
<div class="index-row-cell" style="width: 90px;">17</div>
<div class="index-row-cell" style="width: 90px;">18</div>
<div class="index-row-cell" style="width: 90px;">19</div>
<div class="index-row-cell" style="width: 89px;">20</div>
<div class="index-row-cell" style="width: 90px;">21</div>
<div class="index-row-cell" style="width: 90px;">22</div>
<div class="index-row-cell" style="width: 90px;">23</div>
<div class="index-row-cell" style="width: 90px;">24</div>
<div class="index-row-cell" style="width: 89px;">25</div>
<div style="font-size: 14px;">隧道通风系</div>
</div>
</template>
<el-table-column prop="tunnelFan" label="隧道风机">
<el-table-column prop="tvf1" width="90" label-class-name="cyan-label" label="TVF-201-I-1" />
<el-table-column prop="tvf2" width="90" label-class-name="cyan-label" label="TVF-201-I-2" />
<el-table-column prop="tvf3" width="90" label-class-name="cyan-label" label="TVF-201-II-1" />
<el-table-column prop="tvf4" width="90" label-class-name="cyan-label" label="TVF-201-II-2" />
</el-table-column>
<el-table-column prop="exhaustFan" label="车站排热风机">
<el-table-column prop="tef1" width="90" label-class-name="cyan-label" label="TEF-201-I-1" />
<el-table-column prop="tef2" width="90" label-class-name="cyan-label" label="TEF-201-II-1" />
</el-table-column>
<el-table-column prop="jetFan" label="射流风机风机">
<el-table-column prop="jet1" width="90" label-class-name="cyan-label" label="JET-281-1" />
<el-table-column prop="jet2" width="90" label-class-name="cyan-label" label="JET-281-2" />
<el-table-column prop="jet3" width="90" label-class-name="cyan-label" label="JET-281-3" />
<el-table-column prop="jet4" width="90" label-class-name="cyan-label" label="JET-281-4" />
<el-table-column prop="jet5" width="90" label-class-name="cyan-label" label="JET-281-5" />
<el-table-column prop="jet6" width="90" label-class-name="cyan-label" label="JET-281-6" />
<el-table-column prop="jet7" width="90" label-class-name="cyan-label" label="JET-281-7" />
<el-table-column prop="jet8" width="90" label-class-name="cyan-label" label="JET-281-8" />
<el-table-column prop="jet9" width="90" label-class-name="cyan-label" label="JET-281-9" />
<el-table-column prop="jet10" width="90" label-class-name="cyan-label" label="JET-281-10" />
<el-table-column prop="jet11" width="90" label-class-name="cyan-label" label="JET-281-11" />
<el-table-column prop="jet12" width="90" label-class-name="cyan-label" label="JET-281-12" />
<el-table-column prop="jet13" width="90" label-class-name="cyan-label" label="JET-281-13" />
<el-table-column prop="jet14" width="90" label-class-name="cyan-label" label="JET-281-14" />
<el-table-column prop="jet15" width="90" label-class-name="cyan-label" label="JET-281-15" />
</el-table-column>
</el-table-column>
</el-table>
</template>
<script>
export default {
name: 'Ventilation',
data() {
return {
tableTitleStyle: {'text-align': 'center', 'height': '28px', 'padding': '0', 'background': '#45607B'},
tableData: [
{code: '401', tvf1: '打开', tvf2: '打开', tvf3: '半开', tvf4: '半开', tef1: '半开', tef2: '打开', jet1: '打开', jet2: '关闭', jet3: '打开', jet4: '打开', jet5: '打开', jet6: '打开', jet7: '打开', jet8: '打开', jet9: '打开', jet10: '打开', jet11: '打开', jet12: '打开', jet13: '打开', jet14:'打开', jet15: '打开'},
{code: '402', tvf1: '打开', tvf2: '打开', tvf3: '半开', tvf4: '半开', tef1: '半开', tef2: '打开', jet1: '打开', jet2: '关闭', jet3: '打开', jet4: '打开', jet5: '打开', jet6: '打开', jet7: '打开', jet8: '打开', jet9: '打开', jet10: '打开', jet11: '打开', jet12: '打开', jet13: '打开', jet14:'打开', jet15: '打开'},
{code: '403', tvf1: '打开', tvf2: '打开', tvf3: '半开', tvf4: '半开', tef1: '半开', tef2: '打开', jet1: '打开', jet2: '关闭', jet3: '打开', jet4: '打开', jet5: '打开', jet6: '打开', jet7: '打开', jet8: '打开', jet9: '打开', jet10: '打开', jet11: '打开', jet12: '打开', jet13: '打开', jet14:'打开', jet15: '打开'},
{code: '404', tvf1: '打开', tvf2: '打开', tvf3: '半开', tvf4: '半开', tef1: '半开', tef2: '打开', jet1: '打开', jet2: '关闭', jet3: '打开', jet4: '打开', jet5: '打开', jet6: '打开', jet7: '打开', jet8: '打开', jet9: '打开', jet10: '打开', jet11: '打开', jet12: '打开', jet13: '打开', jet14:'打开', jet15: '打开'},
{code: '405', tvf1: '打开', tvf2: '打开', tvf3: '半开', tvf4: '半开', tef1: '半开', tef2: '打开', jet1: '打开', jet2: '关闭', jet3: '打开', jet4: '打开', jet5: '打开', jet6: '打开', jet7: '打开', jet8: '打开', jet9: '打开', jet10: '打开', jet11: '打开', jet12: '打开', jet13: '打开', jet14:'打开', jet15: '打开'},
{code: '406', tvf1: '打开', tvf2: '打开', tvf3: '半开', tvf4: '半开', tef1: '半开', tef2: '打开', jet1: '打开', jet2: '关闭', jet3: '打开', jet4: '打开', jet5: '打开', jet6: '打开', jet7: '打开', jet8: '打开', jet9: '打开', jet10: '打开', jet11: '打开', jet12: '打开', jet13: '打开', jet14:'打开', jet15: '打开'},
{code: '407', tvf1: '打开', tvf2: '打开', tvf3: '半开', tvf4: '半开', tef1: '半开', tef2: '打开', jet1: '打开', jet2: '关闭', jet3: '打开', jet4: '打开', jet5: '打开', jet6: '打开', jet7: '打开', jet8: '打开', jet9: '打开', jet10: '打开', jet11: '打开', jet12: '打开', jet13: '打开', jet14:'打开', jet15: '打开'},
{code: '408', tvf1: '打开', tvf2: '打开', tvf3: '半开', tvf4: '半开', tef1: '半开', tef2: '打开', jet1: '打开', jet2: '关闭', jet3: '打开', jet4: '打开', jet5: '打开', jet6: '打开', jet7: '打开', jet8: '打开', jet9: '打开', jet10: '打开', jet11: '打开', jet12: '打开', jet13: '打开', jet14:'打开', jet15: '打开'},
{code: '409', tvf1: '打开', tvf2: '打开', tvf3: '半开', tvf4: '半开', tef1: '半开', tef2: '打开', jet1: '打开', jet2: '关闭', jet3: '打开', jet4: '打开', jet5: '打开', jet6: '打开', jet7: '打开', jet8: '打开', jet9: '打开', jet10: '打开', jet11: '打开', jet12: '打开', jet13: '打开', jet14:'打开', jet15: '打开'},
{code: '410', tvf1: '打开', tvf2: '打开', tvf3: '半开', tvf4: '半开', tef1: '半开', tef2: '打开', jet1: '打开', jet2: '关闭', jet3: '打开', jet4: '打开', jet5: '打开', jet6: '打开', jet7: '打开', jet8: '打开', jet9: '打开', jet10: '打开', jet11: '打开', jet12: '打开', jet13: '打开', jet14:'打开', jet15: '打开'},
{code: '411', tvf1: '打开', tvf2: '打开', tvf3: '半开', tvf4: '半开', tef1: '半开', tef2: '打开', jet1: '打开', jet2: '关闭', jet3: '打开', jet4: '打开', jet5: '打开', jet6: '打开', jet7: '打开', jet8: '打开', jet9: '打开', jet10: '打开', jet11: '打开', jet12: '打开', jet13: '打开', jet14:'打开', jet15: '打开'},
{code: '412', tvf1: '打开', tvf2: '打开', tvf3: '半开', tvf4: '半开', tef1: '半开', tef2: '打开', jet1: '打开', jet2: '关闭', jet3: '打开', jet4: '打开', jet5: '打开', jet6: '打开', jet7: '打开', jet8: '打开', jet9: '打开', jet10: '打开', jet11: '打开', jet12: '打开', jet13: '打开', jet14:'打开', jet15: '打开'},
{code: '413', tvf1: '打开', tvf2: '打开', tvf3: '半开', tvf4: '半开', tef1: '半开', tef2: '打开', jet1: '打开', jet2: '关闭', jet3: '打开', jet4: '打开', jet5: '打开', jet6: '打开', jet7: '打开', jet8: '打开', jet9: '打开', jet10: '打开', jet11: '打开', jet12: '打开', jet13: '打开', jet14:'打开', jet15: '打开'},
{code: '414', tvf1: '打开', tvf2: '打开', tvf3: '半开', tvf4: '半开', tef1: '半开', tef2: '打开', jet1: '打开', jet2: '关闭', jet3: '打开', jet4: '打开', jet5: '打开', jet6: '打开', jet7: '打开', jet8: '打开', jet9: '打开', jet10: '打开', jet11: '打开', jet12: '打开', jet13: '打开', jet14:'打开', jet15: '打开'},
{code: '', tvf1: '打开', tvf2: '打开', tvf3: '半开', tvf4: '半开', tef1: '半开', tef2: '打开', jet1: '打开', jet2: '关闭', jet3: '打开', jet4: '打开', jet5: '打开', jet6: '打开', jet7: '打开', jet8: '打开', jet9: '打开', jet10: '打开', jet11: '打开', jet12: '打开', jet13: '打开', jet14:'打开', jet15: '打开'},
{}
]
};
},
methods: {
rowStyleFunction({row, column, rowIndex, columnIndex}) {
if (rowIndex === 14 && columnIndex > 1) {
return {
'text-align': 'center',
'height': '28px',
'padding': '0',
'background': '#45607B',
'color': '#0F0'
};
} else if (columnIndex === 2) {
return {
'text-align': 'center',
'height': '28px',
'padding': '0',
'background': '#45607B',
'color': '#56E5DE'
};
} else {
return {
'text-align': 'center',
'height': '28px',
'padding': '0',
'background': '#45607B'
};
}
},
objectSpanMethod({ row, column, rowIndex, columnIndex }) {
if (columnIndex === 1) {
if (rowIndex === 0) {
return {
rowspan: 6,
colspan: 1
};
} else if (rowIndex === 6) {
return {
rowspan: 8,
colspan: 1
};
} else if (rowIndex === 14 || rowIndex === 15) {
return {
rowspan: 1,
colspan: 2
};
} else {
return {
rowspan: 0,
colspan: 0
};
}
} else if (columnIndex === 2) {
if (rowIndex === 14 || rowIndex === 15) {
return {
rowspan: 0,
colspan: 0
};
} else {
return {
rowspan: 1,
colspan: 1
};
}
}
},
showModeDialog(index) {
}
}
};
</script>
<style scoped>
.title-0{
width: 100%;
line-height: 20px;
text-align: left;
padding-left: 14px;
}
.index-column-cell {
text-align:center;
width: 100%;
height: 28px;
border-top: 1px solid #203244;
border-left: 2px solid #A3A3A3;
border-bottom: 1px solid #203244;
border-right: 1px solid #203244;
}
.index-row-cell {
width: 99px;
height: 20px;
font-size: 14px;
line-height: 20px;
display: inline-block;
border-top: 2px solid #A3A3A3;
border-left: 1px solid #203244;
border-bottom: 2px solid #203244;
border-right: 1px solid #203244;
}
.button-box{
text-align: center;
background-color: #ccc;
float: left;
font-size: 12px;
color: #333;
font-weight: bold;
box-sizing: border-box;
border-top: 2px solid #fff;
border-left: 2px solid #fff;
border-right: 2px solid #565656;
border-bottom: 2px solid #565656;
cursor: pointer;
}
.button-box.active,
.button-box:hover{
background: #EBB570;
border-top: 2px solid #795B31;
border-left: 2px solid #795B31;
border-right: 1px solid #fff;
border-bottom: 1px solid #fff;
}
</style>

308
src/views/iscs/iscsSystem/config/bas/controlChild/ventilation1.vue Normal file
View File

@ -0,0 +1,308 @@
<template>
<el-table ref="table2" :data="tableData" :header-row-style="tableTitleStyle" :cell-style="rowStyleFunction" :span-method="objectSpanMethod" style="float: left;">
<el-table-column type="index" width="20" fixed class-name="index-column">
<template slot="header">
<div style="width: 100%;height: 26px;background: #FFF" />
<div class="index-column-cell">1</div>
<div class="index-column-cell">2</div>
<div class="index-column-cell">3</div>
</template>
<template slot-scope="scope">
<div class="index-column-cell">{{ scope.$index + 4 }}</div>
</template>
</el-table-column>
<el-table-column fixed width="300">
<template slot="header">
<div style="font-size: 0;text-align: center;">
<div class="index-row-cell">1</div>
<div class="index-row-cell">2</div>
<div class="index-row-cell">3</div>
</div>
<div class="title-0">全年运行工况</div>
<div class="title-0">运行模式号</div>
<div class="title-0">模式状态</div>
<div class="title-0">火灾指示灯:</div>
</template>
<template slot-scope="scope">
<div v-if="scope.$index == 0">
<div style="width: 299px;">
<div class="button-box" style="width: 100%;height: 28px;line-height: 28px;" @click="showModeDialog(0)">正常工况</div>
</div>
<div style="width: 300px;display: flex;">
<div style="width: 200px;display: inline-block;border: 1px solid #FFF;height: 56px;line-height: 56px;">A端出入端左线火灾</div>
<div style="width: 99px;display: inline-block;">
<div class="button-box" style="width: 100%;height: 28px;line-height: 28px;" @click="showModeDialog(0)">首选</div>
<div class="button-box" style="width: 100%;height: 28px;line-height: 28px;" @click="showModeDialog(0)">备选</div>
</div>
</div>
<div style="width: 300px;display: flex;">
<div style="width: 200px;display: inline-block;border: 1px solid #FFF;height: 56px;line-height: 56px;">A端出入端右线火灾</div>
<div style="width: 99px;display: inline-block;">
<div class="button-box" style="width: 100%;height: 28px;line-height: 28px;" @click="showModeDialog(0)">首选</div>
<div class="button-box" style="width: 100%;height: 28px;line-height: 28px;" @click="showModeDialog(0)">备选</div>
</div>
</div>
<div style="width: 300px;display: flex;">
<div style="width: 100px;display: inline-block;border: 1px solid #FFF;height: 84px;margin: auto;">
<div style="margin-top: 18px;">上行</div><div>阻塞</div>
</div>
<div style="width: 200px;display: inline-block">
<div style="width: 200px;display: flex;">
<div style="width: 100px;display: inline-block;height: 56px;line-height: 56px;">工况1</div>
<div style="width: 99px;display: inline-block">
<div class="button-box" style="width: 100%;height: 28px;line-height: 28px;" @click="showModeDialog(0)">首选</div>
<div class="button-box" style="width: 100%;height: 28px;line-height: 28px;" @click="showModeDialog(0)">备选</div>
</div>
</div>
<div style="width: 199px;">
<div class="button-box" style="width: 100%;height: 28px;line-height: 28px;" @click="showModeDialog(0)">工况2</div>
</div>
</div>
</div>
<div style="width: 300px; display: flex;">
<div style="width: 100px;display: inline-block;border: 1px solid #FFF;height:112px;margin: auto;">
<div style="margin-top: 32px;">上行</div><div>火灾</div>
</div>
<div style="width: 100px;display: inline-block;">
<div style="width: 100px;border: 1px solid #FFF;height:56px;line-height: 56px;">工况1</div>
<div style="width: 100px;border: 1px solid #FFF;height:56px;line-height: 56px;">工况2</div>
</div>
<div style="width: 99px;display: inline-block;">
<div class="button-box" style="width: 100%;height: 28px;line-height: 28px;" @click="showModeDialog(0)">首选</div>
<div class="button-box" style="width: 100%;height: 28px;line-height: 28px;" @click="showModeDialog(0)">备选</div>
<div class="button-box" style="width: 100%;height: 28px;line-height: 28px;" @click="showModeDialog(0)">首选</div>
<div class="button-box" style="width: 100%;height: 28px;line-height: 28px;" @click="showModeDialog(0)">备选</div>
</div>
</div>
<div style="width: 300px;display: flex;">
<div style="width: 100px;display: inline-block;border: 1px solid #FFF;height: 84px;margin: auto;">
<div style="margin-top: 18px;">下行</div><div>阻塞</div>
</div>
<div style="width: 200px;display: inline-block">
<div style="width: 200px;display: flex;">
<div style="width: 100px;display: inline-block;height: 56px;line-height: 56px;">工况1</div>
<div style="width: 99px;display: inline-block">
<div class="button-box" style="width: 100%;height: 28px;line-height: 28px;" @click="showModeDialog(0)">首选</div>
<div class="button-box" style="width: 100%;height: 28px;line-height: 28px;" @click="showModeDialog(0)">备选</div>
</div>
</div>
<div style="width: 199px;">
<div class="button-box" style="width: 100%;height: 28px;line-height: 28px;" @click="showModeDialog(0)">工况2</div>
</div>
</div>
</div>
</div>
<div v-if="scope.$index === 15" style="height: 28px;line-height: 28px;">设备实际运行状态</div>
<div v-if="scope.$index === 16">状态比较</div>
</template>
</el-table-column>
<el-table-column :key="11" prop="code" label="模式编号" width="90">
<template slot="header">
<div style="font-size: 0;text-align: center;height: 100%;">
<div class="index-row-cell" style="width: 90px;margin-left: -1px;">4</div>
<div style="font-size: 14px;height: 80px;line-height: 80px;">模式编号</div>
</div>
</template>
</el-table-column>
<el-table-column prop="smallSystem1">
<template slot="header">
<div style="font-size: 0;text-align: center;height: 100%;">
<div class="index-row-cell" style="width: 90px;">5</div>
<div class="index-row-cell" style="width: 90px;">6</div>
<div class="index-row-cell" style="width: 90px;">7</div>
<div class="index-row-cell" style="width: 90px;">8</div>
<div class="index-row-cell" style="width: 90px;">9</div>
<div class="index-row-cell" style="width: 90px;">10</div>
<div class="index-row-cell" style="width: 90px;">11</div>
<div class="index-row-cell" style="width: 89px;">12</div>
<div class="index-row-cell" style="width: 90px;">13</div>
<div class="index-row-cell" style="width: 90px;">14</div>
<div class="index-row-cell" style="width: 90px;">15</div>
<div class="index-row-cell" style="width: 90px;">16</div>
<div class="index-row-cell" style="width: 90px;">17</div>
<div class="index-row-cell" style="width: 90px;">18</div>
<div class="index-row-cell" style="width: 90px;">19</div>
<div class="index-row-cell" style="width: 89px;">20</div>
<div class="index-row-cell" style="width: 90px;">21</div>
<div class="index-row-cell" style="width: 90px;">22</div>
<div class="index-row-cell" style="width: 90px;">23</div>
<div class="index-row-cell" style="width: 90px;">24</div>
<div class="index-row-cell" style="width: 89px;">25</div>
<div style="font-size: 14px;">隧道通风系1</div>
</div>
</template>
<el-table-column prop="exhaustFan" label="车站排热风机">
<el-table-column prop="tef1" width="90" label-class-name="cyan-label" label="TEF-201-I-1" />
<el-table-column prop="tef2" width="90" label-class-name="cyan-label" label="TEF-201-II-1" />
</el-table-column>
<el-table-column prop="tunnelFan" label="隧道风机">
<el-table-column prop="tvf1" width="90" label-class-name="cyan-label" label="TVF-201-I-1" />
<el-table-column prop="tvf2" width="90" label-class-name="cyan-label" label="TVF-201-I-2" />
<el-table-column prop="tvf3" width="90" label-class-name="cyan-label" label="TVF-201-II-1" />
<el-table-column prop="tvf4" width="90" label-class-name="cyan-label" label="TVF-201-II-2" />
</el-table-column>
<el-table-column prop="flowControl" label="电动组合风量调节阀">
<el-table-column prop="md1" width="90" label-class-name="cyan-label" label="MD-201-I-1" />
<el-table-column prop="md2" width="90" label-class-name="cyan-label" label="MD-201-I-2" />
<el-table-column prop="md3" width="90" label-class-name="cyan-label" label="MD-201-I-3" />
<el-table-column prop="md4" width="90" label-class-name="cyan-label" label="MD-201-I-4" />
<el-table-column prop="md5" width="90" label-class-name="cyan-label" label="MD-201-I-5" />
<el-table-column prop="md6" width="90" label-class-name="cyan-label" label="MD-201-I-6" />
<el-table-column prop="md7" width="90" label-class-name="cyan-label" label="MD-201-I-7" />
<el-table-column prop="md8" width="90" label-class-name="cyan-label" label="MD-201-I-8" />
<el-table-column prop="md9" width="90" label-class-name="cyan-label" label="MD-201-II-1" />
<el-table-column prop="md10" width="90" label-class-name="cyan-label" label="MD-201-II-2" />
<el-table-column prop="md11" width="90" label-class-name="cyan-label" label="MD-201-II-3" />
<el-table-column prop="md12" width="90" label-class-name="cyan-label" label="MD-201-II-4" />
<el-table-column prop="md13" width="90" label-class-name="cyan-label" label="MD-201-II-5" />
<el-table-column prop="md14" width="90" label-class-name="cyan-label" label="MD-201-II-6" />
<el-table-column prop="md15" width="90" label-class-name="cyan-label" label="MD-201-II-7" />
<el-table-column prop="md16" width="90" label-class-name="cyan-label" label="MD-201-II-8" />
</el-table-column>
</el-table-column>
</el-table>
</template>
<script>
export default {
name: 'Ventilation1',
data() {
return {
tableTitleStyle: {'text-align': 'center', 'height': '28px', 'padding': '0', 'background': '#45607B'},
tableData: [
{code: '415', tvf1: '打开', tvf2: '打开', tvf3: '半开', tvf4: '半开', tef1: '半开', tef2: '打开', md1: '打开', md2: '关闭', md3: '打开', md4: '打开', md5: '打开', md6: '打开', md7: '打开', md8: '打开', md9: '打开', md10: '打开', md11: '打开', md12: '打开', md13: '打开', md14:'打开', md15: '打开', md16: '打开'},
{code: '416', tvf1: '打开', tvf2: '打开', tvf3: '半开', tvf4: '半开', tef1: '半开', tef2: '打开', md1: '打开', md2: '关闭', md3: '打开', md4: '打开', md5: '打开', md6: '打开', md7: '打开', md8: '打开', md9: '打开', md10: '打开', md11: '打开', md12: '打开', md13: '打开', md14:'打开', md15: '打开', md16: '打开'},
{code: '417', tvf1: '打开', tvf2: '打开', tvf3: '半开', tvf4: '半开', tef1: '半开', tef2: '打开', md1: '打开', md2: '关闭', md3: '打开', md4: '打开', md5: '打开', md6: '打开', md7: '打开', md8: '打开', md9: '打开', md10: '打开', md11: '打开', md12: '打开', md13: '打开', md14:'打开', md15: '打开', md16: '打开'},
{code: '418', tvf1: '打开', tvf2: '打开', tvf3: '半开', tvf4: '半开', tef1: '半开', tef2: '打开', md1: '打开', md2: '关闭', md3: '打开', md4: '打开', md5: '打开', md6: '打开', md7: '打开', md8: '打开', md9: '打开', md10: '打开', md11: '打开', md12: '打开', md13: '打开', md14:'打开', md15: '打开', md16: '打开'},
{code: '419', tvf1: '打开', tvf2: '打开', tvf3: '半开', tvf4: '半开', tef1: '半开', tef2: '打开', md1: '打开', md2: '关闭', md3: '打开', md4: '打开', md5: '打开', md6: '打开', md7: '打开', md8: '打开', md9: '打开', md10: '打开', md11: '打开', md12: '打开', md13: '打开', md14:'打开', md15: '打开', md16: '打开'},
{code: '420', tvf1: '打开', tvf2: '打开', tvf3: '半开', tvf4: '半开', tef1: '半开', tef2: '打开', md1: '打开', md2: '关闭', md3: '打开', md4: '打开', md5: '打开', md6: '打开', md7: '打开', md8: '打开', md9: '打开', md10: '打开', md11: '打开', md12: '打开', md13: '打开', md14:'打开', md15: '打开', md16: '打开'},
{code: '421', tvf1: '打开', tvf2: '打开', tvf3: '半开', tvf4: '半开', tef1: '半开', tef2: '打开', md1: '打开', md2: '关闭', md3: '打开', md4: '打开', md5: '打开', md6: '打开', md7: '打开', md8: '打开', md9: '打开', md10: '打开', md11: '打开', md12: '打开', md13: '打开', md14:'打开', md15: '打开', md16: '打开'},
{code: '422', tvf1: '打开', tvf2: '打开', tvf3: '半开', tvf4: '半开', tef1: '半开', tef2: '打开', md1: '打开', md2: '关闭', md3: '打开', md4: '打开', md5: '打开', md6: '打开', md7: '打开', md8: '打开', md9: '打开', md10: '打开', md11: '打开', md12: '打开', md13: '打开', md14:'打开', md15: '打开', md16: '打开'},
{code: '423', tvf1: '打开', tvf2: '打开', tvf3: '半开', tvf4: '半开', tef1: '半开', tef2: '打开', md1: '打开', md2: '关闭', md3: '打开', md4: '打开', md5: '打开', md6: '打开', md7: '打开', md8: '打开', md9: '打开', md10: '打开', md11: '打开', md12: '打开', md13: '打开', md14:'打开', md15: '打开', md16: '打开'},
{code: '424', tvf1: '打开', tvf2: '打开', tvf3: '半开', tvf4: '半开', tef1: '半开', tef2: '打开', md1: '打开', md2: '关闭', md3: '打开', md4: '打开', md5: '打开', md6: '打开', md7: '打开', md8: '打开', md9: '打开', md10: '打开', md11: '打开', md12: '打开', md13: '打开', md14:'打开', md15: '打开', md16: '打开'},
{code: '425', tvf1: '打开', tvf2: '打开', tvf3: '半开', tvf4: '半开', tef1: '半开', tef2: '打开', md1: '打开', md2: '关闭', md3: '打开', md4: '打开', md5: '打开', md6: '打开', md7: '打开', md8: '打开', md9: '打开', md10: '打开', md11: '打开', md12: '打开', md13: '打开', md14:'打开', md15: '打开', md16: '打开'},
{code: '426', tvf1: '打开', tvf2: '打开', tvf3: '半开', tvf4: '半开', tef1: '半开', tef2: '打开', md1: '打开', md2: '关闭', md3: '打开', md4: '打开', md5: '打开', md6: '打开', md7: '打开', md8: '打开', md9: '打开', md10: '打开', md11: '打开', md12: '打开', md13: '打开', md14:'打开', md15: '打开', md16: '打开'},
{code: '427', tvf1: '打开', tvf2: '打开', tvf3: '半开', tvf4: '半开', tef1: '半开', tef2: '打开', md1: '打开', md2: '关闭', md3: '打开', md4: '打开', md5: '打开', md6: '打开', md7: '打开', md8: '打开', md9: '打开', md10: '打开', md11: '打开', md12: '打开', md13: '打开', md14:'打开', md15: '打开', md16: '打开'},
{code: '428', tvf1: '打开', tvf2: '打开', tvf3: '半开', tvf4: '半开', tef1: '半开', tef2: '打开', md1: '打开', md2: '关闭', md3: '打开', md4: '打开', md5: '打开', md6: '打开', md7: '打开', md8: '打开', md9: '打开', md10: '打开', md11: '打开', md12: '打开', md13: '打开', md14:'打开', md15: '打开', md16: '打开'},
{code: '429', tvf1: '打开', tvf2: '打开', tvf3: '半开', tvf4: '半开', tef1: '半开', tef2: '打开', md1: '打开', md2: '关闭', md3: '打开', md4: '打开', md5: '打开', md6: '打开', md7: '打开', md8: '打开', md9: '打开', md10: '打开', md11: '打开', md12: '打开', md13: '打开', md14:'打开', md15: '打开', md16: '打开'},
{code: '', tvf1: '打开', tvf2: '打开', tvf3: '半开', tvf4: '半开', tef1: '半开', tef2: '打开', md1: '打开', md2: '关闭', md3: '打开', md4: '打开', md5: '打开', md6: '打开', md7: '打开', md8: '打开', md9: '打开', md10: '打开', md11: '打开', md12: '打开', md13: '打开', md14:'打开', md15: '打开', md16: '打开'},
{}
]
};
},
methods: {
rowStyleFunction({row, column, rowIndex, columnIndex}) {
if (rowIndex === 15 && columnIndex > 1) {
return {
'text-align': 'center',
'height': '28px',
'padding': '0',
'background': '#45607B',
'color': '#0F0'
};
} else if (columnIndex === 2) {
return {
'text-align': 'center',
'height': '28px',
'padding': '0',
'background': '#45607B',
'color': '#56E5DE'
};
} else {
return {
'text-align': 'center',
'height': '28px',
'padding': '0',
'background': '#45607B'
};
}
},
objectSpanMethod({ row, column, rowIndex, columnIndex }) {
if (columnIndex === 1) {
if (rowIndex === 0) {
return {
rowspan: 15,
colspan: 1
};
} else if (rowIndex === 16 || rowIndex === 15) {
return {
rowspan: 1,
colspan: 2
};
} else {
return {
rowspan: 0,
colspan: 0
};
}
} else if (columnIndex === 2) {
if (rowIndex === 16 || rowIndex === 15) {
return {
rowspan: 0,
colspan: 0
};
} else {
return {
rowspan: 1,
colspan: 1
};
}
}
},
showModeDialog(index) {
}
}
};
</script>
<style scoped>
.title-0{
width: 100%;
line-height: 20px;
text-align: left;
padding-left: 14px;
}
.index-column-cell {
text-align:center;
width: 100%;
height: 28px;
border-top: 1px solid #203244;
border-left: 2px solid #A3A3A3;
border-bottom: 1px solid #203244;
border-right: 1px solid #203244;
}
.index-row-cell {
width: 99px;
height: 20px;
font-size: 14px;
line-height: 20px;
display: inline-block;
border-top: 2px solid #A3A3A3;
border-left: 1px solid #203244;
border-bottom: 2px solid #203244;
border-right: 1px solid #203244;
}
.button-box{
text-align: center;
background-color: #ccc;
float: left;
font-size: 12px;
color: #333;
font-weight: bold;
box-sizing: border-box;
border-top: 2px solid #fff;
border-left: 2px solid #fff;
border-right: 2px solid #565656;
border-bottom: 2px solid #565656;
cursor: pointer;
}
.button-box.active,
.button-box:hover{
background: #EBB570;
border-top: 2px solid #795B31;
border-left: 2px solid #795B31;
border-right: 1px solid #fff;
border-bottom: 1px solid #fff;
}
</style>

249
src/views/iscs/iscsSystem/config/bas/controlChild/ventilation2.vue Normal file
View File

@ -0,0 +1,249 @@
<template>
<el-table ref="table2" :data="tableData" :header-row-style="tableTitleStyle" :cell-style="rowStyleFunction" :span-method="objectSpanMethod" style="float: left;">
<el-table-column type="index" width="20" fixed class-name="index-column">
<template slot="header">
<div style="width: 100%;height: 26px;background: #FFF" />
<div class="index-column-cell">1</div>
<div class="index-column-cell">2</div>
<div class="index-column-cell">3</div>
</template>
<template slot-scope="scope">
<div class="index-column-cell">{{ scope.$index + 4 }}</div>
</template>
</el-table-column>
<el-table-column fixed width="300">
<template slot="header">
<div style="font-size: 0;text-align: center;">
<div class="index-row-cell">1</div>
<div class="index-row-cell">2</div>
<div class="index-row-cell">3</div>
</div>
<div class="title-0">全年运行工况</div>
<div class="title-0">运行模式号</div>
<div class="title-0">模式状态</div>
<div class="title-0">火灾指示灯:</div>
</template>
<template slot-scope="scope">
<div v-if="scope.$index == 0">
<div style="width: 300px; display: flex;">
<div style="width: 100px;display: inline-block;border: 1px solid #FFF;height:112px;margin: auto;">
<div style="margin-top: 32px;">下行</div><div>火灾</div>
</div>
<div style="width: 100px;display: inline-block;">
<div style="width: 100px;border: 1px solid #FFF;height:56px;line-height: 56px;">工况1</div>
<div style="width: 100px;border: 1px solid #FFF;height:56px;line-height: 56px;">工况2</div>
</div>
<div style="width: 99px;display: inline-block;">
<div class="button-box" style="width: 100%;height: 28px;line-height: 28px;" @click="showModeDialog(0)">首选</div>
<div class="button-box" style="width: 100%;height: 28px;line-height: 28px;" @click="showModeDialog(0)">备选</div>
<div class="button-box" style="width: 100%;height: 28px;line-height: 28px;" @click="showModeDialog(0)">首选</div>
<div class="button-box" style="width: 100%;height: 28px;line-height: 28px;" @click="showModeDialog(0)">备选</div>
</div>
</div>
<div style=""></div>
</div>
<div v-if="scope.$index === 6" style="height: 28px;line-height: 28px;">设备实际运行状态</div>
<div v-if="scope.$index === 7">状态比较</div>
</template>
</el-table-column>
<el-table-column :key="11" prop="code" label="模式编号" width="90">
<template slot="header">
<div style="font-size: 0;text-align: center;height: 100%;">
<div class="index-row-cell" style="width: 90px;margin-left: -1px;">4</div>
<div style="font-size: 14px;height: 80px;line-height: 80px;">模式编号</div>
</div>
</template>
</el-table-column>
<el-table-column prop="smallSystem1">
<template slot="header">
<div style="font-size: 0;text-align: center;height: 100%;">
<div class="index-row-cell" style="width: 90px;">5</div>
<div class="index-row-cell" style="width: 90px;">6</div>
<div class="index-row-cell" style="width: 90px;">7</div>
<div class="index-row-cell" style="width: 90px;">8</div>
<div class="index-row-cell" style="width: 90px;">9</div>
<div class="index-row-cell" style="width: 90px;">10</div>
<div class="index-row-cell" style="width: 90px;">11</div>
<div class="index-row-cell" style="width: 89px;">12</div>
<div class="index-row-cell" style="width: 90px;">13</div>
<div class="index-row-cell" style="width: 90px;">14</div>
<div class="index-row-cell" style="width: 90px;">15</div>
<div class="index-row-cell" style="width: 90px;">16</div>
<div class="index-row-cell" style="width: 90px;">17</div>
<div class="index-row-cell" style="width: 90px;">18</div>
<div class="index-row-cell" style="width: 90px;">19</div>
<div class="index-row-cell" style="width: 89px;">20</div>
<div class="index-row-cell" style="width: 90px;">21</div>
<div class="index-row-cell" style="width: 90px;">22</div>
<div class="index-row-cell" style="width: 90px;">23</div>
<div class="index-row-cell" style="width: 90px;">24</div>
<div class="index-row-cell" style="width: 89px;">25</div>
<div style="font-size: 14px;">隧道通风系1</div>
</div>
</template>
<el-table-column prop="exhaustFan" label="车站排热风机">
<el-table-column prop="tef1" width="90" label-class-name="cyan-label" label="TEF-201-I-1" />
<el-table-column prop="tef2" width="90" label-class-name="cyan-label" label="TEF-201-II-1" />
</el-table-column>
<el-table-column prop="tunnelFan" label="隧道风机">
<el-table-column prop="tvf1" width="90" label-class-name="cyan-label" label="TVF-201-I-1" />
<el-table-column prop="tvf2" width="90" label-class-name="cyan-label" label="TVF-201-I-2" />
<el-table-column prop="tvf3" width="90" label-class-name="cyan-label" label="TVF-201-II-1" />
<el-table-column prop="tvf4" width="90" label-class-name="cyan-label" label="TVF-201-II-2" />
</el-table-column>
<el-table-column prop="flowControl" label="电动组合风量调节阀">
<el-table-column prop="md1" width="90" label-class-name="cyan-label" label="MD-201-I-1" />
<el-table-column prop="md2" width="90" label-class-name="cyan-label" label="MD-201-I-2" />
<el-table-column prop="md3" width="90" label-class-name="cyan-label" label="MD-201-I-3" />
<el-table-column prop="md4" width="90" label-class-name="cyan-label" label="MD-201-I-4" />
<el-table-column prop="md5" width="90" label-class-name="cyan-label" label="MD-201-I-5" />
<el-table-column prop="md6" width="90" label-class-name="cyan-label" label="MD-201-I-6" />
<el-table-column prop="md7" width="90" label-class-name="cyan-label" label="MD-201-I-7" />
<el-table-column prop="md8" width="90" label-class-name="cyan-label" label="MD-201-I-8" />
<el-table-column prop="md9" width="90" label-class-name="cyan-label" label="MD-201-II-1" />
<el-table-column prop="md10" width="90" label-class-name="cyan-label" label="MD-201-II-2" />
<el-table-column prop="md11" width="90" label-class-name="cyan-label" label="MD-201-II-3" />
<el-table-column prop="md12" width="90" label-class-name="cyan-label" label="MD-201-II-4" />
<el-table-column prop="md13" width="90" label-class-name="cyan-label" label="MD-201-II-5" />
<el-table-column prop="md14" width="90" label-class-name="cyan-label" label="MD-201-II-6" />
<el-table-column prop="md15" width="90" label-class-name="cyan-label" label="MD-201-II-7" />
<el-table-column prop="md16" width="90" label-class-name="cyan-label" label="MD-201-II-8" />
</el-table-column>
</el-table-column>
</el-table>
</template>
<script>
export default {
name: 'Ventilation1',
data() {
return {
tableTitleStyle: {'text-align': 'center', 'height': '28px', 'padding': '0', 'background': '#45607B'},
tableData: [
{code: '415', tvf1: '打开', tvf2: '打开', tvf3: '半开', tvf4: '半开', tef1: '半开', tef2: '打开', md1: '打开', md2: '关闭', md3: '打开', md4: '打开', md5: '打开', md6: '打开', md7: '打开', md8: '打开', md9: '打开', md10: '打开', md11: '打开', md12: '打开', md13: '打开', md14:'打开', md15: '打开', md16: '打开'},
{code: '416', tvf1: '打开', tvf2: '打开', tvf3: '半开', tvf4: '半开', tef1: '半开', tef2: '打开', md1: '打开', md2: '关闭', md3: '打开', md4: '打开', md5: '打开', md6: '打开', md7: '打开', md8: '打开', md9: '打开', md10: '打开', md11: '打开', md12: '打开', md13: '打开', md14:'打开', md15: '打开', md16: '打开'},
{code: '417', tvf1: '打开', tvf2: '打开', tvf3: '半开', tvf4: '半开', tef1: '半开', tef2: '打开', md1: '打开', md2: '关闭', md3: '打开', md4: '打开', md5: '打开', md6: '打开', md7: '打开', md8: '打开', md9: '打开', md10: '打开', md11: '打开', md12: '打开', md13: '打开', md14:'打开', md15: '打开', md16: '打开'},
{code: '418', tvf1: '打开', tvf2: '打开', tvf3: '半开', tvf4: '半开', tef1: '半开', tef2: '打开', md1: '打开', md2: '关闭', md3: '打开', md4: '打开', md5: '打开', md6: '打开', md7: '打开', md8: '打开', md9: '打开', md10: '打开', md11: '打开', md12: '打开', md13: '打开', md14:'打开', md15: '打开', md16: '打开'},
{code: '419', tvf1: '打开', tvf2: '打开', tvf3: '半开', tvf4: '半开', tef1: '半开', tef2: '打开', md1: '打开', md2: '关闭', md3: '打开', md4: '打开', md5: '打开', md6: '打开', md7: '打开', md8: '打开', md9: '打开', md10: '打开', md11: '打开', md12: '打开', md13: '打开', md14:'打开', md15: '打开', md16: '打开'},
{code: '420', tvf1: '打开', tvf2: '打开', tvf3: '半开', tvf4: '半开', tef1: '半开', tef2: '打开', md1: '打开', md2: '关闭', md3: '打开', md4: '打开', md5: '打开', md6: '打开', md7: '打开', md8: '打开', md9: '打开', md10: '打开', md11: '打开', md12: '打开', md13: '打开', md14:'打开', md15: '打开', md16: '打开'},
{code: '', tvf1: '打开', tvf2: '打开', tvf3: '半开', tvf4: '半开', tef1: '半开', tef2: '打开', md1: '打开', md2: '关闭', md3: '打开', md4: '打开', md5: '打开', md6: '打开', md7: '打开', md8: '打开', md9: '打开', md10: '打开', md11: '打开', md12: '打开', md13: '打开', md14:'打开', md15: '打开', md16: '打开'},
{}
]
};
},
methods: {
rowStyleFunction({row, column, rowIndex, columnIndex}) {
if (rowIndex === 6 && columnIndex > 1) {
return {
'text-align': 'center',
'height': '28px',
'padding': '0',
'background': '#45607B',
'color': '#0F0'
};
} else if (columnIndex === 2) {
return {
'text-align': 'center',
'height': '28px',
'padding': '0',
'background': '#45607B',
'color': '#56E5DE'
};
} else {
return {
'text-align': 'center',
'height': '28px',
'padding': '0',
'background': '#45607B'
};
}
},
objectSpanMethod({ row, column, rowIndex, columnIndex }) {
if (columnIndex === 1) {
if (rowIndex === 0) {
return {
rowspan: 6,
colspan: 1
};
} else if (rowIndex === 6 || rowIndex === 7) {
return {
rowspan: 1,
colspan: 2
};
} else {
return {
rowspan: 0,
colspan: 0
};
}
} else if (columnIndex === 2) {
if (rowIndex === 6 || rowIndex === 7) {
return {
rowspan: 0,
colspan: 0
};
} else {
return {
rowspan: 1,
colspan: 1
};
}
}
},
showModeDialog(index) {
}
}
};
</script>
<style scoped>
.title-0{
width: 100%;
line-height: 20px;
text-align: left;
padding-left: 14px;
}
.index-column-cell {
text-align:center;
width: 100%;
height: 28px;
border-top: 1px solid #203244;
border-left: 2px solid #A3A3A3;
border-bottom: 1px solid #203244;
border-right: 1px solid #203244;
}
.index-row-cell {
width: 99px;
height: 20px;
font-size: 14px;
line-height: 20px;
display: inline-block;
border-top: 2px solid #A3A3A3;
border-left: 1px solid #203244;
border-bottom: 2px solid #203244;
border-right: 1px solid #203244;
}
.button-box{
text-align: center;
background-color: #ccc;
float: left;
font-size: 12px;
color: #333;
font-weight: bold;
box-sizing: border-box;
border-top: 2px solid #fff;
border-left: 2px solid #fff;
border-right: 2px solid #565656;
border-bottom: 2px solid #565656;
cursor: pointer;
}
.button-box.active,
.button-box:hover{
background: #EBB570;
border-top: 2px solid #795B31;
border-left: 2px solid #795B31;
border-right: 1px solid #fff;
border-bottom: 1px solid #fff;
}
</style>