设置图表英文名称完成

src/api/chart.js

@@ -218,6 +218,16 @@ export default{
      */
     chartRefresh(params){
         return get('/datamanage/chart_info/refresh',params)
+    },
+    /**
+     * 编辑图表英文信息
+     * @param ChartInfoId
+     * @param ChartNameEn
+     * @param ChartEdbInfoList {EdbInfoId,EdbNameEn,UnitEn}
+     * @param ExtraConfig 如果是截面散点图(chartType===10)需要加这个 {}
+     */
+    chartInfoEditEn(params){
+        return post('/datamanage/chart_info/en/edit',params)
     }
 
 } 

src/router/chartETA.js

@@ -28,14 +28,5 @@ export const chartETARoutes=[
             title: "ETA图库",
             keepAlive:false,
         },
-    },
-    {
-        path:"/chartETA/setchartname",
-        name:"ChartETASetName",
-        component: () => import("@/views/chartETA/SetChartEnName.vue"),
-        meta: { 
-            title: "ETA图库",
-            keepAlive:false,
-        },
-    },
+    }
 ]

src/views/chartETA/ChartDetail.vue

@@ -3,7 +3,7 @@ import {nextTick, onMounted,ref,reactive} from 'vue'
 import {showDialog, showToast} from 'vant'
 import apiChart from '@/api/chart'
 import { useRoute, useRouter } from 'vue-router'
-import { getSSRHandler, useWindowSize } from '@vueuse/core'
+import { useWindowSize } from '@vueuse/core'
 import {yearSelectOpt,sameOptionType} from '@/hooks/chart/config'
 import {useChartRender} from '@/hooks/chart/render'
 import moment from 'moment'
@@ -11,6 +11,7 @@ import EdbInfo from './components/EdbInfo.vue'
 import SourceDetail from './components/SourceDetail.vue'
 import TreeSelectPop from './components/TreeSelectPop.vue'
 import AddChartToMyETA from './components/AddChartToMyETA.vue'
+import SetChartEnName from './components/SetChartEnName.vue'
 import {useCachedViewsStore} from '@/store/modules/cachedViews'
 import _ from 'lodash';
 
@@ -265,7 +266,7 @@ function handleActionClick(action){
         'share':getShareLink,
         'saveOther':openSaveChartOtherDialog,
         'savePic':saveChartPic,
-        'setEnName':goSetChartEnName,
+        'setEnName':openSetChartEnNameDialog,
         'addToMyETA':openAddToMyETADialog,
         'delete':deleteChart
     }
