es kibana

@@ -30,8 +30,18 @@ class Kibana extends Base {
 
 
     public function result(){
     public function result(){
         $json = app()->request('json');
         $json = app()->request('json');
+        try {
             return es()->getClient()->search($json);
             return es()->getClient()->search($json);
+        } catch (\Exception $e) {
+            try {
+                return json_decode('{'.explode('{',$e->getMessage(),2)[1],true);
+            } catch (\Throwable $ee) {
+                return [$e->getMessage()];
             }
             }
+        }
+
+    }
+
 
 
 }
 }
 
 

 <template>
 <template>
     <div class="main">
     <div class="main">
-    <div id="edit">
-
+        <div class="header">
+            <div class="item" style="width: 20px;background-color:#a1dcf8;text-align: center;" title="新建栏">
+                <svg @click="add"
+                     style="width: 1em;height: 1em;vertical-align: middle;fill: currentColor;overflow: hidden;"
+                     viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="2498">
+                    <path d="M576 448h384v128H576v384H448V576H64V448h384V64h128z" fill="#4A4A4A" p-id="2499"></path>
+                </svg>
+            </div>
+            <div v-for="(item,index) in items" :key="item.id">
+                <div
+                    :class="{item:1,active:index===useKey}"
+                    @click="load(index)"
+                    :key="item.id">
+                    <el-popover placement="bottom" trigger="contextmenu">
+                        <template #reference> <span>{{item.name}}</span></template>
+                        <template #default>
+                            <div style="display: flex;width: 300px;">
+                                <el-input v-model="item.name" style="min-width: 200px;"></el-input>
+                                <el-button v-if="index>0" type="danger" style="margin-left: 20px;" @click="del(index)">删除</el-button>
+                            </div>
+                        </template>
+                    </el-popover>
+                </div>
             </div>
             </div>
-    <div id="result">
 
 
         </div>
         </div>
-    <el-button class="submit" @click="submit" :loading="loading">提交</el-button>
+        <div>
+            <kibanaitem ref="kibana"></kibanaitem>
+        </div>
     </div>
     </div>
 </template>
 </template>
 
 
@@ -17,66 +39,104 @@ export default {
     name: "kibana",
     name: "kibana",
     data() {
     data() {
         return {
         return {
-      loading:false,
-      editor: null,
-      result: null
+            useKey: 0,
+            items:[]
         }
         }
     },
     },
     created() {},
     created() {},
     methods: {
     methods: {
-    submit(){
-      const data = {
-        json:this.editor.get()
-      };
-      console.log(data)
-      this.loading = true;
-      ajax().post('/kibana.result',data).then(res=>{
-        console.log(res)
-        this.loading = false;
-        this.result.set(res);
+        save(){
+
+            let q = this.$refs.kibana.getQuery();
+            let r = this.$refs.kibana.getResult();
+            if(q){
+                this.items[this.useKey].query = JSON.parse(JSON.stringify(q));
+            }
+            if(r){
+                this.items[this.useKey].result = JSON.parse(JSON.stringify(r));
+            }
+
+            window.localStorage.setItem('kibana',JSON.stringify(this.items));
+
+            window.localStorage.setItem('kibana_key',this.useKey);
+        },
+        del(index){
+            if(this.items.length===1) return;
+            this.items.splice(index,1);
+        },
+        add(){
+            this.items.push({
+                id: parseInt((Math.random()*100000)+''),
+                name:"default",
+                query:{},
+                result:{}
             })
             })
+        },
+        load(val){
+
+            if(this.useKey!==val){
+                this.save();
+
+                this.useKey = val;
+            }
+
+            this.$refs.kibana.setQuery(JSON.parse(JSON.stringify(this.items[val].query)));
+            this.$refs.kibana.setResult(JSON.parse(JSON.stringify(this.items[val].result)));
         }
         }
     },
     },
     mounted() {
     mounted() {
 
 
-    this.editor = new JSONEditor(document.getElementById("edit"), {
-      mode:"code",
-      enableSort: false,
-      enableTransform: false,
-    });
+        this.items = JSON.parse(window.localStorage.getItem('kibana')) || [];
+
+        let index = parseInt(window.localStorage.getItem('kibana_key'));
+        if(typeof this.items[index] === "undefined"){
+            this.useKey = 0;
+        }else {
+            this.useKey = index;
+        }
+
+        if (this.items.length === 0) this.add();
+
+        this.load(this.useKey);
 
 
-    this.result = new JSONEditor(document.getElementById("result"), {
-      mode:"code",
-      enableSort: false,
-      enableTransform: false,
-      editable : false,
-      mainMenuBar : false
-    });
+        setInterval(() => {
+            this.save();
+        },1000)
 
 
+
+    },
+    //加载组件
+    components: {
+        kibanaitem:"@component(kibanaItem)"
     }
     }
 }
 }
 </script>
 </script>
 
 
 <style scoped>
 <style scoped>
 .main{
 .main{
-  display: flex;
     position: fixed;
     position: fixed;
     top: 0;
     top: 0;
     left: 0;
     left: 0;
     width: 100%;
     width: 100%;
     height: 100%;
     height: 100%;
 }
 }
