头部标题绑定

FTT.Board.VueUI/src/App.vue

@@ -63,6 +63,6 @@ html::-webkit-scrollbar {
   width: 0px;
 }
 #app div{
-  overflow: hidden;
+  /* overflow: hidden; */
 }
 </style>

FTT.Board.VueUI/src/views/board/chartDemo/header.vue

 <template>
   <!--头部-->
   <div class="header">
-    飞天兔数字工厂大数据展示
+    <!-- 飞天兔数字工厂大数据展示 -->
+    <div class="header_title">
+      <el-input class="input" v-model="input" placeholder="请输入您的标题"></el-input>
+    </div>
     <a href="javascript:;" class="a-access">
       <button class="button type1" @click="created">生成</button>
     </a>
@@ -13,17 +16,18 @@ export default {
   name: "chartHeader",
   data() {
     return {
-      // key: value
+      input: ""
     };
   },
   // 		 props:{
   //     chartList:Array,
   //     selectChartList:Array
   //   },
+
   methods: {
     created() {
-      this.$emit("created");
-      console.log("我要去生成了");
+      this.$emit("created",this.input);
+      console.log("我要去生成了",this.input);
     }
   }
 };
@@ -39,12 +43,26 @@ export default {
   text-align: center;
   background: url(../../../assets/image/chartHeaderBg.png) top center no-repeat;
   box-sizing: border-box;
+  display: flex;
+  justify-content: center;
+  align-items: center;
 }
 .header a.a-access {
   position: absolute;
   right: 3%;
   top: -18%;
 }
+.header_title {
+  height: 50px;
+
+  width: 28%;
+  display: flex;
+}
+/deep/ .el-input--small .el-input__inner {
+  background: none;
+  border:1px solid #00ffff ;
+  color:  #00ffff;
+}
 .button {
   position: relative;
   padding: 0.5em 1.5em;

FTT.Board.VueUI/src/views/board/chartDemo/index.vue

@@ -180,10 +180,11 @@ export default {
     chartMain
   },
   methods: {
-    created() {
-		console.log("1111"+JSON.stringify(this.chartListLeft))
+    created(input) {
+		console.log("1111"+input)
 		console.log("222222222"+JSON.stringify(this.chartListMain))
-		console.log("3333"+JSON.stringify(this.chartListRight))
+    console.log("3333"+JSON.stringify(this.chartListRight))
+    	localStorage.setItem("chartListtitle",input);
 		localStorage.setItem("chartListLeft",JSON.stringify(this.chartListLeft));
 		localStorage.setItem("chartListMain",JSON.stringify(this.chartListMain));
 		localStorage.setItem("chartListRight",JSON.stringify(this.chartListRight));
@@ -202,7 +203,7 @@ export default {
 
 <style>
 .el-header {
-  background-color: #040f3c;
+  background-color: #040f3c !important;
 }
 div {
   overflow: initial !important;

FTT.Board.VueUI/src/views/board/chartDemo1/header.vue

 <template>
 	<!--头部-->
 	<div class="header">
-		飞天兔数字工厂大数据展示
+		<div style="width:30%;margin:0 auto;overflow:hidden !important; white-space: nowrap; text-overflow: ellipsis;" >{{title}}</div>
+		
 		<!-- <a href="javascript:;" class="a-access">
 	        <button class="button type1">
 	    		返回
@@ -15,7 +16,7 @@
 		name: "chartHeader",
 		data() {
 			return {
-				// key: value
+				title:localStorage.getItem("chartListtitle"),
 			}
 		},
 		methods: {