| | |
| | | </template> |
| | | |
| | | <script> |
| | | import QueryForm from '@/components/common/QueryForm' |
| | | // import QueryForm from '@/components/common/QueryForm' |
| | | import * as echarts from 'echarts' |
| | | import { hiddenDangerDataPost } from '@/api/business/hiddenDanger' |
| | | import dayjs from 'dayjs' |
| | | export default { |
| | | components: { |
| | | QueryForm, |
| | | // QueryForm, |
| | | }, |
| | | data() { |
| | | data () { |
| | | return { |
| | | filters: { |
| | | fastdate: '29', |
| | |
| | | options: [ |
| | | { label: '待处理', value: '0' }, |
| | | { label: '已处理', value: '1' }, |
| | | { label: '已退回', value: '2' }, |
| | | { label: '已退回', value: '2' } |
| | | ] |
| | | }, |
| | | { |
| | |
| | | departmentList: [] |
| | | } |
| | | }, |
| | | mounted() { |
| | | mounted () { |
| | | this.changeRadio('29') |
| | | this.initDept3() |
| | | // this.getData() |
| | | }, |
| | | methods: { |
| | | changeRadio(day) { |
| | | changeRadio (day) { |
| | | const arr = [dayjs().subtract(day, 'day').format('YYYY-MM-DD') + ' 00:00:00', dayjs().format('YYYY-MM-DD') + ' 23:59:59'] |
| | | this.filters.queryStartTime = arr[0] |
| | | this.filters.queryEndTime = arr[1] |
| | | this.getData() |
| | | }, |
| | | getData(page) { |
| | | getData (page) { |
| | | hiddenDangerDataPost({ ...this.filters }).then(res => { |
| | | if (res) { |
| | | this.totalList.total = res.total || 0 |
| | |
| | | this.initDept() |
| | | this.initDept3() |
| | | }) |
| | | |
| | | } |
| | | }) |
| | | |
| | | }, |
| | | changeForm(e) { |
| | | changeForm (e) { |
| | | this.getData() |
| | | }, |
| | | initType() { |
| | | initType () { |
| | | const myChart = echarts.init(document.querySelector('.echart1')) |
| | | let total = 0 |
| | | this.typeList.forEach(i => { |
| | | total += i.total |
| | | }) |
| | | let colors = ['#d75a44', '#e39f4d', '#f0d05f', '#7ac7f6', '#4469ee', '#698af0','#86a2f1','#a1b4f6','#a0b5f5', '#9fb5f4', '#b6c7f7', '#c8d5f8'] |
| | | let option = { |
| | | const colors = ['#d75a44', '#e39f4d', '#f0d05f', '#7ac7f6', '#4469ee', '#698af0', '#86a2f1', '#a1b4f6', '#a0b5f5', '#9fb5f4', '#b6c7f7', '#c8d5f8'] |
| | | const option = { |
| | | grid: { |
| | | left: '0%', |
| | | right: '0%', |
| | |
| | | left: '45%', |
| | | textStyle: { |
| | | color: '#666666', |
| | | fontSize: 13, |
| | | }, |
| | | fontSize: 13 |
| | | } |
| | | }, { |
| | | text: total, |
| | | top: '50%', |
| | |
| | | textStyle: { |
| | | color: '#080404', |
| | | fontSize: 16, |
| | | fontWeight: 'bold', |
| | | }, |
| | | fontWeight: 'bold' |
| | | } |
| | | }], |
| | | legend: { |
| | | left: 'center', |
| | |
| | | type: 'pie', |
| | | radius: ['34%', '50%'], |
| | | label: { |
| | | formatter: "{a|{b}}\n\n{c} | {d}%", |
| | | formatter: '{a|{b}}\n\n{c} | {d}%', |
| | | rich: { |
| | | a: { |
| | | color: '#333333', |
| | |
| | | length: 24, |
| | | length2: 64, |
| | | lineStyle: { |
| | | width: 2 // 线条宽度 |
| | | width: 2 // 线条宽度 |
| | | } |
| | | }, |
| | | data: this.typeList.map((i, index) => { |
| | |
| | | myChart.resize() |
| | | }) |
| | | }, |
| | | initDept() { |
| | | initDept () { |
| | | const myChart = echarts.init(document.querySelector('.echart2')) |
| | | |
| | | let option = { |
| | | const option = { |
| | | grid: { |
| | | left: '10%', |
| | | right: '10%', |
| | |
| | | name: '隐患数', |
| | | minInterval: 1, |
| | | axisLine: { |
| | | show: true, |
| | | show: true |
| | | } |
| | | }, |
| | | series: [ |
| | |
| | | itemStyle: { |
| | | color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [ |
| | | { offset: 0, color: '#d75e45' }, // 渐变起始色 |
| | | { offset: 1, color: '#db924c' } // 渐变终止色 |
| | | { offset: 1, color: '#db924c' } // 渐变终止色 |
| | | ]) |
| | | }, |
| | | |
| | | label: { |
| | | show: true, // 显示标签 |
| | | show: true, // 显示标签 |
| | | position: 'top', // 让标签显示在柱子顶部 |
| | | color: '#666666', // 文字颜色 |
| | | fontSize: 14, // 文字大小 |
| | | color: '#666666', // 文字颜色 |
| | | fontSize: 14 // 文字大小 |
| | | } |
| | | } |
| | | ] |
| | |
| | | myChart.resize() |
| | | }) |
| | | }, |
| | | initDept3() { |
| | | initDept3 () { |
| | | if (this.yearList.length === 0) return |
| | | |
| | | const myChart = echarts.init(document.querySelector('#echart3')) |
| | | |
| | | let names = this.yearList.map(item => item.name) |
| | | let datas = this.yearList.map(item => item.total) |
| | | const names = this.yearList.map(item => item.name) |
| | | const datas = this.yearList.map(item => item.total) |
| | | |
| | | let option = { |
| | | const option = { |
| | | tooltip: { |
| | | trigger: 'axis', |
| | | axisPointer: { |
| | |
| | | axisLabel: { |
| | | formatter: function (value) { |
| | | // 四舍五入到最近的整数 |
| | | return Math.round(value); |
| | | return Math.round(value) |
| | | } |
| | | } |
| | | }, |
| | |
| | | myChart.resize() |
| | | }) |
| | | }, |
| | | clear() { |
| | | clear () { |
| | | this.filters = {} |
| | | this.getData() |
| | | } |
| | |
| | | |
| | | .main_table { |
| | | display: flex; |
| | | align-items: start; |
| | | align-items: flex-start; |
| | | justify-content: space-between; |
| | | .main_table_echart { |
| | | width: 64%; |
| | |
| | | |
| | | .main_content { |
| | | display: flex; |
| | | align-items: start; |
| | | align-items: flex-start; |
| | | justify-content: space-between; |
| | | height: 500px; |
| | | margin-bottom: 10px; |