增加 card页面

src/views/iscs/iscsDraw/group/card.vue

@@ -0,0 +1,28 @@
+<template>
+	<div class="group-card">
+	<el-tabs type="border-card"  v-model="active">
+		<el-tab-pane name="first" label="自定用创建">
+			<tab-custom />
+		</el-tab-pane>
+		<el-tab-pane name="second" label="模板创建">
+			<tab-template />
+		</el-tab-pane>
+	</el-tabs>
+	</div>
+</template>
+<script>
+import TabCustom from './tab-custom';
+import TabTemplate from './tab-template.vue';
+
+export default {
+	components: {
+		TabCustom,
+		TabTemplate
+	},
+	data() {
+		return {
+			active: 'first'
+		}
+	}
+}
+</script>

src/views/iscs/iscsDraw/group/tab-custom.vue

@@ -0,0 +1,78 @@
+<template>
+	<div class="custom">
+		<el-form :model="formModel" :rules="rules">
+			<el-form-item label="组名称" prop="name">
+				<el-input v-model="formModel.name" placeholder="请输入组名称" />
+			</el-form-item>
+			<el-form-item label="组类型" prop="name">
+				<el-select v-model="formModel.type" placeholder="请选择组类型">
+				</el-select>
+			</el-form-item>
+			<el-form-item label="元素列表" prop="elemList" />
+			<el-table :data="formModel.elemList" style="width: 100%">
+				<el-table-column label="元素类型" prop="type" />
+				<el-table-column label="元素编码" prop="code" />
+				<el-table-column align="right">
+					<template slot="header">
+						<el-button size="mini" type="primary" @click="visible=true">添加</el-button>
+						<el-dialog width="30%" title="内层 Dialog" :visible.sync="visible" append-to-body>
+    					</el-dialog>
+					</template>
+					<template slot-scope="scope">
+						<el-button size="mini" type="danger" @click="handleActive(scope.$index, scope.row)">激活</el-button>
+						<el-button size="mini" type="danger" @click="handleDelete(scope.$index, scope.row)">删除</el-button>
+					</template>
+				</el-table-column>
+			</el-table>
+			<div class="footer">
+				//
+			</div>
+		</el-form>
+	</div>
+</template>
+
+
+<script>
+export default {
+	data() {
+		return  {
+			visible: false,
+			formModel: {
+				name: '',
+				type: '',
+				elemList: []
+			},
+		}
+	},
+	computed: {
+		rules() {
+			return {
+				name: [
+					{ required: true, message: '请输入组名称', trigger: 'blur' },
+				],
+				type: [
+					{ required: true, message: '请选择组类型', trigger: 'change' },
+				],
+				elemList: [
+					{ type: 'array', required: true, message: '组元素不能为空', trigger: 'change' },
+				]
+			}
+		}
+	},
+	methods: {
+		handleActive(index, row) {
+		},
+		handleDelete(index, row) {
+		}
+	}
+}
+</script>
+<style rel="stylesheet/scss" lang="scss" scoped>
+    @import "src/styles/mixin.scss";
+	.custom {
+		height: 100%;
+		overflow-y: auto;
+		.footer {
+		}
+	}
+</style>>

src/views/iscs/iscsDraw/group/tab-template.vue

@@ -0,0 +1,18 @@
+<template>
+	<div>
+		开发中
+	</div>
+</template>
+
+<script>
+export default {
+	data() {
+		return {
+
+		}
+	}
+}
+</script>
+<style rel="stylesheet/scss" lang="scss" scoped>
+    @import "src/styles/mixin.scss";
+</style>

src/views/iscs/iscsDraw/index.vue

@@ -23,7 +23,7 @@
       </div>
 	  <div class="right-card" :class="{'hide': tableShow}">
 		<div class="btn_table_box" @click="clickTableBtn"><i :class="tableShow?'el-icon-arrow-right':'el-icon-arrow-left'" /></div>
-			///
+		<group-card />
 	  </div>
     </div>
   </transition>
@@ -45,6 +45,7 @@ import IscsPowerMonitoring from './iscsPowerMonitoring/index';
 import IscsSignalSystem from './iscsSignalSystem/index';
 import IscsPsd from './iscsPsd/index';
 import IscsEnvironment from './iscsEnvironment/index';
+import GroupCard from './group/card.vue';
 import { saveIscsElement } from '@/api/iscs';
 
 export default {
@@ -65,7 +66,9 @@ export default {
         IscsPowerMonitoring,
         IscsSignalSystem,
         IscsPsd,
-        IscsEnvironment
+		IscsEnvironment,
+
+		GroupCard
     },
     data() {
         return {