From 261bb67c5c2ce8095d849b142abb799de53c0fa2 Mon Sep 17 00:00:00 2001
From: doum <doum>
Date: 星期四, 05 三月 2026 18:11:26 +0800
Subject: [PATCH] 更改头部
---
admin/src/views/business/admissionStatistics.vue | 721 +++++++++++++++++++++++++++++++++---------------------
1 files changed, 436 insertions(+), 285 deletions(-)
diff --git a/admin/src/views/business/admissionStatistics.vue b/admin/src/views/business/admissionStatistics.vue
index 624046c..72a9752 100644
--- a/admin/src/views/business/admissionStatistics.vue
+++ b/admin/src/views/business/admissionStatistics.vue
@@ -3,9 +3,9 @@
<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-button :label="0">鎸夎溅娆＄粺璁�</el-radio-button>
- <el-radio-button :label="1">鎸夎溅杈嗙粺璁�</el-radio-button>
+ <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>
<div class="main_head_bottom">
@@ -34,30 +34,30 @@
<div class="main_content">
<div class="type_wrap">
<div class="title">鍏ㄥ勾鍏ュ洯浜哄憳瓒嬪娍</div>
- <div class="echart1" ref="typeRef" v-if="info.cumulativeDataList"></div>
- <div style="width: 100%;height: 100%;display: flex;align-items: center;justify-content: center;" v-else>
+ <div class="echart1" ref="typeRef" v-show="info.cumulativeDataList"></div>
+ <div style="width: 100%;height: 100%;display: flex;align-items: center;justify-content: center;" v-show="!info.cumulativeDataList">
<img style="width: 200px;" src="@/assets/images/default_homeimg.png" alt="">
</div>
</div>
<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 id="echart2" ref="deptRef" v-if="listZB.length > 0"></div>
- <div style="width: 100%;height: 100%;display: flex;align-items: center;justify-content: center;" v-else>
+ <div id="echart2" v-show="listZB.length > 0"></div>
+ <div style="width: 100%;height: 100%;display: flex;align-items: center;justify-content: center;" v-show="listZB.length === 0">
<img style="width: 200px;" src="@/assets/images/default_homeimg.png" alt="">
</div>
</div>
@@ -65,260 +65,362 @@
<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"
- size="mini"
+ :clearable="false"
@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>
- </div>
- <div class="table_box">
- <div class="list_content" v-for="(item, index) in list" :key="index">
- <div class="list_head_item">鍌ㄨ繍绉�</div>
- <div class="list_head_item">鑱斿悎宸ユ埧</div>
- <div class="list_head_item">232</div>
- <div class="list_head_item">鍌ㄨ繍绉�</div>
- <div class="list_head_item">鑱斿悎宸ユ埧</div>
- <div class="list_head_item">232</div>
- <div class="list_head_item">鍌ㄨ繍绉�</div>
- <div class="list_head_item">鑱斿悎宸ユ埧</div>
- <div class="list_head_item">232</div>
- <div class="list_head_item">232</div>
- </div>
- </div>
+ <template v-if="column.length > 0">
+ <el-table
+ style="width: 100%; margin-top: 15px;"
+ :data="list"
+ :header-row-style="{ backgroundColor: '#F7F7F7' }"
+ border
+ >
+ <el-table-column :prop="item" :label="item" align="center" :fixed="index === 0 ? true : index === column.length - 1 ? 'right' : false" v-for="(item, index) in column" :key="index"></el-table-column>
+ </el-table>
+ </template>
+ <div class="list_wu" v-else>鏆傛棤鏁版嵁</div>
</div>
<div class="main_table_list1">
<div class="title">
<span>鏈勾浜哄憳绱鍏ュ洯缁熻</span>
</div>
- <div class="list_head">
- <div class="list_head_item">杞﹁締鍒嗙被</div>
- <div class="list_head_item">鍏ュ眬娆℃暟</div>
- </div>
- <div class="table_box">
- <div class="list_content" v-for="(item, index) in info.yearSortList" :key="index">
- <div class="list_head_item">{{item.name}}</div>
- <div class="list_head_item">{{item.total}}</div>
- </div>
- </div>
+ <el-table
+ style="width: 100%; margin-top: 15px;"
+ :data="info.yearSortList"
+ :header-row-style="{ backgroundColor: '#F7F7F7' }"
+ border
+ >
+ <el-table-column prop="name" label="浜哄憳鍒嗙被" align="center"></el-table-column>
+ <el-table-column prop="total" label="鍏ュ洯娆℃暟" align="center"></el-table-column>
+ </el-table>
</div>
</div>
</div>
</template>
<script>
- import * as echarts from 'echarts'
- import { getInParkUserData, getRataList, getReportList, reportExportExcel } from '@/api/business'
- export default {
- data() {
- return {
- info: null,
- isGroupBy: 0,
- radio: 'month',
- value: '',
- dateType: 'month',
- date: '',
- date1: '',
+import * as echarts from 'echarts'
+import { getInParkUserData, getRataList, getReportList, reportExportExcel } from '@/api/business'
+export default {
+ data () {
+ return {
+ info: null,
+ isGroupBy: 0,
+ radio: 'month',
+ value: '',
+ dateType: 'month',
+ date: '',
+ date1: '',
- listZB: [],
- column: [],
- list: []
- }
+ listZB: [],
+ column: [],
+ list: []
+ }
+ },
+ mounted () {
+ var now = new Date()
+ var year = now.getFullYear()
+ var month = now.getMonth() + 1 > 9 ? now.getMonth() + 1 : `0${now.getMonth() + 1}`
+ this.value = `${year}-${month}`
+ this.date1 = `${year}-${month}`
+
+ this.getData()
+ this.getRataLists()
+ this.getReportLists()
+ },
+ methods: {
+ // 瀵煎嚭
+ daochu () {
+ reportExportExcel({ dateStr: this.date1, isGroupBy: this.isGroupBy, type: 1 }).then(res => {
+ this.download(res)
+ })
},
- mounted() {
- var now = new Date();
- var year = now.getFullYear();
- var month = now.getMonth() + 1 > 9 ? now.getMonth() + 1 : `0${now.getMonth() + 1}`;
- this.value = `${year}-${month}`
- this.date1 = `${year}-${month}`
-
- this.getData()
- this.getRataLists()
+ changeBB () {
+ if (this.radio === 'month') {
+ const now = new Date()
+ const year = now.getFullYear()
+ const month = now.getMonth() + 1 > 9 ? now.getMonth() + 1 : `0${now.getMonth() + 1}`
+ this.date1 = `${year}-${month}`
+ } else {
+ const now = new Date()
+ const year = now.getFullYear()
+ this.date1 = `${year}`
+ }
this.getReportLists()
},
- methods: {
- // 瀵煎嚭
- daochu() {
- reportExportExcel({ dateStr: this.date1, isGroupBy: this.isGroupBy, type: 1 }).then(res => {
- this.download(res)
- console.log(res.data)
- })
- },
- changeBB() {
- if (this.radio === 'month') {
- let now = new Date();
- let year = now.getFullYear();
- let month = now.getMonth() + 1 > 9 ? now.getMonth() + 1 : `0${now.getMonth() + 1}`;
- this.date1 = `${year}-${month}`
- } else {
- let now = new Date();
- let year = now.getFullYear();
- this.date1 = `${year}`
- }
- this.getReportLists()
- },
- // 鍏ュ洯杞﹁締缁熻琛�
- getReportLists() {
- getReportList({ dateStr: this.date1, isGroupBy: this.isGroupBy, type: 1 })
- .then(res => {
- console.log(res)
-
- this.column = res.data.map(item => item[0])
-
- const keys = res.data.map(row => row[0]); // 鑾峰彇閿悕
- const values = res.data.map(row => row.slice(1, row.length)); // 鑾峰彇鍊�
-
- this.list = values[0].map((_, index) => {
- return keys.reduce((obj, key, i) => {
- obj[key] = values[i][index];
- return obj;
- }, {});
- });
- })
- },
- changeDateType() {
- if (this.dateType === 'month') {
- let now = new Date();
- let year = now.getFullYear();
- let month = now.getMonth() + 1 > 9 ? now.getMonth() + 1 : `0${now.getMonth() + 1}`;
- this.value = `${year}-${month}`
- } else {
- let now = new Date();
- let year = now.getFullYear();
- this.value = `${year}`
- }
- this.getRataLists()
- },
- // 杞﹁締鍒嗙被缁熻
- getRataLists() {
- getRataList({ dateStr: this.value, isGroupBy: this.isGroupBy, type: 1 })
- .then(res => {
- console.log(res)
- this.listZB = res
- this.$nextTick(() => {
- this.initDept()
- })
- })
- },
- // 鍩虹鏁版嵁
- getData() {
- getInParkUserData({ isGroupBy: this.isGroupBy, type: 1 }).then(res => {
- this.info = res
- this.$nextTick(() => {
- this.initType()
- })
- })
- },
- // 鍏ㄥ勾鍏ュ洯杞﹁締瓒嬪娍
- initType() {
- if (!this.info.cumulativeDataList) return
-
- const myChart = echarts.init(document.querySelector('.echart1'))
-
- let names = this.info.cumulativeDataList.map(item => item.name)
- let datas = this.info.cumulativeDataList.map(item => item.total)
-
- let option = {
- grid: {
- left: '5%',
- right: '10%',
- bottom: '0%',
- top: '20%',
- containLabel: true
- },
- xAxis: {
- type: 'category',
- data: names
- },
- yAxis: {
- type: 'value'
- },
- series: [
- {
- data: datas,
- type: 'line'
- }
- ]
- }
- myChart.setOption(option)
- window.addEventListener('resize', function () { // 鎵ц
- myChart.resize()
- })
- },
- // 杞﹁締鍒嗙被缁熻
- initDept() {
- if (!this.listZB) return
-
- const myChart = echarts.init(document.querySelector('#echart2'))
-
- let data = this.listZB.map(item => {
- return {
- value: item.total,
- name: item.name
+ // 鍏ュ洯杞﹁締缁熻琛�
+ getReportLists () {
+ getReportList({ dateStr: this.date1, isGroupBy: this.isGroupBy, type: 1 })
+ .then(res => {
+ if (!res || res.length === 0) {
+ this.column = []
+ this.list = []
+ return
}
+ this.column = res[0]
+ this.list = res.slice(1).map(row => {
+ const obj = {}
+ this.column.forEach((header, index) => {
+ obj[header] = row[index]
+ })
+ return obj
+ })
+ // if (res.length === 0) {
+ // this.column = []
+ // this.list = []
+ // return
+ // }
+ //
+ // this.column = res[0]
+ // this.list = res.slice(1, res.length);
})
-
- let option = {
- series : [
- {
- name: '璁块棶鏉ユ簮',
- type: 'pie',
- radius: '55%',
- data: data
- }
- ]
- }
- myChart.setOption(option)
- window.addEventListener('resize', function () { // 鎵ц
- myChart.resize()
- })
- },
- initDept3() {
- const myChart = echarts.init(document.querySelector('#echart3'))
-
- let option = {
- grid: {
- left: '5%',
- right: '10%',
- bottom: '0%',
- top: '20%',
- containLabel: true
- },
- xAxis: {
- type: 'category',
- data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
- },
- yAxis: {
- type: 'value'
- },
- series: [
- {
- data: [150, 230, 224, 218, 135, 147, 260],
- type: 'line'
- }
- ]
- }
- myChart.setOption(option)
- window.addEventListener('resize', function () { // 鎵ц
- myChart.resize()
- })
+ },
+ changeDateType () {
+ if (this.dateType === 'month') {
+ const now = new Date()
+ const year = now.getFullYear()
+ const month = now.getMonth() + 1 > 9 ? now.getMonth() + 1 : `0${now.getMonth() + 1}`
+ this.value = `${year}-${month}`
+ } else {
+ const now = new Date()
+ const year = now.getFullYear()
+ this.value = `${year}`
}
+ this.getRataLists()
+ },
+ // 杞﹁締鍒嗙被缁熻
+ getRataLists () {
+ getRataList({ dateStr: this.value, isGroupBy: this.isGroupBy, type: 1 })
+ .then(res => {
+ this.listZB = res
+ // this.$nextTick(() => {
+ // this.initDept()
+ // })
+ setTimeout(() => {
+ this.initDept()
+ }, 1000)
+ })
+ },
+ // 鍩虹鏁版嵁
+ getData () {
+ getInParkUserData({ isGroupBy: this.isGroupBy, type: 1 }).then(res => {
+ this.info = res
+ // this.$nextTick(() => {
+ // this.initType()
+ // })
+ setTimeout(() => {
+ this.initType()
+ }, 1000)
+ })
+ },
+ // 鍏ㄥ勾鍏ュ洯杞﹁締瓒嬪娍
+ initType () {
+ if (!this.info.cumulativeDataList) return
+
+ const myChart = echarts.init(document.querySelector('.echart1'))
+
+ const names = this.info.cumulativeDataList.map(item => item.name)
+ const datas = this.info.cumulativeDataList.map(item => item.total)
+
+ const option = {
+ grid: {
+ left: '0%',
+ right: '5%',
+ bottom: '10%',
+ top: '10%',
+ containLabel: true
+ },
+ tooltip: {
+ trigger: 'axis',
+ axisPointer: {
+ type: 'line'
+ }
+ },
+ xAxis: {
+ type: 'category',
+ data: names
+ },
+ yAxis: {
+ type: 'value',
+ axisLine: {
+ show: true
+ },
+ axisLabel: {
+ formatter: function (value) {
+ // 鍥涜垗浜斿叆鍒版渶杩戠殑鏁存暟
+ return Math.round(value)
+ }
+ }
+ },
+ graphic: {
+ elements: [
+ {
+ type: 'text',
+ left: 'left',
+ top: 'top',
+ style: {
+ text: '浜哄憳鏁�',
+ textAlign: 'center',
+ fill: '#333'
+ }
+ }
+ ]
+ },
+ series: [
+ {
+ data: datas,
+ 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
+ }
+ ]
+ }
+ myChart.setOption(option)
+ window.addEventListener('resize', function () { // 鎵ц
+ myChart.resize()
+ })
+ },
+ // 杞﹁締鍒嗙被缁熻
+ initDept () {
+ if (!this.listZB) return
+
+ const dom = document.getElementById('echart2')
+ console.log(dom)
+ const myChart = echarts.init(dom)
+
+ const data = this.listZB.map(item => {
+ return {
+ value: item.total,
+ name: item.name
+ }
+ })
+
+ const option = {
+ tooltip: {
+ trigger: 'item'
+ },
+ legend: {
+ show: false,
+ orient: 'vertical',
+ left: 'left'
+ },
+ series: [
+ {
+ name: '璁块棶鏉ユ簮',
+ type: 'pie',
+ radius: ['34%', '50%'],
+ labelLine: {
+ normal: {
+ length: 30,
+ length2: 70
+ }
+ },
+ label: {
+ formatter: '{a|{b}} {d}%',
+ rich: {
+ a: {
+ color: '#333333',
+ fontSize: 14,
+ fontWeight: 500
+ }
+ },
+ padding: [0, -50, 20, -100]
+ },
+ data: data
+ }
+ ]
+ }
+ myChart.setOption(option)
+ window.addEventListener('resize', function () { // 鎵ц
+ myChart.resize()
+ })
+ },
+ initDept3 () {
+ const myChart = echarts.init(document.querySelector('#echart3'))
+
+ const option = {
+ grid: {
+ left: '5%',
+ right: '10%',
+ bottom: '0%',
+ top: '20%',
+ containLabel: true
+ },
+ xAxis: {
+ type: 'category',
+ data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
+ },
+ yAxis: {
+ type: 'value'
+ },
+ series: [
+ {
+ data: [150, 230, 224, 218, 135, 147, 260],
+ type: 'line'
+ }
+ ]
+ }
+ myChart.setOption(option)
+ window.addEventListener('resize', function () { // 鎵ц
+ myChart.resize()
+ })
}
}
+}
</script>
<style lang="scss" scoped>
@@ -329,21 +431,24 @@
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;
}
@@ -354,39 +459,40 @@
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;
}
}
}
@@ -395,27 +501,39 @@
.main_table {
display: flex;
- align-items: center;
+ align-items: flex-start;
justify-content: space-between;
- height: 300px;
+ margin-top: 10px;
.main_table_list {
- margin-left: 20px;
- flex: 1;
+ background-color: #ffffff;
+ padding: 20px;
+ box-sizing: border-box;
+ width: 69%;
.title {
display: flex;
align-items: center;
span {
- font-weight: 600;
- font-size: 16px;
+ font-weight: 500;
+ font-size: 18px;
color: #222222;
}
}
+ .list_wu {
+ width: 100%;
+ height: 100px;
+ line-height: 100px;
+ text-align: center;
+ font-size: 16px;
+ 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;
@@ -425,20 +543,25 @@
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;
@@ -448,48 +571,72 @@
}
}
.main_table_list1 {
- margin-left: 20px;
- width: 300px;
+ margin-left: 10px;
+ width: 30%;
+ padding: 20px;
+ box-sizing: border-box;
flex-shrink: 0;
+ background-color: #ffffff;
.title {
- font-weight: 600;
+ font-weight: 500;
+ font-size: 18px;
+ color: #222222;
+ }
+ .list_wu {
+ width: 100%;
+ height: 100px;
+ line-height: 100px;
+ text-align: center;
font-size: 16px;
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;
+ }
}
}
}
@@ -498,38 +645,42 @@
.main_content {
display: flex;
- height: 400px;
+ align-items: center;
+ justify-content: space-between;
+ height: 350px;
.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%;
+ margin-top: 18px;
}
}
.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%;
}
}
}
--
Gitblit v1.9.3