|  |  |  | 
|---|
|  |  |  | <!--    </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=""> | 
|---|
|  |  |  | 
|---|
|  |  |  | 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%; | 
|---|
|  |  |  | } | 
|---|
|  |  |  | } | 
|---|
|  |  |  | } | 
|---|