-#edit{
-  width: 50%;
+.header{
+    display: flex;
+    height: 32px;
+    background-color: #d0dbf0;
 }
 }
-#result{
-  width: 50%;
+.item{
+    height: 22px;
+    line-height: 22px;
+    padding: 5px 10px;
+    cursor: pointer;
 }
 }
-.submit{
-  position: fixed;
-  top: 2px;
-  left: calc(50% - 82px);
-  z-index: 9999;
-  width: 80px;
+.item.active{
+    background-color: #fff;
+}
+</style>
+<style>
+.el-popper.el-tooltip.el-popover{
+    width: auto !important;
 }
 }
 </style>
 </style>

+<template>
+    <div class="main">
+        <div id="edit">
+
+        </div>
+        <div id="result">
+
+        </div>
+        <el-button class="submit" @click="submit" :loading="loading">提交</el-button>
+    </div>
+</template>
+
+<script>
+export default {
+    name: "item",
+    data() {
+        return {
+            loading:false,
+            editor: null,
+            result: null
+        }
+    },
+    created() {},
+    methods: {
+        setQuery(query){
+            console.log(query)
+            try {
+                this.editor.set(query);
+            }catch (e) {
+                console.log(query,e)
+            }
+
+        },
+        setResult(result){
+            console.log(result)
+            try {
+                this.result.set(result);
+            }catch (e) {
+                console.log(result,e)
+            }
+        },
+        getQuery(){
+            try {
+                return this.editor.get();
+            }catch (e) {
+                return false;
+            }
+
+        },
+        getResult(){
+            try {
+                return this.result.get();
+            }catch (e) {
+                return false;
+            }
+        },
+        submit(){
+            const data = {
+                json:this.editor.get()
+            };
+            console.log(data)
+            this.loading = true;
+            ajax().post('/kibana.result',data).then(res=>{
+                console.log(res)
+                this.loading = false;
+                this.result.set(res);
+            })
+        }
+    },
+    mounted() {
+
+        this.editor = new JSONEditor(document.getElementById("edit"), {
+            mode:"code",
+            enableSort: false,
+            enableTransform: false,
+        });
+
+        this.result = new JSONEditor(document.getElementById("result"), {
+            mode:"code",
+            enableSort: false,
+            enableTransform: false,
+            editable : false,
+            mainMenuBar : false
+        });
+
+    }
+}
+</script>
+
+<style scoped>
+.main{
+    display: flex;
+    position: relative;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100vh;
+}
+#edit{
+    width: 50%;
+}
+#result{
+    width: 50%;
+}
+.submit{
+    position: absolute;
+    top: 2px;
+    left: calc(50% - 82px);
+    z-index: 9999;
+    width: 80px;
+}
+</style>