|
@@ -64,7 +64,7 @@ const makeTimeData=(type)=>{
|
|
|
}
|
|
|
const handleShowDate=()=>{
|
|
|
// if(columns.value.length===0){
|
|
|
- if(resData.value.ChartInfo.ChartType===1){//曲线图
|
|
|
+ if( sameOptionType.value.includes(resData.value.ChartInfo.ChartType)){//曲线图
|
|
|
columns.value=makeTimeData(1)
|
|
|
}else if(resData.value.ChartInfo.ChartType===2){//季节性图表
|
|
|
columns.value=makeTimeData(2)
|
|
@@ -75,7 +75,7 @@ const handleShowDate=()=>{
|
|
|
// 确定选择时间
|
|
|
const handleConfirmDate=(e)=>{
|
|
|
let start='',end=''
|
|
|
- if(resData.value.ChartInfo.ChartType===1){
|
|
|
+ if(sameOptionType.value.includes(resData.value.ChartInfo.ChartType)){
|
|
|
start=e[0]+'-'+e[1]
|
|
|
end=e[2]+'-'+e[3]
|
|
|
}else if(resData.value.ChartInfo.ChartType===2){
|
|
@@ -148,6 +148,14 @@ let chartData=ref({
|
|
|
})// 图表配置数据
|
|
|
let resData=ref(null)//接口详情数据
|
|
|
let loading=ref(false)
|
|
|
+const sameOptionType = ref([1,3,4,5,6]);//筛选框一样的图表类型 曲线/面积/柱状/散点/组合 常规图
|
|
|
+const chartItemStyleArr = ref([
|
|
|
+ { label: '曲线图', key: 1 ,value: 'spline'},
|
|
|
+ { label: '面积图', key: 3 ,value: 'areaspline'},
|
|
|
+ { label: '柱状图', key: 4 ,value: 'column'},
|
|
|
+ { label: '散点图', key: 5 ,value: 'scatter'}
|
|
|
+])//组合图配置时可选类型
|
|
|
+
|
|
|
// 如果type:init 则是初始化获取数据
|
|
|
const getChartInfo=async (type)=>{
|
|
|
// resData.value=null
|
|
@@ -155,8 +163,8 @@ const getChartInfo=async (type)=>{
|
|
|
const res=await apiChartInfo({
|
|
|
ChartInfoId:ChartInfoId,
|
|
|
DateType:dateType.value,
|
|
|
- StartDate:startDate.value&&resData.value.ChartInfo.ChartType===1?startDate.value:'',
|
|
|
- EndDate:endDate.value&&resData.value.ChartInfo.ChartType===1?endDate.value:'',
|
|
|
+ StartDate:startDate.value&&sameOptionType.value.includes(resData.value.ChartInfo.ChartType)?startDate.value:'',
|
|
|
+ EndDate:endDate.value&&sameOptionType.value.includes(resData.value.ChartInfo.ChartType)?endDate.value:'',
|
|
|
SeasonStartDate:startDate.value&&resData.value.ChartInfo.ChartType===2?startDate.value:'',
|
|
|
SeasonEndDate:endDate.value&&resData.value.ChartInfo.ChartType===2?endDate.value:'',
|
|
|
Calendar:calendarType.value,
|
|
@@ -169,7 +177,7 @@ const getChartInfo=async (type)=>{
|
|
|
// document.title=res.data.ChartInfo.ChartName
|
|
|
|
|
|
// 设置highchart配置 ChartType: 1曲线图 2季节图:季节图中公历和农历数据结构不同
|
|
|
- if(res.data.ChartInfo.ChartType===1){
|
|
|
+ if( res.data.ChartInfo.ChartType !==2 ){
|
|
|
if(type=='init'){
|
|
|
dateType.value=res.data.ChartInfo.DateType
|
|
|
startDate.value=res.data.ChartInfo.StartDate||''
|
|
@@ -224,7 +232,7 @@ const handleCloseLimit=()=>{//点击遮罩层关闭弹窗或者点击取消关
|
|
|
}
|
|
|
|
|
|
|
|
|
-// 设置曲线图配置
|
|
|
+// 设置常规图配置 曲线 散点 面积 柱状等
|
|
|
const setSplineOpt=(data)=>{
|
|
|
let series=[]
|
|
|
let xAxis={
|
|
@@ -251,6 +259,15 @@ 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 dynamic_title = item.EdbName;
|
|
|
let dynamic_arr = data.filter(
|
|
@@ -289,14 +306,16 @@ const setSplineOpt=(data)=>{
|
|
|
dataGrouping:{
|
|
|
enabled:false
|
|
|
},
|
|
|
- type:item.ChartStyle,
|
|
|
+ // type:item.ChartStyle,
|
|
|
+ type: resData.value.ChartInfo.ChartType ===6 ? item.ChartStyle : chartStyle,
|
|
|
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: Number(item.ChartWidth),
|
|
|
+ lineWidth: (resData.value.ChartInfo.ChartType === 1 || (resData.value.ChartInfo.ChartType === 6 && item.ChartStyle === 'spline')) ? Number(item.ChartWidth) : 0,
|
|
|
visible:true,
|
|
|
LatestDate:item.LatestDate,
|
|
|
LatestValue:item.LatestValue
|
|
@@ -801,7 +820,7 @@ onMounted(()=>{
|
|
|
// 保存
|
|
|
const handleSaveChart=async ()=>{
|
|
|
let params={}
|
|
|
- if(resData.value.ChartInfo.ChartType===1){//曲线图
|
|
|
+ if(sameOptionType.value.includes(resData.value.ChartInfo.ChartType)){//曲线图
|
|
|
let arr=chartData.value.yAxis.map(item=>{
|
|
|
return {
|
|
|
ChartColor: item.chartEdbInfo.ChartColor,
|
|
@@ -924,7 +943,7 @@ const pageTouchmove=(e)=>{
|
|
|
</div>
|
|
|
|
|
|
<!-- 日期类型 -->
|
|
|
- <div class="date-type-box" v-if="resData&&resData.ChartInfo.ChartType===1">
|
|
|
+ <div class="date-type-box" v-if="resData&&sameOptionType.includes(resData.ChartInfo.ChartType)">
|
|
|
<div
|
|
|
:class="['item',item.value==dateType?'active':'']"
|
|
|
v-for="item in dateTypeList"
|
|
@@ -936,7 +955,7 @@ const pageTouchmove=(e)=>{
|
|
|
<!-- 最新值 -->
|
|
|
<div class="latest-value-wrap" v-if="resData">
|
|
|
<p style="margin-bottom:10px">最新数值</p>
|
|
|
- <ul class="list" v-if="resData.ChartInfo.ChartType===1">
|
|
|
+ <ul class="list" v-if="sameOptionType.includes(resData.ChartInfo.ChartType)">
|
|
|
<li v-for="item in chartData.series" :key="item.name">
|
|
|
<p style="color:#333">{{moment(item.LatestDate).format('YYYY-MM-DD')}}</p>
|
|
|
<p :style="{color:item.color,flex:1}">{{item.name.length>20?item.name.replace(/<br>/g,''):item.name}}</p>
|