iscs调整

src/iscs/constant/deviceRender.js

@@ -236,5 +236,11 @@ deviceRender[deviceType.IscsButton] = {
     zlevel: 1,
     z: 4
 };
+/** 状态表 */
+deviceRender[deviceType.StateTable] = {
+    _type: deviceType.StateTable,
+    zlevel: 1,
+    z: 5
+};
 
 export default deviceRender;

src/iscs/constant/deviceType.js

@@ -35,7 +35,8 @@ const deviceType = {
     Staircase:'Staircase',
     SingleStaircase: 'SingleStaircase',
     ArcStatus: 'ArcStatus',
-    IscsButton: 'IscsButton'
+    IscsButton: 'IscsButton',
+    StateTable: 'StateTable'
 };
 
 export default deviceType;

src/iscs/shape/factory.js

@@ -36,6 +36,7 @@ import SingleStaircase from './singleStaircase';
 import ArcStatus from './ArcStatus';
 import IscsButton from './button';
 import SmookExhaustFd from './bas/smookExhaustFd';
+import StateTable from './stateTable';
 
 const iscsShape = {};
 iscsShape[deviceType.ManualAlarmButton] = ManualAlarmButton;
@@ -76,6 +77,7 @@ iscsShape[deviceType.Staircase] = Staircase;
 iscsShape[deviceType.SingleStaircase] = SingleStaircase;
 iscsShape[deviceType.ArcStatus] = ArcStatus;
 iscsShape[deviceType.IscsButton] = IscsButton;
