Merge branch 'chart12.4'

src/api/hzyb/chart.js

@@ -111,4 +111,31 @@ export const apiMyChartRelateClassify=params=>{
  */
 export const apiMyChartClassifyAdd=params=>{
     return post('/my_chart_classify/add',params)
+}
+
+/**
+ * 获取商品价格曲线数据
+ * @param {*} ChartInfoId 
+ * @returns 
+ */
+export const apiCommonChartDetail = params => {
+    return get('/my_chart/common/detail',params)
+}
+
+/**
+ * 刷新商品价格图
+ * @param {*} ChartInfoId 
+ * @returns 
+ */
+export const apiCommonChartRefresh = params => {
+    return post('/my_chart/future_good/refreshChartInfo',params)
+}
+
+/**
+ * 保存商品价格图
+ * @param {*} ChartInfoId  LeftMin LeftMax
+ * @returns 
+ */
+export const apiCommonChartSave = params => {
+    return post('/my_chart/future_good/editChartInfo',params)
 }

src/views/hzyb/chart/Detail.vue

@@ -9,7 +9,7 @@ import {useRoute, useRouter,onBeforeRouteUpdate} from 'vue-router'
 import moment from 'moment'
 import _ from 'lodash';
 import Highcharts from 'highcharts/highstock';
-import {apiChartInfo,apiChartList,apiChartSave,apiChartBeforeAndNext,apiChartRefresh,apiMyChartDetail} from '@/api/hzyb/chart.js'
+import {apiChartInfo,apiChartList,apiChartSave,apiChartBeforeAndNext,apiChartRefresh,apiMyChartDetail,apiCommonChartDetail,apiCommonChartRefresh,apiCommonChartSave} from '@/api/hzyb/chart.js'
 const router=useRouter()
 const route=useRoute()
 document.title='图表详情'
@@ -192,6 +192,7 @@ const calendarTypeChange=(val)=>{
 
 // 获取详情
 let ChartInfoId=route.query.ChartInfoId
+let chartSource = Number(route.query.chartSource); //图表来源 1 eta图 2商品价格图
 let chartData=ref({
     series:[],
     xAxis:[],
@@ -214,6 +215,10 @@ let noAuthData=ref(null)
 const getChartInfo=async (type)=>{
     // resData.value=null
     loading.value=true
+
+    //商品价格曲线调另外的接口
+    if(chartSource===2) return getCommordityDetail();
+
     let res=null
     // 如果是从我的图库中来的
     if(route.query.source=='ybxcx_my_chart'){
@@ -274,6 +279,7 @@ const getChartInfo=async (type)=>{
             params:{
                 chartInfoId:ChartInfoId,
                 searchVal:decodeURIComponent(route.query.searchVal)||'',
+                chartSource,
                 MyChartId:route.query.MyChartId||'',
                 MyChartClassifyId:route.query.MyChartClassifyId||'',
             },
@@ -288,6 +294,35 @@ const getChartInfo=async (type)=>{
         noAuthData.value=res.data
     }
 }
+//获取商品价格曲线数据
+const getCommordityDetail = async() => {
+    const res = await apiCommonChartDetail({ChartInfoId})
+    loading.value=false
+    if(res.code===200){
+        resData.value=res.data
+
+        initCommodityData(res.data);
+
+        // 向小程序发送分享数据
+        let postData = {
+            params:{
+                chartInfoId:ChartInfoId,
+                searchVal:decodeURIComponent(route.query.searchVal)||'',
+                chartSource,
+                MyChartId:route.query.MyChartId||'',
+                MyChartClassifyId:route.query.MyChartClassifyId||'',
+            },
+            title: res.data.ChartInfo.ChartName,
+            shareImg:res.data.ChartInfo.ChartImage
+        };
+        wx.miniProgram.postMessage({ data: postData });
+
+    }else if(res.code==403){
+        noauth.value=true
+        noAuthData.value=res.data
+    }
+
+}
 getChartInfo('init')
 
 
@@ -312,11 +347,222 @@ const initBarData = (data) => {
 
     setBarChart();
 }
+/* 奇怪柱状图 和其他逻辑无公用点 依赖数据为单独的数据
+    x轴为指标名称的柱形图 以日期作为series
+*/
+const setBarChart = () => {
+    let seriesData = [];
+    const data = _.cloneDeep(barDateList.value);
+
+    //x轴
+    let xAxis = {
+        ...scatterXAxis,
+        categories: barXData.value,
+        tickWidth: 1,
+        title: {
+            text:  ``,
+            align: 'high',
+            rotation: 0,
+            x: 0,
+            offset: 20,
+        },
+    }
+
+    const { leftMin,leftMax } = axisLimitData;
+    console.log(leftMin,leftMax)
+    //y轴
+    let yAxis = {
+        ...basicYAxis,
+        title: {
+            text:  ``,
+            align: 'high',
+            rotation: 0,
+            y: -15,
+            offset: 0,
+        },
+        labels: {
+            formatter: function (ctx) {
+            let val = ctx.value;
+            return val;
+            },
+            align: 'center',
+        },
+        min: Number(leftMin),
+        max: Number(leftMax),
+        opposite: false,
+        tickWidth: 1,
+    }
+
+    //数据列
+    data.forEach(item => {
+        let serie_item = {
+            data: item.Value,
+            type: 'column',
+            yAxis: 0,
+            name: item.Name || item.Date,
+            color: item.Color,
+            chartType: 'linear',              
+            visible:true,
+        };
+        seriesData.push(serie_item)
+    })
+    
+    chartData.value = {
+        title: {
+            text:''
+        },
+        plotOptions: {
+            column:{
+            stacking: null,
+            },
+        },
+        series: seriesData,
+        yAxis: [ yAxis ],
+        xAxis
+    }
+}
+
+
+/* 商品价格图 */
+const commodityChartData = ref([]);//商品价格图的绘图数据
+const commodityXData = ref([]);//商品价格图的x轴
+const commodityEdbList = ref([]);//商品价格图的表格数据 只用于取值
+ /* 商品价格曲线获取详情赋值 */
+const initCommodityData = (data) => {
+    const { XEdbIdValue,YDataList,EdbInfoList,ChartInfo } = data;
+
+    let xData = EdbInfoList.map(_ => _.EdbAliasName);
+    commodityEdbList.value = EdbInfoList;
+    commodityChartData.value = YDataList;
+    commodityXData.value = xData;
+
+    hasLeftAxis.value=true;
+    axisLimitData.leftMin=Number(ChartInfo.LeftMin)
+    axisLimitData.leftMax=Number(ChartInfo.LeftMax)
+
+    setCommodityChart();
+}
+/* 商品价格曲线设置 绘图逻辑同奇怪柱形图*/
+const setCommodityChart = () => {
+    
+    let seriesData = [];
+    const data = _.cloneDeep(commodityChartData.value);
+
+    //x轴
+    let xAxis = {
+        ...scatterXAxis,
+        categories: commodityXData.value,
+        tickWidth: 1,
+        title: {
+            text:  ``,
+            align: 'high',
+            rotation: 0,
+            x: 0,
+            offset: 20,
+        },
+    }
+
+    const { leftMin,leftMax } = axisLimitData;
+    //y轴
+    let yAxis = {
+        ...basicYAxis,
+        title: {
+            text: commodityEdbList.value[0].Unit,
+            align: 'high',
+            rotation: 0,
+            y: -15,
+            offset: 0,
+        },
+        labels: {
+            formatter: function (ctx) {
+            let val = ctx.value;
+            return val;
+            },
+            align: 'center',
+        },
+        min: Number(leftMin),
+        max: Number(leftMax),
+        opposite: false,
+        tickWidth: 1,
+    }
+
+    //数据列
+    data.forEach(item => {
+        //处理首或/尾全是无效数据的以null填充
+        let filterData = filterInvalidData(item)
+
+        let serie_item = {
+            data: filterData,
+            type: 'spline',
+            yAxis: 0,
+            name: item.Name,
+            color: item.Color,
+            chartType: 'linear',
+            lineWidth: 3,
+            visible: true,
+            marker: {
+                enabled: false
+            }
+        };
+        seriesData.push(serie_item)
+    })
+
+    //tooltip
+    let tooltip = {
+        formatter: function() {
+            const ctx = this;
+            let str = `<strong>${ commodityEdbList.value.find(_ => _.EdbAliasName === ctx.x).EdbName }</strong>`;
+            ctx.points.forEach(item => {
+                let obj_item = data.find(_ => _.Name === item.series.name);
+                if(!obj_item.NoDataEdbList.includes(commodityEdbList.value.find(_ => _.EdbAliasName === ctx.x).EdbInfoId)) {
+                    str += `<br>${obj_item.Date}: ${item.y}`
+                }else {
+                    str += `<br>${obj_item.Date}: 无`
+                }
+            })
+            return str
+        },
+        shared: true
+    }
+    
+    chartData.value = {
+        title: {
+            text:''
+        },
+        series: seriesData,
+        yAxis: [ yAxis ],
+        xAxis,
+        tooltip
+    }
+};
+/* 处理无效数据为null */
+const filterInvalidData = (item)=> {
+    let validateArr = commodityEdbList.value.filter(_ =>!item.NoDataEdbList.includes(_.EdbInfoId));
+
+    let first_index = commodityEdbList.value.findIndex(_ => _.EdbInfoId === validateArr[0].EdbInfoId);
+    let last_index = commodityEdbList.value.findIndex(_ => _.EdbInfoId === validateArr[validateArr.length-1].EdbInfoId);
+    console.log('first_index',first_index)
+    console.log('last_index',last_index)
+
+    let arr = item.Value.map((item,index) => {
+    if(index < first_index || index > last_index) {
+        return null
+    }else {
+        return item
+    }
+    })
+
+    return arr;
+}
+
+
 
 // 路由改变 解决从搜索页返回数据不刷新问题
 onBeforeRouteUpdate((nval)=>{
     console.log('路由改变',nval);
-    ChartInfoId=nval.query.ChartInfoId
+    ChartInfoId=nval.query.ChartInfoId;
+    chartSource= Number(nval.query.chartSource);
+    chartData.value = {}
     dateType.value=null
     startDate.value=''
     endDate.value=''
@@ -1115,81 +1361,6 @@ const setScatterOptions = (dataList) => {
     }
 }
 
-/* 奇怪柱状图 和以上逻辑无公用点 依赖数据为单独的数据
-    x轴为指标名称的柱形图 以日期作为series
-*/
-const setBarChart = () => {
-    let seriesData = [];
-    const data = _.cloneDeep(barDateList.value);
-
-    //x轴
-    let xAxis = {
-        ...scatterXAxis,
-        categories: barXData.value,
-        tickWidth: 1,
-        title: {
-            text:  ``,
-            align: 'high',
-            rotation: 0,
-            x: 0,
-            offset: 20,
-        },
-    }
-
-    const { leftMin,leftMax } = axisLimitData;
-    console.log(leftMin,leftMax)
-    //y轴
-    let yAxis = {
-        ...basicYAxis,
-        title: {
-            text:  ``,
-            align: 'high',
-            rotation: 0,
-            y: -15,
-            offset: 0,
-        },
-        labels: {
-            formatter: function (ctx) {
-            let val = ctx.value;
-            return val;
-            },
-            align: 'center',
-        },
-        min: Number(leftMin),
-        max: Number(leftMax),
-        opposite: false,
-        tickWidth: 1,
-    }
-
-    //数据列
-    data.forEach(item => {
-        let serie_item = {
-            data: item.Value,
-            type: 'column',
-            yAxis: 0,
-            name: item.Name || item.Date,
-            color: item.Color,
-            chartType: 'linear',              
-            visible:true,
-        };
-        seriesData.push(serie_item)
-    })
-    
-    chartData.value = {
-        title: {
-            text:''
-        },
-        plotOptions: {
-            column:{
-            stacking: null,
-            },
-        },
-        series: seriesData,
-        yAxis: [ yAxis ],
-        xAxis
-    }
-}
-
 // 查询范围为1年内 x轴显示为月/日 否则默认年/月
 const xTimeDiffer=(minTime,maxTime)=>{
     //年限差
@@ -1230,8 +1401,8 @@ watch(
         if(!showLimit.value) return
         console.log('极值改变');
 
-        //奇怪柱状图
-        if(resData.value.ChartInfo.ChartType === 7) {
+        //奇怪柱状图 商品价格图
+        if(resData.value.ChartInfo.ChartType === 7 || resData.value.ChartInfo.Source === 2) {
             chartData.value.yAxis[0].max = nval.leftMax;
             chartData.value.yAxis[0].min = nval.leftMin;
         }else {
@@ -1290,6 +1461,7 @@ const pageChange=async (type)=>{
                     query:{
                         ...route.query,
                         ChartInfoId:searchListData.value[index-1].ChartInfoId,
+                        chartSource: searchListData.value[index-1].Source
                     }
                 })
             }
@@ -1304,6 +1476,7 @@ const pageChange=async (type)=>{
                     query:{
                         ...route.query,
                         ChartInfoId:searchListData.value[index+1].ChartInfoId,
+                        chartSource: searchListData.value[index+1].Source
                     }
                 })
             }
@@ -1338,6 +1511,7 @@ const pageChange=async (type)=>{
                     query:{
                         ...route.query,
                         ChartInfoId:chartBeforeAndNextData.value.PrevChart.ChartInfoId,
+                        chartSource: chartBeforeAndNextData.value.PrevChart.ChartInfoSource,
                         MyChartId:chartBeforeAndNextData.value.PrevChart.MyChartId,
                         MyChartClassifyId:chartBeforeAndNextData.value.PrevChart.MyChartClassifyId,
                         token:route.query.token
@@ -1362,6 +1536,7 @@ const pageChange=async (type)=>{
                     query:{
                         ...route.query,
                         ChartInfoId:chartBeforeAndNextData.value.NextChart.ChartInfoId,
+                        chartSource: chartBeforeAndNextData.value.NextChart.ChartInfoSource,
                         MyChartId:chartBeforeAndNextData.value.NextChart.MyChartId,
                         MyChartClassifyId:chartBeforeAndNextData.value.NextChart.MyChartClassifyId,
                         token:route.query.token
@@ -1382,6 +1557,24 @@ onMounted(()=>{
 
 // 保存
 const handleSaveChart=async ()=>{
+    let params = resData.value.ChartInfo.Source === 2
+        ? { 
+            ChartInfoId:resData.value.ChartInfo.ChartInfoId,
+            LeftMin: String(axisLimitData.leftMin),
+            LeftMax: String(axisLimitData.leftMax)
+          } 
+        : setChartParams()
+    
+    const res = resData.value.ChartInfo.Source === 2
+        ? await apiCommonChartSave(params)
+        : await apiChartSave(params)
+    if(res.code===200){
+        Toast.success('保存成功')
+    }
+}
+
+//设置请求参
+const setChartParams = () => {
     let params={}
     if(sameOptionType.value.includes(resData.value.ChartInfo.ChartType)){//曲线图
         let arr=chartData.value.yAxis.map(item=>{
@@ -1438,16 +1631,14 @@ const handleSaveChart=async ()=>{
             LeftMax: String(axisLimitData.leftMax),
         }
     }
-    const res=await apiChartSave(params)
-    if(res.code===200){
-        Toast.success('保存成功')
-    }
-
+    return params
 }
 
 // 刷新图表
 const handleRefreshChart=async ()=>{
-    const res=await apiChartRefresh({ChartInfoId:Number(ChartInfoId)})
+    const res = resData.value.ChartInfo.Source === 2
+        ? await apiCommonChartRefresh({ChartInfoId:Number(ChartInfoId)})
+        : await apiChartRefresh({ChartInfoId:Number(ChartInfoId)})
     if(res.code===200){
         setTimeout(() => {
             Toast.success(res.msg)
@@ -1491,6 +1682,7 @@ const code_scene=computed(()=>{
     let obj= {
         chartInfoId:ChartInfoId,
         searchVal:decodeURIComponent(route.query.searchVal)||'',
+        chartSource,
         MyChartId:route.query.MyChartId||'',
         MyChartClassifyId:route.query.MyChartClassifyId||'',
         from:'share'
@@ -1512,7 +1704,7 @@ const posterParams=computed(()=>{
     <div class="chart-detail" v-if="!loading&&!noauth">
         <div class="chart-title">{{resData.ChartInfo.ChartName}}</div>
         <div class="top-box" v-if="$route.query.source!=='ybxcx_my_chart'">
-            <div class="flex calendar-box" style="float:left" @click="handleShowDate" v-if="resData.ChartInfo.ChartType !== 7">
+            <div class="flex calendar-box" style="float:left" @click="handleShowDate" v-if="resData.ChartInfo.ChartType !== 7 &&resData.ChartInfo.Source===1">
                 <img src="../../../assets/hzyb/chart/calendar.png" alt="">
                 <span class="date">{{startDate||'开始日期'}}</span>
                 <span style="margin:0 5px">至</span>
@@ -1566,7 +1758,7 @@ const posterParams=computed(()=>{
         </div>
 
         <!-- 最新值 -->
-        <div class="latest-value-wrap" v-if="resData">
+        <div class="latest-value-wrap" v-if="resData&&resData.ChartInfo.Source===1">
             <p style="margin-bottom:10px">最新数值</p>
             <ul class="list" v-if="sameOptionType.includes(resData.ChartInfo.ChartType)">
                 <li v-for="item in chartData.series" :key="item.name">

src/views/hzyb/chart/Search.vue

@@ -26,6 +26,7 @@ const handleSelect=(item)=>{
         path:'/hzyb/chart/detail',
         query:{
             ChartInfoId:item.ChartInfoId,
+            chartSource: item.Source,
             token:route.query.token,
             searchVal:searchVal.value
         }