新增统计弹窗

src/components/numerical.vue

@@ -2,7 +2,7 @@
  * @LastEditors: gcz
 -->
 <template>
-    <div class="numerical">
+    <div class="numerical" ref="numericalRef">
         <div class="ntitle">{{$store.state.addr.selectAddr}}{{ntitle}}</div>
         <!-- <div class="ntitle">
             <span v-if="$store.state.addr.mapLevel=='province'">{{$store.state.addr.selectAddr}}{{ntitle}}</span>
@@ -13,18 +13,29 @@
         <!-- <div class="addr">{{$store.state.addr.selectAddr}}</div> -->
         <div class="item-wrap">
             <div class="inner u-flex u-flex-wrap">
-                <div class="numerical-item" v-for="(item,index) in data" :key="item.name+index">
+                <div class="numerical-item" v-for="(item,index) in data"  @click="showDetails" :key="item.name+index">
                     <div class="cell name">{{item.name}}</div>
                     <span class="cell number">{{item.number}}</span>
                     <span class="cell unit">{{item.unit}}</span>
                 </div>
             </div>
         </div>
+        <div class="detail-wrap" v-show="isShowDetails" ref="detailRef">
+            <el-table :data="detailsData" style="width: 100%;max-height: 80vh;overflow-y: auto;" >
+
+                <el-table-column :label="item.title" :prop="item.value"  v-for="(item, index) in headerList" :key="index" align="center">
+                    <template slot-scope="scope">
+                        {{scope.row[item.value]||'-'}}
+                    </template>
+                </el-table-column>
+
+            </el-table>
+        </div>
     </div>
 </template>
 
 <script>
-    //import { projectClassList } from '@/api/project/projectclass';
+    import { forestFarmDetail,treeListDetail,baseItemDetail } from '@/service/index';
     export default {
         name: '',
         props:{
@@ -36,17 +47,112 @@
                 type: String,
                 default: '数据概况',
             },
+            pageName:{
+                type: String,
+                default: '',
+            },
         },
         components: {},
         data () {
             return {
+                isShowDetails:false,
+                headerList:[],
+                detailsData:[]
                 
             };
         },
         created(){
             // console.log('data',this.data);
         },
-        methods: {},
+        mounted(){
+            document.addEventListener('click',this.outClick)
+        },
+        destroyed(){
+            document.removeEventListener('click',this.outClick)
+        },
+        methods: {
+            showDetails(){
+                // console.log('pageName',this.pageName);
+                let page = {
+                forest: this.getForestData,
+                treeSpecies: this.getTreeSpeciesData,
+                economics:  this.getEconomicsData
+                };
+                page[this.pageName] && page[this.pageName]();
+            },
+            unShowDetails(){
+                this.isShowDetails = false;
+
+            },
+            getForestData(){
+                this.isShowDetails = true;
+                forestFarmDetail().then(res=>{
+                    let resData = res.rows;
+                    this.detailsData = resData;
+                    // console.log('forestFarmDetail res',this.detailsData);
+
+                    this.getHeaderList(resData);
+
+                }).catch((err) => {
+                    console.log('forestFarmDetail err', err);
+                });
+            },
+            getTreeSpeciesData(){
+                this.isShowDetails = true;
+                treeListDetail().then(res=>{
+                    let resData = res.data;
+                    this.detailsData = resData;
+                    // console.log('treeListDetail res',this.detailsData);
+                    this.getHeaderList(resData);
+
+                }).catch((err) => {
+                    console.log('treeListDetail err', err);
+                });
+            },
+            getEconomicsData(){
+                this.isShowDetails = true;
+                baseItemDetail().then(res=>{
+                    let resData = res.rows;
+                    this.detailsData = resData;
+                    console.log('baseItemDetail res',this.detailsData);
+                    this.getHeaderList(resData);
+
+                }).catch((err) => {
+                    console.log('baseItemDetail err', err);
+                });
+            },
+            getHeaderList(data){
+                let data1 = Object.keys(data[0]).map((key) => {
+                    console.log('pageName',this.pageName);
+                    let titles={};
+                    if(this.pageName=='forest'){
+                        titles={forestName:'林场名称',smallClassStock:'蓄积量(m³)',landArea:'占地面积(亩)',smallClassCount:'小班数量'};
+                    }else if(this.pageName=='treeSpecies'){
+                        titles={treeName:'树种名称',treeStock:'树种蓄积(m³)',treeCount:'树种株数(株)'};
+                    }else if(this.pageName=='economics'){
+                        titles={
+                            baseName:'基地名称',
+                            baseNumber:'基地数量',
+                            baseArea:'基地面积(亩)',
+                            corpNumber:'作物数量',
+                            corpName:'作物名称',
+                            outputValue:'预估产值(万元)',
+                        };
+                    }
+                    
+                    return { title: titles[key] ,value:key};
+                });
+
+                let newData = JSON.parse(JSON.stringify(data1));
+                this.headerList = newData;
+            },
+            outClick(e){
+                let detailRef=this.$refs.numericalRef
+                if(!detailRef.contains(e.target)&&this.isShowDetails){
+                    this.isShowDetails=false
+                }
+            }
+        },
     }
 </script>
 
