eta_front/src/views/chartRelevance_manage/components/chartCard.vue

<template>
  <div class="card-item">
    <div class="top" v-if="options.series&&isHaveButton">
      <div class="title text_twoLine">
         <span>{{cardTitle}}</span>
      </div>
      <div style="flex-shrink: 0">
        <template v-if="isHaveEdbHandle">
          <el-dropdown 
            v-if="isEdbAdd" 
            split-button 
            type="primary" 
            @click="updateEdbHandle(entryType)" 
            @command="edbCommandHandle"
          >
            更新指标
            <el-dropdown-menu slot="dropdown">
              <el-dropdown-item :command="{entryType,scence:'saveOther'}">指标另存为</el-dropdown-item>
            </el-dropdown-menu>
          </el-dropdown>
          <el-button type="primary" v-else @click="saveEdb(entryType)">保存指标</el-button>
        </template>

        <el-dropdown 
          v-if="isChartAdd" 
          split-button 
          type="primary" 
          @click="updateChartHandle(entryType)" 
          @command="chartCommandHandle"
        >
          更新
          <el-dropdown-menu slot="dropdown" v-if="isHaveSaveOtherHandle">
            <el-dropdown-item :command="{entryType,scence:'saveOther'}">另存为</el-dropdown-item>
          </el-dropdown-menu>
        </el-dropdown>
        <el-button type="primary" @click="saveChart(entryType)" v-else>保存</el-button>

      </div>
    </div>
    <div class="chartWrapper">
      <div class="title text_twoLine">
        <span v-if="$route.path==='/fittingEquationChartEditor'">{{chartInfo.ChartName}}</span>
      </div>
      <Chart
        v-if="options.series"
        :options="options"
        :index="String(entryType)"
        :ref="`chartRef${entryType}`"
        height="350"
      />
    </div>
  </div>
</template>

