数据分析报警日志管理页面创建及接口调试

src/views/abnormalAlarm/alarmCenter/alarmHistory/index.vue

@@ -188,7 +188,7 @@ export default {
       this.alarmBar = echarts.init(document.getElementById("alarmChartBar"))
       let options = {
         grid: {
-          left: '0%',
+          left: '12',
           right: '0%',
           bottom: '15',
           top:15,

src/views/abnormalAlarm/analysisMonitor/alarmAnalysis/index.vue

@@ -0,0 +1,312 @@
+<template>
+  <div style="height: 100%;">
+    <SearchBar type="alarmAnalysis" @search="handleSearch"></SearchBar>
+    <div class="chart-layout" id="analysisChartBar"></div>
+    <div class="chart-box">
+      <div class="chart-box-left">
+        <BoxTitle title="Station Alarm number"></BoxTitle>
+        <div class="chart-box-left-bar" id="chartLeft"></div>
+      </div>
+      <div class="chart-box-right">
+        <BoxTitle title="Anaysis Sources Alarms"></BoxTitle>
+        <div class="chart-box-right-pie" id="chartRight"></div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+import dateFormat from '@/components/jeecg/JEasyCron/format-date'
+import SearchBar from '../../components/searchBar';
+import BoxTitle from '../../components/boxTitle.vue';
+import { getAction, postAction } from '@/api/manage'
+import * as echarts from 'echarts'
+export default {
+  components: {
+    SearchBar,
+    BoxTitle
+  },
+  data() {
+    return {
+      xData: [],
+      yData: [],
+      xData_left: [],
+      yData_left: [],
+      pieData: [],
+      pieColors:["#00bcd4","#14b2a3","#97b94b","#47b55d"],
+      pieTotal: 0,
+    }
+  },
+  mounted () {
+    this.handleSearch({startDate:dateFormat(new Date(), 'yyyy-MM-dd'),endDate:dateFormat(new Date(), 'yyyy-MM-dd')})
+  },
+  methods: {
+    handleSearch({ startDate, endDate, types }) {
+      this.paramsArg = {
+        startDate,
+        endDate,
+        types
+      }
+      this.getAnalysisLogBar({ startDate, endDate })
+      this.getStationNum({ startDate, endDate })
+      this.getAnalysisSource({ startDate, endDate })
+    },
+    getAnalysisLogBar(obj) {
+      let params = {
+        startDate:obj.startDate,
+        endDate:obj.endDate,
+      }
+      getAction("/alarmAnalysisLog/byTime", params).then(res => {
+        if (res.success) {
+          this.xData = res.result.xData
+          this.yData = res.result.yData
+          this.drawAnalysis_bar()
+        } else {
+          this.$message.warning("This operation fails. Contact your system administrator")
+        }
+      })
+    },
+    getStationNum(obj) {
+      let params = {
+        startDate:obj.startDate,
+        endDate:obj.endDate,
+      }
+      getAction("/alarmAnalysisLog/byStatoin", params).then(res => {
+        if (res.success) {
+          this.xData_left = res.result.xData
+          this.yData_left = res.result.yData
+          this.drawLeftChart()
+        } else {
+          this.$message.warning("This operation fails. Contact your system administrator")
+        }
+      })
+    },
+    getAnalysisSource(obj) {
+      let params = {
+        startDate:obj.startDate,
+        endDate:obj.endDate,
+      }
+      getAction("/alarmAnalysisLog/bySource", params).then(res => {
+        if (res.success) {
+          this.pieData = res.result.pieData
+          this.pieTotal = res.result.pieTotal
+          this.drawRightChart()
+        } else {
+          this.$message.warning("This operation fails. Contact your system administrator")
+        }
+      })
+    },
+    drawAnalysis_bar() {
+      let myChart = echarts.init(document.getElementById("analysisChartBar"))
+      let options = {
+        grid: {
+          left: '12',
+          right: '0%',
+          bottom: '15',
+          top:15,
+          containLabel: true
+        },
+        xAxis: {
+          type: 'category',
+          axisTick: {
+            show:false
+          },
+          axisLine: {
+            lineStyle: {
+              color: "rgba(119, 181, 213, 0.5)"
+            }
+          },
+          axisLabel: {
+            color: "rgba(173, 230, 238, 1)"
+          },
+          data: this.xData
+        },
+        yAxis: {
+          type: 'value',
+          axisLine: {
+            show:true,
+            lineStyle: {
+              color: "rgba(119, 181, 213, 0.5)"
+            }
+          },
+          splitLine: {
+            show: true,
+            lineStyle: {
+              color: "rgba(119, 181, 213, 0.2)"
+            }
+          },
+          axisLabel: {
+            color: "rgba(173, 230, 238, 1)"
+          },
+        },
+        series: [
+          {
+            type: 'bar',
+            barMaxWidth: 30,
+            itemStyle: {
+              color: "#b87b1b"
+            },
+            data: this.yData,
+          }
+        ]
+      }
+      myChart.setOption(options)
+      window.addEventListener("resize", function () {
+        myChart.resize();
+      });
+    },
+    drawLeftChart() {
+      let myChart = echarts.init(document.getElementById("chartLeft"))
+      let options = {
+        grid: {
+          left: '12',
+          right: '0%',
+          bottom: '15',
+          top:15,
+          containLabel: true
+        },
+        xAxis: {
+          type: 'category',
+          axisTick: {
+            show:false
+          },
+          axisLine: {
+            lineStyle: {
+              color: "rgba(119, 181, 213, 0.5)"
+            }
+          },
+          axisLabel: {
+            color: "rgba(173, 230, 238, 1)"
+          },
+          data: this.xData_left
+        },
+        yAxis: {
+          type: 'value',
+          axisLine: {
+            show:true,
+            lineStyle: {
+              color: "rgba(119, 181, 213, 0.5)"
+            }
+          },
+          splitLine: {
+            show: true,
+            lineStyle: {
+              color: "rgba(119, 181, 213, 0.2)"
+            }
+          },
+          axisLabel: {
+            color: "rgba(173, 230, 238, 1)"
+          },
+        },
+        series: [
+          {
+            type: 'bar',
+            barMaxWidth: 30,
+            itemStyle: {
+              color: "#2e83cc"
+            },
+            data: this.yData_left,
+          }
+        ]
+      }
+      myChart.setOption(options)
+      window.addEventListener("resize", function () {
+        myChart.resize();
+      });
+    },
+    drawRightChart() {
+      let myChart = echarts.init(document.getElementById("chartRight"))
+      let options = {
+        graphic: [
+          {
+            type: "text",
+            left: "center",
+            top: "40%",
+            style: {
+              text: this.pieTotal,
+              textAlign: "center",
+              fill: "#ffffff",
+              font: '32px "MicrogrammaD-MediExte"'
+            }
+          },
+          {
+            type: "text",
+            left: "center",
+            top: "50%",
+            style: {
+              text: "Alarm Total",
+              textAlign: "center",
+              fill: "#ade6ee",
+              font: '22px "ArialMT"'
+            }
+          },
+        ],
+        series: [
+          {
+            name: 'Access From',
+            type: 'pie',
+            radius: ['50%', '75%'],
+            data: this.pieData.map((item, index) => {
+                item.label = { 
+                    color: this.pieColors[index]
+                }
+                return item;
+            }),
+            itemStyle: {
+              borderColor: '#02282b',
+              borderWidth: 5,
+              color: (params) => {
+                  var index = params.dataIndex;
+                  return this.pieColors[index];
+              }
+            },
+            label:{
+              formatter:'{q|{b}}\n{q|{c}} {q|({d})%}',
+              rich: {
+                q: {
+                  fontSize: 16,
+                  fontFamily: 'ArialMT',
+                  lineHeight: 22
+                },
+              }
+            },
+          }
+        ]
+      }
+      myChart.setOption(options)
+      window.addEventListener("resize", function () {
+        myChart.resize();
+      });
+    },
+  },
+}
+</script>
+
+<style lang="less" scoped>
+.chart-layout{
+  height: 400px;
+  margin-left: 20px;
+}
+.chart-box{
+  height: calc(100% - 450px);
+  margin-left: 20px;
+  display: flex;
+  justify-content: space-between;
+  &-left{
+    width: calc(100% - 545px);
+    height: 100%;
+    &-bar{
+      width: 100%;
+      height: calc(100% - 40px);
+    }
+  }
+  &-right{
+    width: 525px;
+    height: 100%;
+    &-pie{
+      width: 100%;
+      height: calc(100% - 40px);
+    }
+  }
+}
+</style>

src/views/abnormalAlarm/analysisMonitor/avgNuclide/index.vue

@@ -10,7 +10,6 @@
         <a-col flex="380px">
           <span class="item-label">Cacl date</span>
           <a-range-picker
-            dropdownClassName="asd"
             :default-value="[moment(queryParams.startDate), moment(queryParams.endDate)]"
             @change="onRangeDateChange" 
           />

src/views/abnormalAlarm/components/searchBar.vue

@@ -28,7 +28,7 @@
           </a-select>
         </a-form-model-item>
       </a-col>
-      <a-col flex="310px" v-if="type!=='alarmCenter' && type!=='analysisMonitor'">
+      <a-col flex="310px" v-if="type!=='alarmCenter' && type!=='analysisMonitor'&& type!=='alarmAnalysis'">
         <a-form-model-item label="Name">
           <a-select 
             :value="queryParams.names"