|
@@ -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:[],
|
|
@@ -208,12 +209,17 @@ const chartItemStyleArr = ref([
|
|
|
{ label: '散点图', key: 5 ,value: 'scatter'}
|
|
|
])//组合图配置时可选类型
|
|
|
|
|
|
+let nodata=ref(false)
|
|
|
let noauth=ref(false)
|
|
|
let noAuthData=ref(null)
|
|
|
// 如果type:init 则是初始化获取数据
|
|
|
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 +280,7 @@ const getChartInfo=async (type)=>{
|
|
|
params:{
|
|
|
chartInfoId:ChartInfoId,
|
|
|
searchVal:decodeURIComponent(route.query.searchVal)||'',
|
|
|
+ chartSource,
|
|
|
MyChartId:route.query.MyChartId||'',
|
|
|
MyChartClassifyId:route.query.MyChartClassifyId||'',
|
|
|
},
|
|
@@ -283,10 +290,41 @@ const getChartInfo=async (type)=>{
|
|
|
wx.miniProgram.postMessage({ data: postData });
|
|
|
|
|
|
|
|
|
+ }else if(res.code==403){
|
|
|
+ noauth.value=true
|
|
|
+ noAuthData.value=res.data
|
|
|
+ }else if(res.code===4003){//图表不存在
|
|
|
+ nodata.value=true
|
|
|
+ }
|
|
|
+}
|
|
|
+//获取商品价格曲线数据
|
|
|
+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 +350,225 @@ 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 { XDataList,YDataList,EdbInfoList,ChartInfo } = data;
|
|
|
+
|
|
|
+ commodityEdbList.value = EdbInfoList;
|
|
|
+ commodityChartData.value = YDataList;
|
|
|
+ commodityXData.value = XDataList;
|
|
|
+
|
|
|
+ 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.map(_ => _.Name),
|
|
|
+ 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 = '';
|
|
|
+ ctx.points.forEach(item => {
|
|
|
+ let obj_item = data.find(_ => _.Name === item.series.name);
|
|
|
+ let index = commodityXData.value.findIndex(_ => _.Name === ctx.x);
|
|
|
+
|
|
|
+ str+=`<b>${ commodityEdbList.value.find(_ => _.EdbInfoId === obj_item.XEdbInfoIdList[index]).EdbName }</b>`
|
|
|
+
|
|
|
+ if(!obj_item.NoDataEdbList.includes(obj_item.XEdbInfoIdList[index])) {
|
|
|
+ str += `<br><span style="color:${item.color}">\u25CF</span>${obj_item.Date}: ${item.y}<br>`
|
|
|
+ }else {
|
|
|
+ str += `<br><span style="color:${item.color}">\u25CF</span>${obj_item.Date}: 无<br>`
|
|
|
+ }
|
|
|
+ })
|
|
|
+ return str
|
|
|
+ },
|
|
|
+ shared: true
|
|
|
+ }
|
|
|
+
|
|
|
+ chartData.value = {
|
|
|
+ title: {
|
|
|
+ text:''
|
|
|
+ },
|
|
|
+ series: seriesData,
|
|
|
+ yAxis: [ yAxis ],
|
|
|
+ xAxis,
|
|
|
+ tooltip
|
|
|
+ }
|
|
|
+};
|
|
|
+/* 处理无效数据为null */
|
|
|
+const filterInvalidData = (item)=> {
|
|
|
+ let validateArr = item.XEdbInfoIdList.filter(_ =>!item.NoDataEdbList.includes(_));
|
|
|
+
|
|
|
+ let first_index = item.XEdbInfoIdList.findIndex(_ => _ === validateArr[0]);
|
|
|
+ let last_index = item.XEdbInfoIdList.findIndex(_ => _ === validateArr[validateArr.length-1]);
|
|
|
+ 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 +1367,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 +1407,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 +1467,7 @@ const pageChange=async (type)=>{
|
|
|
query:{
|
|
|
...route.query,
|
|
|
ChartInfoId:searchListData.value[index-1].ChartInfoId,
|
|
|
+ chartSource: searchListData.value[index-1].Source
|
|
|
}
|
|
|
})
|
|
|
}
|
|
@@ -1304,6 +1482,7 @@ const pageChange=async (type)=>{
|
|
|
query:{
|
|
|
...route.query,
|
|
|
ChartInfoId:searchListData.value[index+1].ChartInfoId,
|
|
|
+ chartSource: searchListData.value[index+1].Source
|
|
|
}
|
|
|
})
|
|
|
}
|
|
@@ -1338,6 +1517,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 +1542,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 +1563,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 +1637,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 +1688,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'
|
|
@@ -1509,10 +1707,10 @@ const posterParams=computed(()=>{
|
|
|
</script>
|
|
|
|
|
|
<template>
|
|
|
- <div class="chart-detail" v-if="!loading&&!noauth">
|
|
|
+ <div class="chart-detail" v-if="!loading&&!noauth&&!nodata">
|
|
|
<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 +1764,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">
|
|
@@ -1662,8 +1860,16 @@ const posterParams=computed(()=>{
|
|
|
</Popup>
|
|
|
</div>
|
|
|
<!-- 无权限 -->
|
|
|
- <noAuth v-if="noauth" :data="noAuthData"></noAuth>
|
|
|
-
|
|
|
+ <noAuth v-if="noauth&&!nodata" :data="noAuthData"></noAuth>
|
|
|
+ <!-- 图表不存在 -->
|
|
|
+ <div class="chart-nodata" v-if="nodata">
|
|
|
+ <p style="text-align:center;padding-top:200px;font-size:16px">该图表已被删除!</p>
|
|
|
+ <collectBox
|
|
|
+ v-if="$route.query.source=='ybxcx_my_chart'"
|
|
|
+ :code="$route.query.chartCode"
|
|
|
+ :isNodata="true"
|
|
|
+ />
|
|
|
+ </div>
|
|
|
</template>
|
|
|
|
|
|
<style lang="scss" scoped>
|