@leevan/jtui 2.0.7 → 2.0.10

package/examples/App.vue

@@ -18,11 +18,7 @@
                 </el-menu>
             </el-aside>
             <el-main>
-                <table-ptbg v-if="menuIdx == 1"></table-ptbg>
-                <table-dsj v-if="menuIdx == 2"></table-dsj>
-                <table-fzbg v-if="menuIdx == 3"></table-fzbg>
-                <table-tree v-if="menuIdx == 4"></table-tree>
-                <tree-table v-if="menuIdx == 5"></tree-table>
+                <component :is="menuIdx"></component>
             </el-main>
         </el-container>
   </div>
@@ -34,13 +30,17 @@ import tableDsj from './tableTest/table-dsj.vue';
 import tableFzbg from './tableTest/table-fzbg.vue';
 import tableTree from './tableTest/table-tree.vue';
 import treeTable from './tableTest/tree-table.vue';
+import moreCharts from './echarts/moreCharts.vue';
+import LForm from './form/form.vue'
 export default {
     components:{
         tablePtbg,
         tableDsj,
         tableFzbg,
         tableTree,
-        treeTable
+        treeTable,
+        moreCharts,
+        LForm
     },
     name: 'App',
     created(){
@@ -51,26 +51,34 @@ export default {
             menu:[
                 {
                     name:'普通表格',
-                    idx:'1'
+                    idx:'table-ptbg'
                 },
                 {
                     name:'大数据表格',
-                    idx:'2'
+                    idx:'table-dsj'
                 },
                 {
                     name:'分组表格',
-                    idx:'3'
+                    idx:'table-fzbg'
                 },
                 {
                     name:'树',
-                    idx:'4'
+                    idx:'table-tree'
                 },
                 {
                     name:'树表',
-                    idx:'5'
+                    idx:'tree-table'
+                },
+                {
+                    name:'多个图表',
+                    idx:'more-charts'
+                },
+                {
+                    name:'表单',
+                    idx:'l-form'
                 }
             ],
-            menuIdx:'1'
+            menuIdx:'more-charts'
         }
     },
     methods: {

package/examples/echarts/moreCharts.vue

@@ -0,0 +1,159 @@
+<!--
+ * @Author: leevan
+ * @Date: 2022-03-07 17:00:56
+ * @LastEditTime: 2022-03-07 21:09:34
+ * @LastEditors: leevan
+ * @FilePath: /jtui-pc/examples/echarts/moreCharts.vue
+-->
+<template>
+  <div style="height:400px;width:100%">
+    <div
+      class="chart"
+      v-for="(item, index) in datas"
+      :key="index"
+      :style="{
+        height: datas.length > 2 ? '49%' : '100%',
+        width: datas.length > 1 ? '49%' : '100%',
+      }"
+    >
+    {{item.isShow}}
+    <jt-echarts-pc
+        v-if="item.isShow"
+        :ref="`myChart` + index"
+        :formattingTime="true"
+        :dateInterval="'minute'"
+        :echartsOption="item.chartData"
+        :seriesData="item.serdata"
+        :moduleName="'yc-gkcscx-echart' + index"
+        :ID="'yc-gkcscx-echarts' + index"
+        :echartWidth="'100%'"
+        :echartHeight="'100%'"
+        :setStyleTools="true"
+      >
+      </jt-echarts-pc>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  data() {
+    return {
+        isShow:false,
+      datas: [
+        {
+          chartData: {
+            option: {
+              title: {},
+              xAxis: { type: "", data: [] },
+              yAxis: { type: "value" },
+              series: [],
+              grid: {
+                left: "3%",
+                right: "6%",
+                bottom: "10%",
+                containLabel: true,
+              },
+            },
+          },
+          serdata: [
+            {
+              xcol: "TM",
+              data: [
+                ["2022-03-06 00:00:00", 30],
+                ["2022-03-06 01:00:00", 30],
+                ["2022-03-06 02:00:00", 30],
+                ["2022-03-06 03:00:00", 30],
+                ["2022-03-06 04:00:00", 30],
+                ["2022-03-06 05:00:00", 30],
+                ["2022-03-06 06:00:00", 30],
+                ["2022-03-06 07:00:00", 30],
+                ["2022-03-06 09:00:00", 30],
+                ["2022-03-06 10:00:00", 30],
+                ["2022-03-06 11:00:00", 31],
+                ["2022-03-06 12:00:00", 30],
+                ["2022-03-06 13:00:00", 30],
+                ["2022-03-06 14:00:00", 30],
+                ["2022-03-06 15:00:00", 30],
+                ["2022-03-06 16:00:00", 31],
+                ["2022-03-06 17:00:00", 31],
+                ["2022-03-06 18:00:00", 31],
+                ["2022-03-06 19:00:00", 31],
+                ["2022-03-06 21:00:00", 30],
+                ["2022-03-06 22:00:00", 31],
+                ["2022-03-06 23:00:00", 31],
+              ],
+              name: "GSM信号强度",
+              xcol_type: "String",
+              ycol: "VL",
+              ycol_type: "String",
+            },
+          ],
+          isShow:false,
+        },
+        {
+          chartData: {
+            option: {
+              title: {},
+              xAxis: { type: "", data: [] },
+              yAxis: { type: "value" },
+              series: [],
+              grid: {
+                left: "3%",
+                right: "6%",
+                bottom: "10%",
+                containLabel: true,
+              },
+            },
+          },
+          serdata: [
+            {
+              xcol: "TM",
+              data: [
+                ["2022-03-06 00:00:00", 4.1],
+                ["2022-03-06 01:00:00", 4.1],
+                ["2022-03-06 02:00:00", 4.1],
+                ["2022-03-06 03:00:00", 4.1],
+                ["2022-03-06 04:00:00", 4.1],
+                ["2022-03-06 05:00:00", 4.1],
+                ["2022-03-06 06:00:00", 4.1],
+                ["2022-03-06 07:00:00", 4.1],
+                ["2022-03-06 09:00:00", 4.2],
+                ["2022-03-06 10:00:00", 4.2],
+                ["2022-03-06 11:00:00", 4.2],
+                ["2022-03-06 12:00:00", 4.1],
+                ["2022-03-06 13:00:00", 4.2],
+                ["2022-03-06 14:00:00", 4.1],
+                ["2022-03-06 15:00:00", 4.1],
+                ["2022-03-06 16:00:00", 4.1],
+                ["2022-03-06 17:00:00", 4.1],
+                ["2022-03-06 18:00:00", 4.1],
+                ["2022-03-06 19:00:00", 4.1],
+                ["2022-03-06 21:00:00", 4.1],
+                ["2022-03-06 22:00:00", 4.1],
+                ["2022-03-06 23:00:00", 4.1],
+              ],
+              name: "电池电压",
+              xcol_type: "String",
+              ycol: "VL",
+              ycol_type: "String",
+            },
+          ],
+          isShow:false
+        },
+      ],
+    };
+  },
+  mounted(){
+      for(let i=0;i<this.datas.length;i++){
+          setTimeout(()=>{
+            this.datas[i].isShow = true;
+        },i*10)
+      }
+      
+  }
+};
+</script>
+
+<style lang="scss" scoped>
+</style>

