| | |
| | | <div class="main_head"> |
| | | <div class="main_head_title"> |
| | | <span>入园车辆统计总览</span> |
| | | <el-radio-group v-model="isGroupBy" size="mini" @change="getData(), getRataLists(), getReportLists()"> |
| | | <el-radio-group v-model="isGroupBy" @change="getData(), getRataLists(), getReportLists()"> |
| | | <el-radio-button :label="0">按车次统计</el-radio-button> |
| | | <el-radio-button :label="1">按车辆统计</el-radio-button> |
| | | </el-radio-group> |
| | |
| | | <div class="dept_wrap"> |
| | | <div class="title"> |
| | | <span>车辆分类统计</span> |
| | | <el-radio-group style="margin-left: 20px;" v-model="dateType" size="mini" @change="changeDateType"> |
| | | <el-radio-button label="month">月</el-radio-button> |
| | | <el-radio-button label="year">年</el-radio-button> |
| | | <el-radio-group style="margin-left: 20px;" v-model="dateType" @change="changeDateType"> |
| | | <el-radio-button label="month">月度</el-radio-button> |
| | | <el-radio-button label="year">年度</el-radio-button> |
| | | </el-radio-group> |
| | | <el-date-picker |
| | | v-model="value" |
| | | :type="dateType" |
| | | size="mini" |
| | | :clearable="false" |
| | | @change="getRataLists()" |
| | | :value-format="dateType === 'month' ? 'yyyy-MM' : 'yyyy'" |
| | |
| | | <div class="main_table"> |
| | | <div class="main_table_list"> |
| | | <div class="title" style="display: flex; align-items: center; justify-content: space-between;"> |
| | | <div> |
| | | <div style="display: flex; align-items: center;"> |
| | | <span>入园车辆统计表</span> |
| | | <el-radio-group style="margin-left: 20px;" v-model="radio" size="mini" @change="changeBB"> |
| | | <el-radio-button label="month">月</el-radio-button> |
| | | <el-radio-button label="year">年</el-radio-button> |
| | | <el-radio-group style="margin-left: 20px;" v-model="radio" @change="changeBB"> |
| | | <el-radio-button label="month">月度</el-radio-button> |
| | | <el-radio-button label="year">年度</el-radio-button> |
| | | </el-radio-group> |
| | | <el-date-picker |
| | | v-model="date1" |
| | | :type="radio" |
| | | size="mini" |
| | | :clearable="false" |
| | | @change="getReportLists()" |
| | | :value-format="radio === 'month' ? 'yyyy-MM' : 'yyyy'" |
| | |
| | | placeholder="请选择"> |
| | | </el-date-picker> |
| | | </div> |
| | | <el-button type="primary" size="mini" style="margin-left: 20px;" @click="daochu">导出</el-button> |
| | | <el-button type="primary" style="margin-left: 20px;" icon="el-icon-upload2" @click="daochu">导出</el-button> |
| | | </div> |
| | | <div class="list_head"> |
| | | <div class="list_head_item" v-for="(item, index) in column" :key="index">{{item}}</div> |
| | |
| | | left: 'left' |
| | | }, |
| | | grid: { |
| | | left: '5%', |
| | | right: '10%', |
| | | bottom: '0%', |
| | | left: '0%', |
| | | right: '5%', |
| | | bottom: '10%', |
| | | top: '20%', |
| | | containLabel: true |
| | | }, |
| | |
| | | series: [ |
| | | { |
| | | data: datas, |
| | | type: 'line' |
| | | type: 'line', |
| | | areaStyle: { |
| | | normal: { |
| | | color: { |
| | | x: 0, |
| | | y: 0, |
| | | x2: 0, |
| | | y2: 1, |
| | | colorStops: [{ |
| | | offset: 0, |
| | | color: '#207FF7' // 0% 处的颜色 |
| | | }, { |
| | | offset: 1, |
| | | color: 'rgba(255,255,255,.2)' // 100% 处的颜色 |
| | | }], |
| | | globalCoord: false // 缺省为 false |
| | | } |
| | | } |
| | | }, |
| | | lineStyle: { // 线条样式 |
| | | color: { |
| | | type: 'linear', |
| | | x: 0, |
| | | y: 0, |
| | | x2: 0, |
| | | y2: 1, |
| | | colorStops: [{ |
| | | offset: 0, color: '#207FF7' // 0% 处的颜色 |
| | | }, { |
| | | offset: 1, color: '#207FF7' // 100% 处的颜色 |
| | | }] |
| | | }, |
| | | width: 2 // 线条粗细 |
| | | }, |
| | | symbol: 'circle', |
| | | symbolSize: 10, |
| | | itemStyle: { |
| | | borderWidth: 1, |
| | | borderColor: '#fff', |
| | | color: '#207FF7' |
| | | }, |
| | | smooth: false |
| | | } |
| | | ] |
| | | } |
| | |
| | | { |
| | | name: '访问来源', |
| | | type: 'pie', |
| | | radius: '55%', |
| | | radius: ['34%', '50%'], |
| | | labelLine: { |
| | | normal: { |
| | | length: 30, |
| | | length2: 100, |
| | | } |
| | | }, |
| | | label: { |
| | | formatter: "{a|{b}} {d}%", |
| | | rich: { |
| | | a: { |
| | | color: '#333333', |
| | | fontSize: 14, |
| | | fontWeight: 500 |
| | | } |
| | | }, |
| | | padding: [0,-50,20,-100] |
| | | }, |
| | | data: data |
| | | } |
| | | ] |
| | |
| | | overflow-x: hidden; |
| | | padding: 15px; |
| | | box-sizing: border-box; |
| | | background-color: #ffffff; |
| | | background-color: #F4F7FC; |
| | | .main_head { |
| | | width: 100%; |
| | | display: flex; |
| | | align-items: center; |
| | | flex-direction: column; |
| | | margin-bottom: 20px; |
| | | margin-bottom: 10px; |
| | | background-color: #ffffff; |
| | | padding: 20px; |
| | | box-sizing: border-box; |
| | | .main_head_title { |
| | | width: 100%; |
| | | display: flex; |
| | | align-items: center; |
| | | margin-bottom: 20px; |
| | | span { |
| | | font-weight: 600; |
| | | font-size: 16px; |
| | | font-weight: 500; |
| | | font-size: 18px; |
| | | color: #222222; |
| | | margin-right: 30px; |
| | | } |
| | |
| | | align-items: center; |
| | | justify-content: space-between; |
| | | .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-color: #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; |
| | | } |
| | | } |
| | | } |
| | |
| | | |
| | | .main_table { |
| | | display: flex; |
| | | align-items: center; |
| | | align-items: start; |
| | | justify-content: space-between; |
| | | height: 300px; |
| | | margin-top: 10px; |
| | | .main_table_list { |
| | | margin-left: 20px; |
| | | background-color: #ffffff; |
| | | padding: 20px; |
| | | box-sizing: border-box; |
| | | flex: 1; |
| | | .title { |
| | | display: flex; |
| | | align-items: center; |
| | | span { |
| | | font-weight: 600; |
| | | font-size: 16px; |
| | | font-weight: 500; |
| | | font-size: 18px; |
| | | color: #222222; |
| | | } |
| | | } |
| | | .list_head { |
| | | width: 100%; |
| | | height: 35px; |
| | | height: 50px; |
| | | display: flex; |
| | | align-items: center; |
| | | background-color: #ececec; |
| | | background-color: #F7F7F7; |
| | | border-left: 1px solid #DFE2E8; |
| | | border-top: 1px solid #DFE2E8; |
| | | margin-top: 15px; |
| | | .list_head_item { |
| | | flex: 1; |
| | |
| | | justify-content: center; |
| | | font-size: 13px; |
| | | color: #222222; |
| | | font-weight: 500; |
| | | border-right: 1px solid #DFE2E8; |
| | | } |
| | | } |
| | | .table_box { |
| | | width: 100%; |
| | | height: 234px; |
| | | border-bottom: 1px solid #DFE2E8; |
| | | .list_content { |
| | | width: 100%; |
| | | height: 40px; |
| | | height: 50px; |
| | | display: flex; |
| | | align-items: center; |
| | | border-left: 1px solid #DFE2E8; |
| | | border-top: 1px solid #DFE2E8; |
| | | .list_head_item { |
| | | flex: 1; |
| | | height: 100%; |
| | | display: flex; |
| | | border-right: 1px solid #DFE2E8; |
| | | align-items: center; |
| | | justify-content: center; |
| | | font-size: 13px; |
| | |
| | | } |
| | | } |
| | | .main_table_list1 { |
| | | margin-left: 20px; |
| | | width: 300px; |
| | | margin-left: 10px; |
| | | width: 520px; |
| | | padding: 20px; |
| | | box-sizing: border-box; |
| | | flex-shrink: 0; |
| | | background-color: #ffffff; |
| | | .title { |
| | | font-weight: 600; |
| | | font-size: 16px; |
| | | font-weight: 500; |
| | | font-size: 18px; |
| | | color: #222222; |
| | | } |
| | | .list_head { |
| | | width: 100%; |
| | | height: 35px; |
| | | height: 50px; |
| | | display: flex; |
| | | align-items: center; |
| | | background-color: #ececec; |
| | | background-color: #F7F7F7; |
| | | border-left: 1px solid #DFE2E8; |
| | | border-top: 1px solid #DFE2E8; |
| | | margin-top: 15px; |
| | | .list_head_item { |
| | | flex: 1; |
| | | flex: 1.8; |
| | | height: 100%; |
| | | display: flex; |
| | | align-items: center; |
| | | justify-content: center; |
| | | font-size: 13px; |
| | | color: #222222; |
| | | font-weight: 500; |
| | | border-right: 1px solid #DFE2E8; |
| | | &:last-child { |
| | | flex: 1; |
| | | } |
| | | } |
| | | } |
| | | .table_box { |
| | | width: 100%; |
| | | height: 234px; |
| | | border-bottom: 1px solid #DFE2E8; |
| | | .list_content { |
| | | width: 100%; |
| | | height: 40px; |
| | | height: 50px; |
| | | display: flex; |
| | | align-items: center; |
| | | border-left: 1px solid #DFE2E8; |
| | | border-top: 1px solid #DFE2E8; |
| | | .list_head_item { |
| | | flex: 1; |
| | | flex: 1.8; |
| | | height: 100%; |
| | | display: flex; |
| | | align-items: center; |
| | | border-right: 1px solid #DFE2E8; |
| | | justify-content: center; |
| | | text-align: center; |
| | | font-size: 13px; |
| | | color: #222222; |
| | | &:last-child { |
| | | flex: 1; |
| | | } |
| | | } |
| | | } |
| | | } |
| | |
| | | |
| | | .main_content { |
| | | display: flex; |
| | | align-items: center; |
| | | justify-content: space-between; |
| | | height: 400px; |
| | | |
| | | .title { |
| | | font-weight: 600; |
| | | font-size: 16px; |
| | | font-weight: 500; |
| | | font-size: 18px; |
| | | color: #222222; |
| | | /*margin-bottom: 20px;*/ |
| | | margin-top: 20px; |
| | | } |
| | | |
| | | .type_wrap { |
| | | flex: 11; |
| | | flex-shrink: 0; |
| | | height: calc(100% - 20px); |
| | | flex: 1; |
| | | height: 100%; |
| | | background-color: #ffffff; |
| | | padding: 20px; |
| | | box-sizing: border-box; |
| | | /*border-right: 12px solid #f7f7f7;*/ |
| | | |
| | | |
| | | #echart1 { |
| | | width: 100%; |
| | | height: calc(100% - 60px); |
| | | height: 100%; |
| | | } |
| | | } |
| | | |
| | | .dept_wrap { |
| | | flex: 8; |
| | | width: 520px; |
| | | flex-shrink: 0; |
| | | height: calc(100% - 20px); |
| | | padding-left: 20px; |
| | | |
| | | height: 100%; |
| | | background-color: #ffffff; |
| | | padding: 20px; |
| | | box-sizing: border-box; |
| | | margin-left: 10px; |
| | | .echart_2 { |
| | | width: 100%; |
| | | height: calc(100% - 60px); |
| | | height: 100%; |
| | | } |
| | | } |
| | | } |