|
@@ -1,7 +1,9 @@
|
|
<script setup>
|
|
<script setup>
|
|
import chartBox from './component/chartBox.vue'
|
|
import chartBox from './component/chartBox.vue'
|
|
|
|
+import noAuth from './component/noAuth.vue'
|
|
|
|
+import sharePoster from '../components/SharePoster.vue'
|
|
import { Popup, Toast,Picker } from 'vant';
|
|
import { Popup, Toast,Picker } from 'vant';
|
|
-import {ref,onMounted, reactive, watch} from 'vue'
|
|
|
|
|
|
+import {ref,onMounted, reactive, watch,computed} from 'vue'
|
|
import {useRoute, useRouter,onBeforeRouteUpdate} from 'vue-router'
|
|
import {useRoute, useRouter,onBeforeRouteUpdate} from 'vue-router'
|
|
import moment from 'moment'
|
|
import moment from 'moment'
|
|
import Highcharts from 'highcharts/highstock';
|
|
import Highcharts from 'highcharts/highstock';
|
|
@@ -64,7 +66,7 @@ const makeTimeData=(type)=>{
|
|
}
|
|
}
|
|
const handleShowDate=()=>{
|
|
const handleShowDate=()=>{
|
|
// if(columns.value.length===0){
|
|
// if(columns.value.length===0){
|
|
- if(resData.value.ChartInfo.ChartType===1){//曲线图
|
|
|
|
|
|
+ if( sameOptionType.value.includes(resData.value.ChartInfo.ChartType)){//曲线图
|
|
columns.value=makeTimeData(1)
|
|
columns.value=makeTimeData(1)
|
|
}else if(resData.value.ChartInfo.ChartType===2){//季节性图表
|
|
}else if(resData.value.ChartInfo.ChartType===2){//季节性图表
|
|
columns.value=makeTimeData(2)
|
|
columns.value=makeTimeData(2)
|
|
@@ -75,7 +77,7 @@ const handleShowDate=()=>{
|
|
// 确定选择时间
|
|
// 确定选择时间
|
|
const handleConfirmDate=(e)=>{
|
|
const handleConfirmDate=(e)=>{
|
|
let start='',end=''
|
|
let start='',end=''
|
|
- if(resData.value.ChartInfo.ChartType===1){
|
|
|
|
|
|
+ if(sameOptionType.value.includes(resData.value.ChartInfo.ChartType)){
|
|
start=e[0]+'-'+e[1]
|
|
start=e[0]+'-'+e[1]
|
|
end=e[2]+'-'+e[3]
|
|
end=e[2]+'-'+e[3]
|
|
}else if(resData.value.ChartInfo.ChartType===2){
|
|
}else if(resData.value.ChartInfo.ChartType===2){
|
|
@@ -148,6 +150,16 @@ let chartData=ref({
|
|
})// 图表配置数据
|
|
})// 图表配置数据
|
|
let resData=ref(null)//接口详情数据
|
|
let resData=ref(null)//接口详情数据
|
|
let loading=ref(false)
|
|
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'}
|
|
|
|
+])//组合图配置时可选类型
|
|
|
|
+
|
|
|
|
+let noauth=ref(false)
|
|
|
|
+let noAuthData=ref(null)
|
|
// 如果type:init 则是初始化获取数据
|
|
// 如果type:init 则是初始化获取数据
|
|
const getChartInfo=async (type)=>{
|
|
const getChartInfo=async (type)=>{
|
|
// resData.value=null
|
|
// resData.value=null
|
|
@@ -155,8 +167,8 @@ const getChartInfo=async (type)=>{
|
|
const res=await apiChartInfo({
|
|
const res=await apiChartInfo({
|
|
ChartInfoId:ChartInfoId,
|
|
ChartInfoId:ChartInfoId,
|
|
DateType:dateType.value,
|
|
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:'',
|
|
SeasonStartDate:startDate.value&&resData.value.ChartInfo.ChartType===2?startDate.value:'',
|
|
SeasonEndDate:endDate.value&&resData.value.ChartInfo.ChartType===2?endDate.value:'',
|
|
SeasonEndDate:endDate.value&&resData.value.ChartInfo.ChartType===2?endDate.value:'',
|
|
Calendar:calendarType.value,
|
|
Calendar:calendarType.value,
|
|
@@ -169,7 +181,7 @@ const getChartInfo=async (type)=>{
|
|
// document.title=res.data.ChartInfo.ChartName
|
|
// document.title=res.data.ChartInfo.ChartName
|
|
|
|
|
|
// 设置highchart配置 ChartType: 1曲线图 2季节图:季节图中公历和农历数据结构不同
|
|
// 设置highchart配置 ChartType: 1曲线图 2季节图:季节图中公历和农历数据结构不同
|
|
- if(res.data.ChartInfo.ChartType===1){
|
|
|
|
|
|
+ if( res.data.ChartInfo.ChartType !==2 ){
|
|
if(type=='init'){
|
|
if(type=='init'){
|
|
dateType.value=res.data.ChartInfo.DateType
|
|
dateType.value=res.data.ChartInfo.DateType
|
|
startDate.value=res.data.ChartInfo.StartDate||''
|
|
startDate.value=res.data.ChartInfo.StartDate||''
|
|
@@ -187,6 +199,24 @@ const getChartInfo=async (type)=>{
|
|
|
|
|
|
setSeasonOpt(res.data.EdbInfoList[0])
|
|
setSeasonOpt(res.data.EdbInfoList[0])
|
|
}
|
|
}
|
|
|
|
+
|
|
|
|
+ // 向小程序发送分享数据
|
|
|
|
+ let postData = {
|
|
|
|
+ params:{
|
|
|
|
+ chartInfoId:ChartInfoId,
|
|
|
|
+ searchVal:decodeURIComponent(route.query.searchVal)||'',
|
|
|
|
+ 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')
|
|
getChartInfo('init')
|
|
@@ -224,7 +254,7 @@ const handleCloseLimit=()=>{//点击遮罩层关闭弹窗或者点击取消关
|
|
}
|
|
}
|
|
|
|
|
|
|
|
|
|
-// 设置曲线图配置
|
|
|
|
|
|
+// 设置常规图配置 曲线 散点 面积 柱状等
|
|
const setSplineOpt=(data)=>{
|
|
const setSplineOpt=(data)=>{
|
|
let series=[]
|
|
let series=[]
|
|
let xAxis={
|
|
let xAxis={
|
|
@@ -251,6 +281,15 @@ const setSplineOpt=(data)=>{
|
|
|
|
|
|
let minAndMaxTimeTemArr=[]//存放所有指标的最大最小时间
|
|
let minAndMaxTimeTemArr=[]//存放所有指标的最大最小时间
|
|
|
|
|
|
|
|
+ /* 支持图的类型 */
|
|
|
|
+ const chartTypeMap = {
|
|
|
|
+ 1: 'spline',
|
|
|
|
+ 3: 'areaspline',
|
|
|
|
+ 4: 'column',
|
|
|
|
+ 5: 'scatter',
|
|
|
|
+ };
|
|
|
|
+ let chartStyle = chartTypeMap[resData.value.ChartInfo.ChartType];
|
|
|
|
+
|
|
data.forEach((item,index)=>{
|
|
data.forEach((item,index)=>{
|
|
let dynamic_title = item.EdbName;
|
|
let dynamic_title = item.EdbName;
|
|
let dynamic_arr = data.filter(
|
|
let dynamic_arr = data.filter(
|
|
@@ -289,14 +328,16 @@ const setSplineOpt=(data)=>{
|
|
dataGrouping:{
|
|
dataGrouping:{
|
|
enabled:false
|
|
enabled:false
|
|
},
|
|
},
|
|
- type:item.ChartStyle,
|
|
|
|
|
|
+ type: resData.value.ChartInfo.ChartType ===6 ? item.ChartStyle : chartStyle,
|
|
yAxis:index,
|
|
yAxis:index,
|
|
// name:dynamic_arr.length > 1
|
|
// name:dynamic_arr.length > 1
|
|
// ? `${item.EdbName}(${item.SourceName})${dynamic_tag}`
|
|
// ? `${item.EdbName}(${item.SourceName})${dynamic_tag}`
|
|
// : `${item.EdbName}${dynamic_tag}`,//拼接标题 判断相同指标名称拼接来源
|
|
// : `${item.EdbName}${dynamic_tag}`,//拼接标题 判断相同指标名称拼接来源
|
|
name:temName,
|
|
name:temName,
|
|
color: item.ChartColor,
|
|
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,
|
|
|
|
+ fillColor: (resData.value.ChartInfo.ChartType === 3 || (resData.value.ChartInfo.ChartType === 6 && item.ChartStyle === 'areaspline')) ? item.ChartColor : undefined,
|
|
visible:true,
|
|
visible:true,
|
|
LatestDate:item.LatestDate,
|
|
LatestDate:item.LatestDate,
|
|
LatestValue:item.LatestValue
|
|
LatestValue:item.LatestValue
|
|
@@ -683,7 +724,7 @@ const handleGoSearch=()=>{
|
|
}
|
|
}
|
|
|
|
|
|
// 获取当前图表
|
|
// 获取当前图表
|
|
-let searchVal=route.query.searchVal
|
|
|
|
|
|
+let searchVal=decodeURIComponent(route.query.searchVal)
|
|
let searchListData=ref([])//搜索的数据
|
|
let searchListData=ref([])//搜索的数据
|
|
const getSearchListData=async ()=>{
|
|
const getSearchListData=async ()=>{
|
|
const res=await apiChartList({Keywords:searchVal,Page:1,Limit:10000,Authorization:route.query.token})
|
|
const res=await apiChartList({Keywords:searchVal,Page:1,Limit:10000,Authorization:route.query.token})
|
|
@@ -801,7 +842,7 @@ onMounted(()=>{
|
|
// 保存
|
|
// 保存
|
|
const handleSaveChart=async ()=>{
|
|
const handleSaveChart=async ()=>{
|
|
let params={}
|
|
let params={}
|
|
- if(resData.value.ChartInfo.ChartType===1){//曲线图
|
|
|
|
|
|
+ if(sameOptionType.value.includes(resData.value.ChartInfo.ChartType)){//曲线图
|
|
let arr=chartData.value.yAxis.map(item=>{
|
|
let arr=chartData.value.yAxis.map(item=>{
|
|
return {
|
|
return {
|
|
ChartColor: item.chartEdbInfo.ChartColor,
|
|
ChartColor: item.chartEdbInfo.ChartColor,
|
|
@@ -895,10 +936,31 @@ const pageTouchmove=(e)=>{
|
|
|
|
|
|
event.preventDefault();//阻止页面移动
|
|
event.preventDefault();//阻止页面移动
|
|
}
|
|
}
|
|
|
|
+
|
|
|
|
+// 生成海报所需跳转到小程序页面参数
|
|
|
|
+const code_scene=computed(()=>{
|
|
|
|
+ let obj= {
|
|
|
|
+ chartInfoId:ChartInfoId,
|
|
|
|
+ searchVal:decodeURIComponent(route.query.searchVal)||'',
|
|
|
|
+ MyChartId:route.query.MyChartId||'',
|
|
|
|
+ MyChartClassifyId:route.query.MyChartClassifyId||'',
|
|
|
|
+ from:'share'
|
|
|
|
+ }
|
|
|
|
+ return JSON.stringify(obj)
|
|
|
|
+})
|
|
|
|
+// 生成海报图片所需要的数据
|
|
|
|
+const posterParams=computed(()=>{
|
|
|
|
+ return {
|
|
|
|
+ chart_name:resData.value.ChartInfo.ChartName,
|
|
|
|
+ chart_image:resData.value.ChartInfo.ChartImage
|
|
|
|
+ }
|
|
|
|
+})
|
|
|
|
+
|
|
|
|
+
|
|
</script>
|
|
</script>
|
|
|
|
|
|
<template>
|
|
<template>
|
|
- <div class="chart-detail" v-if="!loading">
|
|
|
|
|
|
+ <div class="chart-detail" v-if="!loading&&!noauth">
|
|
<div class="chart-title">{{resData.ChartInfo.ChartName}}</div>
|
|
<div class="chart-title">{{resData.ChartInfo.ChartName}}</div>
|
|
<div class="top-box">
|
|
<div class="top-box">
|
|
<div class="flex calendar-box" style="float:left" @click="handleShowDate">
|
|
<div class="flex calendar-box" style="float:left" @click="handleShowDate">
|
|
@@ -908,6 +970,14 @@ const pageTouchmove=(e)=>{
|
|
<span class="date">{{endDate||'结束日期'}}</span>
|
|
<span class="date">{{endDate||'结束日期'}}</span>
|
|
</div>
|
|
</div>
|
|
<img class="icon" src="../../../assets/hzyb/chart/search.png" alt="" @click="handleGoSearch">
|
|
<img class="icon" src="../../../assets/hzyb/chart/search.png" alt="" @click="handleGoSearch">
|
|
|
|
+ <share-poster
|
|
|
|
+ :shareData="{
|
|
|
|
+ type:'chart_detail',
|
|
|
|
+ code_scene:code_scene,
|
|
|
|
+ code_page:'pages-chart/chartDetail',
|
|
|
|
+ data:posterParams
|
|
|
|
+ }"
|
|
|
|
+ ></share-poster>
|
|
<img class="icon" src="../../../assets/hzyb/chart/save.png" alt="" @click="handleSaveChart" v-if="canSave">
|
|
<img class="icon" src="../../../assets/hzyb/chart/save.png" alt="" @click="handleSaveChart" v-if="canSave">
|
|
<img class="icon" src="../../../assets/hzyb/chart/refresh.png" alt="" @click="handleRefreshChart">
|
|
<img class="icon" src="../../../assets/hzyb/chart/refresh.png" alt="" @click="handleRefreshChart">
|
|
</div>
|
|
</div>
|
|
@@ -915,16 +985,17 @@ const pageTouchmove=(e)=>{
|
|
<chartBox :options='chartData' v-if="!loading"></chartBox>
|
|
<chartBox :options='chartData' v-if="!loading"></chartBox>
|
|
|
|
|
|
<div class="flex source-box">
|
|
<div class="flex source-box">
|
|
- <span>来源:弘则研究</span>
|
|
|
|
- <div class="season-change-box" v-if="resData&&resData.ChartInfo.ChartType===2">
|
|
|
|
|
|
+ <div :style="{flex:resData&&resData.ChartInfo.ChartType===2?1:2}"><span v-if="resData&&resData.ChartInfo.ChartType!==2">来源:{{resData&&resData.ChartInfo.ChartSource}}</span></div>
|
|
|
|
+ <div class="season-change-box" style="flex:1" v-if="resData&&resData.ChartInfo.ChartType===2">
|
|
<span :class="calendarType==='农历'&&'active'" @click="calendarTypeChange('农历')">农历</span>
|
|
<span :class="calendarType==='农历'&&'active'" @click="calendarTypeChange('农历')">农历</span>
|
|
<span :class="calendarType==='公历'&&'active'" @click="calendarTypeChange('公历')">公历</span>
|
|
<span :class="calendarType==='公历'&&'active'" @click="calendarTypeChange('公历')">公历</span>
|
|
</div>
|
|
</div>
|
|
- <span style="color:#E3B377" @click="showLimit=true">上下限设置</span>
|
|
|
|
|
|
+ <span style="color:#E3B377;flex:1;text-align:right" @click="showLimit=true">上下限设置</span>
|
|
</div>
|
|
</div>
|
|
|
|
+ <div class="source-box" style="margin-top:5px" v-if="resData&&resData.ChartInfo.ChartType===2">来源:{{resData&&resData.ChartInfo.ChartSource}}</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
|
|
<div
|
|
:class="['item',item.value==dateType?'active':'']"
|
|
:class="['item',item.value==dateType?'active':'']"
|
|
v-for="item in dateTypeList"
|
|
v-for="item in dateTypeList"
|
|
@@ -936,7 +1007,7 @@ const pageTouchmove=(e)=>{
|
|
<!-- 最新值 -->
|
|
<!-- 最新值 -->
|
|
<div class="latest-value-wrap" v-if="resData">
|
|
<div class="latest-value-wrap" v-if="resData">
|
|
<p style="margin-bottom:10px">最新数值</p>
|
|
<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">
|
|
<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:#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>
|
|
<p :style="{color:item.color,flex:1}">{{item.name.length>20?item.name.replace(/<br>/g,''):item.name}}</p>
|
|
@@ -954,6 +1025,7 @@ const pageTouchmove=(e)=>{
|
|
|
|
|
|
<!-- 上一张下一张图切换 -->
|
|
<!-- 上一张下一张图切换 -->
|
|
<div
|
|
<div
|
|
|
|
+ v-if="$route.query.from!='share'"
|
|
class="change-page-wrap"
|
|
class="change-page-wrap"
|
|
:style="{left:pageBoxPosition.left+'px',top:pageBoxPosition.top+'px'}"
|
|
:style="{left:pageBoxPosition.left+'px',top:pageBoxPosition.top+'px'}"
|
|
@touchmove.stop="pageTouchmove"
|
|
@touchmove.stop="pageTouchmove"
|
|
@@ -1011,8 +1083,8 @@ const pageTouchmove=(e)=>{
|
|
</div>
|
|
</div>
|
|
</Popup>
|
|
</Popup>
|
|
</div>
|
|
</div>
|
|
-
|
|
|
|
-
|
|
|
|
|
|
+ <!-- 无权限 -->
|
|
|
|
+ <noAuth v-if="noauth" :data="noAuthData"></noAuth>
|
|
|
|
|
|
</template>
|
|
</template>
|
|
|
|
|
|
@@ -1054,7 +1126,7 @@ const pageTouchmove=(e)=>{
|
|
float: right;
|
|
float: right;
|
|
width: 40px;
|
|
width: 40px;
|
|
height: 40px;
|
|
height: 40px;
|
|
- margin-left: 50px;
|
|
|
|
|
|
+ margin-left: 30px;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
.select-date-box-head{
|
|
.select-date-box-head{
|