+iscsShape[deviceType.StateTable] = StateTable;
 
 function shapefactory(device, iscs) {
     const type = device.model._type;

src/iscs/shape/stateTable.js

@@ -1,5 +1,8 @@
 import Group from 'zrender/src/container/Group';
-const mean = {
+import Rect from 'zrender/src/graphic/shape/Rect';
+import Line from 'zrender/src/graphic/shape/Line';
+import Text from 'zrender/src/graphic/Text';
+const stateMap = {
     slidingDoorEmergencyDoorOpenMalfunction : '滑动门&应急门开门故障',
     slidingDoorEmergencyDoorCloseMalfunction: '滑动门&应急门关门故障',
     slidingDoorsInterlockAllClear: '滑动门互锁解除报警',
@@ -16,7 +19,26 @@ const mean = {
     systemDrivePowerFailure: '系统驱动电源故障',
     systemControlPowerFailure: '系统控制电源故障',
     monitorPowerFailure: '监视电源故障',
-    fieldBusFault:'现场总线故障'
+    fieldBusFault:'现场总线故障',
+    fasSystemFailure: { default: '正常'}, // 火灾系统故障
+    facpAutoMode: { default: '手动' }, // FACP自动状态
+    gesControlStatus: { default: '手动'}, // 气灭控制系统状态
+    hydrantStartupStatus: { default: '停止'}, // 消火栓泵启动状态
+    tscFireCondition: { default: '正常'}, // 感温电缆火警状态
+    aEquipmentAreaFireDetector: { default: '正常'}, // 站厅A端设备区点型火灾探测器
+    bEquipmentAreaFireDetector: { default: '正常'}, // 站厅B端设备区点型火灾探测器
+    pcaFireDetector: { default: '正常' }, // 站台公共区点型火灾探测器
+    scaFireDetector: { default: '正常'}, // 站厅公共区点型火灾探测器
+    elevatorCutFirePowerSupply: { default: '正常'}, // 站内垂直电梯切非站台B消
+    otherCutFirePowerSupply: { default: '正常'}, // 其他切非回路站台B消
+    inDownLeftManualAlarm: { default: '正常' }, // 站内下行左线手动报警按钮
+    inUpRightManualAlarm: { default: '正常'}, // 站内上行右线手动报警按钮
+    outDownLeftManualAlarm: { default: '正常'}, // 站间下行左线手动报警按钮
+    outUpRightManualAlarm: { default: '正常'}, // 站间上行右线手动报警按钮
+    inDownLeftHydrant: { default: '正常'}, // 站内下行左线消火栓按钮
+    inUpRightHydrant: { default: '正常'}, // 站内上行右线消火栓按钮
+    outDownLeftHydrant: { default: '正常'}, // 站间下行左线消火栓按钮
+    outUpRightHydrant: { default: '正常'} // 站间上行右线消火栓按钮
 };
 
 export default class StateTable extends Group {
@@ -29,8 +51,142 @@ export default class StateTable extends Group {
         this._code = device.model.code;
         this.create();
     }
-    cerate() {
+    create() {
-        // this.header =
+        const model = this.model;
+        this.grouper = new Group({
+            id: model.code,
+            position: [model.point.x, model.point.y]
+        });
+        this.lines = [];
+        let columnWidth = 0;
+        model.columnWidthList.forEach(item => {
+            columnWidth += item;
+            const line = new Line({
+                zlevel: this.zlevel,
+                z: this.z,
+                shape: {
+                    x1: columnWidth,
+                    y1: model.headerType === 'merge' ? model.rowHeight : 0,
+                    x2: columnWidth,
+                    y2: model.rowNum * model.rowHeight
+                },
+                style: {
+                    stroke: '#FFF',
+                    lineWidth: 2
+                }
+            });
+            this.grouper.add(line);
+            this.lines.push(line);
+        });
+        this.tabelBorder = new Rect({
+            zlevel: this.zlevel,
+            z: this.z,
+            shape: {
+                x: 0,
+                y: 0,
+                width: columnWidth,
+                height: model.rowNum * model.rowHeight
+            },
+            style: {
+                stroke: '#aFFF',
+                fill: 'rgba(255, 255, 255, 0)',
+                lineWidth: 2
+            }
+        });
+        this.grouper.add(this.tabelBorder);
+        for (let i = 0; i < model.rowNum; i++) {
+            const line = new Line({
+                zlevel: this.zlevel,
+                z: this.z,
+                shape: {
+                    x1: 0,
+                    y1: i * model.rowHeight,
+                    x2: columnWidth,
+                    y2: i * model.rowHeight
+                },
+                style: {
+                    stroke: '#FFF',
+                    lineWidth: 2
+                }
+            });
+            this.grouper.add(line);
+            this.lines.push(line);
+        }
+        this.header = [];
+        if (model.headerType === 'merge') {
+            const header = new Text({
+                zlevel: model.zlevel,
+                z: model.z + 1,
+                style: {
+                    x: columnWidth / 2,
+                    y: model.rowHeight,
+                    fontWeight: 'normal',
+                    fontSize: model.headerFontSize,
+                    fontFamily: 'consolas',
+                    text: model.headerContextList[0],
+                    textFill: '#FFF',
+                    textAlign: 'center',
+                    textPosition: 'inside',
+                    textVerticalAlign: 'bottom',
+                    textLineHeight: model.rowHeight
+                }
+            });
+            this.grouper.add(header);
+            this.header.push(header);
+        } else if (model.headerType === 'normal') {
+            let width = 0;
+            model.columnWidthList.forEach((item, i) => {
+                const header = new Text({
+                    zlevel: model.zlevel,
+                    z: model.z + 1,
+                    style: {
+                        x: item / 2 + width,
+                        y: model.rowHeight,
+                        fontWeight: 'normal',
+                        fontSize: model.headerFontSize,
+                        fontFamily: 'consolas',
+                        text: model.headerContextList[i],
+                        textFill: '#FFF',
+                        textAlign: 'center',
+                        textPosition: 'inside',
+                        textVerticalAlign: 'bottom',
+                        textLineHeight: model.rowHeight
+                    }
+                });
+                width += item;
+                this.grouper.add(header);
+                this.header.push(header);
+            });
+        }
+        this.tabelContent = [];
+        model.tableData.forEach((item, i)=> {
+            let width = 0;
+            model.columnWidthList.forEach((elem, j) => {
+                const text = new Text({
+                    zlevel: model.zlevel,
+                    z: model.z + 1,
+                    _subType: stateMap[item['column' + (j + 1)]],
+                    style:{
+                        x: elem / 2 + width,
+                        y: model.rowHeight * (i + 2),
+                        fontWeight: 'normal',
+                        fontSize: model.fontSize,
+                        fontFamily: 'consolas',
+                        text: stateMap[item['column' + (j + 1)]] ? stateMap[item['column' + (j + 1)]].default : item['column' + (j + 1)],
+                        textFill: stateMap[item['column' + (j + 1)]] ? '#4CCDE4' : '#38984F',
+                        textAlign: 'center',
+                        textPosition: 'inside',
+                        textVerticalAlign: 'bottom',
+                        textLineHeight: model.rowHeight
+                    }
+                });
+                this.grouper.add(text);
+                this.tabelContent.push(text);
+                width += item;
+            });
+        });
+        this.add(this.grouper);
+        console.log(this.model, this);
     }
     setModel(dx, dy) {
         this.model.point.x += dx;

src/iscs/utils/parser.js

@@ -154,6 +154,9 @@ export function parser(data) {
         zrUtil.each(data.iscsButtonList || [], elem=> {
             iscsDevice[elem.code] = deviceFactory(deviceType.IscsButton, elem);
         });
+        zrUtil.each(data.stateTableList || [], elem=> {
+            iscsDevice[elem.code] = deviceFactory(deviceType.StateTable, elem);
+        });
     }
 
     return iscsDevice;
@@ -287,6 +290,9 @@ export function updateIscsData(state, device) {
     case deviceType.IscsButton:
         updateIscsListByDevice(state, 'iscsButtonList', device);
         break;
+    case deviceType.StateTable:
+        updateIscsListByDevice(state, 'stateTableList', device);
+        break;
     }
     // store.dispatch('iscs/setIscsData', state.iscs);
 }

src/views/iscs/iscsDraw/iscsOperate/index.vue

@@ -13,7 +13,7 @@
           <el-tab-pane label="手动报警按钮" name="ManualAlarmButton">
             <manual-alarm-button
               ref="maButton"
-              style="width:90%"
+              style="width: 100%;height: 100%;"
               @createDataModel="createDataModel"
               @deleteDataModel="deleteDataModel"
             />
@@ -21,7 +21,7 @@
           <el-tab-pane label="消火栓报警按钮" name="FireHydranAlarmButton">
             <fire-hydran-alarm-button
               ref="fhaButton"
-              style="width: 90%"
+              style="width: 100%;height: 100%;"
               @createDataModel="createDataModel"
               @deleteDataModel="deleteDataModel"
             />
@@ -29,7 +29,7 @@
           <el-tab-pane label="气体灭火" name="GasFireControl">
             <gas-fire-control
               ref="gasFireControl"
-              style="width: 90%;"
+              style="width: 100%;height: 100%;"
               @createDataModel="createDataModel"
               @deleteDataModel="deleteDataModel"
             />
@@ -37,7 +37,7 @@
           <el-tab-pane label="楼梯" name="Escalator">
             <escalator
               ref="escalator"
-              style="width: 90%;"
+              style="width: 100%;height: 100%;"
               @createDataModel="createDataModel"
               @deleteDataModel="deleteDataModel"
             />
@@ -45,7 +45,7 @@
           <el-tab-pane label="通道" name="StairControl">
             <stair-control
               ref="stairControl"
-              style="width: 90%;"
+              style="width: 100%;height: 100%;"
               @createDataModel="createDataModel"
               @deleteDataModel="deleteDataModel"
             />
@@ -53,7 +53,7 @@
           <el-tab-pane label="扶梯" name="Staircase">
             <staircase
               ref="staircase"
-              style="width: 90%;"
+              style="width: 100%;height: 100%;"
               @createDataModel="createDataModel"
               @deleteDataModel="deleteDataModel"
             />
@@ -61,7 +61,7 @@
           <el-tab-pane label="闸机" name="FasBrakeMachine">
             <fas-brake-machine
               ref="fasBrakeMachine"
-              style="width: 90%;"
+              style="width: 100%;height: 100%;"
               @createDataModel="createDataModel"
               @deleteDataModel="deleteDataModel"
             />
@@ -69,7 +69,7 @@
           <el-tab-pane label="烟感探测器" name="SmokeDetector">
             <smoke-detector
               ref="smokeDetector"
-              style="width: 90%;"
+              style="width: 100%;height: 100%;"
               @createDataModel="createDataModel"
               @deleteDataModel="deleteDataModel"
             />
@@ -77,7 +77,15 @@
           <el-tab-pane label="温度探测器" name="TemperatureDetector">
             <temperature-detector
               ref="temperatureDetector"
-              style="width: 90%"
+              style="width: 100%;height: 100%;"
+              @createDataModel="createDataModel"
+              @deleteDataModel="deleteDataModel"
+            />
+          </el-tab-pane>
+          <el-tab-pane label="状态表" name="StateTable">
+            <state-table
+              ref="stateTable"
+              style="width: 100%;height: 100%;"
               @createDataModel="createDataModel"
               @deleteDataModel="deleteDataModel"
             />
@@ -85,7 +93,7 @@
           <el-tab-pane label="按钮" name="IscsButton">
             <iscs-button
               ref="iscsButton"
-              style="width: 90%;"
+              style="width: 100%;height: 100%;"
               @createDataModel="createDataModel"
               @deleteDataModel="deleteDataModel"
             />
@@ -93,7 +101,7 @@
           <el-tab-pane label="文字" name="IscsText">
             <iscs-text
               ref="iscsText"
-              style="width: 90%;"
+              style="width: 100%;height: 100%;"
               @createDataModel="createDataModel"
               @deleteDataModel="deleteDataModel"
             />
@@ -101,7 +109,7 @@
           <el-tab-pane label="线段" name="IscsLine">
             <iscs-line
               ref="iscsLine"
-              style="width: 90%;"
+              style="width: 100%;height: 100%;"
               @createDataModel="createDataModel"
               @deleteDataModel="deleteDataModel"
             />
@@ -109,7 +117,7 @@
           <el-tab-pane label="矩形" name="IscsRect">
             <iscs-rect
               ref="iscsRect"
-              style="width: 90%;"
+              style="width: 100%;height: 100%;"
               @createDataModel="createDataModel"
               @deleteDataModel="deleteDataModel"
             />
@@ -134,6 +142,7 @@ import IscsLine from '../iscsCommonElem/line';
 import IscsText from '../iscsCommonElem/text';
 import IscsRect from '../iscsCommonElem/rect';
 import IscsButton from '../iscsCommonElem/button';
+import StateTable from './stateTable';
 
 export default {
     name: 'IscsOperate',
@@ -150,7 +159,8 @@ export default {
         IscsText,
         IscsRect,
         IscsLine,
-        IscsButton
+        IscsButton,
+        StateTable
     },
     mixins: [
     ],
@@ -196,6 +206,63 @@ export default {
 	.map-control {
 		float: right;
 		width: 100%;
+		height: 100%;
+		.border-card{
+			height: 100%;
+		}
+	}
+	.mapEdit{
+		height: calc(100% - 47px);
+		.tab_pane_box{
+			height: 100%;
+		}
+	}
+	/deep/ .el-card__body{
+		height:100%;
+	}
+	/deep/ {
+		.mapEdit .el-tabs__nav-wrap.is-scrollable  {
+			padding: 0 20px;
+		}
+		.mapEdit .el-tabs__header .el-tabs__item.is-active {
+			border-bottom-color: #f5f7fa;
+			background: #f5f7fa;
+		}
+		.mapEdit .el-tabs__active-bar{
+			background: transparent;
+		}
+		.mapEdit .el-tabs__content {
+			height: calc(100% - 56px);
+		}
+		.mapEdit .el-tab-pane {
+			height: 100%;
+		}
+		.card .el-tabs__nav .el-tabs__item.is-active {
+			border-bottom: 2px solid #E4E7ED;
+			background: #409eff;
+			color: #fff;
+		}
+		.card .el-tabs__nav .el-tabs__item{
+			padding: 0 20px!important;
+		}
+
+		.mapEdit .el-tabs__nav-prev {
+			width: 20px;
+			height: 41px;
+			display: flex;
+			justify-content: center;
+			align-items: center;
+			box-shadow: 1px 1px 4px #ccc;
+		}
+
+		.mapEdit .el-tabs__nav-next {
+			width: 20px;
+			height: 41px;
+			display: flex;
+			justify-content: center;
+			align-items: center;
+			box-shadow: 1px 1px 4px #ccc;
+		}
 	}
     .heightClass{height:100%;}
 </style>

src/views/iscs/iscsDraw/iscsOperate/stateTable.vue

@@ -0,0 +1,264 @@
+<template>
+  <div style="overflow-y: scroll;height: calc(100% - 46px);">
+    <el-form ref="form" :rule="rules" :model="addModel" label-width="100px" size="small">
+      <el-form-item v-if="isUpdate" label="表格编号:" prop="code">
+        <el-input v-model="addModel.code" :disabled="true" />
+      </el-form-item>
+      <el-form-item label="x坐标:" prop="x">
+        <el-input-number v-model="addModel.x" controls-position="right" :min="1" size="small" />
+      </el-form-item>
+      <el-form-item label="y坐标:" prop="y">
+        <el-input-number v-model="addModel.y" controls-position="right" :min="1" size="small" />
+      </el-form-item>
+      <el-form-item label="列数:" prop="columnNum">
+        <el-input-number v-model="addModel.columnNum" controls-position="right" :min="1" size="small" @change="changeColumnNum" />
+      </el-form-item>
+      <el-form-item label="列宽:" prop="width">
+        <template v-for="(item, index) in addModel.columnWidthList">
+          <el-input-number :key="index" v-model="addModel.columnWidthList[index]" style="display: block; margin-bottom: 5px" controls-position="right" :min="1" size="small" />
+        </template>
+      </el-form-item>
+      <el-form-item label="行数:" prop="rowNum">
+        <el-input-number v-model="addModel.rowNum" controls-position="right" :min="1" size="small" @change="changeRowNum" />
+      </el-form-item>
+      <el-form-item label="行高:" prop="rowHeight">
+        <el-input-number v-model="addModel.rowHeight" controls-position="right" :min="1" size="small" />
+      </el-form-item>
+      <el-form-item label="表头类型:" prop="headerType">
+        <el-select v-model="addModel.headerType" size="small">
+          <el-option
+            v-for="item in headerTypeList"
+            :key="item.value"
+            :label="item.label"
+            :value="item.value"
+          />
+        </el-select>
+      </el-form-item>
+      <el-form-item label="表头内容:" prop="headerContextList">
+        <div v-if="addModel.headerType === 'normal'">
+          <template v-for="(item, index) in addModel.columnWidthList">
+            <el-input :key="index" v-model="addModel.headerContextList[index]" size="small" />
+          </template>
+        </div>
+        <div v-else-if="addModel.headerType === 'merge'">
+          <el-input v-model="addModel.headerContextList[0]" size="small" />
+        </div>
+      </el-form-item>
+      <el-form-item label="表头字体大小:" prop="headerFontSize">
+        <el-input-number v-model="addModel.headerFontSize" controls-position="right" :min="1" size="small" />
+      </el-form-item>
+      <el-form-item label="表格字体大小:" prop="fontSize">
+        <el-input-number v-model="addModel.fontSize" controls-position="right" :min="1" size="small" />
+      </el-form-item>
+      <el-form-item label="表格内容:" prop="tableData">
+        <el-table :data="addModel.tableData" border style="width: 100%;">
+          <template v-for="(item, i) in addModel.columnWidthList">
+            <el-table-column :key="i" :label="'列'+(i + 1)" :prop="'column'+ (i + 1)">
+              <template slot-scope="scope">
+                <el-input v-if="i === 0" v-model="addModel.tableData[scope.$index]['column'+ (i + 1)]" size="small" />
+                <el-select v-else v-model="addModel.tableData[scope.$index]['column'+ (i + 1)]" size="small">
+                  <el-option
+                    v-for="it in stateList"
+                    :key="it.value"
+                    :label="it.label"
+                    :value="it.value"
+                  />
+                </el-select>
+              </template>
+            </el-table-column>
+          </template>
+        </el-table>
+      </el-form-item>
+
+      <el-form-item>
+        <el-button type="primary" @click="onSubmit('form')">{{ buttonText }}</el-button>
+        <el-button v-show="showDeleteButton" type="danger" @click="deleteDevice">{{ $t('global.delete') }}</el-button>
+        <el-button v-show="showDeleteButton" @click="initPage">{{ $t('global.cancel') }}</el-button>
+      </el-form-item>
+    </el-form>
+  </div>
+</template>
+
+<script>
+import { mapGetters } from 'vuex';
+import {getUID} from '@/iscs/utils/Uid';
+export default {
+    name: 'FasBrakeMachine',
+    data() {
+        return {
+            addModel:{
+                code: '',
+                rowHeight: 25,
+                x: 10,
+                y: 10,
+                columnNum: 2,
+                rowNum: 2,
+                columnWidthList: [50, 50],
+                headerType: 'normal',
+                tableData: [{}],
+                headerContextList: [],
+                headerFontSize: 14,
+                fontSize: 12
+            },
+            headerTypeList: [
+                {label: '单列表头', value: 'merge'},
+                {label: '多列表头', value: 'normal'},
+                {label: '无表头', value: 'none'}
+            ],
+            stateList: [
+                {label: '火灾系统故障', value: 'fasSystemFailure'},
+                {label: 'FACP自动状态', value: 'facpAutoMode'},
+                {label: '气灭控制系统状态', value: 'gesControlStatus'},
+                {label: '消火栓泵启动状态', value: 'hydrantStartupStatus'},
+                {label: '感温电缆火警状态', value: 'tscFireCondition'},
+                {label: '站厅A端设备区点型火灾探测器', value: 'aEquipmentAreaFireDetector'},
+                {label: '站厅B端设备区点型火灾探测器', value: 'bEquipmentAreaFireDetector'},
+                {label: '站台公共区点型火灾探测器', value: 'pcaFireDetector'},
+                {label: '站厅公共区点型火灾探测器', value: 'scaFireDetector'},
+                {label: '站内垂直电梯切非站台B消', value: 'elevatorCutFirePowerSupply'},
+                {label: '其他切非回路站台B消', value: 'otherCutFirePowerSupply'},
+                {label: '站内下行左线手动报警按钮', value: 'inDownLeftManualAlarm'},
+                {label: '站内上行右线手动报警按钮', value: 'inUpRightManualAlarm'},
+                {label: '站间下行左线手动报警按钮', value: 'outDownLeftManualAlarm'},
+                {label: '站间上行右线手动报警按钮', value: 'outUpRightManualAlarm'},
+                {label: '站内下行左线消火栓按钮', value: 'inDownLeftHydrant'},
+                {label: '站内上行右线消火栓按钮', value: 'inUpRightHydrant'},
+                {label: '站间下行左线消火栓按钮', value: 'outDownLeftHydrant'},
+                {label: '站间上行右线消火栓按钮', value: 'outUpRightHydrant'}
+            ],
+            rules: {
+                width:[{ required: true, message:'请输入设备图形宽度', trigger: 'blur' }],
+                x: [{ required: true, message: '请输入设备图形的X轴坐标', trigger: 'blur' }],
+                y: [{ required: true, message: '请输入设备图形的Y轴坐标', trigger: 'blur' }]
+            },
+            isUpdate:false,
+            showDeleteButton: false,
+            buttonText: '立即创建'
+        };
+    },
+    computed:{
+        ...mapGetters('iscs', [
+            'iscs'
+        ])
+    },
+    watch:{
+        '$store.state.iscs.rightClickCount': function (val) {
+            const model = this.$store.getters['iscs/updateDeviceData'];
+            if (model._type === 'StateTable' ) {
+                this.buttonText = '修改';
+                this.showDeleteButton = true;
+                this.isUpdate = true;
+                this.addModel.code = model.code;
+                this.addModel.rowHeight = model.rowHeight;
+                this.addModel.x = model.point.x;
+                this.addModel.y = model.point.y;
+                this.addModel.columnNum = model.columnNum;
+                this.addModel.rowNum = model.rowNum;
+                this.addModel.columnWidthList = model.columnWidthList;
+                this.addModel.headerType = model.headerType;
+                this.addModel.tableData = model.tableData;
+                this.addModel.headerFontSize = model.headerFontSize;
+                this.addModel.fontSize = model.fontSize;
+            }
+        }
+    },
+    methods: {
+        onSubmit(form) {
+            this.$refs[form].validate((valid) => {
+                if (valid) {
+                    const model = {
+                        point: {
+                            x: this.addModel.x,
+                            y: this.addModel.y
+                        },
+                        columnNum: this.addModel.columnNum,
+                        rowNum: this.addModel.rowNum,
+                        rowHeight: this.addModel.rowHeight,
+                        columnWidthList: this.addModel.columnWidthList,
+                        headerType: this.addModel.headerType,
+                        tableData: this.addModel.tableData,
+                        _type: 'StateTable',
+                        headerFontSize: this.addModel.headerFontSize,
+                        fontSize: this.addModel.fontSize,
+                        code: this.isUpdate ? this.addModel.code : getUID('StateTable', this.iscs.stateTableList)
+                    };
+                    this.$emit('createDataModel', model);
+                    this.initPage();
+                } else {
+                    return false;
+                }
+            });
+        },
+        deleteDevice() {
+            const model = {
+                point: {
+                    x: this.addModel.x,
+                    y: this.addModel.y
+                },
+                code: this.addModel.code,
+                columnNum: this.addModel.columnNum,
+                rowNum: this.addModel.rowNum,
+                rowHeight: this.addModel.rowHeight,
+                columnWidthList: this.addModel.columnWidthList,
+                headerType: this.addModel.headerType,
+                tableData: this.addModel.tableData,
+                headerFontSize: this.addModel.headerFontSize,
+                fontSize: this.addModel.fontSize,
+                _type: 'StateTable'
+            };
+            this.$emit('deleteDataModel', model);
+            this.initPage();
+        },
+        initPage() {
+            this.isUpdate = false;
+            this.buttonText = '立即创建';
+            this.showDeleteButton = false;
+            this.addModel = {
+                code: '',
+                rowHeight: 25,
+                x: 10,
+                y: 10,
+                columnNum: 2,
+                rowNum: 2,
+                columnWidthList: [50, 50],
+                headerType: 'normal',
+                tableData: [{}, {}],
+                headerFontSize: 14,
+                fontSize: 12
+            };
+        },
+        changeColumnNum(num) {
+            const length = this.addModel.columnWidthList.length;
+            if (length > num) {
+                this.addModel.columnWidthList.splice(num - 1, length - num);
+                this.addModel.headerContextList.splice(num - 1, length - num);
+                this.addModel.tableData.forEach(item => {
+                    for (let i = 0; i < length - num; i++) {
+                        delete item['column' + (num - i + 1)];
+                    }
+                });
+            } else if (length < num) {
+                for (let i = 0; i < num - length; i++) {
+                    this.addModel.columnWidthList.push(50);
+                    this.addModel.headerContextList.push('');
+                }
+            }
+        },
+        changeRowNum(num) {
+            const length = this.addModel.tableData.length;
+            if (length + 1 > num) {
+                this.addModel.tableData.splice(num - 2, length + 1 - num);
+            } else if (length + 1 < num) {
+                for (let i = 0; i < num - length - 1; i++) {
+                    this.addModel.tableData.push({});
+                }
+            }
+        }
+    }
+
+};
+</script>
+
+<style scoped>
+
+</style>

src/views/iscs/iscsSystem/config/deviceControl.vue

@@ -13,15 +13,15 @@
     <div style="position:relative; width: 90%; left: 5%;">
       <el-row style="font-size: 14px;color: #6F49FE; height: 30px; line-height: 30px;">
         <el-col :span="4"><div>设备名称</div></el-col>
-        <el-col :span="4"><div style="width: 100%; background: #FFF;">{{ modeName }}</div></el-col>
+        <el-col :span="4"><div style="width: 100%; background: #FFF; padding-left: 5px;">{{ modeName }}</div></el-col>
         <el-col :span="8"><div style="width: 100%; background: #FFF;">{{ stationName }}</div></el-col>
         <el-col :span="8"><div style="width: 100%; background: #FFF;">{{ deviceType }}</div></el-col>
       </el-row>
       <el-row v-if="operation==='home'" style="margin-top: 10px;font-size: 14px;color: #6F49FE; height: 30px; line-height: 30px;">
         <el-col :span="4"><div>状态</div></el-col>
-        <el-col :span="20"><div style="width: 100%; background: #FFF;">运行</div></el-col>
+        <el-col :span="20"><div style="width: 100%; background: #FFF;padding-left: 5px;">运行</div></el-col>
       </el-row>
-      <el-row v-if="operation==='control'" style="margin-top: 10px;font-size: 14px;color: #6F49FE;">
+      <el-row v-if="operation==='control'" style="margin-top: 40px;font-size: 14px;color: #6F49FE;">
         <el-col :span="7" :offset="2">
           <div style="border: 1px solid #AAA7A4; border-radius: 4px;text-align: center; height: 80px;">
             <el-row style="height: 40px; line-height: 40px;"><div>当前运行状况</div></el-row>
@@ -35,17 +35,45 @@
           </div>
         </el-col>
       </el-row>
+      <el-row v-if="operation==='detail'" style="margin-top: 40px;font-size: 14px;color: #6F49FE;">
+        <div style="position: relative;border: 1px solid #000; border-radius: 4px;background-image: linear-gradient(#CFCDCE,#EBEBE9);height: 150px;">
+          <div style="position: absolute; width: 96%; left: 2%;background: #CDC5BF;height: 86%; top: 7%;padding: 20px 15px">
+            <el-row style="height: 33%;line-height: 25px;">
+              <el-col :span="12">读卡器非法尝试</el-col>
+              <el-col :span="12">子控制器电池电量</el-col>
+            </el-row>
+            <el-row style="height: 33%;line-height: 25px;">
+              <el-col :span="12">玻璃破碎</el-col>
+              <el-col :span="12">子控制器防拆开关</el-col>
+            </el-row>
+            <el-row style="height: 33%;line-height: 25px;">
+              <el-col :span="12">&nbsp</el-col>
+              <el-col :span="12">子控制器状态</el-col>
+            </el-row>
+          </div>
+        </div>
+      </el-row>
       <el-row v-if="operation==='home'" style="margin-top: 20px">
         <el-button style="margin-right: 13px;" @click="clickEvent('control')">控制</el-button>
-        <el-button style="margin-right: 13px;">标记</el-button>
+        <el-button style="margin-right: 13px;" @click="clickEvent('sign')">标记</el-button>
-        <el-button style="margin-right: 13px;">详情</el-button>
+        <el-button style="margin-right: 13px;" @click="clickEvent('detail')">详情</el-button>
         <el-button style="margin-right: 13px;">锁闭详情</el-button>
         <el-button style="margin-right: 12px;">指派趋势</el-button>
-        <el-button>取消</el-button>
+        <el-button @click="doClose">取消</el-button>
       </el-row>
-      <el-row v-if="operation==='control'" style="margin-top: 20px">
+      <el-row v-if="operation==='control'" style="margin-top: 20px; text-align: center;">
-        <el-button style="margin-right: 13px;">取消</el-button>
+        <el-button style="margin-right: 13px;" @click="clickEvent('home')">取消</el-button>
-        <el-button style="margin-right: 13px;">执行</el-button>
+        <el-button @click="clickEvent('home')">执行</el-button>
+      </el-row>
+      <el-row v-if="operation==='sign'" style="margin-top: 20px; text-align: center;">
+        <el-button style="margin-right: 13px;">人工状态</el-button>
+        <el-button style="margin-right: 13px;">报警停用</el-button>
+        <el-button style="margin-right: 13px;">故障设备</el-button>
+        <el-button style="margin-right: 13px;">挂牌检修</el-button>
+        <el-button @click="clickEvent('home')">取消</el-button>
+      </el-row>
+      <el-row v-if="operation==='detail'" style="margin-top: 20px; text-align: center;">
+        <el-button @click="clickEvent('home')">确定</el-button>
       </el-row>
     </div>
   </el-dialog>
@@ -161,7 +189,10 @@ export default {
 		white-space: nowrap;
 		cursor: pointer;
 		background: #CACACA;
-		border: 1px solid #777675;
+		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;
@@ -177,6 +208,17 @@ export default {
 		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);

src/views/iscs/iscsSystem/config/pis/infoBroadcast.vue

@@ -89,7 +89,7 @@
               <div class="pis-button" style="position: relative; top: 10px;left: 5px; padding: 7px 10px ;">导入描述</div>
             </el-col>
             <el-col :span="21">
-              <el-form-item :prop="description" label-width="0">
+              <el-form-item prop="description" label-width="0">
                 <input v-model="form.description" style="width:600px;">
               </el-form-item>
             </el-col>
@@ -98,7 +98,7 @@
             <el-col :span="21">
               <el-row>
                 <el-col :span="12">
-                  <el-form-item :prop="startDate" label="开始日期">
+                  <el-form-item prop="startDate" label="开始日期">
                     <el-date-picker
                       v-model="form.startDate"
                       type="date"
@@ -108,7 +108,7 @@
                   </el-form-item>
                 </el-col>
                 <el-col :span="12">
-                  <el-form-item :prop="endTime" label="结束时间">
+                  <el-form-item prop="endTime" label="结束时间">
                     <el-time-picker
                       v-model="form.endTime"
                       arrow-control
@@ -120,7 +120,7 @@
               </el-row>
               <el-row>
                 <el-col :span="12">
-                  <el-form-item :prop="startTime" label="开始时间">
+                  <el-form-item prop="startTime" label="开始时间">
                     <el-time-picker
                       v-model="form.startTime"
                       arrow-control
@@ -130,7 +130,7 @@
                   </el-form-item>
                 </el-col>
                 <el-col :span="12">
-                  <el-form-item :prop="endDate" label="结束日期">
+                  <el-form-item prop="endDate" label="结束日期">
                     <el-date-picker
                       v-model="form.endDate"
                       type="date"
@@ -142,7 +142,7 @@
               </el-row>
               <el-row>
                 <el-col :span="12">
-                  <el-form-item :prop="durationTime" label="延续时间">
+                  <el-form-item prop="durationTime" label="延续时间">
                     <el-time-picker
                       v-model="form.durationTime"
                       arrow-control
@@ -176,6 +176,7 @@ export default {
     data() {
         return {
             visible: false,
+            value: '',
             addModel: {
                 infoType: 'common',
                 infoTitle: '',
@@ -188,7 +189,8 @@ export default {
                 startTime: '',
                 durationTime: '',
                 endTime: '',
-                endDate: ''
+                endDate: '',
+                description: ''
             },
             infoList: [],
             showRealTimeInfo: '',