增加：新增通道页面

src/components/codeEditor/index.vue

@@ -7,8 +7,16 @@
 // 引入全局实例
 import _CodeMirror from "codemirror/lib/codemirror.js";
 // 核心样式
+
+import "codemirror/theme/oceanic-next.css";
+import "codemirror/theme/ayu-mirage.css";
+import "codemirror/theme/abcdef.css";
+import "codemirror/theme/abbott.css";
+import "codemirror/theme/3024-day.css";
+import "codemirror/theme/3024-night.css";
 import "codemirror/lib/codemirror.css";
 import "codemirror/theme/monokai.css";
+import "codemirror/theme/material-ocean.css";
 import "codemirror/addon/fold/foldgutter.css";
 import "codemirror/addon/display/fullscreen.css";
 import "codemirror/addon/dialog/dialog.css";
@@ -64,7 +72,7 @@ nextTick(() => {
     // 显示行号
     lineNumbers: true,
     lineWrapping: true,
-    theme: "material-ocean",
+    theme: "ayu-mirage",
     matchTags: { bothTags: true },
     foldGutter: true,
     autoCloseTags: true,

src/views/network/tunnel/component/list.vue

@@ -10,8 +10,8 @@
             <!-- <el-table-column align="center" prop="last" label="最近上线"/> -->
             <el-table-column align="center" prop="types" label="状态">
                 <template #default="scope">
-                    <el-tag v-if="!scope.row.status" class="ml-2" type="danger">离线</el-tag>
-                    <el-tag v-else class="ml-2" type="success">在线</el-tag>
+                    <el-tag v-if="!scope.row.status" class="ml-2" type="danger">未启动</el-tag>
+                    <el-tag v-else class="ml-2" type="success">启动</el-tag>
                 </template>
             </el-table-column>
             <el-table-column align="center" label="操作" width="200">

src/views/network/tunnel/component/serverDetail.vue

@@ -1,3 +1,11 @@
+<!--
+ * @Author: vera_min vera_min@163.com
+ * @Date: 2022-09-05 08:41:57
+ * @LastEditors: vera_min vera_min@163.com
+ * @LastEditTime: 2022-09-05 09:33:15
+ * @FilePath: /sagoo-admin-ui/src/views/network/tunnel/component/serverDetail.vue
+ * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
+-->
 <!-- 服务器详情页 -->
 <template>
 	<div class="server-detail-wrap">
@@ -7,25 +15,25 @@
         </div>
         <div class="server-detail-item-wrap">
             <div class="label">类型</div>
-            <div class="value">tcp</div>
+            <div class="value">{{detail.types}}</div>
         </div>
         <div class="server-detail-item-wrap">
             <div class="label">地址</div>
-            <div class="value">8888</div>
+            <div class="value">{{detail.addr}}</div>
         </div>
         <div class="server-detail-item-wrap">
             <div class="label">状态</div>
-            <div class="value">启动</div>
+            <div class="value">{{detail.status?'启动':'未启动'}}</div>
         </div>
          <div class="server-detail-item-wrap">
             <div class="label">禁用</div>
             <div class="value">
-                <el-switch size="small" v-model="value1" />
+                <el-switch @change="onChangeStatus(detail.status)" :disabled="!detail.status" active-text="启" inactive-text="禁" :active-value="1"  :inactive-value="0" size="small" v-model="value1" />
             </div>
         </div>
         <div class="server-detail-item-wrap">
             <div class="label">创建时间</div>
-            <div class="value">2022-09-02 17:12:10</div>
+            <div class="value">{{detail.createdAt}}</div>
         </div>
     </div>
 </template>
@@ -51,10 +59,14 @@ export default defineComponent({
 		const state = reactive<TableDataState>({
             value1: true
 		});
+        const onChangeStatus = (status: any) => {
+            console.log(status)
+        };
 		onMounted(() => {
-            console.log(state.detail)
+            console.log(props.detail)
 		});
 		return {
+            onChangeStatus,
 			...toRefs(props),
 			...toRefs(state),
 		};

src/views/network/tunnel/component/table.vue

@@ -37,7 +37,7 @@
                     <div class="name-and-status">
                         <span>{{item.name}}</span>
                         [
-                        <span>{{item.status?'在线':'离线'}}</span>
+                        <span>{{item.status?'启动':'未启动'}}</span>
                         ]
                     </div>
                     <div class="">

src/views/network/tunnel/create.vue

@@ -0,0 +1,254 @@
+<template>
+	<el-card class="system-dic-container" style="position: relative;">
+		<el-tabs v-model="activeName" class="demo-tabs" @tab-click="handleClick">
+			<el-tab-pane label="标准视图" name="first">
+				<el-collapse v-model="activeViewName">
+                    <el-collapse-item title="基本信息" name="1">
+                        <div class="collapse-wrap">
+                            <el-form style="width: 600px;margin: 0 auto;" :model="form" label-width="68px">
+                                <el-form-item label="名称">
+                                <el-input v-model="form.name" />
+                                </el-form-item>
+                                <el-form-item label="类型">
+                                <el-select v-model="form.region" placeholder="请选择类型">
+                                    <el-option label="Zone one" value="shanghai" />
+                                    <el-option label="Zone two" value="beijing" />
+                                </el-select>
+                                </el-form-item>
+                                <el-form-item label="禁用">
+                                    <el-switch style="--el-switch-on-color: #dc1414;" v-model="form.delivery" />
+                                </el-form-item>
+                            </el-form>
+                        </div>
+                    </el-collapse-item>
+                    <el-collapse-item title="串口参数" name="2">
+                        <div class="collapse-wrap">
+                            <el-form style="width: 600px;margin: 0 auto;" :model="form" label-width="68px">
+                                <el-form-item label="端口">
+                                    <el-button></el-button>
+                                </el-form-item>
+                                <el-form-item label="波特率">
+                                    <el-select v-model="form.region" placeholder="请选择波特率">
+                                        <el-option label="Zone one" value="shanghai" />
+                                        <el-option label="Zone two" value="beijing" />
+                                    </el-select>
+                                </el-form-item>
+                                <el-form-item label="数据位">
+                                    <el-select v-model="form.region" placeholder="请选择数据位">
+                                        <el-option label="Zone one" value="shanghai" />
+                                        <el-option label="Zone two" value="beijing" />
+                                    </el-select>
+                                </el-form-item>
+                                <el-form-item label="停止位">
+                                    <el-select v-model="form.region" placeholder="请选择停止位">
+                                        <el-option label="Zone one" value="shanghai" />
+                                        <el-option label="Zone two" value="beijing" />
+                                    </el-select>
+                                </el-form-item>
+                                <el-form-item label="检验位">
+                                    <el-select v-model="form.region" placeholder="请选择检验位">
+                                        <el-option label="Zone one" value="shanghai" />
+                                        <el-option label="Zone two" value="beijing" />
+                                    </el-select>
+                                </el-form-item>
+                            </el-form>
+                        </div>
+                    </el-collapse-item>
+                    <el-collapse-item title="断线重连" name="3">
+                        <el-form style="width: 600px;margin: 0 auto;" :model="form" label-width="68px">
+                            <el-form-item label="启用">
+                                <el-switch v-model="form.delivery" />
+                            </el-form-item>
+                            <el-form-item label="间隔">
+                                <el-input-number v-model="num" :min="1" :max="10" @change="handleChange" />
+                            </el-form-item>
+                            <el-form-item label="最大次数">
+                                <el-input-number v-model="num" :min="1" :max="10" @change="handleChange" />
+                            </el-form-item>
+                        </el-form>
+                    </el-collapse-item>
+                    <el-collapse-item title="协议适配" name="4">
+                        <el-form style="width: 600px;margin: 0 auto;" :model="form" label-width="68px">
+                            <el-form-item label="协议">
+                                <el-select v-model="form.region" placeholder="请选择协议适配">
+                                    <el-option label="Zone one" value="shanghai" />
+                                    <el-option label="Zone two" value="beijing" />
+                                </el-select>
+                            </el-form-item>
+                            <el-form-item label="协议参数">
+                                
+                                <codeEditor class="params" ref="mirrorRef"
+                                :mode="resourceModalPro.mode"
+                                :content="resourceModalPro.content"
+                                >
+                                </codeEditor>
+                            </el-form-item>
+                        </el-form>
+                    </el-collapse-item>
+                </el-collapse>
+			</el-tab-pane>
+			<el-tab-pane label="专家视图" name="second">
+                <h1>专家视图</h1>
+            </el-tab-pane>
+		</el-tabs>
+		<div style="position: absolute;right:20px;top: 34px;">
+			<el-icon style="font-size: 16px;"><ele-RefreshRight /></el-icon>
+			<el-icon style="font-size: 16px;margin: 0 6px;"><ele-Operation /></el-icon>
+			<el-icon style="font-size: 16px;"><ele-Edit /></el-icon>
+		</div>
+
+	  	 <!-- <codeEditor ref="mirrorRef"
+	  :mode="resourceModalPro.mode"
+	  :content="resourceModalPro.content"
+	  >
+	  </codeEditor> -->
+	</el-card>
+</template>
+<script lang="ts">
+import { toRefs, reactive, onMounted, ref, defineComponent } from 'vue';
+import { Delete, Edit, Search, Share, Upload } from '@element-plus/icons-vue';
+import { ElMessageBox, ElMessage, FormInstance } from 'element-plus';
+import type { TabsPaneContext } from 'element-plus'
+import codeEditor from '/@/components/codeEditor/index.vue'
+
+import serverDetail from './component/serverDetail.vue'
+
+import { useRoute } from 'vue-router';
+
+import api from '/@/api/network';
+
+interface TableDataState {
+	// ids: number[];
+	// id: string;
+    activeViewName: string[];
+	resourceModalPro: {
+		mode: string,
+		content: string,
+		// content: object,
+	},
+	detail: object,
+    form: object
+}
+export default defineComponent({
+	name: 'tunnelCreate',
+	components: { codeEditor, serverDetail },
+	props: {
+		type: {
+			type: String,
+			default: ''
+		}
+	},
+
+	setup(props, context) {
+		const route = useRoute();
+		const state = reactive<TableDataState>({
+            // id: "",
+			resourceModalPro: {
+				mode: '',
+				content: ''
+			},
+			detail:{},
+            activeViewName: ['1','2','3','4'],
+            form:{
+                name: '',
+                region: '',
+                date1: '',
+                date2: '',
+                delivery: false,
+                type: [],
+                resource: '',
+                desc: '',
+            }
+		});
+		const activeName = ref('first')
+        // const activeViewName = ref('1')
+		const getDetail = () => {
+			const id = route.params && route.params.id;
+			api.getDetail({"id": id}).then((res: any) => {
+				console.log(res)
+				state.detail = res
+			})
+		};
+		onMounted(() => {
+			// return;
+			let obj = {
+						"id": 1,
+						"name": "新建服务器",
+						"type": "tcp",
+						"addr": "10010",
+						"register": {
+							"regex": "^\\w+$"
+						},
+						"heartbeat": {
+							"enable": false,
+							"timeout": 30,
+							"regex": "^\\w+$"
+						},
+						"protocol": {
+							"name": "ModbusTCP",
+							"options": {}
+						},
+						"devices": [
+							{
+								"station": 1,
+								"product_id": ""
+							}
+						],
+						"disabled": false,
+						"updated": "2022-08-26T15:10:07+08:00",
+						"created": "2022-08-20T18:44:20+08:00",
+						"running": true
+					}
+					var jsonData = JSON.stringify(obj);//data是请求的后台数据
+					state.resourceModalPro.content = JSON.stringify(JSON.parse(jsonData),null,4);
+		});
+		const handleClick = (tab: TabsPaneContext, event: Event) => {
+			console.log(tab, event)
+		}
+
+		return {
+			Edit,
+			activeName,
+			getDetail,
+			handleClick,
+			// editDicRef,
+			// editAttrRef,
+			// editFunRef,
+			// editEventRef,
+			// editTabRef,
+			...toRefs(props),
+			...toRefs(state),
+		};
+	},
+});
+</script>
+
+<style>
+.CodeMirror {
+  width: 100%;
+  height: 600px;
+  font-size: 16px;
+}
+</style>
+<style lang="scss" scoped>
+::v-deep .el-collapse-item__header {
+    position: relative;
+    padding-left: 20px;
+    .el-collapse-item__arrow {
+        margin: 0!important;
+        position: absolute;
+        left: 0;
+        right: 0;
+        
+    }
+}
+::v-deep .el-input,
+::v-deep .el-input-number {
+    width: 500px;
+}
+::v-deep .params {
+    width: 600px;
+}
+
+</style>
+

src/views/network/tunnel/index.vue

@@ -3,7 +3,7 @@
         <el-card shadow="hover">
             <div class="top-operate-wrap">
                 <div class="left">
-                    <el-button size="default" type="success" class="ml10">
+                    <el-button @click="toPage" size="default" type="success" class="ml10">
                         <el-icon>
                             <ele-FolderAdd />
                         </el-icon>
@@ -39,6 +39,7 @@
 <script lang="ts">
 import { reactive, toRefs, onMounted, defineComponent, ref } from 'vue';
 import type { FormInstance, FormRules } from 'element-plus';
+import { useRouter } from 'vue-router';
 import { ElMessage } from 'element-plus';
 
 import listTunnel from './component/list.vue';
@@ -63,6 +64,7 @@ export default defineComponent({
     name: 'tunnalManage',
     components: { listTunnel, tableTunnel },
 	setup() {
+        const router = useRouter();
 		const state = reactive<ItemState>({
             index: 2,
 			queryParams: {
@@ -74,7 +76,11 @@ export default defineComponent({
             console.log(state.key)
             state.queryParams.title = state.key
         };
+        const toPage = () => {
+            router.push('/network/tunnel/create')
+        };
         return {
+            toPage,
             searchData,
 			...toRefs(state),
 		};