From 1ef38f7b420900816f27bdea509017cab11a96d2 Mon Sep 17 00:00:00 2001
From: qushaowei <qushaowei@163.com>
Date: 星期日, 29 十月 2023 23:34:48 +0800
Subject: [PATCH] 主页面
---
src/views/dashboard/IndexTask.vue | 641 ++++++++++++++++++++++++++++++++++++----------------------
1 files changed, 397 insertions(+), 244 deletions(-)
diff --git a/src/views/dashboard/IndexTask.vue b/src/views/dashboard/IndexTask.vue
index 8e9d84b..b945acf 100644
--- a/src/views/dashboard/IndexTask.vue
+++ b/src/views/dashboard/IndexTask.vue
@@ -1,15 +1,29 @@
<template>
<div class="index-container-ty">
<a-spin :spinning="loading">
- <a-row type="flex" justify="start" :gutter="3">
- <a-col :sm="24" :lg="12">
+ <a-row
+ type="flex"
+ justify="start"
+ :gutter="3"
+ >
+ <a-col
+ :sm="24"
+ :lg="12"
+ >
<a-card>
- <div slot="title" class="index-md-title">
- <img src="../../assets/daiban.png"/>
+ <div
+ slot="title"
+ class="index-md-title"
+ >
+ <img src="../../assets/daiban.png" />
鎴戠殑寰呭姙銆恵{ dataSource1.length }}銆�
</div>
<div slot="extra">
- <a v-if="dataSource1 && dataSource1.length>0" slot="footer" @click="goPage">鏇村 <a-icon type="double-right" /></a>
+ <a
+ v-if="dataSource1 && dataSource1.length>0"
+ slot="footer"
+ @click="goPage"
+ >鏇村 <a-icon type="double-right" /></a>
</div>
<a-table
:class="'my-index-table tytable1'"
@@ -18,16 +32,34 @@
rowKey="id"
:columns="columns"
:dataSource="dataSource1"
- :pagination="false">
- <template slot="ellipsisText" slot-scope="text">
- <j-ellipsis :value="text" :length="textMaxLength"></j-ellipsis>
+ :pagination="false"
+ >
+ <template
+ slot="ellipsisText"
+ slot-scope="text"
+ >
+ <j-ellipsis
+ :value="text"
+ :length="textMaxLength"
+ ></j-ellipsis>
</template>
- <template slot="dayWarnning" slot-scope="text,record">
- <a-icon type="bulb" theme="twoTone" style="font-size:22px" :twoToneColor="getTipColor(record)"/>
+ <template
+ slot="dayWarnning"
+ slot-scope="text,record"
+ >
+ <a-icon
+ type="bulb"
+ theme="twoTone"
+ style="font-size:22px"
+ :twoToneColor="getTipColor(record)"
+ />
</template>
- <span slot="action" slot-scope="text, record">
+ <span
+ slot="action"
+ slot-scope="text, record"
+ >
<a @click="handleData">鍔炵悊</a>
</span>
@@ -35,14 +67,24 @@
</a-card>
</a-col>
- <a-col :sm="24" :lg="12">
+ <a-col
+ :sm="24"
+ :lg="12"
+ >
<a-card>
- <div slot="title" class="index-md-title">
- <img src="../../assets/zaiban.png"/>
+ <div
+ slot="title"
+ class="index-md-title"
+ >
+ <img src="../../assets/zaiban.png" />
鎴戠殑鍦ㄥ姙銆恵{ dataSource2.length }}銆�
</div>
<div slot="extra">
- <a v-if="dataSource2 && dataSource2.length>0" slot="footer" @click="goPage">鏇村 <a-icon type="double-right" /></a>
+ <a
+ v-if="dataSource2 && dataSource2.length>0"
+ slot="footer"
+ @click="goPage"
+ >鏇村 <a-icon type="double-right" /></a>
</div>
<a-table
:class="'my-index-table tytable2'"
@@ -51,16 +93,34 @@
rowKey="id"
:columns="columns"
:dataSource="dataSource2"
- :pagination="false">
- <template slot="ellipsisText" slot-scope="text">
- <j-ellipsis :value="text" :length="textMaxLength"></j-ellipsis>
+ :pagination="false"
+ >
+ <template
+ slot="ellipsisText"
+ slot-scope="text"
+ >
+ <j-ellipsis
+ :value="text"
+ :length="textMaxLength"
+ ></j-ellipsis>
</template>
- <template slot="dayWarnning" slot-scope="text,record">
- <a-icon type="bulb" theme="twoTone" style="font-size:22px" :twoToneColor="getTipColor(record)"/>
+ <template
+ slot="dayWarnning"
+ slot-scope="text,record"
+ >
+ <a-icon
+ type="bulb"
+ theme="twoTone"
+ style="font-size:22px"
+ :twoToneColor="getTipColor(record)"
+ />
</template>
- <span slot="action" slot-scope="text, record">
+ <span
+ slot="action"
+ slot-scope="text, record"
+ >
<a @click="handleData">鍔炵悊</a>
</span>
@@ -72,10 +132,16 @@
<div style="height: 5px;"></div>
</a-col>
- <a-col :sm="24" :lg="12">
+ <a-col
+ :sm="24"
+ :lg="12"
+ >
<a-card>
- <div slot="title" class="index-md-title">
- <img src="../../assets/guaz.png"/>
+ <div
+ slot="title"
+ class="index-md-title"
+ >
+ <img src="../../assets/guaz.png" />
鎴戠殑鎸傝处銆恵{ dataSource4.length }}銆�
</div>
<a-table
@@ -85,16 +151,34 @@
rowKey="id"
:columns="columns"
:dataSource="dataSource4"
- :pagination="false">
- <template slot="ellipsisText" slot-scope="text">
- <j-ellipsis :value="text" :length="textMaxLength"></j-ellipsis>
+ :pagination="false"
+ >
+ <template
+ slot="ellipsisText"
+ slot-scope="text"
+ >
+ <j-ellipsis
+ :value="text"
+ :length="textMaxLength"
+ ></j-ellipsis>
</template>
- <template slot="dayWarnning" slot-scope="text,record">
- <a-icon type="bulb" theme="twoTone" style="font-size:22px" :twoToneColor="getTipColor(record)"/>
+ <template
+ slot="dayWarnning"
+ slot-scope="text,record"
+ >
+ <a-icon
+ type="bulb"
+ theme="twoTone"
+ style="font-size:22px"
+ :twoToneColor="getTipColor(record)"
+ />
</template>
- <span slot="action" slot-scope="text, record">
+ <span
+ slot="action"
+ slot-scope="text, record"
+ >
<a @click="handleData">鍔炵悊</a>
</span>
@@ -102,10 +186,16 @@
</a-card>
</a-col>
- <a-col :sm="24" :lg="12">
+ <a-col
+ :sm="24"
+ :lg="12"
+ >
<a-card>
- <div slot="title" class="index-md-title">
- <img src="../../assets/duban.png"/>
+ <div
+ slot="title"
+ class="index-md-title"
+ >
+ <img src="../../assets/duban.png" />
鎴戠殑鐫ｅ姙銆恵{ dataSource3.length }}銆�
</div>
<a-table
@@ -115,16 +205,34 @@
rowKey="id"
:columns="columns"
:dataSource="dataSource3"
- :pagination="false">
- <template slot="ellipsisText" slot-scope="text">
- <j-ellipsis :value="text" :length="textMaxLength"></j-ellipsis>
+ :pagination="false"
+ >
+ <template
+ slot="ellipsisText"
+ slot-scope="text"
+ >
+ <j-ellipsis
+ :value="text"
+ :length="textMaxLength"
+ ></j-ellipsis>
</template>
- <template slot="dayWarnning" slot-scope="text,record">
- <a-icon type="bulb" theme="twoTone" style="font-size:22px" :twoToneColor="getTipColor(record)"/>
+ <template
+ slot="dayWarnning"
+ slot-scope="text,record"
+ >
+ <a-icon
+ type="bulb"
+ theme="twoTone"
+ style="font-size:22px"
+ :twoToneColor="getTipColor(record)"
+ />
</template>
- <span slot="action" slot-scope="text, record">
+ <span
+ slot="action"
+ slot-scope="text, record"
+ >
<a @click="handleData">鍔炵悊</a>
</span>
@@ -139,234 +247,279 @@
</template>
<script>
- import noDataPng from '@/assets/nodata.png'
- import JEllipsis from '@/components/jeecg/JEllipsis'
+import noDataPng from '@/assets/nodata.png'
+import JEllipsis from '@/components/jeecg/JEllipsis'
- const tempSs1=[{
- id:"001",
- orderNo:"鐢礫1]1267102",
- orderTitle:"鑽搧鍑洪棶棰樹簡",
- restDay:1
- },{
- id:"002",
- orderNo:"鐢礫4]5967102",
- orderTitle:"鍚冧簡xxx鍖婚櫌鐨勮嵂锛岀梾鎯呰秺鏉ヨ秺涓ラ噸",
- restDay:0
- },{
- id:"003",
- orderNo:"鐢礫3]5988987",
- orderTitle:"浠婂ぉ鍘昏秴甯備拱楦¤泲锛岄浮铔嬮兘鏄潖鐨�",
- restDay:7
- },{
- id:"004",
- orderNo:"鐢礫2]5213491",
- orderTitle:"xx瀹濆疄浣撳簵楂樹环鍞崠xx",
- restDay:5
- },{
- id:"005",
- orderNo:"鐢礫1]1603491",
- orderTitle:"浠ョ孩鍒╃浉璇憋紝绛斿簲閫�淇濆悗鎵ｄ竴骞磋垂鐢�",
- restDay:0
- }]
+const tempSs1 = [{
+ id: "001",
+ orderNo: "鐢礫1]1267102",
+ orderTitle: "鑽搧鍑洪棶棰樹簡",
+ restDay: 1
+}, {
+ id: "002",
+ orderNo: "鐢礫4]5967102",
+ orderTitle: "鍚冧簡xxx鍖婚櫌鐨勮嵂锛岀梾鎯呰秺鏉ヨ秺涓ラ噸",
+ restDay: 0
+}, {
+ id: "003",
+ orderNo: "鐢礫3]5988987",
+ orderTitle: "浠婂ぉ鍘昏秴甯備拱楦¤泲锛岄浮铔嬮兘鏄潖鐨�",
+ restDay: 7
+}, {
+ id: "004",
+ orderNo: "鐢礫2]5213491",
+ orderTitle: "xx瀹濆疄浣撳簵楂樹环鍞崠xx",
+ restDay: 5
+}, {
+ id: "005",
+ orderNo: "鐢礫1]1603491",
+ orderTitle: "浠ョ孩鍒╃浉璇憋紝绛斿簲閫�淇濆悗鎵ｄ竴骞磋垂鐢�",
+ restDay: 0
+}]
- const tempSs2=[{
- id:"001",
- orderTitle:"鎴戣鎶曡瘔杩欎釜澶ц秴甯�",
- orderNo:"鐢礫1]10299456",
- restDay:6
- },{
- id:"002",
- orderTitle:"xxx鍖婚櫌涔卞紑鑽柟,鍞崠鍋囪嵂",
- orderNo:"鐢礫2]20235691",
- restDay:0
- },{
- id:"003",
- orderTitle:"鎴戞兂闂棶杩欏搴楁槸骞插暐鐨�",
- orderNo:"鐢礫3]495867322",
- restDay:7
- },{
- id:"004",
- orderTitle:"鎴戣涓炬姤鏈濋槼鍖哄ゥ妫叕鍥厭搴�",
- orderNo:"鐢礫2]1193849",
- restDay:3
- },{
- id:"005",
- orderTitle:"鎴戜粖澶╁悆楗悆鍒颁竴涓煶澶村瓙",
- orderNo:"鐢礫4]56782344",
- restDay:9
- }]
+const tempSs2 = [{
+ id: "001",
+ orderTitle: "鎴戣鎶曡瘔杩欎釜澶ц秴甯�",
+ orderNo: "鐢礫1]10299456",
+ restDay: 6
+}, {
+ id: "002",
+ orderTitle: "xxx鍖婚櫌涔卞紑鑽柟,鍞崠鍋囪嵂",
+ orderNo: "鐢礫2]20235691",
+ restDay: 0
+}, {
+ id: "003",
+ orderTitle: "鎴戞兂闂棶杩欏搴楁槸骞插暐鐨�",
+ orderNo: "鐢礫3]495867322",
+ restDay: 7
+}, {
+ id: "004",
+ orderTitle: "鎴戣涓炬姤鏈濋槼鍖哄ゥ妫叕鍥厭搴�",
+ orderNo: "鐢礫2]1193849",
+ restDay: 3
+}, {
+ id: "005",
+ orderTitle: "鎴戜粖澶╁悆楗悆鍒颁竴涓煶澶村瓙",
+ orderNo: "鐢礫4]56782344",
+ restDay: 9
+}]
- //4-7澶�
- const tip_green = "rgba(0, 255, 0, 1)"
- //1-3澶�
- const tip_yellow = "rgba(255, 255, 0, 1)"
- //瓒呮湡
- const tip_red = "rgba(255, 0, 0, 1)"
+//4-7澶�
+const tip_green = "rgba(0, 255, 0, 1)"
+//1-3澶�
+const tip_yellow = "rgba(255, 255, 0, 1)"
+//瓒呮湡
+const tip_red = "rgba(255, 0, 0, 1)"
- export default {
- name: "IndexTask",
- components:{ JEllipsis },
- data() {
- return {
- loading:false,
- textMaxLength:8,
- dataSource1:[],
- dataSource2:[],
- dataSource3:[],
- dataSource4:[],
- columns: [
- {
- title: '',
- dataIndex: '',
- key:'rowIndex',
- width:50,
- fixed:'left',
- align:"center",
- scopedSlots: {customRender: "dayWarnning"}
- },
- {
- title:'鍓╀綑澶╂暟',
- align:"center",
- dataIndex: 'restDay',
- width:80
- },
- {
- title:'宸ュ崟鏍囬',
- align:"center",
- dataIndex: 'orderTitle',
- scopedSlots: {customRender: "ellipsisText"}
- },
- {
- title:'宸ュ崟缂栧彿',
- align:"center",
- dataIndex: 'orderNo',
- },
- {
- title: '鎿嶄綔',
- dataIndex: 'action',
- align:"center",
- scopedSlots: { customRender: 'action' }
- }
- ]
-
- }
- },
- created() {
- this.mock();
- },
- mounted(){
-
- },
- methods: {
- getTipColor(rd){
- let num = rd.restDay
- if(num<=0){
- return tip_red
- }else if(num>=1 && num<4){
- return tip_yellow
- }else if(num>=4){
- return tip_green
+export default {
+ name: "IndexTask",
+ components: { JEllipsis },
+ data() {
+ return {
+ loading: false,
+ textMaxLength: 8,
+ dataSource1: [],
+ dataSource2: [],
+ dataSource3: [],
+ dataSource4: [],
+ columns: [
+ {
+ title: '',
+ dataIndex: '',
+ key: 'rowIndex',
+ width: 50,
+ fixed: 'left',
+ align: "center",
+ scopedSlots: { customRender: "dayWarnning" }
+ },
+ {
+ title: '鍓╀綑澶╂暟',
+ align: "center",
+ dataIndex: 'restDay',
+ width: 80
+ },
+ {
+ title: '宸ュ崟鏍囬',
+ align: "center",
+ dataIndex: 'orderTitle',
+ scopedSlots: { customRender: "ellipsisText" }
+ },
+ {
+ title: '宸ュ崟缂栧彿',
+ align: "center",
+ dataIndex: 'orderNo',
+ },
+ {
+ title: '鎿嶄綔',
+ dataIndex: 'action',
+ align: "center",
+ scopedSlots: { customRender: 'action' }
}
- },
- goPage(){
- this.$message.success("璇锋牴鎹叿浣撲笟鍔¤烦杞〉闈�")
- //this.$router.push({ path: '/comp/mytask' })
- },
- mock(){
- this.dataSource1=tempSs1
- this.dataSource2=tempSs2
- this.dataSource3=tempSs1
- this.dataSource4=[]
- this.ifNullDataSource(this.dataSource4,'.tytable4')
- },
-
- ifNullDataSource(ds,tb){
- this.$nextTick(()=>{
- if(!ds || ds.length==0){
- var tmp = document.createElement('img');
- tmp.src=noDataPng
- tmp.width=300
- let tbclass=`${tb} .ant-table-placeholder`
- document.querySelector(tbclass).innerHTML=""
- document.querySelector(tbclass).appendChild(tmp)
- }
- })
- },
- handleData(){
- this.$message.success("鍔炵悊瀹屾垚")
- }
-
-
-
+ ]
}
+ },
+ created() {
+ this.mock();
+ },
+ mounted() {
+
+ },
+ methods: {
+ getTipColor(rd) {
+ let num = rd.restDay
+ if (num <= 0) {
+ return tip_red
+ } else if (num >= 1 && num < 4) {
+ return tip_yellow
+ } else if (num >= 4) {
+ return tip_green
+ }
+ },
+ goPage() {
+ this.$message.success("璇锋牴鎹叿浣撲笟鍔¤烦杞〉闈�")
+ //this.$router.push({ path: '/comp/mytask' })
+ },
+ mock() {
+ this.dataSource1 = tempSs1
+ this.dataSource2 = tempSs2
+ this.dataSource3 = tempSs1
+ this.dataSource4 = []
+ this.ifNullDataSource(this.dataSource4, '.tytable4')
+ },
+
+ ifNullDataSource(ds, tb) {
+ this.$nextTick(() => {
+ if (!ds || ds.length == 0) {
+ var tmp = document.createElement('img');
+ tmp.src = noDataPng
+ tmp.width = 300
+ let tbclass = `${tb} .ant-table-placeholder`
+ document.querySelector(tbclass).innerHTML = ""
+ document.querySelector(tbclass).appendChild(tmp)
+ }
+ })
+ },
+ handleData() {
+ this.$message.success("鍔炵悊瀹屾垚")
+ }
+
+
+
+
}
+}
</script>
<style>
- .my-index-table{height:270px}
- .my-index-table table{font-size: 14px !important;}
+.my-index-table {
+ height: 270px;
+}
+.my-index-table table {
+ font-size: 14px !important;
+}
- .index-container-ty .ant-card-head-title{padding-top: 6px;padding-bottom: 6px;}
- .index-container-ty .ant-card-extra{padding:0}
- .index-container-ty .ant-card-extra a{color:#fff}
- .index-container-ty .ant-card-extra a:hover{color:#152ede}
- .index-container-ty .ant-card-head-wrapper,.index-container-ty .ant-card-head{
- line-height:24px;
- min-height:24px;
- /*background: #90aeff;*/
- background: #7196fb;
- }
- .index-container-ty .ant-card-body{padding: 10px 12px 0px 12px}
+.index-container-ty .ant-card-head-title {
+ padding-top: 6px;
+ padding-bottom: 6px;
+}
+.index-container-ty .ant-card-extra {
+ padding: 0;
+}
+.index-container-ty .ant-card-extra a {
+ color: #fff;
+}
+.index-container-ty .ant-card-extra a:hover {
+ color: #152ede;
+}
+.index-container-ty .ant-card-head-wrapper,
+.index-container-ty .ant-card-head {
+ line-height: 24px;
+ min-height: 24px;
+ /*background: #90aeff;*/
+ background: #7196fb;
+}
+.index-container-ty .ant-card-body {
+ padding: 10px 12px 0px 12px;
+}
- /* .index-container-ty .ant-card-actions{background: #fff}
+/* .index-container-ty .ant-card-actions{background: #fff}
.index-container-ty .ant-card-actions li {margin:2px 0;}
.index-container-ty .ant-card-actions > li > span{width: 100%}*/
+.index-container-ty .ant-table-footer {
+ text-align: right;
+ padding: 6px 12px 6px 6px;
+ background: #fff;
+ border-top: 2px solid #f7f1f1;
+}
- .index-container-ty .ant-table-footer{text-align: right;padding:6px 12px 6px 6px;background: #fff;border-top: 2px solid #f7f1f1;}
+.index-md-title {
+ postion: relative;
+ padding-left: 24px;
+ width: 100%;
+ color: #fff;
+ font-size: 21px;
+ font-family: cursive;
+}
+.index-md-title img {
+ position: absolute;
+ height: 32px;
+ top: 2px;
+ left: 14px;
+}
- .index-md-title{
- postion:relative;
- padding-left:24px;
- width: 100%;
- color: #fff;
- font-size: 21px;
- font-family: cursive;
- }
- .index-md-title img{
- position: absolute;
- height:32px;
- top: 2px;
- left:14px;
- }
-
- .index-container-ty .ant-card-body{
- /*border-left:1px solid #90aeff;
+.index-container-ty .ant-card-body {
+ /*border-left:1px solid #90aeff;
/*border-right:1px solid #90aeff;
border-bottom:1px solid #90aeff;*/
- }
+}
+.index-container-ty .ant-table-thead > tr > th,
+.index-container-ty .ant-table-tbody > tr > td {
+ border-bottom: 1px solid #90aeff;
+}
- .index-container-ty .ant-table-thead > tr > th,
- .index-container-ty .ant-table-tbody > tr > td{
- border-bottom: 1px solid #90aeff;
- }
+.index-container-ty
+ .ant-table-small
+ > .ant-table-content
+ > .ant-table-fixed-left
+ > .ant-table-body-outer
+ > .ant-table-body-inner
+ > table
+ > .ant-table-thead
+ > tr
+ > th,
+.index-container-ty
+ .ant-table-small
+ > .ant-table-content
+ > .ant-table-fixed-right
+ > .ant-table-body-outer
+ > .ant-table-body-inner
+ > table
+ > .ant-table-thead
+ > tr
+ > th {
+ border-bottom: 1px solid #90aeff;
+}
- .index-container-ty .ant-table-small > .ant-table-content > .ant-table-fixed-left > .ant-table-body-outer > .ant-table-body-inner > table > .ant-table-thead > tr > th,
- .index-container-ty .ant-table-small > .ant-table-content > .ant-table-fixed-right > .ant-table-body-outer > .ant-table-body-inner > table > .ant-table-thead > tr > th{
- border-bottom: 1px solid #90aeff;
- }
+.index-container-ty
+ .ant-table-small
+ > .ant-table-content
+ > .ant-table-scroll
+ > .ant-table-body
+ > table
+ > .ant-table-thead
+ > tr
+ > th {
+ border-bottom: 1px solid #90aeff;
+}
- .index-container-ty .ant-table-small > .ant-table-content > .ant-table-scroll > .ant-table-body > table > .ant-table-thead > tr > th{
- border-bottom: 1px solid #90aeff;
- }
+.index-container-ty .ant-table-small {
+ border: 1px solid #90aeff;
+}
- .index-container-ty .ant-table-small{
- border: 1px solid #90aeff;
- }
-
- .index-container-ty .ant-table-placeholder {
- padding: 0
- }
+.index-container-ty .ant-table-placeholder {
+ padding: 0;
+}
</style>
\ No newline at end of file
--
Gitblit v1.9.3