|
|
|
|
@ -1 +1,186 @@
|
|
|
|
|
<!-- 趋势分析 -->
|
|
|
|
|
<template>
|
|
|
|
|
<!-- 操作：导出、转换、查询 -->
|
|
|
|
|
<div class="operateButtonList">
|
|
|
|
|
<ElSlider
|
|
|
|
|
v-model="IndexInfoData.dateRange" range :min="1" :max="60" class="slider-time" />
|
|
|
|
|
<ElInput v-model="IndexInfoData.startIndexTemp" type="number" style="width:100px;" class="OperateButton" /> -
|
|
|
|
|
<ElInput v-model="IndexInfoData.endIndexTemp" type="number" class="OperateButton" style="width:100px;" />
|
|
|
|
|
<ElButton type="primary" @click="getIndexTrend">检索</ElButton>
|
|
|
|
|
<ElButton type="primary">数据导出</ElButton>
|
|
|
|
|
<ElButton type="primary">转换</ElButton>
|
|
|
|
|
</div>
|
|
|
|
|
|
|
|
|
|
<div v-loading="chartsLoading">
|
|
|
|
|
<!-- 折线图信息 -->
|
|
|
|
|
<div ref="chartLine" id="chartLine" style="width: 100%;height:300px;"></div>
|
|
|
|
|
<!-- 表格信息：表格中只留期数和公式值 -->
|
|
|
|
|
<div class="tableWrap">
|
|
|
|
|
<ElTable :data="[{}]" border headerAlign="center" align="center">
|
|
|
|
|
<ElTableColumn width="120">
|
|
|
|
|
<ElTableColumn label="指标名称">
|
|
|
|
|
<template #default="scope">
|
|
|
|
|
<span>{{ echartsLineOption.title.text }}</span>
|
|
|
|
|
</template>
|
|
|
|
|
</ElTableColumn>
|
|
|
|
|
</ElTableColumn>
|
|
|
|
|
<ElTableColumn :label="item" width="120" v-for="(item,index) in tableList.labelList" :key="index">
|
|
|
|
|
<ElTableColumn label="公式值">
|
|
|
|
|
<template #default="scope">
|
|
|
|
|
<span>{{ tableList.dataList[index] }}</span>
|
|
|
|
|
</template>
|
|
|
|
|
</ElTableColumn>
|
|
|
|
|
</ElTableColumn>
|
|
|
|
|
</ElTable>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
</template>
|
|
|
|
|
<script lang="tsx" setup>
|
|
|
|
|
import { ref,watch,reactive,PropType,onMounted } from 'vue';
|
|
|
|
|
import { ElButton, ElTable,ElSlider,ElInput,ElRow,ElTableColumn } from 'element-plus';
|
|
|
|
|
import * as ECharts from 'echarts';
|
|
|
|
|
import { RepIndexTrendAnalysis } from '@/api/dataset/RepIndexSet'
|
|
|
|
|
const props = defineProps({
|
|
|
|
|
IndexData: {//当前行的信息
|
|
|
|
|
type: Object as PropType<any>,
|
|
|
|
|
default: () => null
|
|
|
|
|
},
|
|
|
|
|
})
|
|
|
|
|
let myChart = null;
|
|
|
|
|
let tableList = reactive({
|
|
|
|
|
labelList:['上1期', '上2期', '上3期', '上4期', '上5期', '上6期'],
|
|
|
|
|
dataList:[0,0,0,0,0,0],
|
|
|
|
|
})
|
|
|
|
|
//折线图的option信息
|
|
|
|
|
let echartsLineOption = {
|
|
|
|
|
title: {
|
|
|
|
|
text: '折线图示例'
|
|
|
|
|
},
|
|
|
|
|
tooltip: {
|
|
|
|
|
trigger: 'axis'
|
|
|
|
|
},
|
|
|
|
|
xAxis: {
|
|
|
|
|
type: 'category',
|
|
|
|
|
data: ['上1期', '上2期', '上3期', '上4期', '上5期', '上6期']
|
|
|
|
|
},
|
|
|
|
|
yAxis: {
|
|
|
|
|
type: 'value'
|
|
|
|
|
},
|
|
|
|
|
series: [
|
|
|
|
|
{
|
|
|
|
|
data: [0,0,0,0,0,0],
|
|
|
|
|
type: 'line'
|
|
|
|
|
}
|
|
|
|
|
]
|
|
|
|
|
};
|
|
|
|
|
let chartsLoading = ref(false);//loading
|
|
|
|
|
// onMounted(()=>{
|
|
|
|
|
// myChart = ECharts.init(document.getElementById('chartLine'));
|
|
|
|
|
// })
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
//获取不同阶段的趋势信息
|
|
|
|
|
let IndexInfoData = reactive({
|
|
|
|
|
dateRange:[1,6],
|
|
|
|
|
startIndexTemp:1,//滑块开始下标
|
|
|
|
|
endIndexTemp:6,//滑块结束下标
|
|
|
|
|
});
|
|
|
|
|
//获取趋势数据
|
|
|
|
|
const getIndexTrend = ()=>{
|
|
|
|
|
chartsLoading.value = true;
|
|
|
|
|
IndexInfoData.startIndex = IndexInfoData.startIndexTemp.toString();
|
|
|
|
|
IndexInfoData.endIndex = IndexInfoData.endIndexTemp.toString();
|
|
|
|
|
RepIndexTrendAnalysis({params:JSON.stringify(IndexInfoData)}).then(res=>{
|
|
|
|
|
chartsLoading.value = false;
|
|
|
|
|
if(res.head.code == '0'){
|
|
|
|
|
echartsLineOption.series[0].data = res.body.list[0].data;
|
|
|
|
|
if(myChart){
|
|
|
|
|
myChart.setOption(echartsLineOption);
|
|
|
|
|
}else{
|
|
|
|
|
myChart = ECharts.init(document.getElementById('chartLine'));
|
|
|
|
|
myChart.setOption(echartsLineOption);
|
|
|
|
|
}
|
|
|
|
|
changeTableList();
|
|
|
|
|
tableList.dataList = res.body.list[0].data;
|
|
|
|
|
}
|
|
|
|
|
}).catch(err=>{
|
|
|
|
|
chartsLoading.value = false;
|
|
|
|
|
})
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
const changeEchartsLineOption = ()=>{
|
|
|
|
|
echartsLineOption.xAxis.data = [];
|
|
|
|
|
echartsLineOption.series[0].data = [];
|
|
|
|
|
for(let i=IndexInfoData.startIndexTemp;i<=IndexInfoData.endIndexTemp;i++){
|
|
|
|
|
echartsLineOption.xAxis.data.push(`上${i}期`);
|
|
|
|
|
echartsLineOption.series[0].data.push(0);
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
const changeTableList = ()=>{
|
|
|
|
|
tableList.labelList = [];
|
|
|
|
|
tableList.dataList = [];
|
|
|
|
|
for(let i=IndexInfoData.startIndexTemp;i<=IndexInfoData.endIndexTemp;i++){
|
|
|
|
|
tableList.labelList.push(`上${i}期`);
|
|
|
|
|
tableList.dataList.push(0);
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
watch(
|
|
|
|
|
() => props.IndexData,
|
|
|
|
|
IndexData => {
|
|
|
|
|
if(!IndexData)return;
|
|
|
|
|
//获取趋势
|
|
|
|
|
let IndexDataTemp = JSON.stringify(IndexData);
|
|
|
|
|
echartsLineOption.title.text = IndexData.indexName;
|
|
|
|
|
IndexInfoData = reactive(Object.assign(JSON.parse(IndexDataTemp),IndexInfoData));
|
|
|
|
|
getIndexTrend();
|
|
|
|
|
},{
|
|
|
|
|
deep: true,
|
|
|
|
|
immediate: true
|
|
|
|
|
}
|
|
|
|
|
)
|
|
|
|
|
watch(
|
|
|
|
|
() => IndexInfoData.dateRange,
|
|
|
|
|
dateRange => {
|
|
|
|
|
IndexInfoData.startIndexTemp = dateRange[0];
|
|
|
|
|
IndexInfoData.endIndexTemp = dateRange[1];
|
|
|
|
|
changeEchartsLineOption();
|
|
|
|
|
}
|
|
|
|
|
)
|
|
|
|
|
watch(
|
|
|
|
|
() => IndexInfoData.endIndexTemp,
|
|
|
|
|
endIndexTemp => {
|
|
|
|
|
IndexInfoData.dateRange[1] = endIndexTemp;
|
|
|
|
|
changeEchartsLineOption();
|
|
|
|
|
}
|
|
|
|
|
)
|
|
|
|
|
watch(
|
|
|
|
|
() => IndexInfoData.startIndexTemp,
|
|
|
|
|
startIndexTemp => {
|
|
|
|
|
IndexInfoData.dateRange[0] = startIndexTemp;
|
|
|
|
|
changeEchartsLineOption();
|
|
|
|
|
}
|
|
|
|
|
)
|
|
|
|
|
</script>
|
|
|
|
|
<style scoped>
|
|
|
|
|
.operateButtonList{
|
|
|
|
|
display: flex;
|
|
|
|
|
height:35px;
|
|
|
|
|
line-height:35px;
|
|
|
|
|
}
|
|
|
|
|
.slider-time{
|
|
|
|
|
width: 200px;
|
|
|
|
|
margin-left:10px;
|
|
|
|
|
}
|
|
|
|
|
.OperateButton{
|
|
|
|
|
margin: 0 10px;
|
|
|
|
|
}
|
|
|
|
|
.tableWrap{
|
|
|
|
|
width:100%;
|
|
|
|
|
overflow-x:auto;
|
|
|
|
|
}
|
|
|
|
|
canvas{
|
|
|
|
|
width: 100% !important;
|
|
|
|
|
min-width: 700px;
|
|
|
|
|
}
|
|
|
|
|
</style>
|
于阔
9 months ago