@@ -347,18 +348,6 @@ let savePicSrc = ref('')
 function saveChartPic(){
     console.log('chart',highChart.value)
     const {chartWidth,chartHeight} = highChart.value
-    
-    /* const svgData = highChart.value.getSVG({
-        chart: {
-            width: chartWidth,
-            height: chartHeight,
-        }
-    })
-    let base64Url = 'data:image/svg+xml;charset=utf-8,'+encodeURIComponent(svgData)
-    let link = document.createElement('a')
-    link.href = base64Url
-    link.download = `test.svg`
-    link.click() */
     //打开保存图片弹窗
     const svgData = highChart.value.getSVG({
         chart: {
@@ -366,7 +355,6 @@ function saveChartPic(){
             height: chartHeight,
         }
     })
-    //savePicSrc.value = 'data:image/svg+xml;charset=utf-8,'+encodeURIComponent(svgData)
     const canvas = document.createElement('canvas')
     const ctx = canvas.getContext('2d')
     canvas.width = chartWidth*2
@@ -380,15 +368,10 @@ function saveChartPic(){
     }
 
 }
+let setChartEnDialogShow = ref(false)
 //设置英文名称
-function goSetChartEnName(){
-    router.push({
-        path:'/chartETA/setchartname',
-        query:{
-            id:chartInfo.value.ChartInfoId,
-            chartType:chartInfo.value.ChartType
-        }
-    })
+function openSetChartEnNameDialog(){
+    setChartEnDialogShow.value = true
 }
 
 let isShowAddToMyETADialog = ref(false)
@@ -718,6 +701,19 @@ function deleteChart(){
             <img :src="savePicSrc" alt="" style="width:100%;box-sizing: border-box;">
             <p style="text-align: center;color:#999;margin-top: 10px;">长按保存图片</p>
         </van-popup>
+        <!-- 设置英文名称弹窗 -->
+        <van-popup
+            v-model:show="setChartEnDialogShow"
+            position="bottom"
+            :style="{width:'100%',height:'100%'}"
+        >
+            <SetChartEnName 
+                :isShow="setChartEnDialogShow"
+                :chartInfo="chartInfoData"
+                :chartType="Number(route.query.chartType)"
+                @close="setChartEnDialogShow=false"
+            />
+        </van-popup>
 
     </div>
 </template>

src/views/chartETA/SetChartENName.vue → src/views/chartETA/components/SetChartEnName.vue

@@ -1,30 +1,25 @@
 <script setup>
 //设置图表英文名称
-import {ref,onMounted} from 'vue'
-import { useRoute } from 'vue-router'
-import {sameOptionType} from '@/hooks/chart/config'
+import {ref,watch} from 'vue'
 import apiChart from '@/api/chart'
-const route=useRoute()
-const chartInfo = ref(null)
-async function getChartDetail(){
-    const params=sameOptionType.includes(Number(route.query.chartType))?{
-        ChartInfoId:Number(route.query.id),
-        DateType: '',
-        StartDate: '',
-        EndDate: '',
-    }:{
-        ChartInfoId:Number(route.query.id),
-        Calendar: '公历',
-        SeasonStartDate: '',
-        SeasonEndDate:'' ,
+import { showToast } from 'vant';
+const props = defineProps({
+    isShow:{
+        type:Boolean,
+        default:false
+    },
+    chartInfo:{
+        type:Object,
+        default:{}
+    },
+    chartType:{
+        type:Number,
+        default:0
     }
-    const res=await apiChart.chartInfoById(params)
-    if(res.Ret!==200) return
-    chartInfo.value = res.Data
-    initForm()
-}
+})
+//折叠面板的展开项
 const activeGroup = ref([])
-//表格组,第一项固定为图表名称
+//表格组
 const formGroup = ref([
     /* {
         groupName:'图表名称',//分组名称
@@ -37,15 +32,25 @@ const formGroup = ref([
         }],//需要填写的项
     } */
 ])
+//截面图的其他参数
+const _ExtraConfig = ref({})
+watch(()=>props.isShow,()=>{
+    if(props.isShow){
+        initForm()
+    }else{
+        formGroup.value = []
+    }
+},{immediate:true})
 
 function initForm(){
-    const {EdbInfoList} = chartInfo.value
-    const {ChartName,ChartNameEn,ExtraConfig} = chartInfo.value.ChartInfo
+    const {EdbInfoList} = props.chartInfo
+    const {ChartName,ChartNameEn,ExtraConfig} = props.chartInfo.ChartInfo
+    _ExtraConfig.value = JSON.parse(ExtraConfig)
     //第一项固定为图表名称
     formGroup.value.push({
         groupName:'图表名称',
         formList:[{
-            label:'图表名称',
+            label:'图表中文名称',
             cnValue:ChartName,
             enValue:ChartNameEn,
             Value:ChartName,
@@ -59,10 +64,43 @@ function initForm(){
         }]
     })
     //截面散点图 chartType===10 与其他图格式不一样
-    if(Number(route.query.chartType)===10){
+    if(Number(props.chartType)===10){
+        const {XName,XNameEn,XUnitName,XUnitNameEn} = JSON.parse(ExtraConfig)
+        const {YName,YNameEn,YUnitName,YUnitNameEn} = JSON.parse(ExtraConfig)
+        let suppleFormList = [{
+            label:`X轴名称：${XName}`,
+            cnValue:XName,
+            enValue:XNameEn,
+            Value:XNameEn,
+            key:'XNameEn',
+            placeholder:'请输入X轴英文名称'
+        },{
+            label:`X轴单位：${XUnitName}`,
+            cnValue:XUnitName,
+            enValue:XUnitNameEn,
+            Value:XUnitNameEn,
+            key:'XUnitNameEn',
+            placeholder:'请输入X轴英文单位'
+        },{
+            label:`Y轴名称：${YName}`,
+            cnValue:YName,
+            enValue:YNameEn,
+            Value:YNameEn,
+            key:'YNameEn',
+            placeholder:'请输入Y轴英文名称'
+        },{
+            label:`Y轴单位：${YUnitName}`,
+            cnValue:YUnitName,
+            enValue:YUnitNameEn,
+            Value:YUnitNameEn,
+            key:'YUnitNameEn',
+            placeholder:'请输入Y轴英文单位'
+        }]
+        //补充第一项
+        formGroup.value[0].formList = formGroup.value[0].formList.concat(suppleFormList)
         const {SeriesList} = JSON.parse(ExtraConfig)
-        console.log('?',SeriesList)
         const seriesEdbInfoList = SeriesList[0].EdbInfoList //每一项的EdbInfoList是一样的,取第一项就行
+        
         let formSeriesList = []
         let formEdbInfoList = []
         SeriesList.forEach((serise,index)=>{
@@ -83,13 +121,16 @@ function initForm(){
                 placeholder:'请输入标签英文名称'
             })
         })
+        //第二项
         formGroup.value.push({
             groupName:'标签，系列名称',
+            SeriesListLength:formSeriesList.length,
             formList:[...formSeriesList,...formEdbInfoList]
         })
         let formEdbList = []
         for(const edb of EdbInfoList){
             formEdbList.push({
+                EdbInfoId:edb.EdbInfoId,
                 label:edb.EdbName,
                 cnValue:edb.EdbName,
                 enValue:edb.EdbNameEn,
@@ -97,6 +138,7 @@ function initForm(){
                 placeholder:'请输入英文指标名称'
             })
         }
+        //第三项
         formGroup.value.push({
             groupName:'指标名称',
             formList:formEdbList
@@ -106,9 +148,9 @@ function initForm(){
     }
     //普通图
     for(const edb of EdbInfoList){
-        console.log('?',edb)
         formGroup.value.push({
             groupName:`${edb.EdbName}`,
+            EdbInfoId:edb.EdbInfoId,
             formList:[
                 {
                     label:'指标名称',
@@ -142,18 +184,71 @@ function initForm(){
     //默认全部展开
     activeGroup.value = formGroup.value.map(i=>i.groupName)
 }
+
 const showCellEditDialog = ref(false)
 const currentCell = ref({})
 function handleCellClick(cell){
+    if(cell.noEdit) return
     currentCell.value = cell
     showCellEditDialog.value = true
 }
 function handleConfirmEditCell(){
     console.log('check',currentCell.value)
 }
-onMounted(() => {
-    getChartDetail()
-})
+function handleSave(){
+    let params = {
+        ChartInfoId:props.chartInfo.ChartInfo.ChartInfoId,
+        ChartNameEn:formGroup.value[0].formList[1].Value,
+        ChartEdbInfoList:[],
+    }
+    if(Number(props.chartType)===10){
+        //指标数据
+        let ChartEdbInfoList = []
+        formGroup.value[2].formList.forEach(item=>{
+            ChartEdbInfoList.push({
+                EdbInfoId:item.EdbInfoId,
+                EdbNameEn:item.Value.trim(),
+                UnitEn:''
+            })
+        })
+        params.ChartEdbInfoList = ChartEdbInfoList
+        //额外数据
+        _ExtraConfig.value.SeriesList.forEach((item,index)=>{
+            const {SeriesListLength} = formGroup.value[1]
+            item.NameEn = formGroup.value[1].formList[index].Value.trim()
+            item.EdbInfoList.forEach((edb,edb_index) => {
+                edb.NameEn= formGroup.value[1].formList[edb_index+SeriesListLength].Value.trim();
+            })
+        })
+        let suppleConfig = {}
+        let suppleList = formGroup.value[0].formList
+        for(let suppleIndex = 2;suppleIndex<suppleList.length;suppleIndex++){
+            const key = suppleList[suppleIndex].key
+            suppleConfig[key] = suppleList[suppleIndex].Value.trim()
+        }
+        _ExtraConfig.value = {..._ExtraConfig.value,...suppleConfig}
+        params.ExtraConfig = JSON.stringify(_ExtraConfig.value)
+    }else{
+        let ChartEdbInfoList = []
+        for(let index = 1;index<formGroup.value.length;index++){
+            ChartEdbInfoList.push({
+                EdbInfoId:formGroup.value[index].EdbInfoId,
+                EdbNameEn:formGroup.value[index].formList[2].Value.trim(),
+                UnitEn:formGroup.value[index].formEdbList[3].Value.trim()
+            })
+        }
+        params.ChartEdbInfoList = ChartEdbInfoList
+    }
+    saveChartEn(params)
+}
+const emits = defineEmits(['close',])
+async function saveChartEn(params){
+    console.log('check params',params)
+    const res  = await apiChart.chartInfoEditEn(params)
+    if(res.Ret!==200) return 
+    showToast({message:'设置英文名称成功',type:'success'})
+    emits('close')
+}
 </script>
 
 <template>
@@ -177,8 +272,8 @@ onMounted(() => {
             </van-collapse-item>
         </van-collapse>
         <div class="tool-box">
-            <div class="btn cancel">取消</div>
-            <div class="btn">保存</div>
+            <div class="btn cancel" @click="emits('close')">取消</div>
+            <div class="btn" @click="handleSave">保存</div>
         </div>
         <van-dialog 
             v-model:show="showCellEditDialog"