|
@@ -0,0 +1,530 @@
|
|
|
+<template>
|
|
|
+ <div class="sectionalCombination-option-wrap">
|
|
|
+ <div class="sort-wrap" v-if="seriesData.length>1">
|
|
|
+ <div>
|
|
|
+ <el-tooltip
|
|
|
+ effect="dark"
|
|
|
+ :content="$t('EtaChartAddPage.sort_tips')"
|
|
|
+ placement="top-start"
|
|
|
+ >
|
|
|
+ <span>
|
|
|
+ <span>{{ $t('EtaChartAddPage.label_sort_rule')}}</span>
|
|
|
+ <i class="el-icon-info"></i>
|
|
|
+ </span>
|
|
|
+ </el-tooltip>
|
|
|
+ <el-radio-group v-model="sortType" style="margin-left: 20px" @change="handleGetChartData">
|
|
|
+ <el-radio :label="0">{{$t('EtaBasePage.default_select_text')}}</el-radio>
|
|
|
+ <el-radio :label="1">{{$t('EtaChartAddPage.option_sort_up')}}</el-radio>
|
|
|
+ <el-radio :label="2">{{$t('EtaChartAddPage.option_sort_low')}}</el-radio>
|
|
|
+ </el-radio-group>
|
|
|
+ </div>
|
|
|
+ <el-select
|
|
|
+ class="select-box"
|
|
|
+ v-model="sortBasisEdb"
|
|
|
+ :placeholder="$t('EtaChartAddPage.select_base_placehold')"
|
|
|
+ @change="handleGetChartData('sortBasisEdb')"
|
|
|
+ >
|
|
|
+ <el-option
|
|
|
+ v-for="item in seriesData"
|
|
|
+ :key="item.seriesName"
|
|
|
+ :label="item.seriesName"
|
|
|
+ :value="item.seriesName"
|
|
|
+ >
|
|
|
+ </el-option>
|
|
|
+ </el-select>
|
|
|
+ </div>
|
|
|
+ <div class="date-set-wrap">
|
|
|
+ <span @click="handleShowRefrenceDate">{{$t('EtaChartAddPage.reference_date_set')}}</span>
|
|
|
+ <span @click="handleShowAxis">{{$t('EtaChartAddPage.axis_set')}}</span>
|
|
|
+ </div>
|
|
|
+ <!-- 系列数据模块 -->
|
|
|
+ <div class="series-data-wrap" v-if="seriesData.length">
|
|
|
+ <el-collapse class="series-list">
|
|
|
+ <el-collapse-item v-for="(item, index) in seriesData" :key="index">
|
|
|
+ <template slot="title">
|
|
|
+ <span class="text_oneLine" @click.stop="handleShowEditSeries(index)">{{
|
|
|
+ currentLang === "en"?item.seriesNameEn||item.seriesName:item.seriesName
|
|
|
+ }}</span>
|
|
|
+ <img class="copy-icon" src="~@/assets/img/icons/copy-active.png" alt="" @click.stop="copySeries(item)">
|
|
|
+ <i
|
|
|
+ class="el-icon-delete del-icon"
|
|
|
+ @click.stop="handleDelSeries(item,index)"
|
|
|
+ ></i>
|
|
|
+ </template>
|
|
|
+ <ul class="set-box">
|
|
|
+ <li>
|
|
|
+ <el-radio-group
|
|
|
+ v-model="item.IsAxis"
|
|
|
+ size="mini"
|
|
|
+ @input="handleChartUpdate('isAxis')"
|
|
|
+ >
|
|
|
+ <el-radio-button :label="1"
|
|
|
+ ><!-- 左轴 -->{{ $t("Chart.Detail.l_axis") }}</el-radio-button
|
|
|
+ >
|
|
|
+ <el-radio-button :label="0"
|
|
|
+ ><!-- 右轴 -->{{ $t("Chart.Detail.r_axis") }}</el-radio-button
|
|
|
+ >
|
|
|
+
|
|
|
+ <!-- 指标有右轴时才可以选右2轴 不然没有右2这个概念的意义 -->
|
|
|
+ <el-radio-button
|
|
|
+ :label="2"
|
|
|
+ :disabled="
|
|
|
+ seriesData.findIndex((_) => _.IsAxis === 0) === -1 ||
|
|
|
+ (seriesData.findIndex((_) => _.IsAxis === 0) === index &&
|
|
|
+ seriesData.filter((_) => _.IsAxis === 0).length === 1)
|
|
|
+ "
|
|
|
+ ><!-- 右2轴 -->{{
|
|
|
+ $t("Chart.Detail.rtwo_axis")
|
|
|
+ }}</el-radio-button
|
|
|
+ >
|
|
|
+ </el-radio-group>
|
|
|
+ </li>
|
|
|
+ <li>
|
|
|
+ <div style="display: flex">
|
|
|
+ <span style="margin-right: 3px"
|
|
|
+ ><!-- 生成样式 -->{{ $t("Chart.label_create_sty") }}:</span
|
|
|
+ >
|
|
|
+ <el-select
|
|
|
+ v-model="item.seriesChartType"
|
|
|
+ placeholder="请选择生成样式"
|
|
|
+ style="width: 50%"
|
|
|
+ class="edb-item-style"
|
|
|
+ @change="handleChartUpdate('chartType')"
|
|
|
+ >
|
|
|
+ <el-option
|
|
|
+ v-for="item in chartItemStyleArr"
|
|
|
+ :key="item.key"
|
|
|
+ :label="item.label"
|
|
|
+ :value="item.value"
|
|
|
+ >
|
|
|
+ </el-option>
|
|
|
+ </el-select>
|
|
|
+ </div>
|
|
|
+ </li>
|
|
|
+ <!-- 数据点展示 -->
|
|
|
+ <li>
|
|
|
+ <div style="display: flex; align-items: center" v-if="item.seriesChartType!='column'">
|
|
|
+ <span>{{$t('EtaChartAddPage.show_data_point')}}</span>
|
|
|
+ <el-tooltip
|
|
|
+ :content="$t('EtaChartAddPage.show_data_point_tips')"
|
|
|
+ placement="top"
|
|
|
+ >
|
|
|
+ <i class="el-icon-info"></i>
|
|
|
+ </el-tooltip>
|
|
|
+ <el-switch
|
|
|
+ style="margin-left: 20px"
|
|
|
+ v-model="item.showDataPoint"
|
|
|
+ @change="handleChartUpdate('dataPoint')"
|
|
|
+ >
|
|
|
+ </el-switch>
|
|
|
+ </div>
|
|
|
+ </li>
|
|
|
+ <!-- 数值展示 -->
|
|
|
+ <li>
|
|
|
+ <div style="display: flex; align-items: center">
|
|
|
+ <span>{{$t('EtaChartAddPage.show_data_value')}}</span>
|
|
|
+ <el-tooltip :content="$t('EtaChartAddPage.show_data_value_tips')" placement="top">
|
|
|
+ <i class="el-icon-info"></i>
|
|
|
+ </el-tooltip>
|
|
|
+ <el-switch
|
|
|
+ style="margin-left: 33px"
|
|
|
+ v-model="item.showDataValue"
|
|
|
+ @change="handleChartUpdate('dataValue')"
|
|
|
+ >
|
|
|
+ </el-switch>
|
|
|
+ </div>
|
|
|
+ </li>
|
|
|
+ <li>
|
|
|
+ <div style="display: flex">
|
|
|
+ <span style="margin-right: 3px"
|
|
|
+ ><!-- 线条颜色 -->{{ $t("Chart.Detail.line_color") }}:</span
|
|
|
+ >
|
|
|
+ <el-color-picker
|
|
|
+ v-model="item.ChartColor"
|
|
|
+ size="mini"
|
|
|
+ show-alpha
|
|
|
+ :predefine="predefineColors"
|
|
|
+ @change="handleChartUpdate('ChartColor')"
|
|
|
+ ></el-color-picker>
|
|
|
+ </div>
|
|
|
+
|
|
|
+ <div style="margin-top: 12px" v-if="item.seriesChartType!='column'">
|
|
|
+ <!-- 线条粗细 -->{{ $t("Chart.Detail.line_size") }}:
|
|
|
+ <el-input
|
|
|
+ style="width: 60px"
|
|
|
+ size="mini"
|
|
|
+ type="number"
|
|
|
+ :min="1"
|
|
|
+ v-model="item.ChartWidth"
|
|
|
+ @change="handleChartUpdate('ChartWidth')"
|
|
|
+ />
|
|
|
+ </div>
|
|
|
+ </li>
|
|
|
+ </ul>
|
|
|
+ </el-collapse-item>
|
|
|
+ </el-collapse>
|
|
|
+ </div>
|
|
|
+
|
|
|
+ <div class="add-cont" @click="showSeriesEdit = true">
|
|
|
+ <img
|
|
|
+ src="~@/assets/img/set_m/add_ico.png"
|
|
|
+ alt=""
|
|
|
+ style="width: 16px; height: 16px; margin-right: 10px"
|
|
|
+ />
|
|
|
+ <span>{{$t('EtaChartAddPage.add_series_btn')}}</span>
|
|
|
+ </div>
|
|
|
+
|
|
|
+ <!-- 引用日期设置 -->
|
|
|
+ <referenceDateSet :show.sync="showReferenceDate" :defaultDate="referenceDateOpts" @change="handleUpdateRefrenceDate"/>
|
|
|
+
|
|
|
+ <!-- 添加系列 -->
|
|
|
+ <seriesEdit
|
|
|
+ ref="seriesEditIns"
|
|
|
+ :show.sync="showSeriesEdit"
|
|
|
+ :chartInfo="chartInfo"
|
|
|
+ :defaultData="seriesData"
|
|
|
+ :referenceDateOpts="referenceDateOpts"
|
|
|
+ @change="handleSeriesChange"
|
|
|
+ @hideChart="handleHideChart"
|
|
|
+ />
|
|
|
+
|
|
|
+ <!-- 横纵轴设置 -->
|
|
|
+ <axisSet
|
|
|
+ :show.sync="showAxisSet"
|
|
|
+ :XDataList="XDataList"
|
|
|
+ :UnitList="UnitList"
|
|
|
+ :seriesData="seriesData"
|
|
|
+ @change="handleAxisChange"
|
|
|
+ />
|
|
|
+ </div>
|
|
|
+</template>
|
|
|
+
|
|
|
+<script>
|
|
|
+import axisSet from './axisSet.vue'
|
|
|
+import referenceDateSet from './referenceDateSet.vue'
|
|
|
+import seriesEdit from './seriesEdit.vue'
|
|
|
+import { defaultOpts } from '@/utils/defaultOptions';
|
|
|
+export default {
|
|
|
+ components: { referenceDateSet, seriesEdit, axisSet },
|
|
|
+ props:{
|
|
|
+ defaultData:{},
|
|
|
+ chartInfo: {
|
|
|
+ type: Object
|
|
|
+ },
|
|
|
+ },
|
|
|
+ computed:{
|
|
|
+ //可选样式
|
|
|
+ chartItemStyleArr(){
|
|
|
+ return [
|
|
|
+ { label: this.$i18nt.locale==='zh'?'曲线图':'Line chart(curve)', key: 1, value: 'spline' },
|
|
|
+ { label: this.$i18nt.locale==='zh'?'折线图':'Broken line(Line)', key: 2, value: 'line' },
|
|
|
+ { label: this.$i18nt.locale==='zh'?'柱状图':'Bar chart(Bar)', key: 4, value: 'column' },
|
|
|
+ ]
|
|
|
+ }
|
|
|
+ },
|
|
|
+ data() {
|
|
|
+ return {
|
|
|
+ predefineColors: defaultOpts.colors.slice(0, 2), //定义颜色蓝,红 默认颜色
|
|
|
+
|
|
|
+ seriesData: [],
|
|
|
+
|
|
|
+ sortType: 0,//排序类型,0默认,1升序,2降序
|
|
|
+ sortBasisEdb: '',//基准
|
|
|
+
|
|
|
+ referenceDateOpts:[],//引用日期选择项
|
|
|
+
|
|
|
+ showReferenceDate: false,
|
|
|
+
|
|
|
+ showSeriesEdit: false,
|
|
|
+
|
|
|
+ XDataList:[],//横轴配置
|
|
|
+ UnitList:{
|
|
|
+ LeftName:'',
|
|
|
+ RightName:'',
|
|
|
+ RightTwoName:''
|
|
|
+ },//纵轴单位配置
|
|
|
+ showAxisSet: false
|
|
|
+
|
|
|
+ }
|
|
|
+ },
|
|
|
+ mounted(){
|
|
|
+ this.initData()
|
|
|
+ },
|
|
|
+ methods: {
|
|
|
+ handleShowEditSeries(index){
|
|
|
+ this.showSeriesEdit=true
|
|
|
+ this.$nextTick(()=>{
|
|
|
+ this.$refs.seriesEditIns.activeIndex=index
|
|
|
+ })
|
|
|
+ },
|
|
|
+ initData(){
|
|
|
+ if(this.defaultData&&Object.keys(this.defaultData).length !== 0){
|
|
|
+ this.sortType=this.defaultData.SortType
|
|
|
+ this.sortBasisEdb=this.defaultData.BaseChartSeriesName
|
|
|
+ const arr=this.defaultData.SeriesList||[]
|
|
|
+ this.seriesData=arr.map(item=>{
|
|
|
+ const _arr=item.EdbInfoList||[]
|
|
|
+ return {
|
|
|
+ seriesName: item.SeriesName,
|
|
|
+ seriesNameEn: item.SeriesNameEn,
|
|
|
+ seriesChartType: item.ChartStyle,//系列图表展示类型
|
|
|
+ IsAxis: item.IsAxis,
|
|
|
+ ChartColor: item.ChartColor,
|
|
|
+ ChartWidth: item.ChartWidth,
|
|
|
+ showDataPoint: item.IsPoint?true:false,
|
|
|
+ showDataValue: item.IsNumber?true:false,
|
|
|
+ edbList: _arr.map(i=>{
|
|
|
+ return {
|
|
|
+ ChartSeriesEdbMappingId:i.ChartSeriesEdbMappingId,
|
|
|
+ ChartSeriesId:i.ChartSeriesId,
|
|
|
+ dateType: i.DateConfType,//0指标最新日期 1引用日期
|
|
|
+ edbType:i.EdbInfoType,
|
|
|
+ selectEdbData: i,
|
|
|
+ MoveForward: i.DateConf.MoveForward,//期数前移
|
|
|
+ dateTransfData: i.DateConf.DateChange,//日期变换数据
|
|
|
+ refrenceDateName: i.DateConfName,//选择的引用日期
|
|
|
+ }
|
|
|
+ })
|
|
|
+ }
|
|
|
+ })
|
|
|
+
|
|
|
+ const arr2=this.defaultData.XDataList||[]
|
|
|
+ this.XDataList=arr2.map(item=>{
|
|
|
+ return {Name:this.$i18nt.locale==='zh'?item.Name:item.NameEn}
|
|
|
+ })
|
|
|
+ this.UnitList=this.defaultData.UnitList
|
|
|
+ this.referenceDateOpts=this.defaultData.DateConfList.map(item=>{
|
|
|
+ return {
|
|
|
+ name: item.DateConfName,
|
|
|
+ dateType: item.DateType||0,//0指标最新日期 1系统日期
|
|
|
+ selectEdbData: item.EdbInfoId?{
|
|
|
+ EdbInfoId:item.EdbInfoId,
|
|
|
+ EdbName:item.EdbName,
|
|
|
+ EdbNameEn:item.EdbNameEn,
|
|
|
+ EndDate:item.EndDate,
|
|
|
+ Frequency:item.Frequency
|
|
|
+ }:null,
|
|
|
+ MoveForward: item.MoveForward||0,//期数前移
|
|
|
+ dateTransfData: item.DateChange||[],//日期变换数据
|
|
|
+ }
|
|
|
+ })
|
|
|
+
|
|
|
+
|
|
|
+ }
|
|
|
+ console.log('初始化后截面组合图数据:',this.defaultData, this.$data);
|
|
|
+ },
|
|
|
+
|
|
|
+ // 获取图表数据
|
|
|
+ handleGetChartData(type){
|
|
|
+ const data=_.cloneDeep(this.$data)
|
|
|
+ if(type==='sortBasisEdb'){
|
|
|
+ data.XDataList=[]
|
|
|
+ }
|
|
|
+ this.$emit('getData',data)
|
|
|
+ },
|
|
|
+
|
|
|
+ // 图表配置更新
|
|
|
+ handleChartUpdate(type){
|
|
|
+ const params={
|
|
|
+ type,
|
|
|
+ data:this.$data
|
|
|
+ }
|
|
|
+ this.$emit('updateChart',params)
|
|
|
+ },
|
|
|
+
|
|
|
+ //设置横纵轴回调
|
|
|
+ handleAxisChange(e){
|
|
|
+ this.XDataList=e.XDataList
|
|
|
+ this.UnitList=e.UnitList
|
|
|
+ this.handleGetChartData()
|
|
|
+ },
|
|
|
+
|
|
|
+ // 显示设置横纵轴
|
|
|
+ handleShowAxis(){
|
|
|
+ if(this.defaultData&&Object.keys(this.defaultData).length !== 0){
|
|
|
+ const arr=this.defaultData.XDataList||[]
|
|
|
+ this.XDataList=arr.map(item=>{
|
|
|
+ return {Name:this.$i18nt.locale==='zh'?item.Name:item.NameEn}
|
|
|
+ })
|
|
|
+ this.UnitList=this.defaultData.UnitList
|
|
|
+ }
|
|
|
+ this.showAxisSet=true
|
|
|
+ },
|
|
|
+
|
|
|
+ // 系列删除完了
|
|
|
+ handleHideChart(){
|
|
|
+ this.seriesData=[]
|
|
|
+ this.sortBasisEdb=''
|
|
|
+ this.XDataList=[]
|
|
|
+ this.UnitList={
|
|
|
+ LeftName:'',
|
|
|
+ RightName:'',
|
|
|
+ RightTwoName:''
|
|
|
+ }
|
|
|
+ this.$emit('hideChart')
|
|
|
+ },
|
|
|
+
|
|
|
+ // 删除系列
|
|
|
+ async handleDelSeries(item,index){
|
|
|
+ if(this.seriesData.length===1){
|
|
|
+ await this.$confirm(this.$t('EtaChartAddPage.series_del_tips'),this.$t('Dialog.warn_tit'))
|
|
|
+ }
|
|
|
+ this.seriesData.splice(index,1)
|
|
|
+ // 删完了
|
|
|
+ if(this.seriesData.length===0){
|
|
|
+ this.sortBasisEdb=''
|
|
|
+ this.XDataList=[]
|
|
|
+ this.UnitList={
|
|
|
+ LeftName:'',
|
|
|
+ RightName:'',
|
|
|
+ RightTwoName:''
|
|
|
+ }
|
|
|
+ this.$emit('hideChart')
|
|
|
+ }else{
|
|
|
+ // 删除的是基准
|
|
|
+ if(item.seriesName===this.sortBasisEdb){
|
|
|
+ this.sortBasisEdb=this.seriesData[0].seriesName
|
|
|
+ }
|
|
|
+ // 判断是否还有右轴 如果没了则要将右二轴换成右轴
|
|
|
+ const hasRightTwo=this.seriesData.some(i=>i.IsAxis===2)
|
|
|
+ const hasRight=this.seriesData.some(i=>i.IsAxis===0)
|
|
|
+ if(hasRightTwo&&!hasRight){
|
|
|
+ this.seriesData.forEach(i=>{
|
|
|
+ if(i.IsAxis===2){
|
|
|
+ i.IsAxis=0
|
|
|
+ }
|
|
|
+ })
|
|
|
+ }
|
|
|
+ this.handleGetChartData()
|
|
|
+ }
|
|
|
+ console.log('this.seriesData',this.seriesData);
|
|
|
+ },
|
|
|
+
|
|
|
+ //复制系列
|
|
|
+ copySeries(item){
|
|
|
+ this.seriesData.push(JSON.parse(JSON.stringify(item)))
|
|
|
+ this.$refs.seriesEditIns.handleCopySeries()
|
|
|
+ this.showSeriesEdit=true
|
|
|
+ },
|
|
|
+
|
|
|
+ handleSeriesChange(data) {
|
|
|
+ console.log('系列数据改变',data);
|
|
|
+ this.seriesData = JSON.parse(JSON.stringify(data))
|
|
|
+
|
|
|
+ // 设置基准为第一个系列
|
|
|
+ if(!this.sortBasisEdb){
|
|
|
+ this.sortBasisEdb=data[0].seriesName
|
|
|
+ }else{
|
|
|
+ // 如果改了系列名称并且基准名称不在系列里面则重置为第一个
|
|
|
+ if(!data.some(i=>i.seriesName==this.sortBasisEdb)){
|
|
|
+ this.sortBasisEdb=data[0].seriesName
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+
|
|
|
+ this.handleGetChartData()
|
|
|
+ },
|
|
|
+
|
|
|
+ handleUpdateRefrenceDate(e){
|
|
|
+ console.log('更新引用日期',e);
|
|
|
+ this.referenceDateOpts=e
|
|
|
+ },
|
|
|
+
|
|
|
+ handleShowRefrenceDate(){
|
|
|
+ console.log('展示引用日期',this.referenceDateOpts);
|
|
|
+ this.showReferenceDate=true
|
|
|
+ }
|
|
|
+ },
|
|
|
+}
|
|
|
+</script>
|
|
|
+
|
|
|
+<style lang="scss">
|
|
|
+.sectionalCombination-option-wrap {
|
|
|
+ .sort-wrap {
|
|
|
+ width: 90%;
|
|
|
+ .el-radio {
|
|
|
+ margin-right: 10px;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .select-box {
|
|
|
+ display: block;
|
|
|
+ margin-top: 10px;
|
|
|
+ .el-input__inner {
|
|
|
+ height: 40px !important;
|
|
|
+ line-height: 40px !important;
|
|
|
+ padding: 0 15px !important;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .date-set-wrap {
|
|
|
+ width: 90%;
|
|
|
+ margin-top: 10px;
|
|
|
+ display: flex;
|
|
|
+ justify-content: space-between;
|
|
|
+ color: #409eff;
|
|
|
+ font-size: 15px;
|
|
|
+ cursor: pointer;
|
|
|
+ }
|
|
|
+ .add-cont {
|
|
|
+ margin-top: 10px;
|
|
|
+ color: #409eff;
|
|
|
+ font-size: 16px;
|
|
|
+ cursor: pointer;
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ }
|
|
|
+ .series-data-wrap {
|
|
|
+ padding: 30px 0 20px;
|
|
|
+ .el-input__inner {
|
|
|
+ height: 27px;
|
|
|
+ line-height: 27px;
|
|
|
+ padding: 0 4px;
|
|
|
+ }
|
|
|
+ .series-list {
|
|
|
+ border: 1px solid #dcdfe6;
|
|
|
+ .del-icon {
|
|
|
+ position: absolute;
|
|
|
+ right: 10px;
|
|
|
+ font-size: 16px;
|
|
|
+ color: #f00;
|
|
|
+ cursor: pointer;
|
|
|
+ }
|
|
|
+ .copy-icon {
|
|
|
+ position: absolute;
|
|
|
+ right: 30px;
|
|
|
+ font-size: 16px;
|
|
|
+ color: #409eff;
|
|
|
+ cursor: pointer;
|
|
|
+ }
|
|
|
+ .text_oneLine {
|
|
|
+ color: #409eff;
|
|
|
+ }
|
|
|
+ .set-box {
|
|
|
+ padding: 20px 20px 0;
|
|
|
+ li {
|
|
|
+ padding-bottom: 20px;
|
|
|
+ &:last-child {
|
|
|
+ padding-bottom: 0;
|
|
|
+ margin-bottom: 0;
|
|
|
+ border-bottom: none;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .el-collapse-item__header {
|
|
|
+ background-color: #f0f2f5;
|
|
|
+ margin-bottom: 0;
|
|
|
+ border-bottom: 1px solid #dcdfe6;
|
|
|
+ padding: 0 30px;
|
|
|
+ .el-collapse-item__arrow {
|
|
|
+ position: absolute;
|
|
|
+ left: 8px;
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ .scatter-setting {
|
|
|
+ display: flex;
|
|
|
+ margin-bottom: 20px;
|
|
|
+ }
|
|
|
+ }
|
|
|
+}
|
|
|
+</style>
|