试验图表

src/components/plugins/table-form/echart.vue

@@ -11,7 +11,7 @@ import { nextTick, onMounted, onUnmounted, ref, watch } from 'vue'
 
 const props = defineProps({
     option: {
-        type: Object,
+        type: [Object, String],
         default: () => ({}),
     },
     keyname: {
@@ -43,7 +43,6 @@ watch(() => [
 
 //初始化图表
 const initChart = () => {
-    console.log('echarts', options.value)
     chart = echarts.init(echart.value)
     setOptions(options.value)
 }
@@ -61,6 +60,7 @@ const resizeEvent = () => {
 
 //设置图表
 const setOptions = (option) => {
+    chart.clear()
     nextTick(() => {
         chart.setOption(option)
     })
@@ -98,6 +98,7 @@ const getImage = () => {
 defineExpose({
     onResize,
     getImage,
+    setOptions,
 })
 </script>
 

src/plugins/HTableForm.js

@@ -28,18 +28,7 @@ export default class HTableForm {
     static tableFormApp = null
     static tableFormVM = null
 
-    static createForm({
-                          template,
-                          tableForm,
-                          keys,
-                          appId,
-                          pid,
-                          onRight,
-                          onBlur,
-                          onLeftClick,
-                          onFormDataChange,
-                          onChartRefs,
-                      }) {
+    static createForm({ template, tableForm, keys, appId, pid, onRight, onBlur, onLeftClick, onFormDataChange, onChartRefs }) {
         const _this = this
         const app = createApp({
             //自定义组件，需要把饿了么的组件，或者自定义组件手动传递进来绑定，否则渲染时，自定义组件不会生效

src/views/tentative/detect/components/ListItem.vue

@@ -228,7 +228,18 @@ import dataApi1 from '~api/tentative/parameter/container'
 import dataApi2 from '~api/tentative/device/approach'
 import { getClassList } from '~api/tentative'
 import notableform from '~src/assets/view/notableform.svg'
-import { deepClone, formValidate, getArrValue, getObjVal, getObjValue, isString, setPosInsert, setPosRange } from 'js-fast-way'
+import {
+    base64ToFile,
+    deepClone,
+    formValidate,
+    getArrValue,
+    getObjVal,
+    getObjValue,
+    isString,
+    setPosInsert,
+    setPosRange,
+} from 'js-fast-way'
+import ossApi from '~api/oss'
 
 //初始
 const props = defineProps({
@@ -346,6 +357,7 @@ const getFormDataInit = ({ projectId, cid, pKeyId, isBussShow }) => {
 
 //设置表单对象的数量
 const formData = ref([])
+const formLinkIdData = ref({})
 const setFormDataNum = (datas) => {
     ActiveKey.value = ''
     let newArr = []
@@ -356,6 +368,27 @@ const setFormDataNum = (datas) => {
         })
     }
     formData.value = newArr
+    //处理关联表
+    let newDataObj = {}
+    for (let i = 0; i < datas.length; i++) {
+        const item = datas[i]
+        newDataObj[item.pKeyId] = {
+            tableId: item.initTableId,
+            isMain: item.isCopyTab === 0,
+            mainId: item.isCopyTab === 0 ? item.pKeyId : '',
+            linkId: [],
+        }
+        //获取关联表
+        datas.forEach((items) => {
+            if (items.initTableId === item.initTableId && item.pKeyId !== items.pKeyId) {
+                newDataObj[item.pKeyId].linkId.push(items.pKeyId)
+                if (items.isCopyTab === 0) {
+                    newDataObj[item.pKeyId].mainId = items.pKeyId
+                }
+            }
+        })
+    }
+    formLinkIdData.value = newDataObj
 }
 const sampledata = ref([])
 const positiondata = ref([])
@@ -394,7 +427,8 @@ const CollapseChange = async (name) => {
         }
         //渲染表单
         await getExcelHtml(item, index)
-        await getChartConfig({}, index)
+        const { key, data } = await getChartConfig()
+        if (key) formData.value[index][key] = data
     } else {
         // await getExcelHtml(item,index)
         getOffsetTop()
@@ -430,7 +464,8 @@ const getExcelHtml = async (item, index) => {
                 onBlur: (event, key, reg, val, msg, type) => {
                     setTableFormBlurReg(pkeyIds, event, key, reg, val, msg, item, index)
                     if (type === 'chart') {
-                        getChartConfig(formData.value[index], index)
+                        chartKey.value = formData.value[index].formchartKeyShow
+                        getBlurChartConfig(formData.value[index])
                     }
                 },
             })
@@ -450,9 +485,9 @@ const getExcelHtml = async (item, index) => {
 
 //图表ref
 const chartRefs = ref([])
-const setChartRefs = (el, pKeyId, key) => {
+const setChartRefs = async (el, pKeyId, key) => {
     if (el) {
-        const { index } = getChartRef(pKeyId, key)
+        const { index } = await getChartRef(pKeyId, key)
         if (index !== -1) {
             chartRefs.value[index].ref = el
         } else {
@@ -461,7 +496,7 @@ const setChartRefs = (el, pKeyId, key) => {
     }
 }
 //获取图表的ref
-const getChartRef = (pKeyId, key) => {
+const getChartRef = async (pKeyId, key) => {
     let refs = chartRefs.value, refVal, index = -1
     for (let i = 0; i < refs.length; i++) {
         if (refs[i].pKeyId === pKeyId && refs[i].key === key) {
@@ -474,27 +509,63 @@ const getChartRef = (pKeyId, key) => {
 }
 
 //图表信息
-const chartKey = ref('key_41__27_0')
-const getChartConfig = async (form = {}, index) => {
-    let { formChartKey } = form, { id } = baseData.value, formKeys = {}
+const chartKey = ref('')
+const getBlurChartConfig = async (form = {}) => {
+    if (chartKey.value) {
+        let { formChartKey } = form, formKeys = {}, keyId = formKeyIds.value
+        formKeys[keyId] = {}
+        const chartKeys = formChartKey ? formChartKey.split(',') : []
+        chartKeys.forEach((item) => {
+            formKeys[keyId][item] = form[item] ?? ''
+        })
+        //关联表单的key
+        const { linkId } = formLinkIdData.value[keyId]
+        for (let i = 0; i < linkId.length; i++) {
+            const newKey = linkId[i]
+            formKeys[newKey] = {}
+            formKeys = await getFormChartKey(formKeys, newKey)
+        }
+        //更新图表配置
+        const { key, data } = await getChartConfig(formKeys)
+        if (key) {
+            form[key] = data
+            const { ref } = await getChartRef(keyId, key)
+            ref?.setOptions(data)
+        }
+    } else {
+        console.log('formchartKeyShow 为空')
+    }
+}
+
+//获取表单的图表数据
+const getFormChartKey = async (formKeys, key) => {
+    const index = formData.value.findIndex((item) => item.pkeyId === key)
+    const form = formData.value[index], { formChartKey } = form
     const chartKeys = formChartKey ? formChartKey.split(',') : []
     chartKeys.forEach((item) => {
-        formKeys[item] = form[item] ?? ''
-    })
-    console.log('formKeys', formKeys)
-    const { data } = await dataApi.getChartInit({
-        id: id || nodeIdvaluedata.value || newaddId.value,
-        pkeyId: formKeyIds.value,
-        data: formKeys,
+        formKeys[key][item] = form[item] ?? ''
     })
-    //更新图表配置
-    const chart_key = chartKey.value
-    if (!getObjVal(form)) {
-        formData.value[index][chart_key] = getObjValue(data)
+    return formKeys
+}
+
+
+//获取图片配置
+const getChartConfig = async (form = {}) => {
+    if (chartKey.value) {
+        const { id } = baseData.value
+        const { data } = await dataApi.getChartInit({
+            id: id || nodeIdvaluedata.value || newaddId.value,
+            pkeyId: formKeyIds.value,
+            data: form,
+        })
+        return {
+            key: chartKey.value,
+            data: getObjValue(data),
+        }
     } else {
-        form[chart_key] = getObjValue(data)
+        console.log('formchartKeyShow 为空')
+        return { key: '', data: {} }
     }
-    console.log(formData.value[index])
 }
 
 //正则效验
@@ -605,6 +676,7 @@ const getBussDataInfo = async (item, index) => {
                 }
             })
         }
+        chartKey.value = formData.value[index].formchartKeyShow
     } else {
         window?.$message?.warning('pkeyId为空')
     }
@@ -619,6 +691,7 @@ const getBussDataInfo1 = async (item, index) => {
                 isCollapseLoad: true,
             }
         }
+        chartKey.value = formData.value[index].formchartKeyShow
     } else {
         window?.$message?.warning('pkeyId为空')
     }
@@ -649,12 +722,37 @@ const tableFormSaveClick = async (item, index) => {
     }
 }
 
+//上传图表的图片
+const uploadChartImgFile = async (base64) => {
+    let fileOfBlob = base64ToFile(base64)
+    let formData = new FormData()
+    formData.append('file', fileOfBlob)
+    //上传文件
+    const { error, code, data } = await ossApi.putFile(formData, false)
+    if (!error && code === 200) {
+        let res = getObjValue(data)
+        if (res?.link) {
+            return res.link
+        } else {
+            return ''
+        }
+    } else {
+        return ''
+    }
+}
+
 const newaddId = ref('')
 //保存表单数据
 const saveExcelBussData = async (item, index, showTip = true) => {
     if (!getObjVal(formRegExpJson.value)) {
         tableFormSaveLoading.value = true
         const InitObj = getFormDataInit(item)
+        if (chartKey.value) {
+            const { ref } = await getChartRef(item.pKeyId, chartKey.value)
+            const url = await uploadChartImgFile(ref?.getImage())
+            const name = `${chartKey.value}_url`
+            InitObj[name] = url
+        }
         baseData.value.tableType = tabTypeKeyInfo.value
         if (newaddId.value.length > 0) {
             baseData.value.id = newaddId.value
@@ -1288,15 +1386,27 @@ const chageOrinData = () => {
 //获取表单数据
 const getFormData = () => {
     const formArr = formData.value
-    // return  formArr.filter(({pkeyId, isCollapseLoad}) => {
-    //     return (pkeyId ?? '') !== '' && isCollapseLoad;
-    // })
     return formArr.filter((item) => {
-        // return (pkeyId ?? '') !== '' && isCollapseLoad;
         return item
     })
 }
 
+const setFormChart = async () => {
+    const form = getFormData()
+    for (let i = 0; i < form.length; i++) {
+        const { pkeyId, formchartKeyShow } = form[i]
+        if (formchartKeyShow) {
+            const { ref } = await getChartRef(pkeyId, formchartKeyShow)
+            if (ref) {
+                const url = await uploadChartImgFile(ref?.getImage())
+                const name = `${formchartKeyShow}_url`
+                form[i][name] = url
+            }
+        }
+    }
+    return form
+}
+
 //获取表单效验数据
 const getFormRegExpJson = () => {
     return deepClone(formRegExpJson.value)
@@ -1314,13 +1424,13 @@ const setActiveKey = (key) => {
 
 // 暴露出去
 defineExpose({
+    setFormChart,
     getFormData,
     getFormRegExpJson,
     getActiveKey,
     setActiveKey,
     changeSimpleInput,
     changePositionInput,
-
 })
 </script>
 

src/views/tentative/detect/test-form.vue

@@ -1006,8 +1006,8 @@ const tableFormSaveClick = async () => {
         window.$message?.warning('请选择报告单是否合格')
     } else {
         let FormData
-
-        let curform = ListItemRef.value?.getFormData()
+        let curform = await ListItemRef.value?.setFormChart()
+        //let curform = ListItemRef.value?.getFormData()
         setAllListData(curform)
         let operTrue = alllistData.value.filter(e => e.oper) //操作的数据
         let types = []