| | |
| | | <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: 43px;" 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'" |
| | | style="margin-left: 20px; width: 130px;" |
| | | style="margin-left: 10px; width: 130px;" |
| | | placeholder="请选择"> |
| | | </el-date-picker> |
| | | </div> |
| | |
| | | <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: 43px;" 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" |
| | | :clearable="false" |
| | | size="mini" |
| | | @change="getReportLists()" |
| | | :value-format="radio === 'month' ? 'yyyy-MM' : 'yyyy'" |
| | | style="margin-left: 20px; width: 130px;" |
| | | style="margin-left: 10px; width: 130px;" |
| | | placeholder="请选择"> |
| | | </el-date-picker> |
| | | </div> |
| | | <el-button type="primary" size="mini" style="margin-left: 20px;" @click="daochu">导出</el-button> |
| | | <el-button type="primary" icon="el-icon-upload2" style="margin-left: 20px;" @click="daochu">导出</el-button> |
| | | </div> |
| | | <div class="list_head"> |
| | | <div class="list_head_item" v-for="(item, index) in column" :key="index">{{item}}</div> |
| | |
| | | |
| | | let option = { |
| | | grid: { |
| | | left: '5%', |
| | | right: '10%', |
| | | bottom: '0%', |
| | | top: '20%', |
| | | left: '0%', |
| | | right: '5%', |
| | | bottom: '10%', |
| | | top: '10%', |
| | | containLabel: true |
| | | }, |
| | | tooltip: { |
| | |
| | | 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; |
| | | .echart2 { |
| | | width: 100%; |
| | | height: calc(100% - 60px); |
| | | height: 100%; |
| | | } |
| | | } |
| | | } |
| | |
| | | <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%; |
| | | } |
| | | } |
| | | } |
| | |
| | | filed: 'companyName', |
| | | type: 'input', |
| | | label: '公司名称' |
| | | }, |
| | | { |
| | | filed: 'date', |
| | | type: 'daterange', |
| | | label: '起始日期' |
| | | } |
| | | ], |
| | | online: true |
| | |
| | | }, |
| | | getList (page) { |
| | | const { pagination, filters } = this |
| | | console.log(filters) |
| | | if (filters.date && filters.date.length === 2) { |
| | | filters.queryStarttime = filters.date[0] |
| | | filters.queryEndtime = filters.date[1] |
| | | } else { |
| | | filters.queryStarttime = '' |
| | | filters.queryEndtime = '' |
| | | } |
| | | pagination.page = page || pagination.page |
| | | fetchList({ |
| | | model: { ...filters }, |
| | |
| | | <el-form-item label="组织" prop="companyName"> |
| | | <el-input v-model="searchForm.companyName" placeholder="请输入组织名称" @keypress.enter.native="search"></el-input> |
| | | </el-form-item> |
| | | <el-form-item label="车辆类型" prop="carType"> |
| | | <el-select v-model="searchForm.carType" placeholder="请选择"> |
| | | <el-option label="内部车辆" value="0"></el-option> |
| | | <el-option label="相关方车辆" value="1"></el-option> |
| | | <el-option label="访客车辆" value="2"></el-option> |
| | | <el-option label="内运物流车" value="3"></el-option> |
| | | <el-option label="外协车辆" value="4"></el-option> |
| | | <el-option label="市公司卸货车" value="5"></el-option> |
| | | <el-option label="未登记车辆" value="6"></el-option> |
| | | </el-select> |
| | | <el-form-item label="车辆分类" prop="categoryName"> |
| | | <el-input v-model="searchForm.categoryName" placeholder="请输入车辆分类" @keypress.enter.native="search"></el-input> |
| | | </el-form-item> |
| | | <el-form-item label="起止时间" prop="startTime"> |
| | | <!-- <el-date-picker @change="seleTime" v-model="time" type="datetimerange" format="yyyy-MM-dd HH:mm:ss" |
| | |
| | | <span>{{ row.companyName || row.visitCompanyName || '' }}</span> |
| | | </template> |
| | | </el-table-column> |
| | | <el-table-column prop="carType" label="车辆类型" min-width="100px"> |
| | | <template slot-scope="{ row }"> |
| | | <span v-if="row.carType == 0">内部车辆</span> |
| | | <span v-else-if="row.carType == 1">相关方车辆</span> |
| | | <span v-else-if="row.carType == 2">访客车辆</span> |
| | | <span v-else-if="row.carType == 3">内运物流车</span> |
| | | <span v-else-if="row.carType == 4">外协车辆</span> |
| | | <span v-else-if="row.carType == 5">市公司卸货车</span> |
| | | <span v-else-if="row.carType == 6">未登记车辆</span> |
| | | </template> |
| | | </el-table-column> |
| | | <el-table-column prop="categoryName" label="车辆分类" min-width="100px"></el-table-column> |
| | | <el-table-column prop="name" label="姓名" min-width="100px"></el-table-column> |
| | | <el-table-column prop="phone" label="手机号" min-width="100px"></el-table-column> |
| | | <!-- <el-table-column label="进场门禁" min-width="100px"> |
| | |
| | | keyWords: '', |
| | | startTime: '', |
| | | endTime: '', |
| | | categoryName: '', |
| | | radio: 0 |
| | | }, |
| | | time: [] |
| | |
| | | getAppHeaderNav(4).then(res => { |
| | | window.open(res, '_blank') |
| | | }) |
| | | return |
| | | } |
| | | if (item.name == '食堂消费入口') { |
| | | if (item.name == '食堂消费') { |
| | | getAppHeaderNav(6).then(res => { |
| | | window.open(res, '_blank') |
| | | }) |
| | | return |
| | | } |
| | | this.$router.push(item.path) |
| | | }, |
| | |
| | | <div>${params[0].name}</div> |
| | | <div style="display: flex;align-items: center;"> |
| | | <div style="width: 10px;height: 10px;border-radius: 50%;background-color: #6feef0;"></div> |
| | | <span style="margin-left: 6px;">${params[0].value}</span> |
| | | <span style="margin-left: 6px;">${params[0].value || 0}</span> |
| | | <div>辆</div> |
| | | </div> |
| | | </div> |
| | |
| | | width: 100%; |
| | | height: 100%; |
| | | overflow: auto; |
| | | padding: 20px; |
| | | padding: 20px 20px 40px 20px; |
| | | padding-top: 92px; |
| | | |
| | | .home_header { |
| | |
| | | this.$nextTick(() => { |
| | | this.$refs.operaCarsWindow.open(str, row) |
| | | if (row && row.id) { |
| | | let form = { ...row, cateId: [] } |
| | | if (row.catePId) { form.cateId.push(row.catePId) } |
| | | if (row.cateId) { form.cateId.push(row.cateId) } |
| | | // let form = { ...row, cateId: [] } |
| | | let form = { ...row } |
| | | // if (row.catePId) { form.cateId.push(row.catePId) } |
| | | // if (row.cateId) { form.cateId.push(row.cateId) } |
| | | this.$refs.operaCarsWindow.form = form |
| | | this.$refs.operaCarsWindow.loadMember() |
| | | } |