Merge branch '8.1.1'

src/views/hzyb/chart/Detail.vue

@@ -6,6 +6,7 @@ import { Popup, Toast,Picker } from 'vant';
 import {ref,onMounted, reactive, watch,computed} from 'vue'
 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} from '@/api/hzyb/chart.js'
 const router=useRouter()
@@ -14,6 +15,50 @@ document.title='图表详情'
 
 localStorage.setItem('hzyb-token',route.query.token)
 
+// 散点x轴
+const scatterXAxis = {
+    tickPosition: 'inside',
+    lineColor: '#bfbfbf',
+    tickColor: '#bfbfbf',
+    tickLength:5,
+    ordinal: false,
+    type: 'linear',
+}
+
+// 基础y轴配置
+const basicYAxis = {
+    tickWidth: 1,
+    tickLength: 5,
+    lineWidth: 1,
+    lineColor: '#bfbfbf',
+    tickColor: '#bfbfbf',
+    offset: 0,
+    visible: true,
+    gridLineWidth: 0,
+    tickPosition: 'inside',
+    endOnTick: false,
+    startOnTick: false,
+    showLastLabel: true,
+    tickPixelInterval: 50,
+}
+
+//基础x轴配置
+const basicXAxis={
+    tickPosition: 'inside',
+    lineColor: '#bfbfbf',
+    tickColor: '#bfbfbf',
+    tickLength:5,
+    type: 'datetime',
+    ordinal: false,
+    dateTimeLabelFormats: {
+        day: '%y/%m',
+        week: '%y/%m',
+        month: '%y/%m',
+        year: '%y/%m',
+    },
+    xDateFormat:'%Y-%m-%d'
+}
+
 
 // 获取用户信息
 import {apiUserInfo} from '@/api/hzyb/user'
@@ -188,7 +233,15 @@ const getChartInfo=async (type)=>{
                 endDate.value=res.data.ChartInfo.EndDate||''
                 calendarType.value=res.data.ChartInfo.Calendar||'公历' 
             }
