数字水利 水库资源、涉水桥涵资源

src/api/bigdata.js

@@ -201,6 +201,14 @@ export function getEventTypeYearStatistics() {
   })
 }
 
+//加强针接种情况年统计
+export function getInjectionYear() {
+  return request({
+    url: '/center-resources/VisuForestCloudBigDataController/getInjectionYear',
+    method: 'get'
+  })
+}
+
 
 
 

src/views/bigdata/bigdata.vue

@@ -157,22 +157,16 @@
         </div>
         <div class="b-con mg-b-20">
           <div class="b-tit"><img src="@/assets/images/integrated/bigdata-tit-icon.png">
-            <span>火险高发统计分析</span>
+            <span>监测分析年统计</span>
           </div>
-          <chartFireIncidence></chartFireIncidence>
+          <chartInjectionYear></chartInjectionYear>
         </div>
-        <div class="b-con mg-b-20 b-49">
+        <div class="b-con mg-b-20">
           <div class="b-tit"><img src="@/assets/images/integrated/bigdata-tit-icon.png">
-            <span>火灾等级统计分析</span>
+            <span>监测分析日统计</span>
           </div>
           <chartFireGrade></chartFireGrade>
         </div>
-        <div class="b-con mg-b-20 b-49">
-          <div class="b-tit"><img src="@/assets/images/integrated/bigdata-tit-icon.png">
-            <span>火灾种类统计分析</span>
-          </div>
-          <chartFireType></chartFireType>
-        </div>
       </div>
     </div>
 
@@ -203,6 +197,8 @@ import chartPitG5 from './chart-farmtype' //21 偷钓偷捕事件分析、、
 import chartPitG6 from './chart-waterTotal' //22 分析、、
 
 import chartFireTypeYear from './chart-fireTypeYear.vue' //25 按时间、事件类别统计事件数据（年度、月份、四类事件数量）