package/examples/form/form.vue

@@ -0,0 +1,61 @@
+<!--
+ * @Author: leevan
+ * @Date: 2022-03-09 15:49:08
+ * @LastEditTime: 2022-03-09 19:21:19
+ * @LastEditors: leevan
+ * @FilePath: /jtui-pc/examples/form/form.vue
+-->
+<template>
+  <div>
+      <button @click="printData">打印数据</button>
+    <jt-form-pc
+      id="onDutyPoepleSignIn"
+      ref="onDutyPoepleSignIn"
+      :model="model"
+      :formConfig="formConfig"
+      :rules="rules"
+    >
+    </jt-form-pc>
+  </div>
+</template>
+
+<script>
+export default {
+  data() {
+    return {
+      model: {
+        select: [],
+      },
+      formConfig: [
+        {
+          label: "选择器",
+          modelKey: "select",
+          type: "select",
+          width: 200,
+          isCreate:true,
+          multiple:true,
+          options: [
+            {
+              value: "0",
+              label: "黄金糕",
+            },
+            {
+              value: "1",
+              label: "双皮奶",
+            },
+          ],
+        },
+      ],
+      rules: {},
+    };
+  },
+  methods:{
+      printData(){
+          console.log(this.model);
+      }
+  }
+};
+</script>
+
+<style lang="scss" scoped>
+</style>

package/examples/tableTest/table-tree.vue

@@ -1,13 +1,24 @@
+<!--
+ * @Author: leevan
+ * @Date: 2022-01-15 17:02:55
+ * @LastEditTime: 2022-03-03 14:10:39
+ * @LastEditors: leevan
+ * @FilePath: /jtui-pc/examples/tableTest/table-tree.vue
+-->
 <template>
     <div style="position:relative;height:600px">
-        <jt-table-pc 
-        id="table_tree" 
-        ref="table_tree" 
-        :data="data[0]"
-        tableType="tree"
-        :handlerConfig="handlerConfig" 
-        @treeTxtClick="treeTxtClick"
-        :treeTypeConfig="treeTypeConfig"></jt-table-pc>
+        <el-button @click="getCurrent">获取选中</el-button>
+        <div style="position:relative;margin-top:10px;height:600px">
+            <jt-table-pc 
+            id="table_tree" 
+            ref="table_tree" 
+            :data="data[0]"
+            tableType="tree"
+            :handlerConfig="handlerConfig" 
+            @treeTxtClick="treeTxtClick"
+            :treeTypeConfig="treeTypeConfig"></jt-table-pc>
+        </div>
+        
     </div>
 </template>
 
@@ -41,6 +52,9 @@
         methods:{
             treeTxtClick(row,treePath){
                 console.log(row,treePath);
+            },
+            getCurrent(){
+
             }
         }
     }

package/examples/tableTest/tree-table.vue

@@ -1,6 +1,8 @@
 <template>
     <div style="position:relative;height:600px">
-        <jt-table-pc 
+        <el-button @click="getCurrent">获取选中</el-button>
+        <div style="position:relative;margin-top:10px;height:600px">
+            <jt-table-pc 
         id="tree_table" 
         ref="tree_table" 
         :data="data[0]"
@@ -8,6 +10,8 @@
         :handlerConfig="handlerConfig" 
         :treeTypeConfig="treeTypeConfig"
         @handlerClick="handlerClick"></jt-table-pc>
+        </div>
+        
     </div>
 </template>
 
@@ -50,7 +54,10 @@ import { data } from '../data2.js';
                    ]);
                     this.$refs.tree_table.reloadTreeChilds(row);
                }
-            }  
+            } ,
+            getCurrent(){
+                console.log(this.$refs.tree_table.jtTable().getCheckboxRecords());
+            }
         }
     }
 </script>