修改指标查询的趋势分析的图表信息

src/api/dataset/RepIndexSet/index.ts

@@ -89,3 +89,9 @@ export const RepIndexSetDrilling = (data: any) => {
 export const RepIndexSetDrillingQuery = (data: any) => {
   return request.postJson({ url: '/RepIndexSet/spi/dataset/RepIndexSet/RepIndexSetDrillingQuery', data });
 };
+
+//趋势分析的获取趋势接口/RepIndexSet/spi/dataset/RepIndexSet/RepIndexTrendAnalysis
+export const RepIndexTrendAnalysis = (data:any) => {
+  return request.postJson({url:'/RepIndexSet/spi/dataset/RepIndexSet/RepIndexTrendAnalysis',data})
+}
+

src/router/index.ts

@@ -16,31 +16,7 @@ export const constantRouterMap: AppRouteRecordRaw[] = [
       hidden: true
     }
   },
-  {
+  
-    path: '/dashboard',
-    component: Layout,
-    redirect: '/dashboard/home',
-    name: 'Dashboard',
-    menuId: 'Dashboard',
-    meta: {
-      title: '首页',
-      icon: 'ant-design:home-outlined',
-      hidden: true,
-    },
-    children: [
-      {
-        path: 'home',
-        component: () => import('@/views/csck/CsckWorkFlow/CsckWorkFlow.vue'),
-        name: 'Home',
-        menuId: 'Home',
-        meta: {
-          title: '待办任务',
-          affix: true,
-          hidden: true,
-        },
-      },
-    ],
-  },
   {
     path: '/redirect',
     component: Layout,
@@ -192,6 +168,31 @@ export const constantRouterMap: AppRouteRecordRaw[] = [
 ];
 
 export const asyncRouterMap: AppRouteRecordRaw[] = [
+  {
+    path: '/dashboard',
+    component: Layout,
+    redirect: '/dashboard/home',
+    name: 'Dashboard',
+    menuId: 'Dashboard',
+    meta: {
+      title: '首页',
+      icon: 'ant-design:home-outlined',
+      hidden: true,
+    },
+    children: [
+      {
+        path: 'home',
+        component: () => import('@/views/dataset/IndexMannageMs/IndexMannageMs.vue'),
+        name: 'IndexMannageMs',
+        menuId: 'IndexMannageMs',
+        meta: {
+          title: '指标管理',
+          affix: true,
+          hidden: true,
+        },
+      },
+    ],
+  },
   /*---------------------案例预警start------------------------*/ 
   {
     path: '/caseManage',
@@ -207,6 +208,7 @@ export const asyncRouterMap: AppRouteRecordRaw[] = [
       sort:1,
     },
     children: [
+      
       {
         path: 'LargScaleCaseDeal',
         component: () => import('@/views/amld/LargScaleCaseDeal/LargScaleCaseDeal.vue'),

src/views/dataset/IndexSearchServiceMs/IndexSearchServiceMs.vue

@@ -139,7 +139,7 @@ const tableColumns = reactive<TableColumn[]>([
                         <ElDropdownItem onClick={()=>action(data.row,'DrillingByOrgan','按机构钻取','indexValue')}>
                           <div>按机构钻取</div>
                         </ElDropdownItem>
-                        <ElDropdownItem>
+                        <ElDropdownItem onClick={()=>action(data.row,'TrendAnalysis','趋势分析','indexValue')}>
                           <div>趋势分析</div>
                         </ElDropdownItem>
                       </ElDropdownMenu>
@@ -166,7 +166,7 @@ const tableColumns = reactive<TableColumn[]>([
                         <ElDropdownItem onClick={()=>action(data.row,'DrillingByOrgan','按机构钻取','prevPeriodValue')}>
                           <div>按机构钻取</div>
                         </ElDropdownItem>
-                        <ElDropdownItem>
+                        <ElDropdownItem onClick={()=>action(data.row,'TrendAnalysis','趋势分析','prevPeriodValue')}>
                           <div>趋势分析</div>
                         </ElDropdownItem>
                       </ElDropdownMenu>

src/views/dataset/IndexSearchServiceMs/components/DrillingOrAnalysis.vue

@@ -9,8 +9,8 @@
     <!-- 按机构钻取 -->
     <DataDillingByOrgan :IndexData="IndexData" :actionType="actionType" v-if="DrillingTYPE == 'DrillingByOrgan'" />
     <!-- 趋势分析 -->
-     
+    <TrendAnalysis :IndexData="IndexData" v-if="DrillingTYPE == 'TrendAnalysis'" />
-  </ContentWrap>
+  </contentwrap>
 </template>
 <script lang="tsx" setup>
 import { ref,PropType,reactive } from 'vue'
@@ -19,6 +19,7 @@ import { Form, FormSchema } from '@/components/Form'
 import { useForm } from '@/hooks/web/useForm'
 import {getReportDateOfValue} from '@/utils/dateUtil';
 import DataDillingByOrgan from './DataDillingByOrgan.vue';//按机构钻取的表格信息
+import TrendAnalysis from './TrendAnalysis.vue';
 //趋势分析
 
 defineOptions({

src/views/dataset/IndexSearchServiceMs/components/TrendAnalysis.vue

@@ -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>