From 99b062eeca471bdcbfcacd88e308fab9972cd6ec Mon Sep 17 00:00:00 2001
From: WXL (wul) <wl_5969728@163.com>
Date: 星期二, 19 八月 2025 14:21:33 +0800
Subject: [PATCH] 展示优化
---
src/views/Intelligentcenter/centercontrol/index.vue | 249 ++++++++++++++++++++++++++++++++++++++++++-------
1 files changed, 213 insertions(+), 36 deletions(-)
diff --git a/src/views/Intelligentcenter/centercontrol/index.vue b/src/views/Intelligentcenter/centercontrol/index.vue
index 221339b..0ec428e 100644
--- a/src/views/Intelligentcenter/centercontrol/index.vue
+++ b/src/views/Intelligentcenter/centercontrol/index.vue
@@ -7,6 +7,7 @@
class="el-menu-vertical-demo"
@open="handleOpen"
@close="handleClose"
+ @select="handleSelect"
background-color="#545c64"
text-color="#fff"
active-text-color="#ffd04b"
@@ -14,33 +15,46 @@
<el-submenu index="1">
<template slot="title">
<i class="el-icon-location"></i>
- <span>瀵艰埅涓�</span>
+ <span>鎮ｈ�呯鐞�</span>
</template>
<el-menu-item-group>
- <template slot="title">鍒嗙粍涓�</template>
<el-menu-item index="1-1">閫夐」1</el-menu-item>
- <el-menu-item index="1-2">閫夐」2</el-menu-item>
</el-menu-item-group>
- <el-menu-item-group title="鍒嗙粍2">
- <el-menu-item index="1-3">閫夐」3</el-menu-item>
- </el-menu-item-group>
- <el-submenu index="1-4">
+ <!-- <el-submenu index="1-4">
<template slot="title">閫夐」4</template>
<el-menu-item index="1-4-1">閫夐」1</el-menu-item>
- </el-submenu>
+ </el-submenu> -->
</el-submenu>
- <el-menu-item index="2">
- <i class="el-icon-menu"></i>
- <span slot="title">瀵艰埅浜�</span>
- </el-menu-item>
- <el-menu-item index="3" disabled>
- <i class="el-icon-document"></i>
- <span slot="title">瀵艰埅涓�</span>
- </el-menu-item>
- <el-menu-item index="4">
- <i class="el-icon-setting"></i>
- <span slot="title">瀵艰埅鍥�</span>
- </el-menu-item>
+ <el-submenu index="2">
+ <template slot="title">
+ <i class="el-icon-location"></i>
+ <span>鐭ヨ瘑搴�</span>
+ </template>
+ <el-menu-item-group>
+ <el-menu-item index="2-1">瀹ｆ暀绠＄悊</el-menu-item>
+ <el-menu-item index="2-2">闂嵎绠＄悊</el-menu-item>
+ <el-menu-item index="2-3">棰樺簱绠＄悊</el-menu-item>
+ </el-menu-item-group>
+ <!-- <el-submenu index="1-4">
+ <template slot="title">閫夐」4</template>
+ <el-menu-item index="1-4-1">閫夐」1</el-menu-item>
+ </el-submenu> -->
+ </el-submenu>
+ <el-submenu index="3">
+ <template slot="title">
+ <i class="el-icon-location"></i>
+ <span>鎮ｈ�呯鐞�</span>
+ </template>
+ <el-menu-item-group>
+ <el-menu-item index="3-1">璇濇湳搴�</el-menu-item>
+ <el-menu-item index="3-2">鎰忓浘绠＄悊</el-menu-item>
+ <el-menu-item index="3-3">妯℃澘搴�</el-menu-item>
+ </el-menu-item-group>
+ <!-- <el-submenu index="1-4">
+ <template slot="title">閫夐」4</template>
+ <el-menu-item index="1-4-1">閫夐」1</el-menu-item>
+ </el-submenu> -->
+ </el-submenu>
</el-menu>
</div>
<!-- 鍙充晶鏁版嵁 -->
@@ -58,7 +72,36 @@
:label="item.title"
:name="item.name"
>
- {{ item.content }}
+ <!-- {{ item.content }} -->
+ <div class="leftvalu-code" v-if="editableTabs.length">
+ <el-tabs
+ v-model="fiactiveName"
+ type="card"
+ @tab-click="handleClick"
+ >
+ <el-tab-pane
+ v-if="item.content == 0 || item.content == 3"
+ label="浠ｇ爜灞曠ず"
+ name="first"
+ ><codemirror
+ v-model="item.value"
+ :options="options"
+ ></codemirror
+ ></el-tab-pane>
+ <el-tab-pane
+ v-if="item.content == 1 || item.content == 3"
+ label="琛ㄦ牸灞曠ず"
+ name="second"
+ ><el-table :data="tableData" style="width: 100%">
+ <el-table-column prop="date" label="鏃ユ湡" width="180">
+ </el-table-column>
+ <el-table-column prop="name" label="濮撳悕" width="180">
+ </el-table-column>
+ <el-table-column prop="address" label="鍦板潃">
+ </el-table-column> </el-table
+ ></el-tab-pane>
+ </el-tabs>
+ </div>
</el-tab-pane>
</el-tabs>
</div>
@@ -67,24 +110,135 @@
</template>
<script>
+// import { codemirror } from "vue-codemirror";
export default {
name: "education",
data() {
return {
- editableTabsValue: "2",
- editableTabs: [
+ code: "",
+ fiactiveName: "first",
+ options: {
+ line: true,
+ theme: "rubyblue", // 涓婚
+ tabSize: 4, // 鍒惰〃绗︾殑瀹藉害
+ indentUnit: 2, // 涓�涓潡搴旇缂╄繘澶氬皯涓┖鏍硷紙鏃犺杩欏湪缂栬緫璇█涓剰鍛崇潃浠�涔堬級銆傞粯璁ゅ�间负 2銆�
+ firstLineNumber: 1, // 浠庡摢涓暟瀛楀紑濮嬭绠楄鏁般�傞粯璁ゅ�间负 1銆�
+ readOnly: false, // 鍙
+ autorefresh: true,
+ smartIndent: true, // 涓婁笅鏂囩缉杩�
+ lineNumbers: true, // 鏄惁鏄剧ず琛屽彿
+ styleActiveLine: true, // 楂樹寒閫変腑琛�
+ viewportMargin: Infinity, //澶勭悊楂樺害鑷�傚簲鏃舵惌閰嶄娇鐢�
+ showCursorWhenSelecting: true, // 褰撻�夋嫨澶勪簬娲诲姩鐘舵�佹椂鏄惁搴旂粯鍒舵父鏍�
+ mode: "javascript",
+ },
+ tableData: [
{
- title: "Tab 1",
- name: "1",
- content: "Tab 1 content",
+ date: "2016-05-02",
+ name: "鐜嬪皬铏�",
+ address: "涓婃捣甯傛櫘闄�鍖洪噾娌欐睙璺� 1518 寮�",
},
{
- title: "Tab 2",
- name: "2",
- content: "Tab 2 content",
+ date: "2016-05-04",
+ name: "鐜嬪皬铏�",
+ address: "涓婃捣甯傛櫘闄�鍖洪噾娌欐睙璺� 1517 寮�",
+ },
+ {
+ date: "2016-05-01",
+ name: "鐜嬪皬铏�",
+ address: "涓婃捣甯傛櫘闄�鍖洪噾娌欐睙璺� 1519 寮�",
+ },
+ {
+ date: "2016-05-03",
+ name: "鐜嬪皬铏�",
+ address: "涓婃捣甯傛櫘闄�鍖洪噾娌欐睙璺� 1516 寮�",
},
],
+
+ editableTabsValue: "2-2-3",
+ editableTabslist: [
+ {
+ title: "鎮ｈ�呯鐞�",
+ name: "1-1",
+ content: 0,
+ value: "<el-tab-pane>",
+ },
+ {
+ title: "瀹ｆ暀绠＄悊",
+ name: "2-1",
+ content: 1,
+ value:
+ "<el-table-column prop='address' label='鍦板潃'></el-table-column>",
+ },
+ {
+ title: "闂嵎绠＄悊",
+ name: "2-2",
+ content: 3,
+ value:
+ "<el-table-column prop='address' label='鍦板潃'></el-table-column>",
+ },
+ {
+ title: "棰樺簱绠＄悊",
+ name: "2-3",
+ content: "",
+ },
+ {
+ title: "璇濇湳搴�",
+ name: "3-1",
+ content: "",
+ },
+ {
+ title: "鎰忓浘绠＄悊",
+ name: "3-2",
+ content: "",
+ },
+ {
+ title: "妯℃澘搴�",
+ name: "3-3",
+ content: "",
+ },
+ ],
+ // 闇�瑕佺殑鏍戠殑鏍煎紡
+ editableTabslisat: [
+ {
+ title: "鎮ｈ�呯鐞�",
+ name: "1",
+ son: [
+ {
+ title: "鎮ｈ�呯鐞�",
+ name: "1-1",
+ content: "",
+ },
+ ],
+ },
+ {
+ title: "鐭ヨ瘑搴�",
+ name: "2",
+ son: [
+ {
+ title: "瀹ｆ暀绠＄悊",
+ name: "2-1",
+ content: "",
+ },
+ {
+ title: "闂嵎绠＄悊",
+ name: "2-2",
+ content: "",
+ },
+ {
+ title: "棰樺簱绠＄悊",
+ name: "2-3",
+ content: "",
+ son: [
+ { title: "鏀跨瓥绠＄悊", name: "2-3-1", content: "" },
+ { title: "娌诲畨绠＄悊", name: "2-3-2", content: "" },
+ ],
+ },
+ ],
+ },
+ ],
+ editableTabs: [],
tabIndex: 2,
};
},
@@ -96,15 +250,26 @@
handleOpen(key, keyPath) {
console.log(key, keyPath);
},
+ handleSelect(key, keyPath) {
+ console.log(key, keyPath, "ss");
+ var result = this.editableTabslist.find((v) => {
+ return v.name === key; // return v.value === '9' 杩斿洖undefined
+ });
+
+ var results = this.editableTabs.some(function (item) {
+ if (item.name == key) {
+ //item.name == "鐜嬮夯瀛�"
+ return true; //杩斿洖false
+ }
+ });
+ if (!results) {
+ this.editableTabs.push(result);
+ }
+ this.editableTabsValue = key;
+ console.log(result);
+ },
handleTabsEdit(targetName, action) {
if (action === "add") {
- let newTabName = ++this.tabIndex + "";
- this.editableTabs.push({
- title: "New Tab",
- name: newTabName,
- content: "New Tab content",
- });
- this.editableTabsValue = newTabName;
}
if (action === "remove") {
let tabs = this.editableTabs;
@@ -131,6 +296,17 @@
<style lang="scss" scoped>
.educationmanagement {
display: flex;
+}
+.leftvalu-code {
+ // background: #3a3d42;
+ height: 300px;
+ ::v-deep.CodeMirror {
+ position: relative;
+ overflow: hidden;
+ // background: #3a3d42;
+ color: #3a92ef;
+ font-size: 20px;
+ }
}
.sidecolumn {
width: 300px;
@@ -168,6 +344,7 @@
display: center !important;
}
}
+
.qrcode-dialo {
text-align: center;
// display: flex;
--
Gitblit v1.9.3