增加条形图、曲线图、柱状图表显示

vue/src/views/query/index.vue

@@ -129,211 +129,250 @@
 </template>
 
 <script lang="ts">
-import {ref, defineComponent} from 'vue';
-import type {FormInstance} from 'ant-design-vue';
-import {useRoute} from 'vue-router';
-import DragWhere from '@/components/basic/query/drag-where.vue'
-import DragBase from '@/components/basic/query/drag-base.vue'
-import DragMeasure from '@/components/basic/query/drag-measure.vue'
-import DisplayTable from '@/components/basic/query/display-table.vue'
-import {save, get} from "@/api/common";
-import type { TreeProps } from 'ant-design-vue';
+  import {ref, defineComponent} from 'vue';
+  import type {FormInstance} from 'ant-design-vue';
+  import {useRoute} from 'vue-router';
+  import DragWhere from '@/components/basic/query/drag-where.vue'
+  import DragBase from '@/components/basic/query/drag-base.vue'
+  import DragMeasure from '@/components/basic/query/drag-measure.vue'
+  import DisplayTable from '@/components/basic/query/display-table.vue'
+  import DisplayChartBar from '@/components/basic/query/display-chart-bar.vue'
+  import DisplayChartYbar from '@/components/basic/query/display-chart-ybar.vue'
+  import DisplayChartLine from '@/components/basic/query/display-chart-line.vue'
+  import {save, get} from "@/api/common";
+  import type { TreeProps } from 'ant-design-vue';
 
