Merge branch 'main' of http://121.37.111.42:3000/ThbTech/gis-bi into main

core/core-frontend/config/dev.ts

@@ -2,13 +2,13 @@ export default {
   server: {
     proxy: {
       '/api/f': {
-        target: 'http://192.168.1.58:8100',
+        target: 'http://192.168.1.38:8100',
         changeOrigin: true,
         rewrite: path => path.replace(/^\/api\/f/, '')
       },
       // 使用 proxy 实例
       '/api': {
-        target: 'http://192.168.1.58:8100',
+        target: 'http://192.168.1.38:8100',
         changeOrigin: true,
         rewrite: path => path.replace(/^\/api/, '')
       }

core/core-frontend/package.json

@@ -19,6 +19,8 @@
     "@antv/l7plot": "^0.5.5",
     "@antv/s2": "^1.49.0",
     "@codemirror/lang-sql": "^6.4.0",
+    "@form-create/designer": "^3.2.11",
+    "@form-create/element-ui": "^3.2.22",
     "@npkg/tinymce-plugins": "^0.0.7",
     "@tinymce/tinymce-vue": "^5.1.0",
     "@turf/centroid": "^7.0.0",

core/core-frontend/src/api/application/module.ts

@@ -5,6 +5,7 @@ export const moduleAdd = data => request.post({ url: '/application/module/save',
 
 export const moduleUpdate = data => request.post({ url: '/application/module/update', data })
 
+export const moduleById = id => request.get({ url: '/application/module/'+id })
 
 
 

core/core-frontend/src/pages/index/main.ts

@@ -3,6 +3,8 @@ import '@/style/index.less'
 import 'normalize.css/normalize.css'
 import '@antv/s2/dist/style.min.css'
 import App from './App.vue'
+import ElementPlus from 'element-plus';
+import 'element-plus/theme-chalk/index.css';
 import { setupI18n } from '@/plugins/vue-i18n'
 import { setupStore } from '@/store'
 import { setupRouter } from '@/router'
@@ -10,6 +12,7 @@ import { setupElementPlus, setupElementPlusIcons } from '@/plugins/element-plus'
 // 注册数据大屏组件
 import { setupCustomComponent } from '@/custom-component'
 import { installDirective } from '@/directive'
+import FcDesigner from '@form-create/designer';
 import '@/utils/DateUtil'
 import '@/permission'
 import WebSocketPlugin from '../../websocket'
@@ -22,7 +25,7 @@ const setupAll = async () => {
   setupElementPlus(app)
   setupCustomComponent(app)
   setupElementPlusIcons(app)
-  app.use(WebSocketPlugin)
+  app.use(WebSocketPlugin).use(FcDesigner).use(ElementPlus)
   app.mount('#app')
 }
 

core/core-frontend/src/router/index.ts

@@ -171,6 +171,13 @@ export const routes: AppRouteRecordRaw[] = [
     meta: {},
     component: () => import('@/viewsnew/data-visualization/index.vue')
   },
+  {
+    path: '/formcreatedesigner',
+    name: 'formcreatedesigner',
+    hidden: true,
+    meta: {},
+    component: () => import('@/viewsnew/common/FormCreateDesigner.vue')
+  },
   // {
   //   path: '/application',
   //   name: 'application',

core/core-frontend/src/viewsnew/application/module/Leftmenu/index.vue

@@ -123,10 +123,13 @@ function moreClic(event:any ,data:any){ // 更多操作
  isTreeDrag.value = true
 }
 function editClic(data:any){
+  console.log(data)
   if(data.type == '03'){
     window.open('/#/dvsCanvas?dvId=' +data.id,  '_blank');
   }else if(data.type == '0301'){
     window.open('/#/dashboard?resourceId=' + data.id, '_blank');
+  }else if(data.type == '09'){
+    window.open('/#/formcreatedesigner?moduleId=' +data.id,  '_blank');
   }
   // window.open('/#/dvCanvas?dvId=' + "1097641013486424064",  '_blank');
 }

core/core-frontend/src/viewsnew/application/module/index.vue

@@ -6,11 +6,16 @@ import Rightmenu from './Rightmenu/index.vue'
 import { findApplicationById } from "@/api/application/application";
 import { useRouter, useRoute } from 'vue-router'
 import DvPreview from '@/viewsnew/data-visualization/DvPreview.vue'
+import FormCreate from '@/viewsnew/common/FormCreate.vue'
+
+
 import DePreview from '@/components/data-visualization/canvas/DePreview.vue'
 import { initCanvasData, initCanvasDataPrepare, onInitReady } from '@/utils/canvasUtils'
 import { dvMainStoreWithOut } from '@/store/modules/data-visualization/dvMain'
 import { storeToRefs } from 'pinia'
+import { t } from '@/hooks/web/useI18n';
 const dvMainStore = dvMainStoreWithOut()
+const moduleInfo  = ref({})
 const state = reactive({
   canvasDataPreview: null,
   canvasStylePreview: null,
@@ -53,6 +58,8 @@ const {
   canvasState,
   batchOptStatus
 } = storeToRefs(dvMainStore)
+
+const isFormCreate = ref(false)
 const route = useRoute()
 const  projectInfo:any = ref({})
 const applicationId:any = ref('')
@@ -101,13 +108,19 @@ const loadCanvasData = (dvId, weight?, ext?) => {
 }
 
 function handleNodeClick(e){
-  console.log(e,'加载')
+  isFormCreate.value = false
+  dataInitState.value = false
   if(e.type == '0301'){
     busiFlag.value = 'dashboard'
+    loadCanvasData(e.id,9,0)
   }else if(e.type == '03'){
     busiFlag.value = 'dataV'
-  }
     loadCanvasData(e.id,9,0)
+  }else if(e.type == '09'){
+    moduleInfo.value = e
+    isFormCreate.value = true
+  }
+
 }
 onBeforeMount(() => {
     dvMainStore.canvasDataInit()
@@ -117,9 +130,10 @@ onBeforeMount(() => {
   <div class="project-box">
     <Header :projectInfo="projectInfo"/>
     <div class="project-content" v-if="applicationId != ''">
-      <Leftmenu v-if="applicationId != ''" :projectInfo="projectInfo" @handleNodeClick="handleNodeClick"/>
+      <Leftmenu class="Leftmenu" v-if="applicationId != ''" :projectInfo="projectInfo" @handleNodeClick="handleNodeClick"/>
         <dv-preview
             ref="dvPreviewRef"
+            class="dvPreviewRef"
             v-if="state.canvasStylePreview && dataInitState"
             :show-position="showPosition"
             :canvas-data-preview="state.canvasDataPreview"
@@ -129,6 +143,7 @@ onBeforeMount(() => {
             :cur-preview-gap="state.curPreviewGap"
             :download-status="downloadStatus"
           ></dv-preview> 
+          <form-create v-if="isFormCreate" :moduleInfo="moduleInfo"></form-create>
     </div>
   </div>
 </template>
@@ -142,4 +157,12 @@ onBeforeMount(() => {
       display: flex;
     }
   }
+  .Leftmenu{
+    position: relative;
+    z-index:2;
+  }
+  .dvPreviewRef{
+    position: relative;
+    z-index:1;
+  }
 </style>

core/core-frontend/src/viewsnew/common/FormCreate.vue

@@ -0,0 +1,79 @@
+<!-- <template>
+  <form-create
+    v-model="formData"
+    v-model:api="fapi"
+    :rule="rule"
+    :option="option"
+   
+  ></form-create>
+</template>
+
+<script lang="ts" setup>
+import {ref} from "vue";
+import formCreate from "@form-create/element-ui";
+const option:any = ref(formCreate.parseJson('{"form":{"inline":false,"hideRequiredAsterisk":false,"labelPosition":"right","size":"default","labelWidth":"125px"},"resetBtn":{"show":false,"innerText":"重置"}}'));
+const rule:any = ref(formCreate.parseJson('[{"type":"input","field":"F2ltmakoaiycabc","title":"输入框","info":"","$required":false,"_fc_id":"id_Fix0makoaiycacc","name":"ref_Fa1zmakoaiycadc","display":true,"hidden":false,"_fc_drag_tag":"input"},{"type":"input","field":"Fonpmakoajgpaec","title":"多行输入框","info":"","$required":false,"props":{"type":"textarea"},"_fc_id":"id_F0pdmakoajgpafc","name":"ref_Fiw6makoajgpagc","display":true,"hidden":false,"_fc_drag_tag":"textarea"},{"type":"input","field":"Ffgzmakoajsiahc","title":"密码输入框","info":"","$required":false,"props":{"type":"password"},"_fc_id":"id_Fjnnmakoajsiaic","name":"ref_Fvhsmakoajsiajc","display":true,"hidden":false,"_fc_drag_tag":"password"},{"type":"inputNumber","field":"Fl02makoak81akc","title":"计数器","info":"","$required":false,"_fc_id":"id_F37amakoak81alc","name":"ref_Fpnemakoak81amc","display":true,"hidden":false,"_fc_drag_tag":"inputNumber"},{"type":"radio","field":"Fgbrmakoakhdanc","title":"单选框","info":"","effect":{"fetch":""},"$required":false,"options":[{"label":"选项01","value":"1"},{"label":"选项02","value":"2"},{"label":"选项03","value":"3"}],"_fc_id":"id_Fldlmakoakheaoc","name":"ref_F7w6makoakheapc","display":true,"hidden":false,"_fc_drag_tag":"radio"},{"type":"checkbox","field":"Fkn9makoakx6aqc","title":"多选框","info":"","effect":{"fetch":""},"$required":false,"options":[{"label":"选项01","value":"1"},{"label":"选项02","value":"2"},{"label":"选项03","value":"3"}],"_fc_id":"id_F2zgmakoakx6arc","name":"ref_Fspwmakoakx6asc","display":true,"hidden":false,"_fc_drag_tag":"checkbox"},{"type":"select","field":"Fgpmmakoalchatc","title":"选择器","info":"","effect":{"fetch":""},"$required":false,"options":[{"label":"选项01","value":"1"},{"label":"选项02","value":"2"},{"label":"选项03","value":"3"}],"_fc_id":"id_Fsfimakoalchauc","name":"ref_F6pgmakoalchavc","display":true,"hidden":false,"_fc_drag_tag":"select"},{"type":"switch","field":"Fh6dmakoaln0awc","title":"开关","info":"","$required":false,"props":{"activeValue":true,"inactiveValue":false},"_fc_id":"id_Fszlmakoaln0axc","name":"ref_Fzbpmakoaln0ayc","display":true,"hidden":false,"_fc_drag_tag":"switch"},{"type":"rate","field":"Fzg8makoalw9azc","title":"评分","info":"","$required":false,"_fc_id":"id_Fv5imakoalw9b0c","name":"ref_Fir6makoalw9b1c","display":true,"hidden":false,"_fc_drag_tag":"rate","value":0}]'));
+const fapi = ref(null);
+const formData = ref({});
+
+const onSubmit =  (formData:any) => {
+  //todo 提交表单
+console.log(formData);
+
+
+}
+</script> -->
+
+
+
+<template>
+  <form-create
+    v-model="formData"
+    v-model:api="fapi"
+    :rule="rule"
+    :option="option"
+    @submit="onSubmit"
+  ></form-create>
+</template>
+
+<script lang="ts" setup>
+import {onMounted,ref,watch} from "vue";
+import formCreate from "@form-create/element-ui";
+import { moduleById } from '@/api/application/module'
+
+// const option:any = ref(formCreate.parseJson('{"form":{"inline":false,"hideRequiredAsterisk":false,"labelPosition":"right","size":"default","labelWidth":"125px"},"resetBtn":{"show":false,"innerText":"重置"}}'));
+// const rule:any = ref(formCreate.parseJson('[{"type":"input","field":"F2ltmakoaiycabc","title":"输入框","info":"","$required":false,"_fc_id":"id_Fix0makoaiycacc","name":"ref_Fa1zmakoaiycadc","display":true,"hidden":false,"_fc_drag_tag":"input"},{"type":"input","field":"Fonpmakoajgpaec","title":"多行输入框","info":"","$required":false,"props":{"type":"textarea"},"_fc_id":"id_F0pdmakoajgpafc","name":"ref_Fiw6makoajgpagc","display":true,"hidden":false,"_fc_drag_tag":"textarea"},{"type":"input","field":"Ffgzmakoajsiahc","title":"密码输入框","info":"","$required":false,"props":{"type":"password"},"_fc_id":"id_Fjnnmakoajsiaic","name":"ref_Fvhsmakoajsiajc","display":true,"hidden":false,"_fc_drag_tag":"password"},{"type":"inputNumber","field":"Fl02makoak81akc","title":"计数器","info":"","$required":false,"_fc_id":"id_F37amakoak81alc","name":"ref_Fpnemakoak81amc","display":true,"hidden":false,"_fc_drag_tag":"inputNumber"},{"type":"radio","field":"Fgbrmakoakhdanc","title":"单选框","info":"","effect":{"fetch":""},"$required":false,"options":[{"label":"选项01","value":"1"},{"label":"选项02","value":"2"},{"label":"选项03","value":"3"}],"_fc_id":"id_Fldlmakoakheaoc","name":"ref_F7w6makoakheapc","display":true,"hidden":false,"_fc_drag_tag":"radio"},{"type":"checkbox","field":"Fkn9makoakx6aqc","title":"多选框","info":"","effect":{"fetch":""},"$required":false,"options":[{"label":"选项01","value":"1"},{"label":"选项02","value":"2"},{"label":"选项03","value":"3"}],"_fc_id":"id_F2zgmakoakx6arc","name":"ref_Fspwmakoakx6asc","display":true,"hidden":false,"_fc_drag_tag":"checkbox"},{"type":"select","field":"Fgpmmakoalchatc","title":"选择器","info":"","effect":{"fetch":""},"$required":false,"options":[{"label":"选项01","value":"1"},{"label":"选项02","value":"2"},{"label":"选项03","value":"3"}],"_fc_id":"id_Fsfimakoalchauc","name":"ref_F6pgmakoalchavc","display":true,"hidden":false,"_fc_drag_tag":"select"},{"type":"switch","field":"Fh6dmakoaln0awc","title":"开关","info":"","$required":false,"props":{"activeValue":true,"inactiveValue":false},"_fc_id":"id_Fszlmakoaln0axc","name":"ref_Fzbpmakoaln0ayc","display":true,"hidden":false,"_fc_drag_tag":"switch"},{"type":"rate","field":"Fzg8makoalw9azc","title":"评分","info":"","$required":false,"_fc_id":"id_Fv5imakoalw9b0c","name":"ref_Fir6makoalw9b1c","display":true,"hidden":false,"_fc_drag_tag":"rate","value":0}]'));
+const moduleInfo:any = ref({})
+const props:any = defineProps({
+  moduleInfo: {
+    type: Object,
+    default: ''
+  }
+})
+const  option :any = ref({});
+const  rule :any = ref([]);
+const fapi = ref(null);
+const formData = ref({});
+
+const onSubmit =  (formData:any) => {
+  //todo 提交表单
+console.log(formData);
+}
+function getInit(){
+  if(moduleInfo.value.id == null){
+    return
+  }
+  moduleById(props.moduleInfo.id ).then(res => {
+    if(res.code ==0){
+      if(res.data.data.canvas_style_data != null && res.data.data.canvas_style_data != ""){
+        option.value =  formCreate.parseJson(res.data.data.component_data)
+        rule.value =  formCreate.parseJson(res.data.data.canvas_style_data)
+      }
+    }
+  })
+}
+onMounted(() => {
+  moduleInfo.value = props.moduleInfo
+  getInit()
+});
+</script>

core/core-frontend/src/viewsnew/common/FormCreateDesigner.vue

@@ -0,0 +1,82 @@
+<template>
+  <div >
+    <div style="display: flex;justify-content: flex-end;padding: 10px;">
+      <el-button type="primary" @click="exportData">保存</el-button>
+    </div>
+    <!-- <el-button @click="exportData">显示</el-button> -->
+    <FcDesigner ref="designerRef" style="width: 100vw;height:calc(100vh - 60px) " />
+  </div>
+</template>
+
+<script setup lang="ts">
+import { onMounted, reactive, ref, toRefs, watch, nextTick } from 'vue';
+import { ElMessage,ElMessageBox } from 'element-plus-secondary'
+
+import formCreate from "@form-create/element-ui";
+import { useRoute, useRouter } from 'vue-router'
+import { moduleById,moduleUpdate } from '@/api/application/module'
+const route = useRoute()
+
+const designerRef:any = ref();
+const exportData = () => {
+  if (!designerRef.value) return;
+
+
+  
+  // 获取规则和配置
+  const rules = JSON.stringify(designerRef.value.getRule()) ;
+  const options = JSON.stringify(designerRef.value.getOption());
+
+
+  let data = {
+      id:route.query.moduleId,
+      canvasStyleData:rules,
+      componentData:options,
+    }
+    moduleUpdate(data).then((res) => {
+      if(res.code == 0){
+        ElMessage.success('修改成功')
+      }else{
+        ElMessage.error('修改失败')
+      }
+     
+    }).catch(() => {
+     
+    })
+  // console.log(rule,option)
+
+  // option.value = formCreate.parseJson(options)
+  // rule.value = formCreate.parseJson(rules)
+  // dialogVisible.value = true
+
+};
+onMounted(() => {
+ console.log(route.query.moduleId)
+  if(route.query.moduleId == null){
+    return
+  }
+
+  moduleById(route.query.moduleId).then(res => {
+    if(res.code ==0){
+     
+      if(res.data.data.canvas_style_data != null && res.data.data.canvas_style_data != ""){
+        designerRef.value.setOption(formCreate.parseJson(res.data.data.component_data))
+        designerRef.value.setRule( formCreate.parseJson(res.data.data.canvas_style_data))  
+      }
+    }
+   console.log(res.data.data)
+  })
+});
+</script>
+
+<style lang="scss">
+</style>
+<style>
+
+._fc-m-tools-l{
+  /* display: none; */
+}
+._fc-m-tools-r{
+  /* display: none; */
+}
+</style>