From 9a87baccb1cf2d707a775e414ddac07fd94cf8fc Mon Sep 17 00:00:00 2001
From: doum <doum>
Date: 星期三, 26 十一月 2025 17:07:51 +0800
Subject: [PATCH] 最新版本541200007
---
admin/src/views/index.vue | 599 ++++++++++++++++++++++++-----------------------------------
1 files changed, 244 insertions(+), 355 deletions(-)
diff --git a/admin/src/views/index.vue b/admin/src/views/index.vue
index 2d28484..883b044 100644
--- a/admin/src/views/index.vue
+++ b/admin/src/views/index.vue
@@ -1,388 +1,277 @@
<template>
- <div class="home">
- <div class="home_total">
- <div class="home_total_head">鍦ㄥ巶浜哄憳鎬昏</div>
- <div class="home_total_list">
- <div class="home_total_list_item a">
- <span>{{head && head.workerCount ? head.workerCount : 0}}</span>
- <span>鍐呴儴鍛樺伐</span>
- </div>
- <div class="home_total_list_item b">
- <span>{{head && head.visitorCount ? head.visitorCount : 0}}</span>
- <span>璁垮</span>
- </div>
- <div class="home_total_list_item c">
- <span>{{head && head.lwCount ? head.lwCount : 0}}</span>
- <span>鍔冲姟浜哄憳</span>
- </div>
- <div class="home_total_list_item d">
- <span>{{head && head.presenceCarCount ? head.presenceCarCount : 0}}</span>
- <span>鍦ㄥ満杞﹁締</span>
- </div>
- <div class="home_total_list_item e">
- <span>{{head && head.longCarCount ? head.longCarCount : 0}}</span>
- <span>闀挎湡杞﹁締</span>
- </div>
- <div class="home_total_list_item f">
- <span>{{head && head.visitorCarCount ? head.visitorCarCount : 0}}</span>
- <span>棰勭害杞﹁締</span>
- </div>
- <div class="home_total_list_item g">
- <span>{{head && head.supplierCount ? head.supplierCount : 0}}</span>
- <span>渚涘簲鍟�</span>
- </div>
- </div>
- </div>
- <div class="home_charts">
- <div class="home_charts_item">
- <div class="home_charts_item_label">鍦ㄥ巶浜哄憳鍗犳瘮</div>
- <div class="home_charts_item_charts" id="chart1"></div>
- </div>
- <div class="home_charts_item">
- <div class="home_charts_item_label">鍔冲姟浜哄憳鍒嗗竷鎬昏</div>
- <div class="home_charts_item_charts" id="chart2"></div>
- </div>
- </div>
- <div class="home_table">
- <div class="home_table_head">瓒呮椂棰勮浜哄憳({{total}})</div>
- <div class="home_table_box">
- <el-table
- :data="list"
- :header-cell-style="{background: '#dcdde2', color: 'rgb(51, 51, 51)'}"
- border
- style="width: 100%">
- <el-table-column
- prop="name"
- label="璁垮濮撳悕">
- </el-table-column>
- <el-table-column
- prop="phone"
- label="璁垮鐢佃瘽">
- </el-table-column>
- <el-table-column
- prop="companyName"
- label="璁垮鍏徃">
- </el-table-column>
- <el-table-column
- label="浜哄憳绫诲瀷">
- <template slot-scope="{row}">
- <span v-if="row.type === 0">鍔冲姟璁垮</span>
- <span v-if="row.type === 1">鏅�氳瀹�</span>
- <span v-if="row.type === 2">鍐呴儴浜哄憳</span>
- </template>
- </el-table-column>
- <el-table-column
- prop="outDate"
- label="鎺堟潈鍒版湡鏃堕棿">
- </el-table-column>
- <el-table-column
- label="鐘舵��">
- <template slot-scope="{row}">
- <span v-if="row.outStatus === 0">鏈秴鏃�</span>
- <span style="color: red;" v-if="row.outStatus === 1">宸茶秴鏃�</span>
- <span v-if="row.outStatus === 2">鍗冲皢瓒呮椂</span>
- </template>
- </el-table-column>
- <el-table-column
- prop="address"
- label="澶勭悊"
- width="80">
- <template slot-scope="scope">
- <el-button type="text" @click="departure(scope.row.id)" v-if="scope.row.outStatus === 1">绂诲巶</el-button>
- </template>
- </el-table-column>
- </el-table>
- <el-pagination
- style="margin-top: 20px;"
- @current-change="handleCurrentChange"
- :current-page="page"
- :page-size="10"
- layout="total, prev, pager, next, jumper"
- :total="total">
- </el-pagination>
+ <div class="main_home">
+ <div class="home_header">
+ <div class="mb10 fs17">涓嬪崍濂斤紝{{ userInfo.realname }}</div>
+ <div class="fs13">
+ 浠婂ぉ鏄� {{ nowDate }} {{ nowWeek }}锛屾杩庤鍏姟杞﹂挜鍖欐櫤鑳芥煖绠＄悊绯荤粺
</div>
</div>
</div>
</template>
<script>
-import * as echarts from 'echarts'
-import { body, head, timeoutPage, level } from '@/api/business/staging'
+import dayjs from 'dayjs'
+import { weeks } from '@/utils/config'
+const colors = ['#52a4f7', '#7678f7', '#5fc6d5']
export default {
- name: 'Index',
+ components: {
+ },
data () {
return {
- head: null,
- list: [],
- total: 0,
- data1: [],
- data2: [[],[]],
- page: 1
+ searchForm: {
+ timeType: null,
+ timeName: '鍏ㄩ儴'
+ },
+ colors,
+ nowDate: '',
+ nowWeek: '',
+ headerData: {},
+ headerData1: {},
+ staticData0: {},
+ staticData01: {},
+ staticData1: {},
+ staticData2: {},
+ staticData3: {},
+ staticData4: {},
+ manningRatio: []
+ }
+ },
+ computed: {
+ userInfo () {
+ return this.$store.state.userInfo
}
},
created () {
- this.getHeader()
- this.getData()
},
mounted () {
- // this.getcharts2()
+ this.updateDate()
+ // this.initData()
},
methods: {
- departure(id) {
- this.$confirm('纭畾绂诲満鍚�, 鏄惁缁х画?', '鎻愮ず', {
- confirmButtonText: '纭畾',
- cancelButtonText: '鍙栨秷',
- type: 'warning'
- }).then(() => {
- level(id)
- .then(res => {
- this.page = 1
- this.getData()
- })
- }).catch(() => {
-
- });
- },
- getData() {
- timeoutPage({
- capacity: 10,
- page: this.page,
- model: {}
- }).then(res => {
- this.list = res.records
- this.total = res.total
- })
- },
- getHeader() {
- head().then(res => {
- this.head = res
- })
- body().then(res => {
- this.data1 = res.retentionUsers.map(item => {
- let name = ''
- if (item.memberType === 0) {
- name = '鍔冲姟璁垮'
- } else if (item.memberType === 1) {
- name = '鏅�氳瀹�'
- } else if (item.memberType === 2) {
- name = '鍐呴儴鍛樺伐'
- }
- return {
- value: item.memberCount,
- name
- }
- })
- let arr1 = res.companyUsers.map(item => item.companyName)
- let arr2 = res.companyUsers.map(item => item.memberCount)
- if (arr1.length > 0) {
- this.data2 = [arr1, arr2]
- this.getcharts2()
- }
- this.getcharts1()
- })
- },
- handleCurrentChange (page) {
- this.page = page
- this.getData()
- },
- getcharts1 () {
- const myChart = echarts.init(document.getElementById('chart1'))
- // 缁樺埗鍥捐〃
- myChart.setOption({
- tooltip: {
- trigger: 'item'
- },
- grid: {
- bottom: '5%',
- top: '5%'
- },
- legend: {
- bottom: '0%',
- left: 'center',
- icon: 'circle'
- },
- series: [
- {
- type: 'pie',
- radius: ['40%', '70%'],
- label: {
- formatter: '{b} {d}%'
- },
- data: this.data1,
- itemStyle: {
- normal: {
- color: function (colors) {
- var colorList = [
- '#fc8251',
- '#5470c6',
- '#91cd77'
- ]
- return colorList[colors.dataIndex]
- }
- }
- },
- emphasis: {
- itemStyle: {
- shadowBlur: 10,
- shadowOffsetX: 0,
- shadowColor: 'rgba(0, 0, 0, 0.5)'
- }
- }
- }
- ]
- })
- },
- getcharts2 () {
- const myChart = echarts.init(document.getElementById('chart2'))
- myChart.setOption({
- tooltip: {
- trigger: 'item'
- },
- grid: {
- bottom: '5%',
- top: '5%'
- },
- xAxis: {
- max: 'dataMax'
- },
- yAxis: {
- type: 'category',
- data: this.data2[0]
- },
- series: [
- {
- realtimeSort: true,
- type: 'bar',
- data: this.data2[1],
- itemStyle: {
- normal: {
- color: '#fc8251'
- }
- }
- }
- ]
- })
+ updateDate () {
+ this.nowDate = dayjs().format('YYYY骞碝鏈圖鏃�')
+ this.nowWeek = weeks[new Date().getDay()]
}
}
}
</script>
-<style scoped lang="scss">
-@import "@/assets/style/variables.scss";
-.home {
- width: 100%;
- .home_table {
- width: 100%;
- padding: 20px;
- box-sizing: border-box;
- background: #ffffff;
- margin-top: 20px;
- .home_table_head {
- font-size: 16px;
- font-weight: 600;
- color: black;
- }
- .home_table_box {
- width: 100%;
- margin-top: 15px;
- }
- }
- .home_charts {
- width: 100%;
- margin-top: 20px;
- display: flex;
- align-items: center;
- justify-content: space-between;
- .home_charts_item {
- padding: 20px;
- box-sizing: border-box;
- flex: 1;
+<style lang="scss" scoped>
+
+::v-deep .el-input--small .el-input__inner {
+ height: 30px !important; // 杩欓噷灏辨槸淇敼榛樿楂樺害
+ width: 120px;
+}
+div {
+ box-sizing: border-box;
+}
+
+.home_title {
+ font-weight: 600;
+ font-size: 16px;
+ color: #222222;
+ line-height: 22px;
+}
+.mb50{
+ margin-bottom: 50px;
+}
+.main {
+ display: flex;
+ position: relative;
+ z-index: 99;
+
+ .app_content {
+ flex: 1;
+
+ .static_card {
+ height: 187px;
+ color: #fff;
display: flex;
- flex-direction: column;
- margin-right: 20px;
- background: #ffffff;
- .home_charts_item_label {
- font-size: 16px;
- font-weight: 600;
- color: black;
- }
- .home_charts_item_charts {
- width: 100%;
- height: 300px;
- }
- &:last-child {
- margin: 0 !important;
- }
- }
- }
- .home_total {
- width: 100%;
- background: #ffffff;
- margin-top: 20px;
- .home_total_head {
- width: 100%;
- font-size: 16px;
- font-weight: 600;
- color: black;
- padding: 10px 20px;
- box-sizing: border-box;
- border-bottom: 1px solid #ececec;
- }
- .home_total_list {
- width: 100%;
- padding: 20px;
- box-sizing: border-box;
- display: flex;
- align-items: center;
- .a {
- border-left: 5px solid rgba(129, 211, 248, 1) !important;
- }
- .b {
- border-left: 5px solid rgba(236, 128, 141, 1) !important;
- }
- .c {
- border-left: 5px solid rgba(250, 205, 145, 1) !important;
- }
- .d {
- border-left: 5px solid rgba(245, 154, 35, 1) !important;
- }
- .e {
- border-left: 5px solid rgba(128, 128, 255, 1) !important;
- }
- .f {
- border-left: 5px solid rgba(202, 249, 130, 1) !important;
- }
- .g {
- border-left: 5px solid rgba(194, 128, 255, 1) !important;
- }
- .home_total_list_item {
+ justify-content: space-between;
+
+ .card {
flex: 1;
- display: flex;
- align-items: center;
- flex-direction: column;
- justify-content: center;
- height: 80px;
- border-radius: 5px;
- border: 1px solid #ececec;
- margin-right: 15px;
- &:last-child {
- margin: 0 !important;
+ height: 187px;
+ background: linear-gradient(270deg, #29aeff 0%, #207ff7 100%);
+ box-shadow: 0px 2px 10px 0px rgba(32, 127, 247, 0.4);
+ border-radius: 8px;
+ margin-right: 14px;
+
+ &:nth-of-type(2) {
+ background: linear-gradient(270deg, #8383ff 0%, #6b6eff 100%);
}
- span {
- &:first-child {
- font-weight: 500;
- font-size: 24px;
- color: black;
+
+ &:nth-of-type(3) {
+ background: linear-gradient(270deg, #42d49d 0%, #12bb8b 100%);
+ }
+
+ &:nth-of-type(4) {
+ margin-right: 0;
+ background: linear-gradient(270deg, #c430dee3 0%, #cd04b9cf 100%);
+ //linear-gradient(270deg, #de3049b8 0%, #cd0421d4 100%);
+ //background: linear-gradient(270deg, #30d3de 0%, #04b7cd 100%);
+ }
+
+ .header {
+ height: 103px;
+ display: flex;
+ justify-content: space-between;
+ align-items: center;
+ padding: 20px 20px 12px;
+ border-bottom: 1px solid rgba(255, 255, 255, 0.2);
+
+ img {
+ width: 40px;
+ height: 40px;
}
- &:last-child {
- font-weight: 400;
- font-size: 14px;
- color: #666666;
- margin-top: 2px;
+
+ .num {
+ font-weight: 600;
+ font-size: 30px;
+ margin-top: 12px;
+ }
+ }
+
+ .content {
+ height: 82px;
+ display: flex;
+ flex-direction: column;
+ justify-content: space-between;
+ font-size: 13px;
+ padding: 15px 20px 20px;
+ }
+ }
+ }
+
+ .funcs {
+ height: 149px;
+ padding: 20px;
+ background: #fff;
+ margin: 10px 0;
+
+ .list {
+ display: flex;
+ padding-top: 20px;
+
+ .item {
+ display: flex;
+ flex-direction: column;
+ align-items: center;
+ justify-content: center;
+ margin-right: 24px;
+ cursor: pointer;
+
+ img {
+ width: 44px;
+ height: 44px;
}
}
}
}
}
+ .static_wrap {
+ .wrap {
+ background: #fff;
+ padding: 20px 20px 10px;
+ border-radius: 2px;
+ border: 1px solid #eeeeee;
+ height: 280px;
+ flex: 1;
+ margin-top: 10px;
+ margin-bottom: 20px;
+ &:nth-of-type(2n) {
+ //margin-left: 10px;
+ }
+ .echart {
+ width: 100%;
+ height: 190px;
+ position: relative;
+ display: flex;
+ div{
+ flex: 1;
+ height: 190px;
+ }
+ }
+
+ .header {
+ display: flex;
+ justify-content: space-between;
+ align-items: center;
+ margin-bottom: 30px;
+
+ .more {
+ font-size: 13px;
+ color: #999999;
+ }
+ }
+ }
+
+ .static1 {
+ .content {
+ display: flex;
+ justify-content: center;
+ align-items: center;
+ height: 100%;
+
+ .echart_wrap {
+ position: relative;
+
+ .pie_text {
+ position: absolute;
+ left: 50%;
+ top: 50%;
+ transform: translate(-50%, -50%);
+ z-index: 999;
+ }
+ }
+
+ .echart {
+ width: 150px;
+ height: 150px;
+ }
+
+ .list {
+ margin-left: 36px;
+
+ .item {
+ display: flex;
+ align-items: center;
+ margin: 8px 0;
+
+ .icon {
+ width: 16px;
+ height: 16px;
+ border-radius: 50%;
+ margin-right: 6px;
+ background: linear-gradient(270deg, #29aeff 0%, #207ff7 100%);
+ }
+
+ .text {
+ margin-right: 6px;
+ }
+ }
+ }
+ }
+ }
+ }
+}
+
+.main_home {
+ background: #f4f7fc;
+ position: relative;
+ width: 100%;
+ height: 100%;
+ overflow: auto;
+ padding: 92px 20px 20px;
+ .home_header {
+ position: absolute;
+ top: 0;
+ left: 0;
+ width: 100%;
+ height: 200px;
+ padding: 20px;
+ color: #fff;
+ background: linear-gradient(180deg, #076ae5 0%, rgba(32, 127, 247, 0) 100%);
+ }
}
</style>
--
Gitblit v1.9.3