|
|
@@ -1,12 +1,12 @@
|
|
|
<script setup>
|
|
|
//设置图表英文名称
|
|
|
-import {ref,onMounted, initCustomFormatter} from 'vue'
|
|
|
+import {ref,onMounted} from 'vue'
|
|
|
import { useRoute } from 'vue-router'
|
|
|
import {sameOptionType} from '@/hooks/chart/config'
|
|
|
import apiChart from '@/api/chart'
|
|
|
const route=useRoute()
|
|
|
const chartInfo = ref(null)
|
|
|
-function getChartDetail(){
|
|
|
+async function getChartDetail(){
|
|
|
const params=sameOptionType.includes(Number(route.query.chartType))?{
|
|
|
ChartInfoId:Number(route.query.id),
|
|
|
DateType: '',
|
|
|
@@ -23,6 +23,7 @@ function getChartDetail(){
|
|
|
chartInfo.value = res.Data
|
|
|
initForm()
|
|
|
}
|
|
|
+const activeGroup = ref([])
|
|
|
//表格组,第一项固定为图表名称
|
|
|
const formGroup = ref([
|
|
|
/* {
|
|
|
@@ -31,11 +32,12 @@ const formGroup = ref([
|
|
|
label:'图表名称',
|
|
|
cnValue:'测试截面散点图',//中文值
|
|
|
enValue:'',//英文值
|
|
|
+ Value:'',//v-model的值,为cnValue/Value
|
|
|
+ noEdit:false,//是否允许编辑
|
|
|
}],//需要填写的项
|
|
|
} */
|
|
|
])
|
|
|
|
|
|
-const ExtraConfig = ref({})
|
|
|
function initForm(){
|
|
|
const {EdbInfoList} = chartInfo.value
|
|
|
const {ChartName,ChartNameEn,ExtraConfig} = chartInfo.value.ChartInfo
|
|
|
@@ -46,27 +48,108 @@ function initForm(){
|
|
|
label:'图表名称',
|
|
|
cnValue:ChartName,
|
|
|
enValue:ChartNameEn,
|
|
|
+ Value:ChartName,
|
|
|
+ noEdit:true
|
|
|
+ },{
|
|
|
+ label:'英文图表名称',
|
|
|
+ cnValue:ChartName,
|
|
|
+ enValue:ChartNameEn,
|
|
|
+ Value:ChartNameEn,
|
|
|
+ placeholder:'请输入英文图表名称'
|
|
|
}]
|
|
|
})
|
|
|
- //截面散点图 chartType===10 与其他图格式不一样 保存一下额外数据
|
|
|
+ //截面散点图 chartType===10 与其他图格式不一样
|
|
|
if(Number(route.query.chartType)===10){
|
|
|
- ExtraConfig.value = JSON.parse(ExtraConfig)
|
|
|
- const {SeriesList} = ExtraConfig
|
|
|
+ const {SeriesList} = JSON.parse(ExtraConfig)
|
|
|
+ console.log('?',SeriesList)
|
|
|
const seriesEdbInfoList = SeriesList[0].EdbInfoList //每一项的EdbInfoList是一样的,取第一项就行
|
|
|
let formSeriesList = []
|
|
|
let formEdbInfoList = []
|
|
|
+ SeriesList.forEach((serise,index)=>{
|
|
|
+ formSeriesList.push({
|
|
|
+ label:`系列${index+1}：${serise.Name}`,
|
|
|
+ cnValue:serise.Name,
|
|
|
+ enValue:serise.NameEn,
|
|
|
+ Value:serise.NameEn,
|
|
|
+ placeholder:'请输入系列英文名称'
|
|
|
+ })
|
|
|
+ })
|
|
|
+ seriesEdbInfoList.forEach((edb,index)=>{
|
|
|
+ formEdbInfoList.push({
|
|
|
+ label:`标签${index+1}：${edb.Name}`,
|
|
|
+ cnValue:edb.Name,
|
|
|
+ enValue:edb.NameEn,
|
|
|
+ Value:edb.NameEn,
|
|
|
+ placeholder:'请输入标签英文名称'
|
|
|
+ })
|
|
|
+ })
|
|
|
formGroup.value.push({
|
|
|
groupName:'标签，系列名称',
|
|
|
-
|
|
|
+ formList:[...formSeriesList,...formEdbInfoList]
|
|
|
+ })
|
|
|
+ let formEdbList = []
|
|
|
+ for(const edb of EdbInfoList){
|
|
|
+ formEdbList.push({
|
|
|
+ label:edb.EdbName,
|
|
|
+ cnValue:edb.EdbName,
|
|
|
+ enValue:edb.EdbNameEn,
|
|
|
+ Value:edb.EdbNameEn,
|
|
|
+ placeholder:'请输入英文指标名称'
|
|
|
+ })
|
|
|
+ }
|
|
|
+ formGroup.value.push({
|
|
|
+ groupName:'指标名称',
|
|
|
+ formList:formEdbList
|
|
|
})
|
|
|
+ activeGroup.value = formGroup.value.map(i=>i.groupName)
|
|
|
+ return
|
|
|
}
|
|
|
-
|
|
|
-
|
|
|
- for(const edb in EdbInfoList){
|
|
|
-
|
|
|
+ //普通图
|
|
|
+ for(const edb of EdbInfoList){
|
|
|
+ console.log('?',edb)
|
|
|
+ formGroup.value.push({
|
|
|
+ groupName:`${edb.EdbName}`,
|
|
|
+ formList:[
|
|
|
+ {
|
|
|
+ label:'指标名称',
|
|
|
+ cnValue:edb.EdbName,
|
|
|
+ enValue:edb.EdbNameEn,
|
|
|
+ Value:edb.EdbName,
|
|
|
+ noEdit:true
|
|
|
+ },
|
|
|
+ {
|
|
|
+ label:'单位',
|
|
|
+ cnValue:edb.Unit,
|
|
|
+ enValue:edb.UnitEn,
|
|
|
+ Value:edb.Unit,
|
|
|
+ noEdit:true
|
|
|
+ },
|
|
|
+ {
|
|
|
+ label:'英文指标名称',
|
|
|
+ cnValue:edb.EdbName,
|
|
|
+ enValue:edb.EdbNameEn,
|
|
|
+ Value:edb.EdbNameEn,
|
|
|
+ },
|
|
|
+ {
|
|
|
+ label:'英文单位',
|
|
|
+ cnValue:edb.Unit,
|
|
|
+ enValue:edb.UnitEn,
|
|
|
+ Value:edb.UnitEn
|
|
|
+ }
|
|
|
+ ]
|
|
|
+ })
|
|
|
}
|
|
|
-
|
|
|
-
|
|
|
+ //默认全部展开
|
|
|
+ activeGroup.value = formGroup.value.map(i=>i.groupName)
|
|
|
+}
|
|
|
+const showCellEditDialog = ref(false)
|
|
|
+const currentCell = ref({})
|
|
|
+function handleCellClick(cell){
|
|
|
+ currentCell.value = cell
|
|
|
+ showCellEditDialog.value = true
|
|
|
+}
|
|
|
+function handleConfirmEditCell(){
|
|
|
+ console.log('check',currentCell.value)
|
|
|
}
|
|
|
onMounted(() => {
|
|
|
getChartDetail()
|
|
|
@@ -75,12 +158,136 @@ onMounted(() => {
|
|
|
|
|
|
<template>
|
|
|
<div class="set-name-pop-wrap">
|
|
|
-
|
|
|
+ <van-collapse v-model="activeGroup">
|
|
|
+ <van-collapse-item
|
|
|
+ v-for="node in formGroup"
|
|
|
+ :key="node.groupName"
|
|
|
+ :name="node.groupName"
|
|
|
+ :title="node.groupName"
|
|
|
+ :is-link="true"
|
|
|
+ >
|
|
|
+ <van-cell
|
|
|
+ v-for="cell in node.formList"
|
|
|
+ :title="cell.label"
|
|
|
+ :label="cell.Value.length?cell.Value:cell.placeholder"
|
|
|
+ :is-link="!cell.noEdit"
|
|
|
+ @click.stop="handleCellClick(cell,node)"
|
|
|
+ >
|
|
|
+ </van-cell>
|
|
|
+ </van-collapse-item>
|
|
|
+ </van-collapse>
|
|
|
+ <div class="tool-box">
|
|
|
+ <div class="btn cancel">取消</div>
|
|
|
+ <div class="btn">保存</div>
|
|
|
+ </div>
|
|
|
+ <van-dialog
|
|
|
+ v-model:show="showCellEditDialog"
|
|
|
+ title="设置英文名称"
|
|
|
+ show-cancel-button
|
|
|
+ confirmButtonText="确定"
|
|
|
+ @confirm="handleConfirmEditCell"
|
|
|
+ >
|
|
|
+ <div class="name">{{ currentCell.cnValue}}</div>
|
|
|
+ <div class="rename-wrap">
|
|
|
+ <input type="text" :placeholder="currentCell.placeholder" v-model="currentCell.Value">
|
|
|
+ </div>
|
|
|
+ </van-dialog>
|
|
|
</div>
|
|
|
</template>
|
|
|
|
|
|
+<style lang="scss">
|
|
|
+.set-name-pop-wrap{
|
|
|
+ .van-collapse{
|
|
|
+ background-color:#F6F6F6;
|
|
|
+ }
|
|
|
+ .van-collapse-item{
|
|
|
+ padding-bottom:20px;
|
|
|
+ &:last-child{
|
|
|
+ padding-bottom: 0;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .van-badge__wrapper{
|
|
|
+ align-self: center;
|
|
|
+ }
|
|
|
+ .van-collapse-item__content{
|
|
|
+ padding:0;
|
|
|
+ }
|
|
|
+ .name{
|
|
|
+ text-align: center;
|
|
|
+ margin-top:32px;
|
|
|
+ color: #666;
|
|
|
+ }
|
|
|
+ .rename-wrap{
|
|
|
+ padding:48px;
|
|
|
+ input{
|
|
|
+ padding: 24px 32px;
|
|
|
+ border-radius: 12px;
|
|
|
+ background-color: #F6F6F6;
|
|
|
+ width: 100%;
|
|
|
+ }
|
|
|
+ .label{
|
|
|
+ color: #666666;
|
|
|
+ margin-bottom: 32px;
|
|
|
+ text-align: center;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ @media screen and (min-width:$media-width){
|
|
|
+ .van-collapse-item{
|
|
|
+ padding-bottom:10px;
|
|
|
+ }
|
|
|
+ .name{
|
|
|
+ margin-top:16px;
|
|
|
+ }
|
|
|
+ .rename-wrap{
|
|
|
+ padding:24px;
|
|
|
+ input{
|
|
|
+ padding: 12px 16px;
|
|
|
+ border-radius: 6px;
|
|
|
+ background-color: #F6F6F6;
|
|
|
+ width: 100%;
|
|
|
+ }
|
|
|
+ .label{
|
|
|
+ margin-bottom: 16px;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+}
|
|
|
+</style>
|
|
|
<style scoped lang="scss">
|
|
|
.set-name-pop-wrap{
|
|
|
-
|
|
|
+ .tool-box{
|
|
|
+ position:sticky;
|
|
|
+ z-index: 99;
|
|
|
+ bottom: 0;
|
|
|
+ left:0;
|
|
|
+ right:0;
|
|
|
+ background-color: #fff;
|
|
|
+ padding:48px;
|
|
|
+ display: flex;
|
|
|
+ gap: 24px;
|
|
|
+ .btn{
|
|
|
+ flex: 1;
|
|
|
+ border:1px solid $theme-color;
|
|
|
+ border-radius: 12px;
|
|
|
+ background-color: $theme-color;
|
|
|
+ color:#fff;
|
|
|
+ text-align: center;
|
|
|
+ padding:16px;
|
|
|
+ &.cancel{
|
|
|
+ background-color: #fff;
|
|
|
+ color: $theme-color;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ @media screen and (min-width:$media-width){
|
|
|
+ .tool-box{
|
|
|
+ padding:24px;
|
|
|
+ gap:12px;
|
|
|
+ .btn{
|
|
|
+ border-radius: 6px;
|
|
|
+ padding:8px;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
}
|
|
|
</style>
|
cxmo