<script>
import { chartSetMixin } from '@/views/dataEntry_manage/mixins/chartPublic';
import { dataBaseInterface } from '@/api/api.js';
import chartRelevanceApi,{statisticFeatureInterface} from '@/api/modules/chartRelevanceApi.js';
import Chart from '@/views/dataEntry_manage/components/chart';
export default {
  components: { Chart },
  mixins: [chartSetMixin],
  computed: {
    isHaveButton() {
      let routes = ['/relevancechartEditor','/statisticFeatureChartEditor']
      return routes.includes(this.$route.path)
    },
    cardTitle() {
      let title='';
      if(this.$route.path==='/relevancechartEditor') {
        title = [3,4].includes(this.entryType) ? `滚动相关性${this.entryType-2}` : this.entryType===1 ? this.chartInfo.ChartName : ''
      }else if(this.$route.path==='/statisticFeatureChartEditor') {
        title = this.chartInfo.ChartName
      }
      return title
    },
    isHaveEdbHandle() { //有指标操作的区域
      //相关性 3，4区域可保存指标 统计图 2,3区域
      return (([3,4].includes(this.entryType)&&this.$route.path==='/relevancechartEditor')
        || ([2,3].includes(this.entryType)&&this.$route.path==='/statisticFeatureChartEditor'))
    },
    isHaveSaveOtherHandle() {//有图表另存的区域
        //相关性 1,2区域有另存 统计图 4个区域都有另存
      return (([1,2].includes(this.entryType) && this.$route.path==='/relevancechartEditor')
       || (this.$route.path==='/statisticFeatureChartEditor'))
    }
  },
  watch: {
    data(nval) {
      this.setRenderChartData(nval)
    }
  },
  props: {
    entryType: { //位置 1 2 3 4
      required: true,
      type:Number
    },
    data: {
      type:Object
    },
    isChartAdd: {
      type:Boolean,
      default: false
    },
    isEdbAdd: {
      type:Boolean,
      default: false
    },
    settings: {
      type: Object
    }

  },
  data() {
    return {
      chartInfo: {}
    }
  },

  methods: {

    //设置图依赖数据
    setRenderChartData(data) {
      console.log(data)
      switch(data.ChartInfo.Source) {//1曲线 
        case 1:
          this.chartInfo = data.ChartInfo;
          this.setDefaultChart(data.EdbInfoList);
          break
        case 3: //3相关性 
          this.chartInfo = data.ChartInfo;
          this.relevanceChartData={
            ChartInfo:data.ChartInfo,
            EdbInfoList:data.EdbInfoList,
            XEdbIdValue:data.XEdbIdValue || data.XDateTimeValue,
            CorrelationChartInfo:data.CorrelationChartInfo,
            YDataList:[
              {
                Value:data.YDataList[0].Value,
                Color:'#00f',
                Name:data.ChartInfo.ChartName,
                NameEn:''
              }
            ]
          }
          this.tableData=data.EdbInfoList||[]
          this.initRelevanceChartData()
          break
        case 4: //4滚动相关性
          this.relevanceChartData = {
            ChartInfo:data.ChartInfo,
            CorrelationChartInfo: data.CorrelationChartInfo
          }
          this.chartInfo = data.ChartInfo;
          this.setDefaultChart([data.DataResp]);
          break
        case 6: //弹性系数
          this.initFittingEquation(data);
          break
        case 7: //7标准差 8百分比
        case 8: 
          this.chartInfo = data.ChartInfo;
          this.setDefaultChart([data.DataResp]);
          break
        case 9: //频率分布
          this.chartInfo = data.ChartInfo;
          this.tableData=data.EdbInfoList||[]
          this.statisticFrequencyData = data.DataResp;
          this.setStatisticFrequency();
          break
      }
    },

    /* 拟合方程曲线 */
    initFittingEquation(data) {
      const { ChartInfo,EdbInfo } = data;
      this.chartInfo = ChartInfo;
      this.setDefaultChart([EdbInfo]);
    },

    // 指标下拉菜单
    edbCommandHandle({entryType,scence}) {
      const typeMap = {
        'saveOther': this.saveEdb
      }
      typeMap[scence](entryType,scence)
    },

    //图表下拉菜单
    chartCommandHandle({entryType,scence}) {
      const typeMap = {
        'saveOther': this.saveChart
      }
      typeMap[scence](entryType,scence)
    },

    /* 保存指标入库 */
    saveEdb(type,scence='') {
      this.$emit('saveEdb',{type,chartData: this.chartInfo,scence})
    },

    /* 保存图表 另存为图表 */
    saveChart(type,scence='') {
      this.$emit('saveChart',{type,chartData: this.chartInfo,scence})
    },

    /* 设置图表封面图片 */
    setChartImage(entryType,id) {
      let otherOptions = this.chartInfo.Source===3 ? {
        chart: {
          width:340,
          height:230,
        },
        xAxis:[{
          ...this.options.xAxis,
          offset: -65,
        }]//这里记得要写成你渲染的图的配置项一样的 单独就配置一个offset无效
      } : {
        chart: {
          width:340,
          height:230,
        }
      }

      let svg = this.$refs[`chartRef${entryType}`].chart.getSVG(otherOptions);
      let form = new FormData();
      form.append('Img', svg);
      this.setImageHandle(form,id);
    },

    async setImageHandle(form,id) {
      let { Data } = await dataBaseInterface.uploadImgSvg(form);
      await dataBaseInterface.setChartImage({
        ChartInfoId: id,
        ImageUrl: Data.ResourceUrl,
      });
    },

    /* 更新图表 */
    async updateChartHandle(entryType) {
      //统计图的2 3 4对应source8 9 10但其实图表source又是7 8 9 别问为什么这样搞问后端 我也乱的一批
      const sourceMap = {
        1: 1,
        2: 8,
        3: 9,
        4: 10
      }
      let Source;
      if(this.$route.path==='/relevancechartEditor') {
        Source = entryType;
      }else if(this.$route.path==='/statisticFeatureChartEditor') {
        Source = sourceMap[entryType]
      }

      let params = {
        Source,
        IsSaveAs: false,
        ...this.settings
      }
      let res = null;
      if(this.$route.path==='/relevancechartEditor') {
        res = await chartRelevanceApi.saveChart(params)
      }else if(this.$route.path==='/statisticFeatureChartEditor') {
        res = await statisticFeatureInterface.saveChart(params);
      } 

      if(res.Ret !== 200) return

      this.$message.success('更新成功');
    },

    /* 更新指标 */
    async updateEdbHandle(entryType) {
      //统计图的2 3 4对应source8 9 10但其实图表source又是7 8 9 别问为什么这样搞问后端 我也乱的一批
      const sourceMap = {
        1: 1,
        2: 8,
        3: 9,
        4: 10
      }
      let Source;
      if(this.$route.path==='/relevancechartEditor') {
        Source = entryType;
      }else if(this.$route.path==='/statisticFeatureChartEditor') {
        Source = sourceMap[entryType]
      }
      
      let params = {
				Source,
				IsSaveAs: false,
        ...this.settings
			}
      
      let res = null;
      if(this.$route.path==='/relevancechartEditor') {
        res = await chartRelevanceApi.saveEdb(params)
      }else if(this.$route.path==='/statisticFeatureChartEditor') {
        res = await statisticFeatureInterface.saveEdb(params);
      }

			if(res.Ret !== 200) return
			this.$message.success('更新成功');
    }
  },

  mounted() {
    this.setRenderChartData(this.data);
  }
}
</script>

<style lang="scss" scoped>

</style>