gcz hace 2 años
padre
commit
6c2a4ca972

BIN
src/assets/img/back.png


BIN
src/assets/img/full.png


+ 6 - 1
src/assets/scss/common.scss

@@ -33,8 +33,13 @@ body {
     background: url(../img/ntitle.png) no-repeat;
     background-size: 100% 100%;
     text-indent: 50px;
-    margin-bottom: 40px;
+    margin-bottom: 10px;
 }
+.addr{
+    text-align: right;
+    padding-right: 24px;
+    font-size: 14px;
+  }
 
 // 更改下拉框颜色
 .el-select-dropdown.el-popper{

+ 2 - 6
src/components/echarts.vue

@@ -80,7 +80,7 @@ export default {
   computed: {
     style() {
       return {
-        height: this.height?this.height:this.domHeight-57 +'px',
+        height: this.height?this.height:this.domHeight-67 +'px',
         width: this.width,
       };
     },
@@ -116,9 +116,5 @@ export default {
 };
 </script>
 <style lang='scss' scoped>
-.addr{
-  text-align: right;
-  padding-right: 24px;
-  font-size: 14px;
-}
+
 </style>

+ 3 - 3
src/components/header.vue

@@ -3,7 +3,7 @@
  * @Author: wangcc
  * @Date: 2022-06-14 18:11:54
  * @LastEditors: gcz
- * @LastEditTime: 2022-06-27 14:22:40
+ * @LastEditTime: 2022-06-28 10:37:06
  * @FilePath: \castgroup_bigscreen\src\components\header.vue
  * @Copyright: Copyright (c) 2016~2022 by wangcc, All Rights Reserved. 
 -->
@@ -17,8 +17,8 @@
       <div class="weather">
         <div id="he-plugin-simple"></div>
       </div>
-      <img v-if="!isFull" src="@/assets/img/full.svg" @click="toggleFullScreen" />
-      <img v-else src="@/assets/img/back.svg" @click="toggleFullScreen" />
+      <img v-if="!isFull" src="@/assets/img/full.png" @click="toggleFullScreen" />
+      <img v-else src="@/assets/img/back.png" @click="toggleFullScreen" />
     </div>
 </template>
 

+ 1 - 0
src/components/numerical.vue

@@ -4,6 +4,7 @@
 <template>
     <div class="numerical">
         <div class="ntitle">{{ntitle}}</div>
+        <div class="addr">{{$store.state.addr.selectAddr}}</div>
         <div class="item-wrap u-flex u-flex-wrap">
             <div class="numerical-item" v-for="(item,index) in data" :key="item.name+index">
                 <div class="cell name">{{item.name}}:</div>

+ 35 - 0
src/dataSchema/chartSlider.js

@@ -0,0 +1,35 @@
+/*
+ * @LastEditors: gcz
+ */
+let chartSlider = [
+    {
+        xAxisIndex: 0, //这里是从X轴的0刻度开始
+        show: true, //是否显示滑动条,不影响使用
+        type: 'slider', // 这个 dataZoom 组件是 slider 型 dataZoom 组件
+        startValue: 0, // 从头开始。
+        endValue: 7, // 一次性展示6个
+        height: 5, //组件高度
+        bottom: 10,
+        borderColor: 'transparent',
+        fillerColor: '#14c6d3',
+        zoomLock: true,
+        showDataShadow: false, //是否显示数据阴影 默认auto
+        backgroundColor: '#0b1511',
+        showDetail: false, //即拖拽时候是否显示详细数值信息 默认true
+        realtime: true, //是否实时更新
+        filterMode: 'filter',
+        handleIcon: 'M-9.35,34.56V42m0-40V9.5m-2,0h4a2,2,0,0,1,2,2v21a2,2,0,0,1-2,2h-4a2,2,0,0,1-2-2v-21A2,2,0,0,1-11.35,9.5Z',
+        handleStyle: {
+            color: '#14c6d3',
+            borderColor: 'transparent',
+            borderRadius: 10
+        },
+        moveHandleSize: 20,
+        moveOnMouseMove: true,
+        maxValueSpan: 7,
+        minValueSpan: 7,
+        moveHandleSize: 0,
+        brushSelect: false, //刷选功能,设为false可以防止拖动条长度改变 ************(这是一个坑)
+    },
+]
+export default chartSlider

+ 31 - 30
src/dataSchema/page1Char1Schema.js

@@ -21,36 +21,37 @@ let page1Char1Schema = {
         bottom: '20px',
         right: '24px'
     },
-    // dataZoom: [
-    //     {
-    //         xAxisIndex: 0, //这里是从X轴的0刻度开始
-    //         show: true, //是否显示滑动条,不影响使用
-    //         type: 'slider', // 这个 dataZoom 组件是 slider 型 dataZoom 组件
-    //         startValue: 0, // 从头开始。
-    //         endValue: 7, // 一次性展示6个
-    //         height: 8, //组件高度
-    //         bottom: 10,
-    //         borderColor: 'transparent',
-    //         fillerColor: '#14c6d3',
-    //         zoomLock: true,
-    //         showDataShadow: false, //是否显示数据阴影 默认auto
-    //         backgroundColor: '#0b1511',
-    //         showDetail: false, //即拖拽时候是否显示详细数值信息 默认true
-    //         realtime: true, //是否实时更新
-    //         filterMode: 'filter',
-    //         handleIcon: 'M-9.35,34.56V42m0-40V9.5m-2,0h4a2,2,0,0,1,2,2v21a2,2,0,0,1-2,2h-4a2,2,0,0,1-2-2v-21A2,2,0,0,1-11.35,9.5Z',
-    //         handleStyle: {
-    //             color: 'rgb(36,71,141)',
-    //             borderColor: 'transparent',
-    //         },
-    //         moveHandleSize: 20,
-    //         moveOnMouseMove: true,
-    //         maxValueSpan: 7,
-    //         minValueSpan: 7,
-    //         moveHandleSize: 0,
-    //         brushSelect: false, //刷选功能,设为false可以防止拖动条长度改变 ************(这是一个坑)
-    //     },
-    // ],
+    dataZoom: [
+        {
+            xAxisIndex: 0, //这里是从X轴的0刻度开始
+            show: true, //是否显示滑动条,不影响使用
+            type: 'slider', // 这个 dataZoom 组件是 slider 型 dataZoom 组件
+            startValue: 0, // 从头开始。
+            endValue: 7, // 一次性展示6个
+            height: 5, //组件高度
+            bottom: 10,
+            borderColor: 'transparent',
+            fillerColor: '#14c6d3',
+            zoomLock: true,
+            showDataShadow: false, //是否显示数据阴影 默认auto
+            backgroundColor: '#0b1511',
+            showDetail: false, //即拖拽时候是否显示详细数值信息 默认true
+            realtime: true, //是否实时更新
+            filterMode: 'filter',
+            handleIcon: 'M-9.35,34.56V42m0-40V9.5m-2,0h4a2,2,0,0,1,2,2v21a2,2,0,0,1-2,2h-4a2,2,0,0,1-2-2v-21A2,2,0,0,1-11.35,9.5Z',
+            handleStyle: {
+                color: '#14c6d3',
+                borderColor: 'transparent',
+                borderRadius: 10
+            },
+            moveHandleSize: 20,
+            moveOnMouseMove: true,
+            maxValueSpan: 7,
+            minValueSpan: 7,
+            moveHandleSize: 0,
+            brushSelect: false, //刷选功能,设为false可以防止拖动条长度改变 ************(这是一个坑)
+        },
+    ],
     xAxis: {
         data: ['清镇林场', '三都林场', '榕江林场', '水东林场', '甜蜜林场', '贵阳林场'],
         axisLabel: {

+ 31 - 0
src/dataSchema/page1Char2Schema.js

@@ -11,6 +11,37 @@ let page1Char2Schema = {
         show: false
 
     },
+    dataZoom: [
+        {
+            xAxisIndex: 0, //这里是从X轴的0刻度开始
+            show: true, //是否显示滑动条,不影响使用
+            type: 'slider', // 这个 dataZoom 组件是 slider 型 dataZoom 组件
+            startValue: 0, // 从头开始。
+            endValue: 7, // 一次性展示6个
+            height: 5, //组件高度
+            bottom: 10,
+            borderColor: 'transparent',
+            fillerColor: '#14c6d3',
+            zoomLock: true,
+            showDataShadow: false, //是否显示数据阴影 默认auto
+            backgroundColor: '#0b1511',
+            showDetail: false, //即拖拽时候是否显示详细数值信息 默认true
+            realtime: true, //是否实时更新
+            filterMode: 'filter',
+            handleIcon: 'M-9.35,34.56V42m0-40V9.5m-2,0h4a2,2,0,0,1,2,2v21a2,2,0,0,1-2,2h-4a2,2,0,0,1-2-2v-21A2,2,0,0,1-11.35,9.5Z',
+            handleStyle: {
+                color: '#14c6d3',
+                borderColor: 'transparent',
+                borderRadius: 10
+            },
+            moveHandleSize: 20,
+            moveOnMouseMove: true,
+            maxValueSpan: 7,
+            minValueSpan: 7,
+            moveHandleSize: 0,
+            brushSelect: false, //刷选功能,设为false可以防止拖动条长度改变 ************(这是一个坑)
+        },
+    ],
     tooltip: {},
     grid: {
         containLabel: true,

+ 9 - 8
src/dataSchema/page2Char2Schema.js

@@ -51,24 +51,25 @@ let page2Char2Schema = {
     dataZoom: [
         {
             xAxisIndex: 0, //这里是从X轴的0刻度开始
-            show: false, //是否显示滑动条,不影响使用
+            show: true, //是否显示滑动条,不影响使用
             type: 'slider', // 这个 dataZoom 组件是 slider 型 dataZoom 组件
             startValue: 0, // 从头开始。
             endValue: 7, // 一次性展示6个
-            height: 8, //组件高度
-            bottom: 30,
-            borderColor: 'rgba(43,48,67,.1)',
-            fillerColor: 'rgb(36,71,141)',
+            height: 5, //组件高度
+            bottom: 0,
+            borderColor: 'transparent',
+            fillerColor: '#14c6d3',
             zoomLock: true,
             showDataShadow: false, //是否显示数据阴影 默认auto
-            backgroundColor: '#051A3B',
+            backgroundColor: '#0b1511',
             showDetail: false, //即拖拽时候是否显示详细数值信息 默认true
             realtime: true, //是否实时更新
             filterMode: 'filter',
             handleIcon: 'M-9.35,34.56V42m0-40V9.5m-2,0h4a2,2,0,0,1,2,2v21a2,2,0,0,1-2,2h-4a2,2,0,0,1-2-2v-21A2,2,0,0,1-11.35,9.5Z',
             handleStyle: {
-                color: 'rgb(36,71,141)',
-                borderColor: 'rgb(36,71,141)',
+                color: '#14c6d3',
+                borderColor: 'transparent',
+                borderRadius: 10
             },
             moveHandleSize: 20,
             moveOnMouseMove: true,

+ 123 - 0
src/dataSchema/page2Char3Schema.js

@@ -0,0 +1,123 @@
+/*
+ * @LastEditors: gcz
+ */
+
+import themeColor from "./color"
+let page6Char1Schema = {
+    title: {
+        text: '树种株数统计',
+        textStyle: {
+            color: themeColor.mainColor,
+        },
+        show: false
+    },
+    grid: {
+        containLabel: true,
+        top: "0%",
+        left: '10px',
+        bottom: '20',
+        right: '24px'
+    },
+    tooltip: {
+        trigger: 'axis',
+        axisPointer: {
+            type: 'shadow'
+        }
+    },
+    legend: {
+        top: 0,
+        textStyle: {
+            color: '#fff',
+        }
+    },
+    grid: {
+        left: '3%',
+        right: '4%',
+        bottom: '3%',
+        containLabel: true
+    },
+    yAxis: {
+        type: 'value',
+        axisLabel: {
+            color: "rgba(255, 255, 255, 1)"
+        }
+    },
+    xAxis: {
+        type: 'category',
+        data: ['马纳存', '三星存', '两家存', '龙子田', '腊寨存', '大黑土', '小黑土'],
+        axisLabel: {
+            color: "rgba(255, 255, 255, 1)"
+        }
+    },
+    dataZoom: [
+        {
+            xAxisIndex: 0, //这里是从X轴的0刻度开始
+            show: true, //是否显示滑动条,不影响使用
+            type: 'slider', // 这个 dataZoom 组件是 slider 型 dataZoom 组件
+            startValue: 0, // 从头开始。
+            endValue: 7, // 一次性展示6个
+            height: 5, //组件高度
+            bottom: 0,
+            borderColor: 'transparent',
+            fillerColor: '#14c6d3',
+            zoomLock: true,
+            showDataShadow: false, //是否显示数据阴影 默认auto
+            backgroundColor: '#0b1511',
+            showDetail: false, //即拖拽时候是否显示详细数值信息 默认true
+            realtime: true, //是否实时更新
+            filterMode: 'filter',
+            handleIcon: 'M-9.35,34.56V42m0-40V9.5m-2,0h4a2,2,0,0,1,2,2v21a2,2,0,0,1-2,2h-4a2,2,0,0,1-2-2v-21A2,2,0,0,1-11.35,9.5Z',
+            handleStyle: {
+                color: '#14c6d3',
+                borderColor: 'transparent',
+                borderRadius: 10
+            },
+            moveHandleSize: 20,
+            moveOnMouseMove: true,
+            maxValueSpan: 7,
+            minValueSpan: 7,
+            moveHandleSize: 0,
+            brushSelect: false, //刷选功能,设为false可以防止拖动条长度改变 ************(这是一个坑)
+        },
+    ],
+    series: [
+        {
+            name: '病虫害',
+            type: 'bar',
+            stack: 'total',
+            label: {
+                show: false
+            },
+            emphasis: {
+                focus: 'series'
+            },
+            data: [1, 1, 1, 2, 2, 1, 0]
+        },
+        {
+            name: '乱砍乱伐',
+            type: 'bar',
+            stack: 'total',
+            label: {
+                show: false
+            },
+            emphasis: {
+                focus: 'series'
+            },
+            data: [1, 8, 8, 2, 6, 9, 9]
+        },
+        {
+            name: '火灾',
+            type: 'bar',
+            stack: 'total',
+            label: {
+                show: false
+            },
+            emphasis: {
+                focus: 'series'
+            },
+            data: [8, 1, 1, 6, 2, 0, 1]
+        }
+    ]
+
+}
+export default page6Char1Schema

+ 31 - 0
src/dataSchema/page5Char1Schema.js

@@ -21,6 +21,37 @@ let page5Char1Schema = {
         bottom: '20px',
         right: '24px'
     },
+    dataZoom: [
+        {
+            xAxisIndex: 0, //这里是从X轴的0刻度开始
+            show: true, //是否显示滑动条,不影响使用
+            type: 'slider', // 这个 dataZoom 组件是 slider 型 dataZoom 组件
+            startValue: 0, // 从头开始。
+            endValue: 7, // 一次性展示6个
+            height: 5, //组件高度
+            bottom: 0,
+            borderColor: 'transparent',
+            fillerColor: '#14c6d3',
+            zoomLock: true,
+            showDataShadow: false, //是否显示数据阴影 默认auto
+            backgroundColor: '#0b1511',
+            showDetail: false, //即拖拽时候是否显示详细数值信息 默认true
+            realtime: true, //是否实时更新
+            filterMode: 'filter',
+            handleIcon: 'M-9.35,34.56V42m0-40V9.5m-2,0h4a2,2,0,0,1,2,2v21a2,2,0,0,1-2,2h-4a2,2,0,0,1-2-2v-21A2,2,0,0,1-11.35,9.5Z',
+            handleStyle: {
+                color: '#14c6d3',
+                borderColor: 'transparent',
+                borderRadius: 10
+            },
+            moveHandleSize: 20,
+            moveOnMouseMove: true,
+            maxValueSpan: 7,
+            minValueSpan: 7,
+            moveHandleSize: 0,
+            brushSelect: false, //刷选功能,设为false可以防止拖动条长度改变 ************(这是一个坑)
+        },
+    ],
     tooltip: {},
     xAxis: {
         data: ['榕江县草珊瑚育苗基地', '榕江县乐乡村养殖基地'],

+ 31 - 0
src/dataSchema/page5Char2Schema.js

@@ -24,6 +24,37 @@ let page5Char2Schema = {
         bottom: '20px',
         right: '24px'
     },
+    dataZoom: [
+        {
+            xAxisIndex: 0, //这里是从X轴的0刻度开始
+            show: true, //是否显示滑动条,不影响使用
+            type: 'slider', // 这个 dataZoom 组件是 slider 型 dataZoom 组件
+            startValue: 0, // 从头开始。
+            endValue: 7, // 一次性展示6个
+            height: 5, //组件高度
+            bottom: 0,
+            borderColor: 'transparent',
+            fillerColor: '#14c6d3',
+            zoomLock: true,
+            showDataShadow: false, //是否显示数据阴影 默认auto
+            backgroundColor: '#0b1511',
+            showDetail: false, //即拖拽时候是否显示详细数值信息 默认true
+            realtime: true, //是否实时更新
+            filterMode: 'filter',
+            handleIcon: 'M-9.35,34.56V42m0-40V9.5m-2,0h4a2,2,0,0,1,2,2v21a2,2,0,0,1-2,2h-4a2,2,0,0,1-2-2v-21A2,2,0,0,1-11.35,9.5Z',
+            handleStyle: {
+                color: '#14c6d3',
+                borderColor: 'transparent',
+                borderRadius: 10
+            },
+            moveHandleSize: 20,
+            moveOnMouseMove: true,
+            maxValueSpan: 7,
+            minValueSpan: 7,
+            moveHandleSize: 0,
+            brushSelect: false, //刷选功能,设为false可以防止拖动条长度改变 ************(这是一个坑)
+        },
+    ],
     tooltip: {},
     xAxis: {
         data: ['榕江县草珊瑚育苗基地', '榕江县乐乡村养殖基地'],

+ 81 - 35
src/dataSchema/page6Char1Schema.js

@@ -1,15 +1,11 @@
 /*
  * @LastEditors: gcz
  */
-/*
- * @LastEditors: gcz
- */
 
 import themeColor from "./color"
 let page6Char1Schema = {
     title: {
-        show: true,
-        text: '事件统计(件)',
+        text: '事件统计',
         textStyle: {
             color: themeColor.mainColor,
         },
@@ -17,60 +13,110 @@ let page6Char1Schema = {
     },
     grid: {
         containLabel: true,
-        top: "20px",
+        // top: "0",
         left: '10px',
-        bottom: '20px',
+        bottom: '20',
         right: '24px'
     },
     tooltip: {
-        trigger: 'axis'
+        trigger: 'axis',
+        axisPointer: {
+            type: 'shadow'
+        }
     },
     legend: {
-        data: ['火灾', '乱砍乱伐', '病虫害'],
         textStyle: {
             color: '#fff',
         }
     },
-    calculable: true,
-    xAxis: [
-        {
-            type: 'category',
-            data: ['马鞍村', '三盘村', '灵家村', '龙子田'],
-            axisLabel: {
-                color: "rgba(255, 255, 255, 1)"
-            }
+    grid: {
+        left: '3%',
+        right: '4%',
+        bottom: '3%',
+        containLabel: true
+    },
+    yAxis: {
+        type: 'value',
+        axisLabel: {
+            color: "rgba(255, 255, 255, 1)"
         }
-    ],
-    yAxis: [
-        {
-            type: 'value',
-            axisLabel: {
-                color: "rgba(255, 255, 255, 1)"
-            }
+    },
+    xAxis: {
+        type: 'category',
+        data: ['马纳存', '三星存', '两家存', '龙子田', '腊寨存', '大黑土', '小黑土'],
+        axisLabel: {
+            color: "rgba(255, 255, 255, 1)"
         }
+    },
+    dataZoom: [
+        {
+            xAxisIndex: 0, //这里是从X轴的0刻度开始
+            show: true, //是否显示滑动条,不影响使用
+            type: 'slider', // 这个 dataZoom 组件是 slider 型 dataZoom 组件
+            startValue: 0, // 从头开始。
+            endValue: 7, // 一次性展示6个
+            height: 5, //组件高度
+            bottom: 0,
+            borderColor: 'transparent',
+            fillerColor: '#14c6d3',
+            zoomLock: true,
+            showDataShadow: false, //是否显示数据阴影 默认auto
+            backgroundColor: '#0b1511',
+            showDetail: false, //即拖拽时候是否显示详细数值信息 默认true
+            realtime: true, //是否实时更新
+            filterMode: 'filter',
+            handleIcon: 'M-9.35,34.56V42m0-40V9.5m-2,0h4a2,2,0,0,1,2,2v21a2,2,0,0,1-2,2h-4a2,2,0,0,1-2-2v-21A2,2,0,0,1-11.35,9.5Z',
+            handleStyle: {
+                color: '#14c6d3',
+                borderColor: 'transparent',
+                borderRadius: 10
+            },
+            moveHandleSize: 20,
+            moveOnMouseMove: true,
+            maxValueSpan: 7,
+            minValueSpan: 7,
+            moveHandleSize: 0,
+            brushSelect: false, //刷选功能,设为false可以防止拖动条长度改变 ************(这是一个坑)
+        },
     ],
     series: [
         {
-            name: '火灾',
+            name: '病虫害',
             type: 'bar',
-            data: [
-                2.0, 4.9, 7.0, 23.2
-            ]
+            stack: 'total',
+            label: {
+                show: false
+            },
+            emphasis: {
+                focus: 'series'
+            },
+            data: [1, 1, 1, 2, 2, 1, 0]
         },
         {
             name: '乱砍乱伐',
             type: 'bar',
-            data: [
-                2.6, 5.9, 9.0, 26.4
-            ]
+            stack: 'total',
+            label: {
+                show: false
+            },
+            emphasis: {
+                focus: 'series'
+            },
+            data: [1, 8, 8, 2, 6, 9, 9]
         },
         {
-            name: '病虫害',
+            name: '火灾',
             type: 'bar',
-            data: [
-                2.6, 1.5, 10, 3
-            ]
+            stack: 'total',
+            label: {
+                show: false
+            },
+            emphasis: {
+                focus: 'series'
+            },
+            data: [8, 1, 1, 6, 2, 0, 1]
         }
     ]
+
 }
 export default page6Char1Schema

+ 69 - 0
src/dataSchema/page6Char2Schema.js

@@ -0,0 +1,69 @@
+/*
+ * @LastEditors: gcz
+ */
+/*
+ * @LastEditors: gcz
+ */
+
+import themeColor from "./color"
+let page6Char2Schema = {
+    title: {
+        text: '事件发生频率分析',
+        show: false
+    },
+    tooltip: {
+        trigger: 'axis'
+    },
+    legend: {
+        data: ['病虫害', '火灾', '乱砍滥伐'],
+        textStyle: {
+            color: '#fff',
+        }
+    },
+    grid: {
+        left: '3%',
+        right: '24px',
+        bottom: '3%',
+        containLabel: true
+    },
+    toolbox: {
+        // feature: {
+        //     saveAsImage: {}
+        // }
+    },
+    xAxis: {
+        type: 'category',
+        boundaryGap: false,
+        data: ['一月', '二月', '三月', '四月', '五月', '六月', '七月', '八月', '九月', '十月', '十一月', '十二月'],
+        axisLabel: {
+            color: "rgba(255, 255, 255, 1)"
+        }
+    },
+    yAxis: {
+        type: 'value',
+        axisLabel: {
+            color: "rgba(255, 255, 255, 1)"
+        }
+    },
+    series: [
+        {
+            name: '病虫害',
+            type: 'line',
+            stack: 'Total',
+            data: [120, 132, 101, 134, 90, 230, 210, 132, 101, 134, 90, 230]
+        },
+        {
+            name: '火灾',
+            type: 'line',
+            stack: 'Total',
+            data: [220, 182, 191, 234, 290, 330, 310, 132, 101, 134, 90, 230]
+        },
+        {
+            name: '乱砍滥伐',
+            type: 'line',
+            stack: 'Total',
+            data: [150, 232, 201, 154, 190, 330, 410, 132, 101, 134, 90, 230]
+        }
+    ]
+}
+export default page6Char2Schema

+ 22 - 1
src/service/index.js

@@ -94,6 +94,13 @@ export const page6echarts01 = (data) =>
         prefixUrl: 'api2',
     })
 
+export const page6echarts02 = (data) =>
+    callApi({
+        url: 'event/statisVillage',
+        data,
+        prefixUrl: 'api2',
+    })
+
 export const page6numerical = (data) =>
     callApi({
         url: 'event/statis',
@@ -101,7 +108,14 @@ export const page6numerical = (data) =>
         prefixUrl: 'api2',
     })
 
-// 树种
+// 林木结构(树种)
+export const page2numerical = (data) =>
+    callApi({
+        url: 'smallClass/treeStatis',
+        data,
+        prefixUrl: 'api2',
+    })
+
 export const page2echarts01 = (data) =>
     callApi({
         url: 'smallClass/treeComp',
@@ -116,6 +130,13 @@ export const page2echarts02 = (data) =>
         prefixUrl: 'api2',
     })
 
+export const page2echarts03 = (data) =>
+    callApi({
+        url: 'smallClass/treeCount',
+        data,
+        prefixUrl: 'api2',
+    })
+
 // 林下经济
 //查询数据概况
 export const page5numerical = (data) =>

+ 182 - 11
src/views/index.vue

@@ -38,18 +38,25 @@
     </section>
 
     <section class="left-wrap" v-if="$store.state.addr.page=='treeSpecies'">
-      <MyEcharts
+      <Numerical class="left-item" :data="page2numerical" />
+      <!-- <MyEcharts
         class="left-item chart-wrap"
         mid="page2Char1"
         :option="page2Char1"
         ref="page2Char1"
-      />
+      /> -->
       <MyEcharts
         class="left-item chart-wrap"
         mid="page2Char2"
         :option="page2Char2"
         ref="page2Char2"
       />
+      <MyEcharts
+        class="left-item chart-wrap"
+        mid="page2Char3"
+        :option="page2Char3"
+        ref="page2Char3"
+      />
     </section>
 
     <!-- 林业经济 -->
@@ -79,6 +86,12 @@
         ref="page6Char1"
         :option="page6Char1"
       />
+      <MyEcharts
+        class="left-item chart-wrap"
+        mid="page6Char2"
+        ref="page6Char2"
+        :option="page6Char2"
+      />
     </section>
 
     <section class="right-wrap">
@@ -124,14 +137,17 @@ import {
   page1echarts02,
   rightScrollData,
   alarmDataApi,
+  page2numerical,
   page2echarts01,
   page2echarts02,
+  page2echarts03,
   page5numerical,
   typeSlideApi,
   page5echarts01,
   page5echarts02,
   page6numerical,
   page6echarts01,
+  page6echarts02,
   smallClassMap
 } from '../service/index';
 
@@ -140,9 +156,11 @@ import page1Char1Schema from '../dataSchema/page1Char1Schema';
 import page1Char2Schema from '../dataSchema/page1Char2Schema';
 import page2Char1Schema from '../dataSchema/page2Char1Schema';
 import page2Char2Schema from '../dataSchema/page2Char2Schema';
+import page2Char3Schema from '../dataSchema/page2Char3Schema';
 import page5Char1Schema from '../dataSchema/page5Char1Schema';
 import page5Char2Schema from '../dataSchema/page5Char2Schema';
 import page6Char1Schema from '../dataSchema/page6Char1Schema';
+import page6Char2Schema from '../dataSchema/page6Char2Schema';
 
 // import { provinceAndCityData, regionData, provinceAndCityDataPlus, regionDataPlus, CodeToText, TextToCode } from 'element-china-area-data';
 export default {
@@ -186,14 +204,17 @@ export default {
       ],
       page1Char1: page1Char1Schema,
       page1Char2: page1Char2Schema,
+      page2numerical:[],
       page2Char1: page2Char1Schema,
       page2Char2: page2Char2Schema,
+      page2Char3: page2Char3Schema,
       page5numerical: [],
       typeSlideData: [],
       page5Char1: page5Char1Schema,
       page5Char2: page5Char2Schema,
       page6numerical: [],
       page6Char1: page6Char1Schema,
+      page6Char2: page6Char2Schema,
       xiaobaninput: ''
     };
   },
@@ -265,8 +286,10 @@ export default {
         this.getPage1echarts02();
         this.getRightScrollData();
       } else if (this.$store.state.addr.page == 'treeSpecies') {
-        this.getPage2echarts01();
+        this.getPage2numerical();
+        // this.getPage2echarts01();
         this.getPage2echarts02();
+        this.getPage2echarts03();
         this.getRightScrollData();
       } else if (this.$store.state.addr.page == 'economics') {
         this.getPage5numerical();
@@ -277,6 +300,7 @@ export default {
       } else if (this.$store.state.addr.page == 'event') {
         this.getPage6numerical();
         this.getPage6echarts01();
+        this.getPage6echarts02();
         this.getAlarmData();
         this.getRightScrollData();
       }
@@ -311,6 +335,10 @@ export default {
           this.page1Char1.series[0].data = res.data.map((item) => {
             return item.number;
           });
+          //数量过小时隐藏滚动
+          if(this.page1Char1.xAxis.data.length<=7){
+            this.page1Char1.dataZoom[0].show = false
+          }
           let charUuid = this.$refs.page1Char1.mid;
           this.$refs.page1Char1.intChar(charUuid);
         })
@@ -333,6 +361,10 @@ export default {
           this.page1Char2.series[0].data = res.data.map((item) => {
             return item.number;
           });
+          //数量过小时隐藏滚动
+          if(this.page1Char2.xAxis.data.length<=7){
+            this.page1Char2.dataZoom[0].show = false
+          }
           let charUuid = this.$refs.page1Char2.mid;
           this.$refs.page1Char2.intChar(charUuid);
         })
@@ -389,6 +421,22 @@ export default {
           console.log('echarts01 err', err);
         });
     },
+    getPage2numerical() {
+      let param = {
+        cityId: this.$store.state.addr.selectCity.areaId,
+        countyId: this.$store.state.addr.selectDistrict.areaId,
+        townId: this.$store.state.addr.vuexSelectStreet.areaId,
+        smallNumber:this.xiaobaninput
+      };
+      page2numerical(param)
+        .then((res) => {
+          // console.log('res',res);
+          this.page2numerical = res.data;
+        })
+        .catch((err) => {
+          console.log('page2numerical err', err);
+        });
+    },
     getPage2echarts01() {
       let param = {
         smallNumber: this.xiaobaninput,
@@ -472,6 +520,11 @@ export default {
           // console.log(seriesList)
           this.page2Char2.series = seriesList;
 
+           //数量过小时隐藏滚动
+          if(this.page2Char2.xAxis.data.length<=7){
+            this.page2Char2.dataZoom[0].show = false
+          }
+
           let charUuid = this.$refs.page2Char2.mid;
           this.$refs.page2Char2.intChar(charUuid);
         })
@@ -479,6 +532,82 @@ export default {
           console.log('getPage2echarts02 err', err);
         });
     },
+    getPage2echarts03() {
+      let param = {
+        smallNumber: this.xiaobaninput,
+        cityId: this.$store.state.addr.selectCity.areaId,
+        countyId: this.$store.state.addr.selectDistrict.areaId,
+        townId: this.$store.state.addr.selectStreet.areaId
+      };
+      page2echarts03(param)
+        .then((res) => {
+          // console.log('res',res);
+          // this.page2Char2 = res.data;
+          //  console.log('this.page2Char2.series', this.page2Char2.series);
+
+          this.page2Char3.xAxis.data = [];
+          this.page2Char3.series = [];
+
+          const rows = res.data;
+          // console.log(rows)
+          // x坐标
+          this.page2Char3.xAxis.data = rows.map((item) => {
+            return item.areaName;
+          });
+          // console.log('x坐标',  this.page2Char2.xAxis.data)
+          // 获取所有项
+          let seriesList = rows.map((item) => {
+            return item.treeList;
+          });
+          // 数组扁平化
+          seriesList = seriesList.flat();
+          // 去重
+          let obj = {};
+          seriesList = seriesList.reduce((newArr, next) => {
+            obj[next.name] ? '' : (obj[next.name] = true && newArr.push(next));
+            return newArr;
+          }, []);
+          seriesList = seriesList.map((item) => {
+            return {
+              name: item.name,
+              type: 'bar',
+              stack: 'total',
+              label: {
+                show: false
+              },
+              emphasis: {
+                focus: 'series'
+              },
+              data: []
+            };
+          });
+          // console.log(seriesList)
+          rows.forEach((item) => {
+            seriesList.forEach((jtem, index) => {
+              let num = 0;
+              item.treeList.map((ktem) => {
+                if (ktem.name.indexOf(jtem.name) > -1) {
+                  num = ktem.value;
+                }
+              });
+              seriesList[index].data.push(num);
+            });
+          });
+          // console.log(seriesList)
+          this.page2Char3.series = seriesList;
+
+           //数量过小时隐藏滚动
+          if(this.page2Char3.xAxis.data.length<=7){
+            this.page2Char3.dataZoom[0].show = false
+          }
+
+          let charUuid = this.$refs.page2Char3.mid;
+          this.$refs.page2Char3.intChar(charUuid);
+        })
+        .catch((err) => {
+          console.log('getPage2echarts03 err', err);
+        });
+    },
 
     getPage5numerical() {
       let param = {
@@ -526,6 +655,10 @@ export default {
           this.page5Char1.series[0].data = res.data.map((item) => {
             return item.baseArea;
           });
+           //数量过小时隐藏滚动
+          if(this.page5Char1.xAxis.data.length<=7){
+            this.page5Char1.dataZoom[0].show = false
+          }
           let charUuid = this.$refs.page5Char1.mid;
           this.$refs.page5Char1.intChar(charUuid);
         })
@@ -549,6 +682,10 @@ export default {
           this.page5Char2.series[0].data = res.data.map((item) => {
             return item.number;
           });
+          //数量过小时隐藏滚动
+          if(this.page5Char2.xAxis.data.length<=7){
+            this.page5Char2.dataZoom[0].show = false
+          }
           let charUuid = this.$refs.page5Char2.mid;
           this.$refs.page5Char2.intChar(charUuid);
         })
@@ -584,18 +721,39 @@ export default {
           // console.log('res',res);
           // this.page6Char1 = res.data;
 
-          this.page6Char1.xAxis[0].data = [];
+          // this.page6Char1.xAxis[0].data = [];
+          // this.page6Char1.series[0].data = [];
+          // this.page6Char1.series[1].data = [];
+          // this.page6Char1.series[2].data = [];
+          // res.data &&
+          //   res.data.forEach((element) => {
+          //     this.page6Char1.xAxis[0].data.push(element.villageName);
+          //     this.page6Char1.series[0].data.push(element.fireCount);
+          //     this.page6Char1.series[1].data.push(element.cutCount);
+          //     this.page6Char1.series[2].data.push(element.pestCount);
+          //   });
+          this.page6Char1.xAxis.data = [];
           this.page6Char1.series[0].data = [];
           this.page6Char1.series[1].data = [];
           this.page6Char1.series[2].data = [];
-          res.data &&
-            res.data.forEach((element) => {
-              this.page6Char1.xAxis[0].data.push(element.villageName);
-              this.page6Char1.series[0].data.push(element.fireCount);
-              this.page6Char1.series[1].data.push(element.cutCount);
-              this.page6Char1.series[2].data.push(element.pestCount);
-            });
 
+          const rows = res.data;
+          // console.log(rows)
+          // x坐标
+          this.page6Char1.xAxis.data = rows.map((item) => {
+            return item.villageName;
+          });
+          rows.forEach(element => {
+            this.page6Char1.series[0].data.push(element.pestCount);
+            this.page6Char1.series[1].data.push(element.cutCount);
+            this.page6Char1.series[2].data.push(element.fireCount);      
+          });
+          // console.log('x坐标',  this.page6Char1.xAxis.data)
+          
+          //数量过小时隐藏滚动
+          if(this.page6Char1.xAxis.data.length<=7){
+            this.page6Char1.dataZoom[0].show = false
+          }
           let charUuid = this.$refs.page6Char1.mid;
           this.$refs.page6Char1.intChar(charUuid);
         })
@@ -603,6 +761,19 @@ export default {
           console.log('getPage6echarts01 err', err);
         });
     },
+    getPage6echarts02(){
+      let param = {
+        cityId: this.$store.state.addr.selectCity.areaId,
+        countyId: this.$store.state.addr.selectDistrict.areaId,
+        townId: this.$store.state.addr.selectStreet.areaId
+      };
+      page6echarts02(param).then(res=>{
+        console.log('page6echarts02 res', res);
+
+      }).catch((err) => {
+          console.log('page6echarts02 err', err);
+      });
+    },
 
     xiaobansearch() {
       // console.log('xiaobansearch');