|
|
@@ -0,0 +1,888 @@
|
|
|
+<template>
|
|
|
+ <a-card :bordered="false">
|
|
|
+ <div class="table-page-search-wrapper">
|
|
|
+ <a-form layout="inline" @keyup.enter.native="submit">
|
|
|
+ <a-row :gutter="24">
|
|
|
+ <a-col :xl="6" :lg="7" :md="8" :sm="24">
|
|
|
+ <a-form-item label="年月">
|
|
|
+ <a-month-picker v-model="queryParams.date1" placeholder="选择年月" style="width:100%;" value-format="yyyy-MM"></a-month-picker>
|
|
|
+ </a-form-item>
|
|
|
+ </a-col>
|
|
|
+ <a-col :xl="6" :lg="7" :md="8" :sm="24">
|
|
|
+ <span style="float: left;overflow: hidden;" class="table-page-search-submitButtons">
|
|
|
+ <a-button type="primary" @click="submit" icon="search">查询</a-button>
|
|
|
+ </span>
|
|
|
+ </a-col>
|
|
|
+ </a-row>
|
|
|
+ </a-form>
|
|
|
+ </div>
|
|
|
+ <!-- <a-form :inline="true" class="demo-form-inline">
|
|
|
+ <a-form-item label="年月">
|
|
|
+ <j-date
|
|
|
+ v-model="queryParams.date1"
|
|
|
+ placeholder="选择年月">
|
|
|
+ </j-date>
|
|
|
+ </a-form-item>
|
|
|
+ <a-form-item>
|
|
|
+ <a-button type="primary" @click="submit">查询</a-button>
|
|
|
+ </a-form-item>
|
|
|
+ </a-form> -->
|
|
|
+ <!-- 报警对比图 -->
|
|
|
+ <div class="area-comp">
|
|
|
+ <!-- 上 -->
|
|
|
+ <div class="left-contianer">
|
|
|
+ <div class="common-container top">
|
|
|
+ <div class="common-title">报警统计</div>
|
|
|
+ <div class="common-box box">
|
|
|
+ <div class="num-box">
|
|
|
+ <div class="num">{{alarmStatistics.month}}</div>
|
|
|
+ <div class="text">当月报警数</div>
|
|
|
+ </div>
|
|
|
+ <div class="num-box">
|
|
|
+ <div class="num">{{alarmStatistics.year}}</div>
|
|
|
+ <div class="text">当年报警数</div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div class="common-container center">
|
|
|
+ <div class="common-title">信息统计</div>
|
|
|
+ <div class="common-box box">
|
|
|
+ <div class="num-box" v-for="(item, index) in chartinfo.levelStatistics" :key="index">
|
|
|
+ <div class="num">{{item.howManyTimes}}</div>
|
|
|
+ <div class="text">{{item.equipmentname}}</div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div class="common-container ranking">
|
|
|
+ <div class="common-title">报警排名</div>
|
|
|
+ <div class="common-box2" ref="rankingChart" />
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div class="right-container">
|
|
|
+ <div class="top">
|
|
|
+ <div class="common-container top-zhe">
|
|
|
+ <div class="common-title">近两年报警对比图</div>
|
|
|
+ <div class="common-box" ref="duibiChart" />
|
|
|
+ </div>
|
|
|
+ <div class="common-container top-bing">
|
|
|
+ <div class="common-title">报警类型占比</div>
|
|
|
+ <div class="common-box" ref="bingChart" />
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div class="common-container bottom">
|
|
|
+ <div class="common-title">报警趋势散点图</div>
|
|
|
+ <div class="common-box" ref="qushiChart" />
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </a-card>
|
|
|
+</template>
|
|
|
+
|
|
|
+<script>
|
|
|
+import * as echarts from 'echarts';
|
|
|
+import { comp } from '@/api/api'
|
|
|
+import { postAction, getAction } from '@/api/manage'
|
|
|
+
|
|
|
+export default {
|
|
|
+ name: 'alarmScreen',
|
|
|
+ data () {
|
|
|
+ return {
|
|
|
+ // 选择器参数接收
|
|
|
+ options: [],
|
|
|
+ // 返回的图表数据
|
|
|
+ chartinfo: [],
|
|
|
+ year: '',
|
|
|
+ month: '',
|
|
|
+ props: { multiple: true, value: "id", label: "label" },
|
|
|
+ // 查询参数
|
|
|
+ queryParams: {
|
|
|
+ date1: '',
|
|
|
+ list:[]
|
|
|
+ },
|
|
|
+ alarmType: [],
|
|
|
+ alarmTypeNum: [],
|
|
|
+ alarmStatistics: {
|
|
|
+ month: 0,
|
|
|
+ year: 0,
|
|
|
+ },
|
|
|
+ }
|
|
|
+ },
|
|
|
+ created () {
|
|
|
+ this.getYearMonth();
|
|
|
+ },
|
|
|
+ mounted () {
|
|
|
+ // echarts自适应
|
|
|
+ window.addEventListener("resize", () =>{
|
|
|
+ this.myChart1.resize();
|
|
|
+ this.myChart2.resize();
|
|
|
+ this.myChart3.resize();
|
|
|
+ this.myChart4.resize();
|
|
|
+ });
|
|
|
+ this.$nextTick(() => {
|
|
|
+ })
|
|
|
+ },
|
|
|
+ methods: {
|
|
|
+ formatYearMonth(year, month){
|
|
|
+ return `${year.toString().padStart(4, '0')}-${month.toString().padStart(2, '0')}`;
|
|
|
+ },
|
|
|
+ getYearMonth() {
|
|
|
+ const currentYear = new Date().getFullYear();
|
|
|
+ const currentMonth = new Date().getMonth() + 1;
|
|
|
+ const yearMonth = this.formatYearMonth(currentYear, currentMonth);
|
|
|
+ this.queryParams.date1 = yearMonth
|
|
|
+ this.getList();
|
|
|
+ // 第一版
|
|
|
+ // yeamonth().then(response => {
|
|
|
+ // this.queryParams.date1 = response.msg;
|
|
|
+ // this.getList();
|
|
|
+ // });
|
|
|
+ // 第二版
|
|
|
+ // getAction(`/alarm/statistics/yeamonth`).then(response=>{
|
|
|
+ // this.queryParams.date1 = response.msg;
|
|
|
+ // // this.getList();
|
|
|
+ // })
|
|
|
+ },
|
|
|
+ // 查询
|
|
|
+ submit() {
|
|
|
+ if (this.queryParams.date1.length == 0) {
|
|
|
+ this.$message({
|
|
|
+ message: "请先选择年月",
|
|
|
+ type: "warning",
|
|
|
+ });
|
|
|
+ this.option;
|
|
|
+ return false;
|
|
|
+ }
|
|
|
+ console.log(this.queryParams)
|
|
|
+ this.isShow = false;
|
|
|
+ this.getList();
|
|
|
+ },
|
|
|
+ // 获得数据
|
|
|
+ getList(){
|
|
|
+ this.listLoading = true;
|
|
|
+ const newArr = [1,2];
|
|
|
+ let param = {
|
|
|
+ ids: newArr,
|
|
|
+ yearmonth: this.queryParams.date1
|
|
|
+ };
|
|
|
+ postAction(`/tpmMessageAlarm/tpmMessageAlarm/getalarminfo`,param).then(response=>{
|
|
|
+ console.log(66,response)
|
|
|
+ this.chartinfo = response.result;
|
|
|
+
|
|
|
+ // 报警类型
|
|
|
+ this.alarmType = [];
|
|
|
+ this.alarmTypeNum = [];
|
|
|
+ for (let i in this.chartinfo.alarmType){
|
|
|
+ this.alarmType.push(this.chartinfo.alarmType[i].equipmentname);
|
|
|
+ this.alarmTypeNum.push(0);
|
|
|
+ }
|
|
|
+
|
|
|
+ // 报警统计
|
|
|
+ for (let i in this.chartinfo.alarmStatistics) {
|
|
|
+ if (this.chartinfo.alarmStatistics[i].type == "year") {
|
|
|
+ this.alarmStatistics.year = this.chartinfo.alarmStatistics[i].howManyTimes;
|
|
|
+ }
|
|
|
+ else {
|
|
|
+ this.alarmStatistics.month = this.chartinfo.alarmStatistics[i].howManyTimes;
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ // 图表展示
|
|
|
+ this.initRankingChart()
|
|
|
+ this.initDuibiChartChart()
|
|
|
+ this.initBingChart()
|
|
|
+ this.intiQushiChart()
|
|
|
+ })
|
|
|
+ },
|
|
|
+ // 报警排名
|
|
|
+ initRankingChart(){
|
|
|
+ this.myChart1 = echarts.init(this.$refs.rankingChart)
|
|
|
+ var option;
|
|
|
+ for (let j in this.alarmType) {
|
|
|
+ for (let i in this.chartinfo.alarmRank) {
|
|
|
+ if (this.alarmType[j] == this.chartinfo.alarmRank[i].equipmentname){
|
|
|
+ this.alarmTypeNum[j] = this.chartinfo.alarmRank[i].howManyTimes;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ option = {
|
|
|
+ grid: {
|
|
|
+ left: "2%",
|
|
|
+ right: "2%",
|
|
|
+ bottom: "0",
|
|
|
+ top: "2%",
|
|
|
+ containLabel: true,
|
|
|
+ },
|
|
|
+ tooltip: {
|
|
|
+ trigger: "axis",
|
|
|
+ axisPointer: {
|
|
|
+ type: "none",
|
|
|
+ },
|
|
|
+ formatter: function (params) {
|
|
|
+ return (
|
|
|
+ params[0].name +
|
|
|
+ "<br/>" +
|
|
|
+ "<span style='display:inline-block;margin-right:5px;border-radius:10px;width:9px;height:9px;background-color:rgba(36,207,233,0.9)'></span>" +
|
|
|
+ params[0].seriesName +
|
|
|
+ " : " + params[0].value +
|
|
|
+ " 次<br/>"
|
|
|
+ );
|
|
|
+ },
|
|
|
+ },
|
|
|
+ xAxis: {
|
|
|
+ show: false,
|
|
|
+ type: "value",
|
|
|
+ },
|
|
|
+ yAxis: [
|
|
|
+ {
|
|
|
+ type: "category",
|
|
|
+ inverse: true,
|
|
|
+ axisLabel: {
|
|
|
+ show: true,
|
|
|
+ textStyle: {
|
|
|
+ color: "#333",
|
|
|
+ },
|
|
|
+ },
|
|
|
+ splitLine: {
|
|
|
+ show: false,
|
|
|
+ },
|
|
|
+ axisTick: {
|
|
|
+ show: false,
|
|
|
+ },
|
|
|
+ axisLine: {
|
|
|
+ show: false,
|
|
|
+ },
|
|
|
+ data: this.alarmType,
|
|
|
+ },
|
|
|
+ {
|
|
|
+ type: "category",
|
|
|
+ inverse: true,
|
|
|
+ axisTick: "none",
|
|
|
+ axisLine: "none",
|
|
|
+ show: true,
|
|
|
+ axisLabel: {
|
|
|
+ textStyle: {
|
|
|
+ color: "#333",
|
|
|
+ fontSize: "12",
|
|
|
+ },
|
|
|
+ formatter: function (value) {
|
|
|
+ return (value).toLocaleString() + "次";
|
|
|
+ },
|
|
|
+ },
|
|
|
+ data: this.alarmTypeNum,
|
|
|
+ },
|
|
|
+ ],
|
|
|
+ series: [
|
|
|
+ {
|
|
|
+ name: "报警",
|
|
|
+ type: "bar",
|
|
|
+ zlevel: 1,
|
|
|
+ itemStyle: {
|
|
|
+ normal: {
|
|
|
+ barBorderRadius: 30,
|
|
|
+ color: new echarts.graphic.LinearGradient(0, 0, 1, 0, [
|
|
|
+ {
|
|
|
+ offset: 0,
|
|
|
+ color: "rgb(92,141,253,1)",
|
|
|
+ // color: "rgb(57,89,255,1)",
|
|
|
+ },
|
|
|
+ {
|
|
|
+ offset: 1,
|
|
|
+ color: "rgb(50,189,209,1)",
|
|
|
+ // color: "rgb(46,200,207,1)",
|
|
|
+ },
|
|
|
+ ]),
|
|
|
+ },
|
|
|
+ },
|
|
|
+ barWidth: 20,
|
|
|
+ data: this.alarmTypeNum,
|
|
|
+ },
|
|
|
+ {
|
|
|
+ name: "背景",
|
|
|
+ type: "bar",
|
|
|
+ barWidth: 20,
|
|
|
+ barGap: "-100%",
|
|
|
+ // data: [50, 50, 50, 50, 50, 50, 50, 50, 50, 50],
|
|
|
+ itemStyle: {
|
|
|
+ normal: {
|
|
|
+ color: "#eee",
|
|
|
+ barBorderRadius: 30,
|
|
|
+ },
|
|
|
+ },
|
|
|
+ },
|
|
|
+ ],
|
|
|
+ };
|
|
|
+ option && this.myChart1.setOption(option);
|
|
|
+ },
|
|
|
+ // 近两年报警对比图
|
|
|
+ initDuibiChartChart(){
|
|
|
+ this.myChart2 = echarts.init(this.$refs.duibiChart)
|
|
|
+ var option;
|
|
|
+
|
|
|
+ // Generate data
|
|
|
+ var lastData =[];
|
|
|
+ var nowData = [];
|
|
|
+ var allData = [];
|
|
|
+ for (let j in this.alarmType) {
|
|
|
+ lastData.push(0)
|
|
|
+ nowData.push(0)
|
|
|
+ allData.push(0)
|
|
|
+ for (let i in this.chartinfo.alarmTwoYear) {
|
|
|
+ if (this.chartinfo.alarmTwoYear[i].type == "lastyear" &&
|
|
|
+ this.chartinfo.alarmTwoYear[i].equipmentname == this.alarmType[j]) {
|
|
|
+ lastData[j] = this.chartinfo.alarmTwoYear[i].howManyTimes;
|
|
|
+ }
|
|
|
+ else if (this.chartinfo.alarmTwoYear[i].type == "thisyear" &&
|
|
|
+ this.chartinfo.alarmTwoYear[i].equipmentname == this.alarmType[j]) {
|
|
|
+ nowData[j] = this.chartinfo.alarmTwoYear[i].howManyTimes;
|
|
|
+ }
|
|
|
+ else if (this.chartinfo.alarmTwoYear[i].type == "all" &&
|
|
|
+ this.chartinfo.alarmTwoYear[i].equipmentname == this.alarmType[j]) {
|
|
|
+ allData[j] = this.chartinfo.alarmTwoYear[i].howManyTimes;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ // option
|
|
|
+ option = {
|
|
|
+ tooltip: {
|
|
|
+ trigger: "axis",
|
|
|
+ axisPointer: {
|
|
|
+ type: "shadow",
|
|
|
+ textStyle: {
|
|
|
+ color: "#fff",
|
|
|
+ },
|
|
|
+ },
|
|
|
+ },
|
|
|
+ grid: {
|
|
|
+ left: "6%",
|
|
|
+ right: "6%",
|
|
|
+ bottom: "2%",
|
|
|
+ top: "25%",
|
|
|
+ containLabel: true,
|
|
|
+ },
|
|
|
+ legend: {
|
|
|
+ data: ["去年", "今年", "总量"],
|
|
|
+ textStyle: {
|
|
|
+ color: "#B4B4B4",
|
|
|
+ },
|
|
|
+ top: "7%",
|
|
|
+ },
|
|
|
+ xAxis: {
|
|
|
+ data: this.alarmType,
|
|
|
+ axisLine: {
|
|
|
+ lineStyle: {
|
|
|
+ color: "#B4B4B4",
|
|
|
+ },
|
|
|
+ },
|
|
|
+ axisTick: {
|
|
|
+ show: false,
|
|
|
+ },
|
|
|
+ },
|
|
|
+ yAxis: [
|
|
|
+ {
|
|
|
+ splitLine: { show: false },
|
|
|
+ axisLine: {
|
|
|
+ lineStyle: {
|
|
|
+ color: "#B4B4B4",
|
|
|
+ },
|
|
|
+ },
|
|
|
+ axisLabel: {
|
|
|
+ formatter: "{value} ",
|
|
|
+ },
|
|
|
+ }
|
|
|
+ ],
|
|
|
+
|
|
|
+ series: [
|
|
|
+ {
|
|
|
+ name: "总量",
|
|
|
+ type: "line",
|
|
|
+ smooth: true,
|
|
|
+ // showAllSymbol: true,
|
|
|
+ // symbol: "emptyCircle",
|
|
|
+ symbolSize: 8,
|
|
|
+ // itemStyle: {
|
|
|
+ // normal: {
|
|
|
+ // color: "#2EC6D0",
|
|
|
+ // },
|
|
|
+ // },
|
|
|
+
|
|
|
+ // showAllSymbol: true,
|
|
|
+ symbol: "emptyCircle",
|
|
|
+ symbolSize: 6,
|
|
|
+ lineStyle: {
|
|
|
+ normal: {
|
|
|
+ color: "#8FB3F3", // 线条颜色
|
|
|
+ },
|
|
|
+ borderColor: "#f0f",
|
|
|
+ },
|
|
|
+ label: {
|
|
|
+ show: true,
|
|
|
+ position: "top",
|
|
|
+ textStyle: {
|
|
|
+ color: "#fff",
|
|
|
+ },
|
|
|
+ },
|
|
|
+ itemStyle: {
|
|
|
+ normal: {
|
|
|
+ color: "#8FB3F3",
|
|
|
+ },
|
|
|
+ },
|
|
|
+ tooltip: {
|
|
|
+ show: false,
|
|
|
+ },
|
|
|
+ areaStyle: {
|
|
|
+ //区域填充样式
|
|
|
+ normal: {
|
|
|
+ //线性渐变，前4个参数分别是x0,y0,x2,y2(范围0~1);相当于图形包围盒中的百分比。如果最后一个参数是‘true’，则该四个值是绝对像素位置。
|
|
|
+ color: new echarts.graphic.LinearGradient(
|
|
|
+ 0,
|
|
|
+ 0,
|
|
|
+ 0,
|
|
|
+ 1,
|
|
|
+ [
|
|
|
+ {
|
|
|
+ offset: 0,
|
|
|
+ color: "rgba(192,208,248,0.3)",
|
|
|
+ },
|
|
|
+ {
|
|
|
+ offset: 1,
|
|
|
+ color: "rgba(163,186,229, .1)",
|
|
|
+ },
|
|
|
+ ],
|
|
|
+ false
|
|
|
+ ),
|
|
|
+ shadowColor: "rgba(220,226,255,.9)", //阴影颜色
|
|
|
+ shadowBlur: 20, //shadowBlur设图形阴影的模糊大小。配合shadowColor,shadowOffsetX/Y, 设置图形的阴影效果。
|
|
|
+ },
|
|
|
+ },
|
|
|
+
|
|
|
+ data: allData,
|
|
|
+ },
|
|
|
+
|
|
|
+ {
|
|
|
+ name: "今年",
|
|
|
+ type: "bar",
|
|
|
+ barWidth: 20,
|
|
|
+ itemStyle: {
|
|
|
+ normal: {
|
|
|
+ // barBorderRadius: 10,
|
|
|
+ color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
|
|
|
+ { offset: 0, color: "rgb(97,114,237)" },
|
|
|
+ { offset: 1, color: "rgb(143,210,252)" },
|
|
|
+ ]),
|
|
|
+ },
|
|
|
+ },
|
|
|
+ data: nowData,
|
|
|
+ },
|
|
|
+
|
|
|
+ {
|
|
|
+ name: "去年",
|
|
|
+ type: "bar",
|
|
|
+ barGap: "-100%",
|
|
|
+ barWidth: 20,
|
|
|
+ itemStyle: {
|
|
|
+ normal: {
|
|
|
+ // barBorderRadius: 10,
|
|
|
+ color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
|
|
|
+ { offset: 0, color: "rgba(199,207,253,0.7)" },
|
|
|
+ { offset: 0.2, color: "rgba(199,207,253,0.5)" },
|
|
|
+ { offset: 1, color: "rgba(199,207,253,0.2)" },
|
|
|
+ ]),
|
|
|
+ },
|
|
|
+ },
|
|
|
+ z: -12,
|
|
|
+
|
|
|
+ data: lastData,
|
|
|
+ },
|
|
|
+ ],
|
|
|
+ };
|
|
|
+
|
|
|
+
|
|
|
+ option && this.myChart2.setOption(option);
|
|
|
+ },
|
|
|
+ // 报警类型占比
|
|
|
+ initBingChart(){
|
|
|
+ this.myChart3 = echarts.init(this.$refs.bingChart)
|
|
|
+ var option;
|
|
|
+
|
|
|
+ var m2R2Data = [];
|
|
|
+ var allnum = 0;
|
|
|
+ for (let i in this.chartinfo.typeRatio) {
|
|
|
+ allnum += this.chartinfo.typeRatio[i].howManyTimes;
|
|
|
+ m2R2Data.push({
|
|
|
+ value: this.chartinfo.typeRatio[i].howManyTimes,
|
|
|
+ legendname: this.chartinfo.typeRatio[i].equipmentname,
|
|
|
+ name: this.chartinfo.typeRatio[i].equipmentname,
|
|
|
+ // itemStyle: { color: "#8d7fec" },
|
|
|
+ });
|
|
|
+ }
|
|
|
+
|
|
|
+ option = {
|
|
|
+ title: [
|
|
|
+ {
|
|
|
+ text: "合计",
|
|
|
+ subtext: allnum + "个",
|
|
|
+ textStyle: {
|
|
|
+ fontSize: 16,
|
|
|
+ color: "#bbb",
|
|
|
+ },
|
|
|
+ subtextStyle: {
|
|
|
+ fontSize: 12,
|
|
|
+ color: "#333",
|
|
|
+ },
|
|
|
+ textAlign: "center",
|
|
|
+ x: "34.5%",
|
|
|
+ y: "44%",
|
|
|
+ },
|
|
|
+ ],
|
|
|
+ tooltip: {
|
|
|
+ trigger: "item",
|
|
|
+ formatter: function (parms) {
|
|
|
+ var str =
|
|
|
+ parms.seriesName +
|
|
|
+ "</br>" +
|
|
|
+ parms.marker +
|
|
|
+ "" +
|
|
|
+ parms.data.legendname +
|
|
|
+ "</br>" +
|
|
|
+ "数量：" +
|
|
|
+ parms.data.value +
|
|
|
+ "</br>" +
|
|
|
+ "占比：" +
|
|
|
+ parms.percent +
|
|
|
+ "%";
|
|
|
+ return str;
|
|
|
+ },
|
|
|
+ },
|
|
|
+ legend: {
|
|
|
+ type: "scroll",
|
|
|
+ orient: "vertical",
|
|
|
+ left: "70%",
|
|
|
+ align: "left",
|
|
|
+ top: "middle",
|
|
|
+ textStyle: {
|
|
|
+ color: "#8C8C8C",
|
|
|
+ },
|
|
|
+ height: 150,
|
|
|
+ },
|
|
|
+ series: [
|
|
|
+ {
|
|
|
+ name: "标题",
|
|
|
+ type: "pie",
|
|
|
+ center: ["35%", "50%"],
|
|
|
+ radius: ["40%", "65%"],
|
|
|
+ clockwise: false, //饼图的扇区是否是顺时针排布
|
|
|
+ avoidLabelOverlap: false,
|
|
|
+ label: {
|
|
|
+ normal: {
|
|
|
+ show: true,
|
|
|
+ position: "outter",
|
|
|
+ formatter: function (parms) {
|
|
|
+ return parms.data.legendname;
|
|
|
+ },
|
|
|
+ },
|
|
|
+ },
|
|
|
+ labelLine: {
|
|
|
+ normal: {
|
|
|
+ length: 10,
|
|
|
+ length2: 30,
|
|
|
+ smooth: true,
|
|
|
+ },
|
|
|
+ },
|
|
|
+ data: m2R2Data,
|
|
|
+ },
|
|
|
+ ],
|
|
|
+ };
|
|
|
+
|
|
|
+
|
|
|
+ option && this.myChart3.setOption(option);
|
|
|
+ },
|
|
|
+ // 获取最后一天
|
|
|
+ getLastDay(year,month){
|
|
|
+ var new_year = year;
|
|
|
+ var new_month = month++;//取下一个月的第一天，方便计算（最后一天不固定）
|
|
|
+ if(month>12){//如果当前大于12月，则年份转到下一年
|
|
|
+ new_month -=12;//月份减
|
|
|
+ new_year++;//年份增
|
|
|
+ }
|
|
|
+ // 取当年当月对应的下个月的前一天，即当前月的最后一天
|
|
|
+ var last_date = new Date(new_year,new_month,0).getDate();
|
|
|
+ return last_date;
|
|
|
+ },
|
|
|
+ // 日期加/减几天
|
|
|
+ getNewDayAdd(dateTemp, day) {
|
|
|
+ dateTemp=new Date(dateTemp);
|
|
|
+ dateTemp=+dateTemp +1000*60*60*24*day;
|
|
|
+ dateTemp=new Date(dateTemp);
|
|
|
+ return dateTemp.getFullYear()+"-"+(dateTemp.getMonth()+1)+"-"+dateTemp.getDate();
|
|
|
+ },
|
|
|
+ // 获取起止日期之间的所有日期
|
|
|
+ getdifflist(){
|
|
|
+ var resultTime = []; // dateArray 起止日期中间的所有日期列表
|
|
|
+ // 必须减几天啊，不然第一天的显示不出来
|
|
|
+ var start = new Date(this.getNewDayAdd(this.queryParams.date1 + "-01", -1)); //起止日期
|
|
|
+ var year = parseInt(this.queryParams.date1.substring(0, 4));
|
|
|
+ var month = parseInt(this.queryParams.date1.substring(5,7));
|
|
|
+ var endday = this.getLastDay(year, month);
|
|
|
+ // 必须加几天啊，不然最后一天的显示不出来
|
|
|
+ var end = new Date(this.getNewDayAdd(this.queryParams.date1 + "-" + endday, 1)); //截止日期
|
|
|
+ //开始日期小于等于结束日期,并循环
|
|
|
+ // 当 开始时间小于结束时间的时候进入循环
|
|
|
+ while (start <= end) {
|
|
|
+ let getDay = start.getDate()
|
|
|
+ // 月份需要加 1
|
|
|
+ let getMonth = start.getMonth() + 1
|
|
|
+ let getYear = start.getFullYear()
|
|
|
+ /**
|
|
|
+ * 拼接时间格式
|
|
|
+ * (getMonth >= 10 ? `${getMonth}` : `0${getMonth}`) 自动给 小于10的时间前面补0
|
|
|
+ */
|
|
|
+ let setTime =
|
|
|
+ `${getYear}-` +
|
|
|
+ (getMonth >= 10 ? `${getMonth}` : `0${getMonth}`) +
|
|
|
+ '-' +
|
|
|
+ (getDay >= 10 ? `${getDay}` : `0${getDay}`)
|
|
|
+
|
|
|
+ resultTime.push(setTime)
|
|
|
+ /**
|
|
|
+ * 重新设置开始时间
|
|
|
+ * 使用 setFullYear() 方法会自动将时间累加，返回的是时间戳格式
|
|
|
+ * 使用 new Date() 将时间重新设置为标准时间
|
|
|
+ * getMonth - 1 将月份时间重新还原
|
|
|
+ */
|
|
|
+ start = new Date(start.setFullYear(getYear, getMonth - 1, getDay + 1))
|
|
|
+ }
|
|
|
+ return resultTime;
|
|
|
+ },
|
|
|
+ // 报警趋势散点图
|
|
|
+ intiQushiChart(){
|
|
|
+ this.myChart4 = echarts.init(this.$refs.qushiChart)
|
|
|
+ var option;
|
|
|
+
|
|
|
+ const schema = [
|
|
|
+ { name: 'date', index: 2, text: '日' },
|
|
|
+ { name: 'num', index: 1, text: '报警数量' }
|
|
|
+ ];
|
|
|
+ const itemStyle = {
|
|
|
+ opacity: 0.8,
|
|
|
+ shadowBlur: 10,
|
|
|
+ shadowOffsetX: 0,
|
|
|
+ shadowOffsetY: 0,
|
|
|
+ shadowColor: 'rgba(0,0,0,0.3)'
|
|
|
+ };
|
|
|
+
|
|
|
+ var dates = this.getdifflist();
|
|
|
+ var series1 = []
|
|
|
+ for (let i in this.alarmType) {
|
|
|
+ var data1 = [];
|
|
|
+ var cycle1 = 0;
|
|
|
+ for (let t in dates) {
|
|
|
+ data1.push([cycle1 + 1, 0, dates[t]]);
|
|
|
+
|
|
|
+ for (let v in this.chartinfo.alarmScatter) {
|
|
|
+ if (this.chartinfo.alarmScatter[v].equipmentname == this.alarmType[i] &&
|
|
|
+ this.chartinfo.alarmScatter[v].day == dates[t]) {
|
|
|
+ data1[cycle1] = [cycle1 + 1, this.chartinfo.alarmScatter[v].howManyTimes, dates[t]];
|
|
|
+ }
|
|
|
+ }
|
|
|
+ cycle1++;
|
|
|
+ }
|
|
|
+ series1.push({
|
|
|
+ name: this.alarmType[i],
|
|
|
+ type: 'scatter',
|
|
|
+ symbolSize: function (val) { // 原来根据数据来确定气泡大小，改成除了数量为0气泡大小为0，其它都是30的大小
|
|
|
+ return val[1] == 0 ? 0 :20;
|
|
|
+ },
|
|
|
+ itemStyle: itemStyle,
|
|
|
+ // symbolSize: function(value) {
|
|
|
+ // return value / 10;
|
|
|
+ // },
|
|
|
+ data: data1
|
|
|
+ });
|
|
|
+ }
|
|
|
+ option = {
|
|
|
+ // color: ['#638FF5', '#3FAEDF', '#DBE0FE'],
|
|
|
+ legend: {
|
|
|
+ top: 10,
|
|
|
+ data: this.alarmType,
|
|
|
+ textStyle: {
|
|
|
+ fontSize: 16
|
|
|
+ }
|
|
|
+ },
|
|
|
+ grid: {
|
|
|
+ left: '10%',
|
|
|
+ right: 150,
|
|
|
+ top: '20%',
|
|
|
+ bottom: '10%'
|
|
|
+ },
|
|
|
+ tooltip: {
|
|
|
+ formatter: function (param) {
|
|
|
+ var value = param.value;
|
|
|
+ // prettier-ignore
|
|
|
+ return '<div style="border-bottom: 1px solid rgba(255,255,255,.3); font-size: 18px;padding-bottom: 7px;margin-bottom: 7px">'
|
|
|
+ + param.seriesName + ' ' + value[2]
|
|
|
+ + '</div>'
|
|
|
+ + schema[1].text + ':' + value[1] + '<br>';
|
|
|
+ }
|
|
|
+ },
|
|
|
+ dataZoom: [
|
|
|
+ {
|
|
|
+ type: 'inside',
|
|
|
+ start: 0,
|
|
|
+ end: 100
|
|
|
+ }
|
|
|
+ ],
|
|
|
+ xAxis: {
|
|
|
+ type: 'category',
|
|
|
+ boundaryGap: false,
|
|
|
+ data: dates
|
|
|
+ },
|
|
|
+ yAxis: {
|
|
|
+ type: 'value',
|
|
|
+ name: '报警数量',
|
|
|
+ nameLocation: 'end',
|
|
|
+ nameGap: 20,
|
|
|
+ nameTextStyle: {
|
|
|
+ fontSize: 16
|
|
|
+ },
|
|
|
+ splitLine: {
|
|
|
+ show: false
|
|
|
+ }
|
|
|
+ },
|
|
|
+ // visualMap: [
|
|
|
+ // {
|
|
|
+ // left: 'right',
|
|
|
+ // top: '10%',
|
|
|
+ // dimension: 2,
|
|
|
+ // min: 0,
|
|
|
+ // max: 500,
|
|
|
+ // itemWidth: 30,
|
|
|
+ // itemHeight: 120,
|
|
|
+ // calculable: true,
|
|
|
+ // precision: 0.1,
|
|
|
+ // text: ['报警数量'],
|
|
|
+ // textGap: 30,
|
|
|
+ // inRange: {
|
|
|
+ // // symbolSize: [5, 50]
|
|
|
+ // },
|
|
|
+ // outOfRange: {
|
|
|
+ // // symbolSize: [5, 50],
|
|
|
+ // color: ['rgba(255,255,255,0.4)']
|
|
|
+ // },
|
|
|
+ // controller: {
|
|
|
+ // inRange: {
|
|
|
+ // color: ['#5085F2']
|
|
|
+ // },
|
|
|
+ // outOfRange: {
|
|
|
+ // color: ['#999']
|
|
|
+ // }
|
|
|
+ // }
|
|
|
+ // },
|
|
|
+ // ],
|
|
|
+ series: series1
|
|
|
+ };
|
|
|
+
|
|
|
+ option && this.myChart4.setOption(option,true);
|
|
|
+ }
|
|
|
+ }
|
|
|
+}
|
|
|
+</script>
|
|
|
+
|
|
|
+<style lang="less" scoped>
|
|
|
+.common-container{
|
|
|
+ background-color: #fff;
|
|
|
+ border-radius: 4px;
|
|
|
+ box-shadow: 0 4px 12px rgba(62, 90, 119, 0.2);
|
|
|
+ padding: 13px 20px;
|
|
|
+ .common-title{
|
|
|
+ border-bottom: 1px solid #ccc;
|
|
|
+ padding: 10px;
|
|
|
+ }
|
|
|
+ .common-box{
|
|
|
+ width: 100%;
|
|
|
+ height: calc(100% - 40px);
|
|
|
+ }
|
|
|
+ .common-box2{
|
|
|
+ width: 100%;
|
|
|
+ height: calc(100% - 129.5px);
|
|
|
+ }
|
|
|
+}
|
|
|
+.area-comp{
|
|
|
+ height: calc(100vh - 84px);
|
|
|
+ background-color: #F0F7FD;
|
|
|
+ // overflow: auto;
|
|
|
+ padding: 14px 20px;
|
|
|
+ display: flex;
|
|
|
+ justify-content: space-between;
|
|
|
+ .left-contianer{
|
|
|
+ // height: 500px;
|
|
|
+ width: 320px;
|
|
|
+ // flex: 2.2;
|
|
|
+ display: flex;
|
|
|
+ flex-direction: column;
|
|
|
+ justify-content: space-between;
|
|
|
+ .top{
|
|
|
+ background-image: linear-gradient(150deg, #5EB3F7, #6680F4);
|
|
|
+ color: #fff;
|
|
|
+ }
|
|
|
+ .box{
|
|
|
+ display: flex;
|
|
|
+ justify-content: space-around;
|
|
|
+ }
|
|
|
+ .num-box{
|
|
|
+ padding: 10px 8px;
|
|
|
+ text-align: center;
|
|
|
+ .num{
|
|
|
+ font-weight: bolder;
|
|
|
+ font-size: 24px;
|
|
|
+
|
|
|
+ }
|
|
|
+ .text{
|
|
|
+ margin-top: 12px;
|
|
|
+ font-size: 14px;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .center{
|
|
|
+ margin-top: 12px;
|
|
|
+ .num-box{
|
|
|
+ padding: 10px 0 10px 0;
|
|
|
+ }
|
|
|
+ .num{
|
|
|
+ background-image: linear-gradient(150deg, #5EB3F7, #6680F4);
|
|
|
+ background-clip:text;
|
|
|
+ -webkit-background-clip:text;
|
|
|
+ color: transparent;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .ranking{
|
|
|
+ flex: 1;
|
|
|
+ width: 100%;
|
|
|
+ // height: 500px;
|
|
|
+ margin-top: 10px;
|
|
|
+ box-sizing: border-box;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .right-container{
|
|
|
+ flex: 1;
|
|
|
+ margin-left: 12px;
|
|
|
+ display: flex;
|
|
|
+ flex-direction: column;
|
|
|
+ justify-content: space-between;
|
|
|
+ .top{
|
|
|
+ flex: 1;
|
|
|
+ display: flex;
|
|
|
+ justify-content: space-between;
|
|
|
+ .top-bing{
|
|
|
+ flex: 1;
|
|
|
+ margin-left: 12px;
|
|
|
+ }
|
|
|
+ .top-zhe{
|
|
|
+ flex: 2;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .bottom{
|
|
|
+ flex: 1.6;
|
|
|
+ margin-top: 12px;
|
|
|
+ }
|
|
|
+ }
|
|
|
+}
|
|
|
+</style>
|
LLL