-export default defineComponent({
-  name: 'queryindex',
-  components: {DragWhere, DragBase, DragMeasure, DisplayTable},
-  setup() {
-    const route = useRoute();
-    const expand = ref(false);
-    const formRef = ref<FormInstance>();
-    const measure = ref<typeof DragMeasure>();
-    const base = ref<typeof DragBase>();
-    const where = ref<typeof DragWhere>();
-    const display = ref<typeof DisplayTable>();
+  export default defineComponent({
+    name: 'queryindex',
+    components: {DragWhere, DragBase, DragMeasure,DisplayTable,
+      DisplayChartBar, DisplayChartLine, DisplayChartYbar},
+    setup() {
+      const route = useRoute();
+      const expand = ref(false);
+      const formRef = ref<FormInstance>();
+      const measure = ref<typeof DragMeasure>();
+      const base = ref<typeof DragBase>();
+      const where = ref<typeof DragWhere>();
+      const display = ref<typeof DisplayTable>();
+      const displayChartBar = ref<typeof DisplayChartBar>();
+      const displayChartLine = ref<typeof DisplayChartLine>();
+      const displayChartYbar = ref<typeof DisplayChartYbar>();
 
-    const subjectTrees = ref({
-      data :[] as TreeProps['treeData'],
-      expandedKeys : [''],
-      searchStr : ''
-    });
-
-    const formState = ref({
-      temp : {
-        tempId: '',
-        tempName: '',
-        tempNo: '',
-        subId: null,
-        remark: '',
-      },
-      sub : {
-        subId: null,
-        subjectName: '',
-      },
-      measures : [],
-      wheres : [],
-      bases : [],
-      pagination : null
-    });
+      const activeTab = ref('1');
+      const subjectTrees = ref({
+        data :[] as TreeProps['treeData'],
+        expandedKeys : [''],
+        searchStr : ''
+      });
 
-    const modal = ref({
-      open : false,
-      sqlString : null
-    });
+      const formState = ref({
+        temp : {
+          tempId: '',
+          tempName: '',
+          tempNo: '',
+          subId: null,
+          remark: '',
+        },
+        sub : {
+          subId: null,
+          subjectName: '',
+        },
+        measures : [],
+        wheres : [],
+        bases : [],
+        pagination : null
+      });
 
-    const onFinish = () => {
-      if(formRef.value == undefined){
-        return;
-      }
-      formRef.value.validate().then(() => {
-        save('temp/save', formStateGet()).then(result => {
-          console.log(result);
-          getTemp(result["tempId"]);
-        });
+      const modal = ref({
+        open : false,
+        sqlString : null
       });
-    }
 
-    const formStateGet = () =>{
-      formState.value.measures = (measure.value as any).getTagList();
-      formState.value.wheres = (where.value as any).getTagList();
-      formState.value.bases = (base.value as any).getTagList();
-      //从视图取得翻页数据
-      formState.value.pagination = (display.value as any).getPagination();
-      console.log("formState", formState.value);
-      return formState.value;
-    };
+      const tabChange = (key) => {
+        console.log("tabChange", key);
+        if(key=="2") {
+          setTimeout(function (){
+            (displayChartBar.value as any).resize();
+          }, 100);
+        }
+        if(key=="3") {
+          setTimeout(function (){
+            (displayChartLine.value as any).resize();
+          }, 100);
+        }
+        if(key=="4") {
+          setTimeout(function (){
+            (displayChartYbar.value as any).resize();
+          }, 100);
+        }
+      }
 
-    const getQuery = () =>{
-      save('temp/genQuery', formStateGet()).then(result => {
-        console.log(result);
-        if(result["code"]!=0){
-          modal.value.open = true;
-          modal.value.sqlString = result["sqlString"];
+      const onFinish = () => {
+        if(formRef.value == undefined){
+          return;
         }
-        //将数据给视图，视图组装并显示
-        (display.value as any).setData(result);
-      });
-    }
+        formRef.value.validate().then(() => {
+          save('temp/save', formStateGet()).then(result => {
+            console.log(result);
+            getTemp(result["tempId"]);
+          });
+        });
+      }
 
-    const onDragStart = (event, obj) =>{
-      event.dataTransfer.setData("dragData", "-");
-      obj.tempFeildId = new Date().getTime()+'';
-      window["dragData"] = obj;
-      console.log("onDragStart", obj);
-    }
-    const getSubjectTree = async function () {
-      //loading.value = true;
-      subjectTrees.value.data = await get('temp/getSubjectTree', {tabName : subjectTrees.value.searchStr});
-      //计算第一个展开节点
-      subjectTrees.value.expandedKeys = [];
-      if(subjectTrees.value.data && subjectTrees.value.data.length>0){
-        subjectTrees.value.expandedKeys.push(subjectTrees.value.data[0].key+"");
-        subjectTrees.value.data[0].children?.forEach((it)=>{
-          subjectTrees.value.expandedKeys.push(it.key+"");
+      const formStateGet = () =>{
+        formState.value.measures = (measure.value as any).getTagList();
+        formState.value.wheres = (where.value as any).getTagList();
+        formState.value.bases = (base.value as any).getTagList();
+        //从视图取得翻页数据
+        formState.value.pagination = (display.value as any).getPagination();
+        console.log("formState", formState.value);
+        return formState.value;
+      };
+
+      const getQuery = () =>{
+        save('temp/genQuery', formStateGet()).then(result => {
+          console.log(result);
+          if(result["code"]!=0){
+            modal.value.open = true;
+            modal.value.sqlString = result["sqlString"];
+          }
+          //将数据给视图，视图组装并显示
+          (display.value as any).setData(result);
+          (displayChartBar.value as any).setData(result);
+          (displayChartLine.value as any).setData(result);
+          (displayChartYbar.value as any).setData(result);
         });
       }
-      console.log("getSubjectTree",subjectTrees.value,subjectTrees.value.expandedKeys);
-    }
-    getSubjectTree();
 
-    const getTemp = async function(tempId){
-      const rtn = await get('temp/get', {tempId : tempId});
-      console.log(rtn);
-      formState.value.temp = rtn.temp;
-      formState.value.sub = rtn.sub;
-      formState.value.bases = rtn.bases;
-      formState.value.wheres = rtn.wheres;
-      formState.value.measures = rtn.measures;
+      const onDragStart = (event, obj) =>{
+        event.dataTransfer.setData("dragData", "-");
+        obj.tempFeildId = new Date().getTime()+'';
+        window["dragData"] = obj;
+        console.log("onDragStart", obj);
+      }
+      const getSubjectTree = async function () {
+        //loading.value = true;
+        subjectTrees.value.data = await get('temp/getSubjectTree', {tabName : subjectTrees.value.searchStr});
+        //计算第一个展开节点
+        subjectTrees.value.expandedKeys = [];
+        if(subjectTrees.value.data && subjectTrees.value.data.length>0){
+          subjectTrees.value.expandedKeys.push(subjectTrees.value.data[0].key+"");
+          subjectTrees.value.data[0].children?.forEach((it)=>{
+            subjectTrees.value.expandedKeys.push(it.key+"");
+          });
+        }
+        console.log("getSubjectTree",subjectTrees.value,subjectTrees.value.expandedKeys);
+      }
+      getSubjectTree();
 
-      setTimeout(displayReader, 100);
+      const getTemp = async function(tempId){
+        const rtn = await get('temp/get', {tempId : tempId});
+        console.log(rtn);
+        formState.value.temp = rtn.temp;
+        formState.value.sub = rtn.sub;
+        formState.value.bases = rtn.bases;
+        formState.value.wheres = rtn.wheres;
+        formState.value.measures = rtn.measures;
 
-      (measure.value as any).setTagList(rtn.measures);
-      (where.value as any).setTagList(rtn.wheres);
-      (base.value as any).setTagList(rtn.bases);
-    }
+        setTimeout(displayReader, 100);
 
-    const onChangeMeasure = (list, obj) => {
-      console.log("onChangeMeasure", arguments, list, obj);
-      formState.value.measures = list;
-      displayReader();
-      checkSubjectId(obj);
-    }
-    const onChangeWhere = (list, obj) => {
-      console.log("onChangeWhere", arguments, list, obj);
-      formState.value.wheres = list;
-      displayReader();
-      checkSubjectId(obj);
-    }
-    const onChangeBase = (list, obj) => {
-      console.log("onChangeBase", arguments, list, obj);
-      formState.value.bases = list;
-      displayReader();
-      checkSubjectId(obj);
-    }
+        (measure.value as any).setTagList(rtn.measures);
+        (where.value as any).setTagList(rtn.wheres);
+        (base.value as any).setTagList(rtn.bases);
+      }
 
-    const onDisplayChange = (pagination) => {
-      //视图发起数据查询，如翻页
-      console.log("onDisplayChange", pagination);
-      formState.value.pagination = pagination;
-      getQuery();
-    }
+      const onChangeMeasure = (list, obj) => {
+        console.log("onChangeMeasure", arguments, list, obj);
+        formState.value.measures = list;
+        displayReader();
+        checkSubjectId(obj);
+      }
+      const onChangeWhere = (list, obj) => {
+        console.log("onChangeWhere", arguments, list, obj);
+        formState.value.wheres = list;
+        displayReader();
+        checkSubjectId(obj);
+      }
+      const onChangeBase = (list, obj) => {
+        console.log("onChangeBase", arguments, list, obj);
+        formState.value.bases = list;
+        displayReader();
+        checkSubjectId(obj);
+      }
 
-    function displayReader(){
-      //初始化视图显示
-      console.log("displayReader",display.value);
-      (display.value as any).reader();
-    }
+      const onDisplayChange = (pagination) => {
+        //视图发起数据查询，如翻页
+        console.log("onDisplayChange", pagination);
+        formState.value.pagination = pagination;
+        getQuery();
+      }
 
-    const checkSubjectId = (obj)=>{
-      if(formState.value.temp.subId==null && obj!=null) {
-        formState.value.temp.subId = obj.subId;
-        formState.value.sub.subId = obj.subId;
-        formState.value.sub.subjectName = obj.subjectName;
+      function displayReader(){
+        //初始化视图显示
+        console.log("displayReader",display.value);
+        console.log("displayReader",display.value, displayChartBar.value);
+        (display.value as any).reader();
+        (displayChartBar.value as any).reader();
+        (displayChartLine.value as any).reader();
+        (displayChartYbar.value as any).reader();
       }
-      if(formState.value.bases.length + formState.value.measures.length + formState.value.wheres.length <= 0) {
-        formState.value.temp.subId = null;
-        formState.value.sub.subId = null;
-        formState.value.sub.subjectName = '';
+
+      const checkSubjectId = (obj)=>{
+        if(formState.value.temp.subId==null && obj!=null) {
+          formState.value.temp.subId = obj.subId;
+          formState.value.sub.subId = obj.subId;
+          formState.value.sub.subjectName = obj.subjectName;
+        }
+        if(formState.value.bases.length + formState.value.measures.length + formState.value.wheres.length <= 0) {
+          formState.value.temp.subId = null;
+          formState.value.sub.subId = null;
+          formState.value.sub.subjectName = '';
+        }
+        console.log("formState.value.temp.subId", formState.value.temp.subId)
       }
-      console.log("formState.value.temp.subId", formState.value.temp.subId)
-    }
 
-    const labelCol = { style: { width: '100px' } };
-    return {
-      route,
-      expand,
-      onFinish,
-      formRef,
-      formState,
-      labelCol,
-      measure,
-      where,
-      base,
-      display,
-      onChangeMeasure,
-      onChangeWhere,
-      onChangeBase,
-      onDragStart,
-      checkSubjectId,
-      getQuery,
-      getTemp,
+      const labelCol = { style: { width: '100px' } };
+      return {
+        route,
+        expand,
+        onFinish,
+        formRef,
+        formState,
+        labelCol,
+        measure,
+        where,
+        base,
+        activeTab,
+        display,
+        displayChartBar,
+        displayChartLine,
+        displayChartYbar,
+        tabChange,
+        onChangeMeasure,
+        onChangeWhere,
+        onChangeBase,
+        onDragStart,
+        checkSubjectId,
+        getQuery,
+        getTemp,
 
-      subjectTrees,
-      getSubjectTree,
-      modal,
-      displayReader,
-      onDisplayChange
-    };
-  },
-  created() {
-    if (history.state.params?.tempId ) {
-      console.log("created",history.state.params?.tempId );
-      this.getTemp(history.state.params?.tempId);
-    }
-  },
-  activated() {
+        subjectTrees,
+        getSubjectTree,
+        modal,
+        displayReader,
+        onDisplayChange
+      };
+    },
+    created() {
+      if (history.state.params?.tempId ) {
+        console.log("created",history.state.params?.tempId );
+        this.getTemp(history.state.params?.tempId);
+      }
+    },
+    activated() {
 
-  }
-});
+    }
+  });
 </script>
 
 <style lang="less" scoped>
@@ -368,6 +407,11 @@ export default defineComponent({
   .query-index-table{
     flex-grow: 1;
   }
+  .query-index-tabs{
+    margin-left: 10px;
+    margin-right: 10px;
+    height: 100%;
+  }
   .tabs-view-content{
     padding: 0px;
   }
@@ -389,3 +433,4 @@ export default defineComponent({
 
   }
 </style>
+