| | |
| | | <!-- </QueryForm>--> |
| | | <div class="main_content"> |
| | | <div class="type_wrap"> |
| | | <div class="title">隐患类型统计</div> |
| | | <div class="title">本月隐患类型统计</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 class="dept_wrap"> |
| | | <div class="title">隐患归属部门统计</div> |
| | | <div class="title">本月隐患归属部门统计</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=""> |
| | |
| | | |
| | | this.yearList = res.yearList |
| | | |
| | | this.departmentList = res.departmentList.slice(0, 10) |
| | | this.departmentList = res.departmentSortList.slice(0, 10) |
| | | |
| | | this.typeList = res.cateList || [] |
| | | this.deptList = res.departmentList || [] |
| | |
| | | grid: { |
| | | left: '10%', |
| | | right: '10%', |
| | | bottom: '0%', |
| | | bottom: '10%', |
| | | top: '20%', |
| | | containLabel: true |
| | | }, |
| | |
| | | minInterval: 1, |
| | | axisLine: { |
| | | show: true, |
| | | }, |
| | | } |
| | | }, |
| | | series: [ |
| | | { |
| | |
| | | |
| | | let option = { |
| | | tooltip: { |
| | | trigger: 'item' |
| | | trigger: 'axis', |
| | | axisPointer: { |
| | | type: 'line' |
| | | } |
| | | }, |
| | | grid: { |
| | | left: '5%', |
| | |
| | | type: 'value', |
| | | axisLine: { |
| | | show: true |
| | | }, |
| | | axisLabel: { |
| | | formatter: function (value) { |
| | | // 四舍五入到最近的整数 |
| | | return Math.round(value); |
| | | } |
| | | } |
| | | }, |
| | | series: [ |
| | |
| | | overflow-x: hidden; |
| | | padding: 15px; |
| | | box-sizing: border-box; |
| | | background-color: #ffffff; |
| | | background-color: #F4F7FC; |
| | | .main_head { |
| | | width: 100%; |
| | | display: flex; |
| | | align-items: center; |
| | | justify-content: space-between; |
| | | margin-bottom: 20px; |
| | | margin-bottom: 10px; |
| | | background-color: #ffffff; |
| | | padding: 20px; |
| | | box-sizing: border-box; |
| | | .blue { |
| | | border-left: 5px solid blue; |
| | | border-left: 8px solid #12BB8B; |
| | | } |
| | | .red { |
| | | border-left: 5px solid red; |
| | | border-left: 8px solid #F6CF46; |
| | | } |
| | | .yellow { |
| | | border-left: 5px solid yellow; |
| | | border-left: 8px solid #5DC9FB; |
| | | } |
| | | .orange { |
| | | border-left: 5px solid orange; |
| | | border-left: 8px solid #FF9E56; |
| | | } |
| | | .darkBlue { |
| | | border-left: 5px solid #0000a8; |
| | | border-left: 8px solid #6B6EFF; |
| | | } |
| | | .main_head_item { |
| | | width: 19%; |
| | | height: 70px; |
| | | height: 112px; |
| | | display: flex; |
| | | flex-direction: column; |
| | | align-items: center; |
| | | justify-content: center; |
| | | box-sizing: border-box; |
| | | border-radius: 5px; |
| | | background-color: #ffffff; |
| | | background: #F4F7FC; |
| | | span { |
| | | &:nth-child(1) { |
| | | font-size: 22px; |
| | | color: black; |
| | | font-weight: bold; |
| | | font-weight: 600; |
| | | font-size: 30px; |
| | | color: #222222; |
| | | } |
| | | &:nth-child(2) { |
| | | font-size: 16px; |
| | | color: black; |
| | | font-weight: 400; |
| | | font-size: 14px; |
| | | color: #222222; |
| | | margin-top: 10px; |
| | | } |
| | | } |
| | | } |
| | |
| | | align-items: start; |
| | | justify-content: space-between; |
| | | .main_table_echart { |
| | | flex: 1; |
| | | width: 64%; |
| | | height: 400px; |
| | | background-color: #ffffff; |
| | | padding: 20px; |
| | | box-sizing: border-box; |
| | | .title { |
| | | font-weight: 600; |
| | | font-size: 16px; |
| | |
| | | } |
| | | } |
| | | .main_table_list { |
| | | margin-left: 20px; |
| | | flex-shrink: 0; |
| | | width: 500px; |
| | | width: 35%; |
| | | padding: 20px; |
| | | box-sizing: border-box; |
| | | background-color: #ffffff; |
| | | .title { |
| | | font-weight: 600; |
| | | font-size: 16px; |
| | |
| | | |
| | | .main_content { |
| | | display: flex; |
| | | align-items: start; |
| | | justify-content: space-between; |
| | | height: 500px; |
| | | |
| | | margin-bottom: 10px; |
| | | .title { |
| | | font-weight: 600; |
| | | font-size: 16px; |
| | | color: #222222; |
| | | /*margin-bottom: 20px;*/ |
| | | margin-top: 20px; |
| | | } |
| | | |
| | | .type_wrap { |
| | | flex: 11; |
| | | width: 49.5%; |
| | | flex-shrink: 0; |
| | | height: calc(100% - 20px); |
| | | height: 100%; |
| | | /*border-right: 12px solid #f7f7f7;*/ |
| | | |
| | | background-color: #ffffff; |
| | | padding: 20px; |
| | | box-sizing: border-box; |
| | | |
| | | .echart1 { |
| | | width: 100%; |
| | | height: calc(100% - 60px); |
| | | height: 100%; |
| | | } |
| | | } |
| | | |
| | | .dept_wrap { |
| | | flex: 10; |
| | | width: 49.5%; |
| | | flex-shrink: 0; |
| | | height: calc(100% - 20px); |
| | | padding-left: 20px; |
| | | |
| | | height: 100%; |
| | | background-color: #ffffff; |
| | | padding: 20px; |
| | | box-sizing: border-box; |
| | | .echart2 { |
| | | width: 100%; |
| | | height: calc(100% - 60px); |
| | | height: 100%; |
| | | } |
| | | } |
| | | } |