|  |  |  | 
|---|
|  |  |  | <div class="main_content"> | 
|---|
|  |  |  | <div class="type_wrap"> | 
|---|
|  |  |  | <div class="title">隐患类型统计</div> | 
|---|
|  |  |  | <div class="echart1" ref="typeRef"></div> | 
|---|
|  |  |  | <div v-show="typeList && typeList.length > 0" class="echart1" ref="typeRef"></div> | 
|---|
|  |  |  | <div v-show="typeList.length == 0" style="width: 100%;height: 100%;display: flex;align-items: center;justify-content: center;"> | 
|---|
|  |  |  | <img style="width: 240px;" src="@/assets/images/default_homeimg.png" alt=""> | 
|---|
|  |  |  | </div> | 
|---|
|  |  |  |  | 
|---|
|  |  |  | </div> | 
|---|
|  |  |  | <div class="dept_wrap"> | 
|---|
|  |  |  | <div class="title">隐患归属部门统计</div> | 
|---|
|  |  |  | <div class="echart2" ref="deptRef"></div> | 
|---|
|  |  |  | <div v-show="deptList && deptList.length > 0" class="echart2" ref="deptRef"></div> | 
|---|
|  |  |  | <div v-show="deptList.length == 0" style="width: 100%;height: 100%;display: flex;align-items: center;justify-content: center;"> | 
|---|
|  |  |  | <img style="width: 240px;" src="@/assets/images/default_homeimg.png" alt=""> | 
|---|
|  |  |  | </div> | 
|---|
|  |  |  | </div> | 
|---|
|  |  |  | </div> | 
|---|
|  |  |  | </div> | 
|---|
|  |  |  | 
|---|
|  |  |  | data() { | 
|---|
|  |  |  | return { | 
|---|
|  |  |  | filters: { | 
|---|
|  |  |  | fastdate: '0', | 
|---|
|  |  |  | fastdate: '29', | 
|---|
|  |  |  | queryStartTime: '', | 
|---|
|  |  |  | queryEndTime: '' | 
|---|
|  |  |  | }, | 
|---|
|  |  |  | 
|---|
|  |  |  | options: [ | 
|---|
|  |  |  | { label: '待处理', value: '0' }, | 
|---|
|  |  |  | { label: '已处理', value: '1' }, | 
|---|
|  |  |  | { label: '不处理', value: '2' }, | 
|---|
|  |  |  | { label: '已退回', value: '2' }, | 
|---|
|  |  |  | ] | 
|---|
|  |  |  | }, | 
|---|
|  |  |  | { | 
|---|
|  |  |  | 
|---|
|  |  |  | } | 
|---|
|  |  |  | }, | 
|---|
|  |  |  | mounted() { | 
|---|
|  |  |  | this.changeRadio('0') | 
|---|
|  |  |  | this.changeRadio('29') | 
|---|
|  |  |  | // this.getData() | 
|---|
|  |  |  | }, | 
|---|
|  |  |  | methods: { | 
|---|
|  |  |  | changeRadio(day) { | 
|---|
|  |  |  | 
|---|
|  |  |  | if (res) { | 
|---|
|  |  |  | this.typeList = res.cateList || [] | 
|---|
|  |  |  | this.deptList = res.departmentList || [] | 
|---|
|  |  |  | this.initType() | 
|---|
|  |  |  | this.initDept() | 
|---|
|  |  |  | this.$nextTick(() => { | 
|---|
|  |  |  | this.initType() | 
|---|
|  |  |  | this.initDept() | 
|---|
|  |  |  | }) | 
|---|
|  |  |  |  | 
|---|
|  |  |  | } | 
|---|
|  |  |  | }) | 
|---|
|  |  |  |  | 
|---|
|  |  |  | 
|---|
|  |  |  | this.typeList.forEach(i => { | 
|---|
|  |  |  | total += i.total | 
|---|
|  |  |  | }) | 
|---|
|  |  |  | let colors = ['#d75a44', '#e39f4d', '#7ac7f6', '#7ac7f6', '#4469ee', '#698af0', '#9fb5f4', '#b6c7f7', '#c8d5f8'] | 
|---|
|  |  |  | let colors = ['#d75a44', '#e39f4d', '#f0d05f', '#7ac7f6', '#4469ee', '#698af0','#86a2f1','#a1b4f6','#a0b5f5', '#9fb5f4', '#b6c7f7', '#c8d5f8'] | 
|---|
|  |  |  | let option = { | 
|---|
|  |  |  | grid: { | 
|---|
|  |  |  | left: '0%', | 
|---|
|  |  |  | // right: '4%', | 
|---|
|  |  |  | // bottom: '3%', | 
|---|
|  |  |  | top: '0%', | 
|---|
|  |  |  | containLabel: true | 
|---|
|  |  |  | }, | 
|---|
|  |  |  | title: [ | 
|---|
|  |  |  | { | 
|---|
|  |  |  | text: '隐患总数', | 
|---|
|  |  |  | top: '46%', | 
|---|
|  |  |  | left: '46%', | 
|---|
|  |  |  | left: '45%', | 
|---|
|  |  |  | textStyle: { | 
|---|
|  |  |  | color: '#666666', | 
|---|
|  |  |  | fontSize: 16, | 
|---|
|  |  |  | 
|---|
|  |  |  | }, { | 
|---|
|  |  |  | text: total, | 
|---|
|  |  |  | top: '50%', | 
|---|
|  |  |  | left: '48%', | 
|---|
|  |  |  | left: '47.6%', | 
|---|
|  |  |  | textStyle: { | 
|---|
|  |  |  | color: '#080404', | 
|---|
|  |  |  | fontSize: 24, | 
|---|
|  |  |  | 
|---|
|  |  |  | }, | 
|---|
|  |  |  | series: [ | 
|---|
|  |  |  | { | 
|---|
|  |  |  | name: 'Access From', | 
|---|
|  |  |  | type: 'pie', | 
|---|
|  |  |  | radius: ['28%', '46%'], | 
|---|
|  |  |  | radius: ['24%', '40%'], | 
|---|
|  |  |  | label: { | 
|---|
|  |  |  | formatter: "{a|{b}}\n\n{c} | {d}%", | 
|---|
|  |  |  | rich: { | 
|---|
|  |  |  | 
|---|
|  |  |  | </script> | 
|---|
|  |  |  |  | 
|---|
|  |  |  | <style lang="scss" scoped> | 
|---|
|  |  |  | .main_app { | 
|---|
|  |  |  | /*.main_app { | 
|---|
|  |  |  | height: 100%; | 
|---|
|  |  |  | } | 
|---|
|  |  |  | }*/ | 
|---|
|  |  |  |  | 
|---|
|  |  |  | .main_content { | 
|---|
|  |  |  | display: flex; | 
|---|
|  |  |  | 
|---|
|  |  |  | } | 
|---|
|  |  |  |  | 
|---|
|  |  |  | .type_wrap { | 
|---|
|  |  |  | flex: 5; | 
|---|
|  |  |  | flex: 11; | 
|---|
|  |  |  | flex-shrink: 0; | 
|---|
|  |  |  | height: calc(100% - 20px); | 
|---|
|  |  |  | border-right: 12px solid #f7f7f7; | 
|---|
|  |  |  | 
|---|
|  |  |  | } | 
|---|
|  |  |  |  | 
|---|
|  |  |  | .dept_wrap { | 
|---|
|  |  |  | flex: 4; | 
|---|
|  |  |  | flex: 10; | 
|---|
|  |  |  | flex-shrink: 0; | 
|---|
|  |  |  | height: calc(100% - 20px); | 
|---|
|  |  |  | padding-left: 20px; | 
|---|
|  |  |  | 
|---|
|  |  |  | } | 
|---|
|  |  |  | } | 
|---|
|  |  |  | } | 
|---|
|  |  |  | </style> | 
|---|
|  |  |  | </style> | 
|---|