-            setSplineOpt(res.data.EdbInfoList)
+            const chartSetMap = {
+                1: setSplineOpt,
+                3: setStackOrCombinChart,
+                4: setStackOrCombinChart,
+                5: setScatterOptions,
+                6: setStackOrCombinChart
+            };
+
+            chartSetMap[res.data.ChartInfo.ChartType](res.data.EdbInfoList)
         }else{
             if(type=='init'){
                 dateType.value=res.data.ChartInfo.DateType
@@ -254,25 +307,11 @@ const handleCloseLimit=()=>{//点击遮罩层关闭弹窗或者点击取消关
 }
 
 
-// 设置常规图配置 曲线 散点 面积 柱状等
+// 设置常规图配置 曲线
 const setSplineOpt=(data)=>{
     let series=[]
-    let xAxis={
-        tickPosition: 'inside',
-		lineColor: '#bfbfbf',
-    	tickColor: '#bfbfbf',
-		tickLength:5,
-		type: 'datetime',
-		ordinal: false,
-		dateTimeLabelFormats: {
-			day: '%y/%m',
-			week: '%y/%m',
-			month: '%y/%m',
-			year: '%y/%m',
-		},
-        xDateFormat:'%Y-%m-%d'
-    }
     let yAxis=[]
+    let xAxis = {}
 
     let temYLeftArr=[]
     let temYRightArr=[]
@@ -281,63 +320,28 @@ const setSplineOpt=(data)=>{
 
     let minAndMaxTimeTemArr=[]//存放所有指标的最大最小时间
 
-    /* 支持图的类型 */
-    const chartTypeMap = {
-        1: 'spline',
-        3: 'areaspline',
-        4: 'column',
-        5: 'scatter',
-    };
-    let chartStyle = chartTypeMap[resData.value.ChartInfo.ChartType];
-
     data.forEach((item,index)=>{
+
+         //轴位置值相同的下标
+        let sameSideIndex = data.findIndex(i => i.IsAxis === item.IsAxis);
+
         let dynamic_title = item.EdbName;
         let dynamic_arr = data.filter(
           (item) => dynamic_title === item.EdbName
         );
-        // 拼接配置  IsAxis左轴1 右轴0 IsOrder正序false 逆序true EdbInfoType是否是领先指标
-        let dynamic_tag =item.IsAxis && item.IsOrder && item.EdbInfoType
-            ? '(逆序)'
-            : !item.IsAxis && item.IsOrder && item.EdbInfoType
-            ? '(右轴，逆序)'
-            : !item.IsAxis && !item.IsOrder && item.EdbInfoType
-            ? '(右轴)'
-            : !item.IsAxis && !item.IsOrder && !item.EdbInfoType
-            ? `(右轴，领先${item.LeadValue}${item.LeadUnit})`
-            : !item.IsAxis && item.IsOrder && !item.EdbInfoType
-            ? `(右轴，逆序，领先${item.LeadValue}${item.LeadUnit})`
-            : item.IsAxis && item.IsOrder && !item.EdbInfoType
-            ? `(逆序，领先${item.LeadValue}${item.LeadUnit})`
-            : item.IsAxis && !item.IsOrder && !item.EdbInfoType
-            ? `(领先${item.LeadValue}${item.LeadUnit})`
-            : '';
-        let temName=dynamic_arr.length > 1
-                    ? `${item.EdbName}(${item.SourceName})${dynamic_tag}`
-                    : `${item.EdbName}${dynamic_tag}`
-                    console.log(temName.length/20);
-        if(temName.length>20){
-            let temArr=[]
-            for(let i=0;i<temName.length/20;i++){
-                temArr.push(temName.slice(i*20,i*20+20))
-            }
-            // console.log(temArr);
-            temName=temArr.join('<br>')
-        }
+        //处理数据列name
+        let temName= setDyncmicSerieName(item,dynamic_arr)  
+
         let seriesItemObj={
             data:[],
             dataGrouping:{
                 enabled:false
             },
-            type: resData.value.ChartInfo.ChartType ===6 ? item.ChartStyle : chartStyle,
+            type: 'spline',
             yAxis:index,
-            // name:dynamic_arr.length > 1
-            //   ? `${item.EdbName}(${item.SourceName})${dynamic_tag}`
-            //   : `${item.EdbName}${dynamic_tag}`,//拼接标题 判断相同指标名称拼接来源
             name:temName,
             color: item.ChartColor,
-            // lineWidth: Number(item.ChartWidth),
-            lineWidth: (resData.value.ChartInfo.ChartType === 1 || (resData.value.ChartInfo.ChartType === 6 && item.ChartStyle === 'spline')) ? Number(item.ChartWidth) : 0,
-            fillColor: (resData.value.ChartInfo.ChartType === 3 || (resData.value.ChartInfo.ChartType === 6 && item.ChartStyle === 'areaspline')) ? item.ChartColor : undefined,
+            lineWidth: Number(item.ChartWidth),
             visible:true,
             LatestDate:item.LatestDate,
             LatestValue:item.LatestValue
@@ -357,31 +361,27 @@ const setSplineOpt=(data)=>{
         }
 
         let yItem={
+            ...basicYAxis,
             IsAxis:item.IsAxis,
             labels: {
                 formatter: function (ctx) {
-                    return ctx.value;
+                    return sameSideIndex !== index ? '' : ctx.value;
                 },
                 align: 'center',
                 y:5,
             },
+            tickWidth: sameSideIndex !== index ? 0 : 1,
+            // title: {
+            //     text:  `单位:${item.Unit}`,
+            //     align: 'high',
+            //     rotation: 0,
+            //     y: 0,
+            //     offset: -60,
+            // },
             opposite: item.IsAxis === 0,
             reversed: item.IsOrder,
             min: item.MinData,
             max: item.MaxData,
-            tickWidth: 1,
-            tickLength: 5,
-            lineWidth: 1,
-            lineColor: '#bfbfbf',
-            tickColor: '#bfbfbf',
-            offset: 0,
-            visible: true,
-            gridLineWidth: 0,
-            tickPosition: 'inside',
-            endOnTick: false,
-            startOnTick: false,
-            showLastLabel: true,
-            tickPixelInterval: 50,
             chartEdbInfo:item//指标数据用于在保存时读取指标数据
         }
         yAxis.push(yItem)
@@ -406,7 +406,7 @@ const setSplineOpt=(data)=>{
     const bool_time = xTimeDiffer(minTime,maxTime)
     if(bool_time){
         xAxis={
-            ...xAxis,
+            ...basicXAxis,
             labels: {
               formatter: (ctx)=> {
                 return Highcharts.dateFormat('%m/%d', ctx.value)
@@ -419,7 +419,7 @@ const setSplineOpt=(data)=>{
     // let minYear=new Date(minTime).getFullYear()
 
     xAxis={
-        ...xAxis,
+        ...basicXAxis,
         tickInterval:((maxTime-minTime)/6)/(24*3600*1000)>30?(maxTime-minTime)/6:24*3600*1000*30,
     }
     
@@ -456,6 +456,206 @@ const setSplineOpt=(data)=>{
 
 }
 
+/* 堆叠图/组合图设置  
+    本来和曲线图逻辑基本一致兼容下即可 为了以后便于维护和阅读还是拆开写吧
+*/
+const setStackOrCombinChart = data => {
+    //图表类型
+    const chartTypeMap = {
+        3: 'areaspline',
+        4: 'column',
+        6: ''
+    };
+    let chartStyle = chartTypeMap[resData.value.ChartInfo.ChartType];
+
+    let series=[]
+    let yAxis=[]
+    let xAxis = {}
+
+    let temYLeftArr=[]
+    let temYRightArr=[]
+    let temYLeftIndex,temYRightIndex;
+
+    let minAndMaxTimeTemArr=[]//存放所有指标的最大最小时间
+
+
+    data.forEach((item,index)=>{
+
+        //轴位置值相同的下标
+        let sameSideIndex = data.findIndex(i => i.IsAxis === item.IsAxis);
+
+        //堆叠图的yAxis必须一致 数据列所对应的y轴
+        let serie_yIndex = index;
+        if([3,4].includes(resData.value.ChartInfo.ChartType)) {
+            // 类型为堆叠图时公用第一个指标y轴 
+            serie_yIndex =  0;
+        } else if(resData.value.ChartInfo.ChartType ===6 && ['areaspline','column'].includes(item.ChartStyle)) {
+            // 组合图找第一个堆叠柱状或面积的作为公用
+            serie_yIndex = data.findIndex(i => i.ChartStyle === item.ChartStyle);
+        }
+        //数据对应的y轴是公用轴则配置也共享
+        item.IsAxis = serie_yIndex === index ? item.IsAxis : data[serie_yIndex].IsAxis;
+        item.IsOrder = serie_yIndex === index ? item.IsOrder : data[serie_yIndex].IsOrder;
+
+        temYLeftIndex = [3,4].includes(resData.value.ChartInfo.ChartType) 
+            ? (data[serie_yIndex].IsAxis ? serie_yIndex : -1)
+            : data.findIndex((item) => item.IsAxis);
+        temYRightIndex = [3,4].includes(resData.value.ChartInfo.ChartType) 
+            ? (data[serie_yIndex].IsAxis ? -1 : serie_yIndex)
+            : data.findIndex((item) => !item.IsAxis);
+
+        let dynamic_title = item.EdbName;
+        let dynamic_arr = data.filter(
+          (item) => dynamic_title === item.EdbName
+        );
+        //处理数据列name
+        let temName= setDyncmicSerieName(item,dynamic_arr)  
+
+        let seriesItemObj={
+            data:[],
+            dataGrouping:{
+                enabled:false
+            },
+            type: chartStyle || item.ChartStyle,
+            yAxis:serie_yIndex,
+            name:temName,
+            color: item.ChartColor,
+            lineWidth: (resData.value.ChartInfo.ChartType === 6 && item.ChartStyle === 'spline') ? Number(item.ChartWidth) : 0,
+            fillColor: (resData.value.ChartInfo.ChartType === 3 || (resData.value.ChartInfo.ChartType === 6 && item.ChartStyle === 'areaspline')) ? item.ChartColor : undefined,
+            visible:true,
+            LatestDate:item.LatestDate,
+            LatestValue:item.LatestValue
+        }
+        item.DataList = item.DataList || [];
+        for (let i of item.DataList) {
+          seriesItemObj.data.push([i.DataTimestamp, i.Value]);
+        }
+        series.push(seriesItemObj)
+        
+
+        // 设置y轴
+        if(item.IsAxis){
+            temYLeftArr.push(item)
+        }else{
+            temYRightArr.push(item)
+        }
+
+        let yItem={
+            ...basicYAxis,
+            IsAxis:item.IsAxis,
+            labels: {
+                formatter: function (ctx) {
+                    return sameSideIndex !== index ? '' : ctx.value;
+                },
+                align: 'center',
+                y:5,
+            },
+            // title: {
+            //     text:  `单位:${item.Unit}`,
+            //     align: 'high',
+            //     rotation: 0,
+            //     y: 0,
+            //     offset: -60,
+            // },
+            opposite: item.IsAxis === 0,
+            reversed: item.IsOrder,
+            min: item.MinData,
+            max: item.MaxData,
+            tickWidth: sameSideIndex !== index ? 0 : 1,
+            visible: serie_yIndex === index ? true : false,
+            chartEdbInfo:item//指标数据用于在保存时读取指标数据
+        }
+        yAxis.push(yItem)
+        
+        if(item.DataList.length>0){
+            minAndMaxTimeTemArr.push(item.DataList[0].DataTimestamp)
+            minAndMaxTimeTemArr.push(item.DataList[item.DataList.length-1].DataTimestamp)
+        }
+        
+    })
+
+    // 设置值
+    chartData.value.series=series
+    
+    
+    // 设置x轴
+    // 找出所有指标的最大和最小时间 分成6段
+    let minTime=Math.min.apply(null,minAndMaxTimeTemArr)
+    let maxTime=Math.max.apply(null,minAndMaxTimeTemArr)
+
+
+    const bool_time = xTimeDiffer(minTime,maxTime)
+    if(bool_time){
+        xAxis={
+            ...basicXAxis,
+            labels: {
+              formatter: (ctx)=> {
+                return Highcharts.dateFormat('%m/%d', ctx.value)
+              }
+            }
+        }
+    }
+
+    xAxis={
+        ...basicXAxis,
+        tickInterval:((maxTime-minTime)/6)/(24*3600*1000)>30?(maxTime-minTime)/6:24*3600*1000*30,
+    }
+    
+    chartData.value.xAxis=[xAxis]
+    
+
+    yAxis.forEach(item=>{
+        if(item.IsAxis){//左轴
+            hasLeftAxis.value=true
+            item.min=data[temYLeftIndex].MinData
+            item.max=data[temYLeftIndex].MaxData
+            axisLimitData.leftMin=data[temYLeftIndex].MinData
+            axisLimitData.leftMax=data[temYLeftIndex].MaxData
+        }else{
+            hasRightAxis.value=true
+            item.min=data[temYRightIndex].MinData
+            item.max=data[temYRightIndex].MaxData
+            axisLimitData.rightMin=data[temYRightIndex].MinData
+            axisLimitData.rightMax=data[temYRightIndex].MaxData
+        }
+    })
+    chartData.value.yAxis=yAxis
+    chartData.value.rangeSelector={ enabled: false}
+}
+
+/* 拼接数据列动态name */
+const setDyncmicSerieName = (item,dynamic_arr) => {
+    // 拼接配置  IsAxis左轴1 右轴0 IsOrder正序false 逆序true EdbInfoType是否是领先指标
+    let dynamic_tag =item.IsAxis && item.IsOrder && item.EdbInfoType
+        ? '(逆序)'
+        : !item.IsAxis && item.IsOrder && item.EdbInfoType
+        ? '(右轴，逆序)'
+        : !item.IsAxis && !item.IsOrder && item.EdbInfoType
+        ? '(右轴)'
+        : !item.IsAxis && !item.IsOrder && !item.EdbInfoType
+        ? `(右轴，领先${item.LeadValue}${item.LeadUnit})`
+        : !item.IsAxis && item.IsOrder && !item.EdbInfoType
+        ? `(右轴，逆序，领先${item.LeadValue}${item.LeadUnit})`
+        : item.IsAxis && item.IsOrder && !item.EdbInfoType
+        ? `(逆序，领先${item.LeadValue}${item.LeadUnit})`
+        : item.IsAxis && !item.IsOrder && !item.EdbInfoType
+        ? `(领先${item.LeadValue}${item.LeadUnit})`
+        : '';
+    let temName = dynamic_arr.length > 1
+                ? `${item.EdbName}(${item.SourceName})${dynamic_tag}`
+                : `${item.EdbName}${dynamic_tag}`
+    if(temName.length>20){
+        let temArr=[]
+        for(let i=0;i<temName.length/20;i++){
+            temArr.push(temName.slice(i*20,i*20+20))
+        }
+        // console.log(temArr);
+        temName=temArr.join('<br>')
+    }
+
+    return temName
+}
+
 //设置季节图配置
 const setSeasonOpt=(data)=>{
     hasLeftAxis.value=true
@@ -494,6 +694,13 @@ const setSeasonOpt=(data)=>{
                     align: 'center',
                     y:5
                 },
+                // title: {
+                //     text:  `单位:${data.Unit}`,
+                //     align: 'high',
+                //     rotation: 0,
+                //     y: 5,
+                //     offset: -60,
+                // },
                 max: Number(data.MaxData),
                 min: Number(data.MinData),
                 lineWidth: 1,
@@ -532,7 +739,7 @@ const setSeasonOpt=(data)=>{
                 type:data.ChartStyle,
                 yAxis:index,
                 name:item.Year,
-                color:colorsArr.slice(-filterArr.length)[index],                
+                color:colorsArr.slice(-filterArr.length)[index],         
                 visible:true
             }
             let temarr=item.Items||[]
@@ -550,6 +757,13 @@ const setSeasonOpt=(data)=>{
                     align: 'center',
                     y:5
                 },
+                // title: {
+                //     text:  `单位:${data.Unit}`,
+                //     align: 'high',
+                //     rotation: 0,
+                //     y: 5,
+                //     offset: -60,
+                // },
                 max: Number(data.MaxData),
                 min: Number(data.MinData),
                 lineWidth: 1,
@@ -659,6 +873,114 @@ const setSeasonOpt=(data)=>{
 
 }
 
+/* 散点图 第一个指标值为x轴 第二个指标为y轴*/
+const setScatterOptions = (dataList) => {
+    const { ChartInfo } = resData.value;
+
+    // 取2个指标中日期相同的数据
+    const real_data = [];
+    let tmpData_date = {};//用来取点对应的日期
+    let data1 =  _.cloneDeep(dataList)[0].DataList || [];
+    let data2 =  _.cloneDeep(dataList)[1].DataList || [];
+    data1.forEach((_item) => {
+        data2.forEach((_item2) => {
+            if(_item.DataTimestamp === _item2.DataTimestamp) {
+                //日期
+                let itemIndex =_item.Value + "_" +_item2.Value
+                if(tmpData_date[itemIndex]) {
+                    tmpData_date[itemIndex].push( moment(_item.DataTimestamp).format('YYYY/MM/DD'))
+                } else {
+                    tmpData_date[itemIndex] = [moment(_item.DataTimestamp).format('YYYY/MM/DD')]
+                }
+            
+                //值
+                real_data.push({
+                    x: _item.Value,
+                    y: _item2.Value
+                })
+            }
+        })
+    })
+    real_data.sort((x,y) => x-y);
+
+    //悬浮窗 拼接日期 原始指标名称
+    let tooltip = {
+        formatter: function() {
+            return `<strong>${ tmpData_date[this.x+'_'+this.y].length > 4 ? tmpData_date[this.x+'_'+this.y].slice(0,4).join()+'...' : tmpData_date[this.x+'_'+this.y].join() }</strong><br>
+            ${dataList[0].EdbName}: <span style="font-weight: 600">	${this.x}</span><br>
+            ${dataList[1].EdbName}: <span style="font-weight: 600">	${this.y}</span>
+            `
+        }
+    }
+
+    const { IsOrder,ChartColor } = dataList[0];
+    //y轴
+    let yAxis = {
+        // title: {
+        //     text:  `单位:${dataList[1].Unit}`,
+        //     align: 'high',
+        //     rotation: 0,
+        //     y: 0,
+        //     offset: -60,
+        // },
+        labels: {
+            formatter: function (ctx) {
+            return ctx.value;
+            },
+            align: 'center',
+        },
+        opposite: false,
+        reversed: IsOrder,
+        min: Number(dataList[0].MinData),
+        max: Number(dataList[0].MaxData),
+        tickWidth: 1,
+        tickLength: 5,
+        lineWidth: 1,
+        lineColor: '#bfbfbf',
+        tickColor: '#bfbfbf',
+        offset: 0,
+        visible: true,
+        gridLineWidth: 0,
+        tickPosition: 'inside',
+        endOnTick: false,
+        startOnTick: false,
+        showLastLabel: true,
+        tickPixelInterval: 50
+    }
+
+    //数据列
+    let series = {
+        data: [],
+        type: 'scatter',
+        name: `${ChartInfo.ChartName}${IsOrder ? '(逆序)' : ''}`,
+        color: ChartColor,
+        visible:true,
+        lineWidth: 0
+    }
+    real_data.forEach(_ => {
+        series.data.push([_.x,_.y])
+    })
+    
+    chartData.value = {
+        title: {
+            text:''
+        },
+        series: [ series ],
+        yAxis,
+        xAxis: {
+            ...scatterXAxis,
+            // title: {
+            //     text:  `单位:${dataList[0].Unit}`,
+            //     align: 'high',
+            //     rotation: 0,
+            //     x: 0,
+            //     offset: 20,
+            // },
+        },
+        tooltip
+    }
+}
+
 // 查询范围为1年内 x轴显示为月/日 否则默认年/月
 const xTimeDiffer=(minTime,maxTime)=>{
     //年限差
@@ -1089,6 +1411,9 @@ const posterParams=computed(()=>{
 </template>
 
 <style lang="scss" scoped>
+::v-deep(.highcharts-axis-title) {
+    font-size: 20px;
+}
 .chart-detail{
     .flex{
         display: flex;

src/views/hzyb/chart/component/chartBox.vue

@@ -25,6 +25,7 @@ const chartDefaultOpts={
 		},
 		areaspline: {
 			lineWidth: 1,
+			stacking: 'normal',
 			marker: {
 					enabled: false,
 			},
@@ -32,6 +33,7 @@ const chartDefaultOpts={
 		},
 		column:{
 			pointPadding: 0.05,
+			stacking: 'normal',
 		},
 		scatter: {
 			turboThreshold: 0,
@@ -50,10 +52,6 @@ const chartDefaultOpts={
 						enabled: true
 					}
 				}
-			},
-			tooltip: {
-				headerFormat: '<span style="font-size: 10px">{point.key}</span><br>',
-				pointFormat: '<span style="color:{point.color}">●</span> {series.name}: <span style="font-weight: 600">	{point.y}</span>',
 			}
 		}
 	},
@@ -114,7 +112,10 @@ let chartIns=ref(null)// 图表实例
 onMounted(() => {
 	let obj={...chartDefaultOpts,...props.options}
 	console.log(obj);
-    chartIns.value=Highcharts.stockChart("chart-box",obj)
+	
+		//stock不支持线形图只支持时间图 画散点图用原始chart
+	let is_scatter = props.options.series ? props.options.series.every(_ => _.type === 'scatter') : false ;
+	chartIns.value = is_scatter ? Highcharts.chart("chart-box",obj) : Highcharts.stockChart("chart-box",obj);
 })
 
 // 点击顶部label
@@ -138,7 +139,10 @@ watch(
 		console.log(obj);
 		// update: function (options, redraw, oneToOne, animation)
 		// chartIns.value.update(obj,true)
-		chartIns.value=Highcharts.stockChart("chart-box",obj)
+		//stock不支持线形图只支持时间图 画散点图用原始chart
+		let is_scatter = props.options.series ? props.options.series.every(_ => _.type === 'scatter') : false ;
+		chartIns.value = is_scatter ? Highcharts.chart("chart-box",obj) : Highcharts.stockChart("chart-box",obj);
+		
 	},
 	{
 		deep:true

src/views/ssbg/roadshow/myCalendar.vue

@@ -111,7 +111,7 @@ const switchTabHandle = (key) => {
       <ul class="action-ul">
         <li
           v-for="item in actionsList"
-          key="item.key"
+          :key="item.key"
           @click="dealActionHandler(item.key)"
           v-show="item.show"
         >