| | |
| | | @size-change="sizeChange" |
| | | @refresh-change="refreshChange" |
| | | @on-load="onLoad" |
| | | v-show="switchChartType == 0" |
| | | > |
| | | <template slot="menuLeft"> |
| | | <el-button |
| | |
| | | icon="el-icon-pie-chart" |
| | | @click="handleExportStatis" |
| | | >导出报表 |
| | | </el-button> |
| | | <el-button type="success" |
| | | size="mini" |
| | | icon="el-icon-s-marketing" |
| | | @click="switchChart">图 表 |
| | | </el-button> |
| | | </template> |
| | | |
| | |
| | | </el-button> |
| | | </template> |
| | | </avue-crud> |
| | | |
| | | <el-row v-show="switchChartType == 1"> |
| | | <el-button type="success" |
| | | size="small" |
| | | icon="el-icon-s-marketing" |
| | | @click="switchChart">表 格 |
| | | </el-button> |
| | | <div class="alarmTypeEcharts"> |
| | | <div id="alarmTypeProEcharts"></div> |
| | | <div id="alarmEcharts"></div> |
| | | </div> |
| | | </el-row> |
| | | |
| | | <real-popup ref="realPopupView"></real-popup> |
| | | <el-drawer title="电子地图" append-to-body="true" :visible.sync="showMap"> |
| | | <iframe |
| | |
| | | </template> |
| | | |
| | | <script> |
| | | import {getList, remove, update, add, getclient} from "@/api/real/real"; |
| | | import {getList, remove, update, add, getclient,getChartData} from "@/api/real/real"; |
| | | import {mapGetters} from "vuex"; |
| | | |
| | | export default { |
| | |
| | | hls: "", |
| | | videoSource: "", |
| | | activeClass: 3, |
| | | switchChartType: "0", |
| | | form: {}, |
| | | query: {}, |
| | | search: {}, |
| | |
| | | `https://web.byisf.com/api/blade-report/ureport/preview?_u=blade-alarm.statis.ureport.xml&beginTime=${beginTime}&endTime=${endTime}&waringType=${waringType}&timeDesc=${timeDesc}` |
| | | ); |
| | | //window.open(`http://localhost:8108/ureport/excel?_u=blade-alarm.statis.ureport.xml&beginTime=${beginTime}&endTime=${endTime}&waringType=${waringType}&timeDesc=${timeDesc}`); |
| | | } |
| | | , switchChart() { |
| | | var that = this; |
| | | //图表切换 |
| | | if (this.switchChartType == 1) { |
| | | this.switchChartType = 0; |
| | | } else { |
| | | this.switchChartType = 1; |
| | | setTimeout(function () { |
| | | that.getData(); |
| | | that.getDataBs(); |
| | | }, 0); |
| | | } |
| | | }, getData() { |
| | | var that = this; |
| | | getChartData(null).then(res => { |
| | | var data = res.data.data; |
| | | var sum = 0; |
| | | for (let i = 0; i < data.length; i++) { |
| | | sum += data[i].value; |
| | | } |
| | | var option = { |
| | | title: [ |
| | | { |
| | | text: sum, |
| | | subtext: "安装任务总数", |
| | | textStyle: { |
| | | fontSize: 36, |
| | | fontWeight: "normal", |
| | | color: "#393939", |
| | | }, |
| | | subtextStyle: { |
| | | fontSize: 16, |
| | | color: "#434343", |
| | | }, |
| | | textAlign: "center", |
| | | x: "49%", |
| | | y: "39%", |
| | | }, |
| | | ], |
| | | color:['#29c194','#F48F57', 'green'], |
| | | tooltip: { |
| | | trigger: 'item' |
| | | }, |
| | | legend: { |
| | | orient: 'vertical', |
| | | left: 'right', |
| | | }, |
| | | series: [ |
| | | { |
| | | name: '任务状态', |
| | | type: "pie", |
| | | radius: ["46%", "66%"], |
| | | data: data, |
| | | label: { |
| | | normal: { |
| | | show: false, |
| | | }, |
| | | }, |
| | | emphasis: { |
| | | itemStyle: { |
| | | shadowBlur: 10, |
| | | shadowOffsetX: 0, |
| | | shadowColor: 'rgba(0, 0, 0, 0.5)' |
| | | } |
| | | } |
| | | } |
| | | ] |
| | | }; |
| | | // let echarts = require('echarts'); |
| | | let myChart = that.$echarts.init(document.getElementById('alarmTypeProEcharts')); |
| | | myChart.setOption(option); |
| | | }); |
| | | }, |
| | | getDataBs() { |
| | | var that = this; |
| | | getChartData(null).then(res => { |
| | | var data = res.data.data; |
| | | var sum = 0; |
| | | for (let i = 0; i < data.length; i++) { |
| | | sum += data[i].value; |
| | | } |
| | | var option = { |
| | | title: [ |
| | | { |
| | | text: sum, |
| | | subtext: "安装任务总数", |
| | | textStyle: { |
| | | fontSize: 36, |
| | | fontWeight: "normal", |
| | | color: "#393939", |
| | | }, |
| | | subtextStyle: { |
| | | fontSize: 16, |
| | | color: "#434343", |
| | | }, |
| | | textAlign: "center", |
| | | x: "49%", |
| | | y: "39%", |
| | | }, |
| | | ], |
| | | color:['#29c194','#F48F57', 'green'], |
| | | tooltip: { |
| | | trigger: 'item' |
| | | }, |
| | | legend: { |
| | | orient: 'vertical', |
| | | left: 'right', |
| | | }, |
| | | series: [ |
| | | { |
| | | name: '任务状态', |
| | | type: "pie", |
| | | radius: ["46%", "66%"], |
| | | data: data, |
| | | label: { |
| | | normal: { |
| | | show: false, |
| | | }, |
| | | }, |
| | | emphasis: { |
| | | itemStyle: { |
| | | shadowBlur: 10, |
| | | shadowOffsetX: 0, |
| | | shadowColor: 'rgba(0, 0, 0, 0.5)' |
| | | } |
| | | } |
| | | } |
| | | ] |
| | | }; |
| | | // let echarts = require('echarts'); |
| | | let myChart = that.$echarts.init(document.getElementById('alarmEcharts')); |
| | | myChart.setOption(option); |
| | | }); |
| | | }, |
| | | }, |
| | | }; |
| | | </script> |
| | | |
| | | <style> |
| | | #alarmEcharts { |
| | | width: 30%; |
| | | height: 450px; |
| | | position: relative; |
| | | left: 20%; |
| | | } |
| | | |
| | | .el-card__body .waringTypeClass { |
| | | width: 12%; |
| | | } |
| | |
| | | .tabFontSize { |
| | | font-size: 15px; |
| | | } |
| | | |
| | | .alarmTypeEcharts{ |
| | | display: flex; |
| | | background-color: #ffffff; |
| | | width: 98.6%; |
| | | height: 450px; |
| | | position: relative; |
| | | left: 0.8%; |
| | | top: 9.5%; |
| | | } |
| | | </style> |