@@ -87,7 +193,21 @@
             }
         }
     }
+    .detail-wrap{
+        position: absolute;
+        top: 0;
+        right: -115%;
+        z-index: 99;
+        min-width: 100%;
+        overflow: hidden;
+        border-radius: 10px;
+        border: 1px solid rgb(2, 238, 255);
+        ::-webkit-scrollbar {width: .5rem;height: .625rem;background: #ddd;}
+        ::-webkit-scrollbar-thumb {background-color: #333;border-radius: 2em;}
+
+    }
 }
+
 @media only screen and (max-width : 1280px) {
   //概况
     .numerical{

src/main.js

@@ -14,7 +14,7 @@ import dataV from "@jiaminghi/data-view";
 // 引入全局样式文件
 import "@/assets/scss/index.scss";
 
-import { Select, Option, Input } from 'element-ui';
+import { Select, Option, Input, Table, TableColumn } from 'element-ui';
 import 'element-ui/lib/theme-chalk/index.css';
 
 //main.js添加
@@ -24,6 +24,8 @@ filters(Vue);
 Vue.use(Select);
 Vue.use(Option);
 Vue.use(Input);
+Vue.use(Table);
+Vue.use(TableColumn);
 
 Vue.use(dataV);
 

src/service/index.js

@@ -77,6 +77,14 @@ export const page1numerical = data =>
     prefixUrl: "api2"
   });
 
+// 查询数据概况-弹框
+export const forestFarmDetail = data =>
+  callApi({
+    url: "forest/farmDetail",
+    data,
+    prefixUrl: "api2"
+  });
+
 // 查询蓄积量统计
 export const page1echarts01 = data =>
   callApi({
@@ -151,6 +159,13 @@ export const page2numerical = data =>
     data,
     prefixUrl: "api2"
   });
+// 查询数据概况-弹框
+export const treeListDetail = data =>
+  callApi({
+    url: "smallClass/treeList",
+    data,
+    prefixUrl: "api2"
+  });
 
 export const page2echarts01 = data =>
   callApi({
@@ -182,6 +197,14 @@ export const page5numerical = data =>
     prefixUrl: "api2"
   });
 
+//查询数据概况-弹框
+export const baseItemDetail = data =>
+  callApi({
+    url: "finance/baseItem",
+    data,
+    prefixUrl: "api2"
+  });
+
 //查询作物切换-作物信息
 export const financeCateInfo = data =>
   callApi({

src/views/index.vue

@@ -2,8 +2,8 @@
  * @Description: 
  * @Author: wangcc
  * @Date: 2022-07-06 15:56:45
- * @LastEditors: wangcc
- * @LastEditTime: 2022-07-14 14:40:16
+ * @LastEditors: gcz
+ * @LastEditTime: 2022-07-20 17:40:58
  * @FilePath: \castgroup_bigscreen\src\views\index.vue
  * @Copyright: Copyright (c) 2016~2022 by wangcc, All Rights Reserved. 
 -->
@@ -26,7 +26,7 @@
       <Alarm v-if="page==6&&alarmData.length>=1" :data="alarmData" />
 
       <section class="left-wrap" v-if="$store.state.addr.page=='forest'">
-        <Numerical class="left-item" :data="page1numerical" />
+        <Numerical class="left-item" :data="page1numerical" pageName="forest" />
         <MyEcharts
           class="left-item chart-wrap"
           mid="page1Char1"
@@ -46,7 +46,7 @@
       </section>
 
       <section class="left-wrap" v-if="$store.state.addr.page=='treeSpecies'">
-        <Numerical class="left-item" :data="page2numerical" />
+        <Numerical class="left-item" :data="page2numerical" pageName="treeSpecies" />
         <!-- <MyEcharts
         class="left-item chart-wrap"
         mid="page2Char1"
@@ -72,7 +72,7 @@
       <!-- 林业经济 -->
       <section class="left-wrap" v-if="$store.state.addr.page=='economics'">
         <!-- <Typeslide :data="typeSlideData" /> -->
-        <Numerical class="left-item" :data="page5numerical" />
+        <Numerical class="left-item" :data="page5numerical" pageName="economics" />
         <MyEcharts
           class="left-item chart-wrap"
           mid="page5Char2"