+import chartInjectionYear from './chart-injectionYear.vue' //26 监测分析年统计
+// import chartInjectionYear from './chart-injectionYear.vue' //27 监测分析月统计
 
 import {getRlt} from '@/api/bigdata'
 import {
@@ -231,6 +227,7 @@ export default {
     chartPitG5,
     // chartPitG6,
     chartFireTypeYear,
+    chartInjectionYear,
   },
   data() {
 

src/views/bigdata/chart-injectionYear.vue

@@ -0,0 +1,308 @@
+<!-- **************************************NO.18 消防*************************************** -->
+<template>
+	<div class="chart-container">
+		<div id="injectionYear" style="width: 100%; height:25vh; ">
+		</div>
+	</div>
+</template>
+
+<script>
+  import { getEventTypeYearStatistics } from '@/api/bigdata'
+	import * as echarts from 'echarts';
+	export default {
+		name: 'chart-injectionYear',
+		data() {
+			return {
+				count: 0
+			}
+		},
+		mounted() {
+			this.getInjectionYear();
+		},
+
+		methods: {
+      getInjectionYear() {
+        let year = new Date().getFullYear();
+        let param = {year: year};
+        // const yearArr = [2021, 2022, 2023, 2024, 2025];
+        const yearArr = [year - 2, year - 1, year, year + 1, year + 2];
+        // let currentIndex = 1;//默认选择年份
+        let currentIndex = 3;//默认选择年份
+        let currentYear = yearArr[currentIndex];//默认年份
+        // getInjectionYear(param).then(res => {
+        //   this.myEcharts(res);
+        // })
+        let res = {};
+        let data = [[]];
+        data[0] = [{"jdName":"a", "year":"2021"},{"jdName":"2021"},{"jdName":"2021"},{"jdName":"2021"}]
+        data[1] = [{"jdName":"a", "year":"2022"},{"jdName":"2022"},{"jdName":"2022"},{"jdName":"2022"}]
+        data[2] = [{"jdName":"a", "year":"2023"},{"jdName":"2023"},{"jdName":"2023"},{"jdName":"2023"}]
+        data[3] = [{"jdName":"a", "year":"2024"},{"jdName":"2024"},{"jdName":"2024"},{"jdName":"2024"}]
+        data[4] = [{"jdName":"a", "year":"2025"},{"jdName":"2025"},{"jdName":"2025"},{"jdName":"2025"}]
+        res.data = data;
+        this.myEcharts(res);
+      },
+      myEcharts(res) {
+        const seriesValue = [];
+        const result = res.data;
+        const jdNames = new Array();
+        for (let i = 0; i < result[0].length; i++) {
+          jdNames.push(result[0][i].jdName);
+        }
+        const years = new Array();
+        for (let i = 0; i < result.length; i++) {
+          years.push(result[i][0].year);
+        }
+
+        const jieDao_yearData_2D = [];
+        for (let i = 0; i < jdNames.length; i++) {
+          const jdYearData = [];
+          for (let j = 0; j < years.length; j++) {
+            const monthData = [];
+            // monthData.push(result[j][i].month1);
+            // monthData.push(result[j][i].month2);
+            // monthData.push(result[j][i].month3);
+            // monthData.push(result[j][i].month4);
+            // monthData.push(result[j][i].month5);
+            // monthData.push(result[j][i].month6);
+            // monthData.push(result[j][i].month7);
+            // monthData.push(result[j][i].month8);
+            // monthData.push(result[j][i].month9);
+            // monthData.push(result[j][i].month10);
+            // monthData.push(result[j][i].month11);
+            // monthData.push(result[j][i].month12);
+            //
+            monthData.push(1);
+            monthData.push(3);
+            monthData.push(5);
+            monthData.push(7);
+            monthData.push(9);
+            monthData.push(12);
+            monthData.push(6);
+            monthData.push(6);
+            monthData.push(6);
+            monthData.push(3);
+            monthData.push(2);
+            monthData.push(1);
+            jdYearData.push(monthData);
+          }
+          jieDao_yearData_2D.push(jdYearData);
+          const value = {
+            name: jdNames[i],
+            type: 'line',
+            areaStyle: {
+              opacity: 0.8,
+              color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+                {
+                  offset: 0,
+                  color: 'rgb(148, 99, 66)'
+                },
+                {
+                  offset: 1,
+                  color: 'rgb(242, 200, 34)'
+                }
+              ])
+            },
+          }
+          seriesValue.push(value);
+        }
+        const data = ['1月', '2月', '3月', '4月', '5月', '6月', '7月', '8月', '9月', '10月', '11月', '12月'];
+
+        const myChart = echarts.init(document.getElementById("injectionYear"));
+        // 点击方法
+        myChart.on("click", function (e) {
+          if (e.componentType == "timeline") {//点击了时间轴
+            currentYear = e.name;
+          } else {
+            let currentMonth = e.dataIndex + 1;
+            _this.openDialog_jqzjzqktj(currentYear, currentMonth);
+          }
+        });
+        //timechange方法
+        myChart.on('timelinechanged', (timeLineObj) => {
+          currentYear = yearArr[timeLineObj.currentIndex];
+        });
+
+        const dataMap = {};
+        const series = [];
+        for (let k = 0; k < jieDao_yearData_2D.length; k++) {
+          dataMap.dataJd = dataFormatter({
+            //max : 60000,
+            2025: jieDao_yearData_2D[k][years.length - 1],
+            2024: jieDao_yearData_2D[k][years.length - 2],
+            2023: jieDao_yearData_2D[k][years.length - 3],
+            2022: jieDao_yearData_2D[k][years.length - 4],
+            2021: jieDao_yearData_2D[k][years.length - 5],
+          });
+          series.push(dataMap.dataJd)
+        }
+
+        const options = new Array();
+
+        for (let i = 0; i < years.length; i++) {
+          const zhengti = {};
+          zhengti.title = {text: years[i] + '年加强针接种情况'};
+          const optionSeries = [];
+          for (let j = 0; j < series.length; j++) {
+            optionSeries.push({data: series[j][years[i]]})
+          }
+          zhengti.series = optionSeries;
+          options.push(zhengti);
+        }
+
+        const option = {
+          baseOption: {
+            timeline: {
+              axisType: 'category',
+              lineStyle: {
+                show: true,
+                color: '#00cdef',
+                width: 2,
+                padding: 0
+              },
+              left: 20,
+              right: 20,
+              checkpointStyle: {
+                color: '#ffff00',
+                borderStyle: '#ff9900',
+              },
+              controlStyle: {
+                color: '#00cdef',
+                borderColor: '#00cdef',
+              },
+              autoPlay: false,
+              currentIndex: currentIndex,
+              playInterval: 1000,
+              data: [
+                years[0],
+                years[1],
+                years[2],
+                years[3],
+                years[4]
+              ],
+              emphasis: {
+                controlStyle: {
+                  color: '#ff9900',
+                  borderColor: '#ff9900',
+                },
+              },
+              label: {
+                color: '#00cdef',
+                emphasis: {
+                  color: '#ff9900'
+                },
+                formatter: function (s) {
+                  return new Date(s).getFullYear();
+                }
+              }
+            },
+            title: {
+              top: 10,
+              left: 20,
+              textStyle: {
+                color: '#00cdef'
+              }
+            },
+            tooltip: {},
+            calculable: true,
+            grid: {
+              top: 80,
+              bottom: 100,
+              tooltip: {
+                trigger: 'axis',
+                axisPointer: {
+                  type: 'shadow',
+                  label: {
+                    show: true,
+                    formatter: function (params) {
+                      return params.value.replace('\n', '');
+                    }
+                  }
+                }
+              }
+            },
+            xAxis: [
+              {
+                type: 'category',
+                axisLabel: {interval: 0},
+                data: data,
+                axisLabel: {
+                  color: '#00cdef'
+                },
+                axisLine: {
+                  show: true,
+                  lineStyle: {
+                    color: '#00cdef'
+                  }
+                },
+                splitLine: {
+                  show: false
+                },
+              },
+            ],
+            yAxis: [
+              {
+                type: 'value',
+                name: '接种针数',
+                axisLabel: {
+                  show: true,
+                  color: '#00cdef'
+                },
+                axisLine: {
+                  show: true,
+                  lineStyle: {
+                    color: '#00cdef'
+                  }
+                },
+                splitLine: {
+                  show: true,
+                  lineStyle: {
+                    color: '#0b3747'
+                  }
+                },
+              }
+            ],
+            series: seriesValue
+          },
+          options: options
+        };
+        console.log(option);
+        if (option && typeof option === 'object') {
+          myChart.setOption(option);
+        }
+      }
+    },
+	}
+  function dataFormatter(obj) {
+    // prettier-ignore
+    const pList = ['1月', '2月', '3月', '4月', '5月', '6月', '7月', '8月', '9月', '10月', '11月', '12月'];
+    let temp;
+    for (let year = years[0]; year <= years[years.length - 1]; year++) {
+      let max = 0;
+      let sum = 0;
+      temp = obj[year];
+      for (let i = 0, l = temp.length; i < l; i++) {
+        max = Math.max(max, temp[i]);
+        sum += temp[i];
+        obj[year][i] = {
+          name: pList[i],
+          value: temp[i]
+        };
+      }
+      obj[year + 'max'] = Math.floor(max / 100) * 100;
+      obj[year + 'sum'] = sum;
+    }
+    return obj;
+  }
+</script>
+
+<style rel="stylesheet/scss" lang="scss" scoped>
+	.chart-container {
+		width: 100%;
+		height: auto;
+		position: relative;
+		padding-bottom: 10px;
+		display: flex;
+		flex-direction: column;
+	}
+</style>