4 files modified
2 files added
| New file |
| | |
| | | import request from '@/router/axios'; |
| | | |
| | | export const getList = (current, size, params) => { |
| | | return request({ |
| | | url: '/api/blade-jfpts/alarm/alarm/page_az', |
| | | method: 'get', |
| | | params: { |
| | | ...params, |
| | | current, |
| | | size, |
| | | } |
| | | }) |
| | | } |
| | | |
| | | export const getDetail = (id) => { |
| | | return request({ |
| | | url: '/api/blade-jfpts/alarm/alarm/selectInfo', |
| | | method: 'post', |
| | | params: { |
| | | id |
| | | } |
| | | }) |
| | | } |
| | | |
| | | export const remove = (ids) => { |
| | | return request({ |
| | | url: '/api/blade-jfpts/alarm/alarm/remove', |
| | | method: 'post', |
| | | params: { |
| | | ids, |
| | | } |
| | | }) |
| | | } |
| | | |
| | | export const add = (row) => { |
| | | return request({ |
| | | url: '/api/blade-jfpts/alarm/alarm/save', |
| | | method: 'post', |
| | | data: row |
| | | }) |
| | | } |
| | | |
| | | export const update = (row) => { |
| | | return request({ |
| | | url: '/api/blade-jfpts/alarm/alarm/update', |
| | | method: 'post', |
| | | data: row |
| | | }) |
| | | } |
| | | |
| | | export const getChartData = (row) => { |
| | | return request({ |
| | | url: '/api/blade-jfpts/alarm/alarm/getChartData', |
| | | method: 'get', |
| | | data: row |
| | | }) |
| | | } |
| | | |
| | |
| | | }) |
| | | } |
| | | |
| | | export const getChartData = (row) => { |
| | | return request({ |
| | | url: '/api/blade-jfpts/alarm/alarm/getChartData', |
| | | method: 'get', |
| | | data: row |
| | | }) |
| | | } |
| | | |
| | |
| | | import ( /* webpackChunkName: "views" */ '@/views/attendance/attendance') |
| | | }] |
| | | }, |
| | | { |
| | | path: '/clientManagement', |
| | | component: Layout, |
| | | redirect: '/clientManagement/clientManagement', |
| | | children: [{ |
| | | |
| | | path: 'index', |
| | | name: '设备管理', |
| | | meta: { |
| | | i18n: 'clientManagement' |
| | | }, |
| | | component: () => |
| | | import ( /* webpackChunkName: "views" */ '@/views/clientManagement/clientManagement') |
| | | }] |
| | | }, |
| | | // { |
| | | // path: '/clientManagement', |
| | | // component: Layout, |
| | | // redirect: '/clientManagement/clientManagement', |
| | | // children: [{ |
| | | // |
| | | // path: 'index', |
| | | // name: '设备管理', |
| | | // meta: { |
| | | // i18n: 'clientManagement' |
| | | // }, |
| | | // component: () => |
| | | // import ( /* webpackChunkName: "views" */ '@/views/clientManagement/clientManagement') |
| | | // }] |
| | | // }, |
| | | { |
| | | path: '/equipmentInfo', |
| | | component: Layout, |
| New file |
| | |
| | | <template> |
| | | <div> |
| | | <basic-container> |
| | | <avue-crud :option="option" |
| | | :table-loading="loading" |
| | | :data="data" |
| | | :page.sync="page" |
| | | ref="crud" |
| | | @row-del="rowDel" |
| | | v-model="form" |
| | | :permission="permissionList" |
| | | @row-update="rowUpdate" |
| | | @row-save="rowSave" |
| | | :before-open="beforeOpen" |
| | | @search-change="searchChange" |
| | | @search-reset="searchReset" |
| | | @selection-change="selectionChange" |
| | | @current-change="currentChange" |
| | | @size-change="sizeChange" |
| | | @refresh-change="refreshChange" |
| | | @on-load="onLoad" |
| | | v-show="switchChartType == 0"> |
| | | <template slot="menuLeft"> |
| | | <el-button type="danger" |
| | | size="small" |
| | | icon="el-icon-delete" |
| | | plain |
| | | v-if="permission.installClent_delete" |
| | | @click="handleDelete">删 除 |
| | | </el-button> |
| | | |
| | | <el-button type="success" |
| | | size="small" |
| | | icon="el-icon-s-marketing" |
| | | @click="switchChart">图 表 |
| | | </el-button> |
| | | |
| | | </template> |
| | | |
| | | <template slot-scope="{ row }" slot="jtype"> |
| | | <el-tag |
| | | >{{ |
| | | row.jtype == "0" ? "未安装" : row.jtype == "2" ? "已安装" : "未安装" |
| | | }} |
| | | </el-tag> |
| | | </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="alarmTypePro"> |
| | | <div id="alarmTypeProEcharts"></div> |
| | | <div class="alarmTypeTotal"> |
| | | <div class="numAlarmType"><span>{{alarmTypeTotal}}</span></div> |
| | | </div> |
| | | </div> |
| | | </el-row> |
| | | </basic-container> |
| | | </div> |
| | | |
| | | </template> |
| | | |
| | | <script> |
| | | import {getList, remove, update, add, getDetail, getChartData} from "@/api/installClent/installClent"; |
| | | import {mapGetters} from "vuex"; |
| | | // import echarts from 'echarts' |
| | | |
| | | export default { |
| | | data() { |
| | | return { |
| | | form: {}, |
| | | query: {}, |
| | | switchChartType: 0, |
| | | loading: true, |
| | | page: { |
| | | pageSize: 10, |
| | | currentPage: 1, |
| | | total: 0 |
| | | }, |
| | | selectionList: [], |
| | | option: { |
| | | height: 'auto', |
| | | calcHeight: 60, |
| | | dialogWidth: 950, |
| | | tip: false, |
| | | searchShow: true, |
| | | searchMenuSpan: 6, |
| | | border: true, |
| | | index: true, |
| | | viewBtn: true, |
| | | selection: true, |
| | | excelBtn: false, |
| | | dialogClickModal: false, |
| | | column: [ |
| | | { |
| | | label: "安装时间", |
| | | type: "datetime", |
| | | width: 160, |
| | | format: "yyyy-MM-dd HH:mm:ss", |
| | | valueFormat: "yyyy-MM-dd HH:mm:ss", |
| | | prop: "alarmTime", |
| | | }, |
| | | { |
| | | label: "安装人员", |
| | | search: true, |
| | | searchSpan: 4, |
| | | prop: "alarmPeople", |
| | | width: 90, |
| | | }, |
| | | { |
| | | label: "联系方式", |
| | | prop: "phoneNumber", |
| | | width: 110, |
| | | }, |
| | | { |
| | | label: "任务地址", |
| | | prop: "place", |
| | | }, |
| | | { |
| | | label: "任务描述", |
| | | prop: "bz", |
| | | }, |
| | | { |
| | | label: "设备编号", |
| | | searchSpan: 3, |
| | | width: 130, |
| | | prop: "deviceNumber", |
| | | }, |
| | | { |
| | | label: "省份", |
| | | prop: "province", |
| | | search: true, |
| | | searchSpan: 2, |
| | | width: 130, |
| | | searchLabelWidth: 45, |
| | | placeholder: "省份", |
| | | type: "select", |
| | | props: { |
| | | label: "name", |
| | | value: "code", |
| | | }, |
| | | cascaderItem: ["city", "district"], |
| | | dicUrl: "/api/blade-system/region/select", |
| | | span: 6, |
| | | className: "cityreal1", |
| | | addDisplay: true, |
| | | editDisplay: true, |
| | | viewDisplay: true, |
| | | }, |
| | | { |
| | | label: "地市", |
| | | prop: "city", |
| | | type: "select", |
| | | width: 130, |
| | | searchPlaceholder: "地市", |
| | | placeholder: "地市", |
| | | searchLabelWidth: 1, |
| | | searchSpan: 2, |
| | | search: true, |
| | | props: { |
| | | label: "name", |
| | | value: "code", |
| | | }, |
| | | dicUrl: "/api/blade-system/region/select?code={{key}}", |
| | | span: 3, |
| | | labelWidth: "0", |
| | | className: "cityreal2", |
| | | addDisplay: true, |
| | | editDisplay: true, |
| | | viewDisplay: true, |
| | | }, |
| | | { |
| | | label: "区县", |
| | | searchSpan: 2, |
| | | searchLabelWidth: 1, |
| | | width: 130, |
| | | searchPlaceholder: "区县", |
| | | placeholder: "区县", |
| | | search: true, |
| | | prop: "district", |
| | | type: "select", |
| | | props: { |
| | | label: "name", |
| | | value: "code", |
| | | }, |
| | | dicUrl: "/api/blade-system/region/select?code={{key}}", |
| | | span: 3, |
| | | labelWidth: "0", |
| | | className: "cityreal3", |
| | | addDisplay: true, |
| | | editDisplay: true, |
| | | viewDisplay: true, |
| | | }, |
| | | { |
| | | label: "任务状态", |
| | | searchSpan: 3, |
| | | width: 96, |
| | | search: true, |
| | | slot: true, |
| | | searchPlaceholder: "请选择", |
| | | prop: "jtype", |
| | | type: "select", |
| | | dicData: [ |
| | | { |
| | | label: "未安装", |
| | | value: "0", |
| | | }, |
| | | { |
| | | label: "已安装", |
| | | value: "2", |
| | | }, |
| | | ], |
| | | }, |
| | | ] |
| | | }, |
| | | data: [] |
| | | }; |
| | | }, |
| | | computed: { |
| | | ...mapGetters(["permission"]), |
| | | permissionList() { |
| | | return { |
| | | addBtn: this.vaildData(this.permission.installClent_add, false), |
| | | viewBtn: this.vaildData(this.permission.installClent_view, false), |
| | | delBtn: this.vaildData(this.permission.installClent_delete, false), |
| | | editBtn: this.vaildData(this.permission.installClent_edit, false) |
| | | }; |
| | | }, |
| | | ids() { |
| | | let ids = []; |
| | | this.selectionList.forEach(ele => { |
| | | ids.push(ele.id); |
| | | }); |
| | | return ids.join(","); |
| | | } |
| | | }, |
| | | methods: { |
| | | rowSave(row, done, loading) { |
| | | row.waringType = "安装任务"; |
| | | add(row).then(() => { |
| | | this.onLoad(this.page); |
| | | this.$message({ |
| | | type: "success", |
| | | message: "操作成功!" |
| | | }); |
| | | done(); |
| | | }, error => { |
| | | window.console.log(error); |
| | | loading(); |
| | | }); |
| | | }, |
| | | rowUpdate(row, index, done, loading) { |
| | | update(row).then(() => { |
| | | this.onLoad(this.page); |
| | | this.$message({ |
| | | type: "success", |
| | | message: "操作成功!" |
| | | }); |
| | | done(); |
| | | }, error => { |
| | | window.console.log(error); |
| | | loading(); |
| | | }); |
| | | }, |
| | | rowDel(row) { |
| | | this.$confirm("确定将选择数据删除?", { |
| | | confirmButtonText: "确定", |
| | | cancelButtonText: "取消", |
| | | type: "warning" |
| | | }) |
| | | .then(() => { |
| | | return remove(row.id); |
| | | }) |
| | | .then(() => { |
| | | this.onLoad(this.page); |
| | | this.$message({ |
| | | type: "success", |
| | | message: "操作成功!" |
| | | }); |
| | | }); |
| | | }, |
| | | searchReset() { |
| | | this.query = {}; |
| | | this.onLoad(this.page); |
| | | }, |
| | | searchChange(params, done) { |
| | | this.query = params; |
| | | this.page.currentPage = 1; |
| | | this.onLoad(this.page, params); |
| | | done(); |
| | | }, |
| | | selectionChange(list) { |
| | | this.selectionList = list; |
| | | }, |
| | | selectionClear() { |
| | | this.selectionList = []; |
| | | this.$refs.crud.toggleSelection(); |
| | | }, |
| | | handleDelete() { |
| | | if (this.selectionList.length === 0) { |
| | | this.$message.warning("请选择至少一条数据"); |
| | | return; |
| | | } |
| | | this.$confirm("确定将选择数据删除?", { |
| | | confirmButtonText: "确定", |
| | | cancelButtonText: "取消", |
| | | type: "warning" |
| | | }) |
| | | .then(() => { |
| | | return remove(this.ids); |
| | | }) |
| | | .then(() => { |
| | | this.onLoad(this.page); |
| | | this.$message({ |
| | | type: "success", |
| | | message: "操作成功!" |
| | | }); |
| | | this.$refs.crud.toggleSelection(); |
| | | }); |
| | | }, |
| | | beforeOpen(done, type) { |
| | | if (["edit", "view"].includes(type)) { |
| | | getDetail(this.form.id).then(res => { |
| | | this.form = res.data.data; |
| | | }); |
| | | } |
| | | done(); |
| | | }, |
| | | currentChange(currentPage) { |
| | | this.page.currentPage = currentPage; |
| | | }, |
| | | sizeChange(pageSize) { |
| | | this.page.pageSize = pageSize; |
| | | }, |
| | | refreshChange() { |
| | | this.onLoad(this.page, this.query); |
| | | }, |
| | | onLoad(page, params = {}) { |
| | | const {releaseTimeRange} = this.query; |
| | | let values = { |
| | | ...params, |
| | | }; |
| | | if (releaseTimeRange) { |
| | | values = { |
| | | ...params, |
| | | releaseTime_datege: releaseTimeRange[0], |
| | | releaseTime_datelt: releaseTimeRange[1], |
| | | ...this.query |
| | | }; |
| | | values.releaseTimeRange = null; |
| | | } |
| | | this.loading = true; |
| | | getList(page.currentPage, page.pageSize, values).then(res => { |
| | | const data = res.data.data; |
| | | this.page.total = data.total; |
| | | this.data = data.records; |
| | | this.loading = false; |
| | | this.selectionClear(); |
| | | }); |
| | | } |
| | | , switchChart() { |
| | | var that = this; |
| | | //图表切换 |
| | | if (this.switchChartType == 1) { |
| | | this.switchChartType = 0; |
| | | } else { |
| | | this.switchChartType = 1; |
| | | setTimeout(function () { |
| | | that.getChartData(); |
| | | }, 0); |
| | | } |
| | | }, getChartData() { |
| | | 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); |
| | | }); |
| | | |
| | | }, |
| | | } |
| | | }; |
| | | </script> |
| | | |
| | | <style> |
| | | .alarmTypePro { |
| | | background-color: #ffffff; |
| | | width: 98.6%; |
| | | height: 450px; |
| | | position: relative; |
| | | left: 0.8%; |
| | | top: 9.5%; |
| | | } |
| | | |
| | | </style> |
| | |
| | | style="position: absolute; right: 0" |
| | | :disabled="form.securityArr.length > 0" |
| | | :type="form.securityArr.length > 0 ? 'info' : 'danger'" |
| | | >通 知</el-button |
| | | >通 知 |
| | | </el-button |
| | | > |
| | | </div> |
| | | </div> |
| | |
| | | ></video> |
| | | <span v-show="feedbackVideo == ''">暂无现场视频</span> |
| | | </el-card> |
| | | |
| | | <el-row class="trackButton"> |
| | | <el-button type="success" @click="EndPolice">警情结束</el-button> |
| | | |
| | | <el-popover |
| | | style="padding-left: 10px" |
| | | placement="top" |
| | | width="250" |
| | | v-model="visible"> |
| | | <el-input |
| | | type="textarea" |
| | | :rows="5" |
| | | placeholder="请输入驳回理由" |
| | | v-model="textarea"> |
| | | </el-input> |
| | | <div style="text-align: right; margin: 20px 0 0 0"> |
| | | <el-button size="mini" type="text" @click="visible = false,textarea=''">取消</el-button> |
| | | <el-button type="primary" size="mini" @click="rejected">确定</el-button> |
| | | </div> |
| | | <el-button type="warning" slot="reference">反馈驳回</el-button> |
| | | </el-popover> |
| | | </el-row> |
| | | |
| | | </el-card> |
| | | </div> |
| | | </el-col> |
| | |
| | | <script> |
| | | import axios from "axios"; |
| | | import { getList, getclient } from "@/api/real/real"; |
| | | |
| | | export default { |
| | | inject: ["reload"], |
| | | data() { |
| | |
| | | security: {}, |
| | | imgSrc: [], |
| | | srcList: [], |
| | | textarea: "", |
| | | visible: false, |
| | | form: {}, |
| | | itemOption: { |
| | | menuBtn: false, |
| | |
| | | } |
| | | }, |
| | | methods: { |
| | | rejected() { |
| | | //反馈打回 |
| | | this.visible = false; |
| | | var that = this; |
| | | var subData = { |
| | | jid: this.form.id, |
| | | jtype: 1, |
| | | rid: this.form.alarmId, |
| | | // bz: this.form.bz, |
| | | snumber: this.form.alarmId, |
| | | sname: this.form.alarmPeople, |
| | | deviceNumber: this.form.deviceNumber, |
| | | zc: "反馈驳回,理由:" + this.textarea, |
| | | zctime: this.getDate().current, |
| | | }; |
| | | axios |
| | | .post( |
| | | "/api/blade-jfpts/alarm/alarm/updateJtype", |
| | | {}, |
| | | { |
| | | params: subData, |
| | | } |
| | | ) |
| | | .then(function (res) { |
| | | that.getReceivingAlarm(); |
| | | that.$message({ |
| | | message: '操作成功', |
| | | type: 'success' |
| | | }); |
| | | }); |
| | | }, |
| | | EndPolice() { |
| | | //结束警情 |
| | | var that = this; |
| | | var subData = { |
| | | jid: this.form.id, |
| | | jtype: 2, |
| | | rid: this.form.alarmId, |
| | | // bz: this.form.bz, |
| | | snumber: this.form.alarmId, |
| | | sname: this.form.alarmPeople, |
| | | deviceNumber: this.form.deviceNumber, |
| | | zc: "结束警情", |
| | | zctime: this.getDate().current, |
| | | }; |
| | | axios |
| | | .post( |
| | | "/api/blade-jfpts/alarm/alarm/updateJtype", |
| | | {}, |
| | | { |
| | | params: subData, |
| | | } |
| | | ) |
| | | .then(function (res) { |
| | | that.getReceivingAlarm(); |
| | | that.$message({ |
| | | message: '操作成功', |
| | | type: 'success' |
| | | }); |
| | | }); |
| | | }, |
| | | getDate() { |
| | | // 当前时间 |
| | | var timestamp = Date.parse(new Date()); |
| | |
| | | line-height: 32px !important; |
| | | height: 200px; |
| | | overflow-y: auto; |
| | | |
| | | .el-card__body { |
| | | padding: 0 10px !important; |
| | | } |
| | |
| | | height: auto; |
| | | max-height: 200px; |
| | | overflow-y: auto; |
| | | |
| | | .el-card__body { |
| | | display: flex; |
| | | padding: 0 10px !important; |
| | | flex-wrap: wrap; |
| | | justify-content: center; |
| | | align-items: center; |
| | | |
| | | .x-audio-wrap.inline { |
| | | margin: 10px; |
| | | } |
| | | |
| | | .el-image { |
| | | margin: 10px; |
| | | width: 160px; |
| | |
| | | #old_video::-webkit-media-controls-timeline { |
| | | display: block; |
| | | } |
| | | |
| | | .trackButton { |
| | | padding-top: 30px; |
| | | padding-bottom: 20px; |
| | | text-align: center; |
| | | } |
| | | </style> |
| | |
| | | @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> |