From 6e41ce0ab4300758ebd77ea257c3d9532e3df7e0 Mon Sep 17 00:00:00 2001
From: zhangxiaoxu123456 <zxx19900626>
Date: 星期二, 10 五月 2022 11:58:22 +0800
Subject: [PATCH] 接口对接
---
src/pages/components/jiuyeQingkuang/chengzhenXinzengJiuye.vue | 251 +++++++++++++++++++++++++++++++++++++++++--------
1 files changed, 209 insertions(+), 42 deletions(-)
diff --git a/src/pages/components/jiuyeQingkuang/chengzhenXinzengJiuye.vue b/src/pages/components/jiuyeQingkuang/chengzhenXinzengJiuye.vue
index 757b421..b366e17 100644
--- a/src/pages/components/jiuyeQingkuang/chengzhenXinzengJiuye.vue
+++ b/src/pages/components/jiuyeQingkuang/chengzhenXinzengJiuye.vue
@@ -1,106 +1,238 @@
<template>
<div class="chengzhenXinzengJiuye-wrap">
<el-table
+ :cell-style="handleCellStyle"
+ :max-height="tableHeight"
border
:data="tableData"
+ :header-cell-style="handleheader"
style="width: 100%">
<el-table-column
- prop="shiqu"
+ prop="area"
label="鍘匡紙甯傘�佸尯锛�"
align="center"
width="220">
+ <template slot-scope="scope">
+ <div class="sanjiao-box">
+ <div class="cell-content-box">{{scope.row.area}}</div>
+ </div>
+ </template>
</el-table-column>
<el-table-column
- prop="name"
+ width="280"
+ prop="january"
label="1鏈�"
align="center">
+ <template slot-scope="scope">
+ <div class="sanjiao-box">
+ <div class="cell-content-box">{{scope.row.january.val}}</div>
+ <div class="paiming-box red-sanjiao"
+ :class="scope.row.january.order > 0 ? 'red-sanjiao' : 'green-sanjiao'"
+ v-if="scope.row.january.order != 0">
+ <div>{{scope.row.january.order}}</div>
+ </div>
+ </div>
+ </template>
</el-table-column>
<el-table-column
- prop="address"
+ width="280"
+ prop="february"
label="2鏈�"
align="center">
+ <template slot-scope="scope">
+ <div class="sanjiao-box">
+ <div>{{scope.row.february.val}}</div>
+ <div class="paiming-box"
+ :class="scope.row.february.order > 0 ? 'red-sanjiao' : 'green-sanjiao'"
+ v-if="scope.row.february.order != 0">
+ <div>{{scope.row.february.order}}</div>
+ </div>
+ </div>
+ </template>
</el-table-column>
<el-table-column
- prop="name"
+ width="280"
+ prop="march"
label="3鏈�"
align="center">
+ <template slot-scope="scope">
+ <div class="sanjiao-box">
+ <div>{{scope.row.march.val}}</div>
+ <div class="paiming-box"
+ :class="scope.row.march.order > 0 ? 'red-sanjiao' : 'green-sanjiao'"
+ v-if="scope.row.march.order != 0">{{scope.row.march.order}}</div>
+ </div>
+ </template>
</el-table-column>
<el-table-column
- prop="address"
+ width="280"
+ prop="april"
label="4鏈�"
align="center">
+ <template slot-scope="scope">
+ <div class="sanjiao-box">
+ <span>{{scope.row.april.val}}</span>
+ <div class="paiming-box"
+ :class="scope.row.april.order > 0 ? 'red-sanjiao' : 'green-sanjiao'"
+ v-if="scope.row.april.order != 0">{{scope.row.april.order}}</div>
+ </div>
+ </template>
</el-table-column>
<el-table-column
- prop="name"
+ width="280"
+ prop="may"
label="5鏈�"
align="center">
+ <template slot-scope="scope">
+ <div class="sanjiao-box">
+ <span>{{scope.row.may.val}}</span>
+ <div class="paiming-box"
+ :class="scope.row.may.order > 0 ? 'red-sanjiao' : 'green-sanjiao'"
+ v-if="scope.row.may.order != 0">{{scope.row.may.order}}</div>
+ </div>
+ </template>
</el-table-column>
<el-table-column
- prop="address"
+ width="280"
+ prop="june"
label="6鏈�"
align="center">
+ <template slot-scope="scope">
+ <div class="sanjiao-box">
+ <span>{{scope.row.june.val}}</span>
+ <div class="paiming-box"
+ :class="scope.row.june.order > 0 ? 'red-sanjiao' : 'green-sanjiao'"
+ v-if="scope.row.june.order != 0">{{scope.row.june.order}}</div>
+ </div>
+ </template>
</el-table-column>
<el-table-column
- prop="name"
+ width="280"
+ prop="july"
label="7鏈�"
align="center">
+ <template slot-scope="scope">
+ <div class="sanjiao-box">
+ <span>{{scope.row.july.val}}</span>
+ <div class="paiming-box"
+ :class="scope.row.july.order > 0 ? 'red-sanjiao' : 'green-sanjiao'"
+ v-if="scope.row.july.order != 0">{{scope.row.july.order}}</div>
+ </div>
+ </template>
</el-table-column>
<el-table-column
- prop="address"
+ width="280"
+ prop="august"
label="8鏈�"
align="center">
+ <template slot-scope="scope">
+ <div class="sanjiao-box">
+ <span>{{scope.row.august.val}}</span>
+ <div class="paiming-box"
+ :class="scope.row.august.order > 0 ? 'red-sanjiao' : 'green-sanjiao'"
+ v-if="scope.row.august.order != 0">{{scope.row.august.order}}</div>
+ </div>
+ </template>
</el-table-column>
<el-table-column
- prop="name"
+ width="280"
+ prop="september"
label="9鏈�"
align="center">
+ <template slot-scope="scope">
+ <div class="sanjiao-box">
+ <span>{{scope.row.september.val}}</span>
+ <div class="paiming-box"
+ :class="scope.row.september.order > 0 ? 'red-sanjiao' : 'green-sanjiao'"
+ v-if="scope.row.september.order != 0">{{scope.row.september.order}}</div>
+ </div>
+ </template>
</el-table-column>
<el-table-column
- prop="address"
+ width="280"
+ prop="october"
label="10鏈�"
align="center">
+ <template slot-scope="scope">
+ <div class="sanjiao-box">
+ <span>{{scope.row.october.val}}</span>
+ <div class="paiming-box"
+ :class="scope.row.october.order > 0 ? 'red-sanjiao' : 'green-sanjiao'"
+ v-if="scope.row.october.order != 0">{{scope.row.october.order}}</div>
+ </div>
+ </template>
</el-table-column>
<el-table-column
- prop="name"
+ width="280"
+ prop="november"
label="11鏈�"
align="center">
+ <template slot-scope="scope">
+ <div class="sanjiao-box">
+ <span>{{scope.row.november.val}}</span>
+ <div class="paiming-box"
+ :class="scope.row.november.order > 0 ? 'red-sanjiao' : 'green-sanjiao'"
+ v-if="scope.row.november.order != 0">{{scope.row.november.order}}</div>
+ </div>
+ </template>
</el-table-column>
<el-table-column
- prop="address"
+ width="280"
+ prop="december"
label="12鏈�"
align="center">
+ <template slot-scope="scope">
+ <div class="sanjiao-box">
+ <span>{{scope.row.december.val}}</span>
+ <div class="paiming-box"
+ :class="scope.row.december.order > 0 ? 'red-sanjiao' : 'green-sanjiao'"
+ v-if="scope.row.december.order != 0">{{scope.row.december.order}}</div>
+ </div>
+ </template>
</el-table-column>
</el-table>
</div>
</template>
<script>
+ import nowSize from "../../../libs/nowSize";
export default {
name: "chengzhenXinzengJiuye",
+ props: {
+ tableData: {
+ type: Array,
+ default: () => {
+ return []
+ }
+ }
+ },
data() {
return {
- tableData: [{
- shiqu:'鍏ㄥ競',
- date: '233322',
- name: '4432',
- address: '122'
- }, {
- shiqu:'闀垮畨鍖�',
- date: '23322',
- name: '12222',
- address: '4445'
- }, {
- shiqu:'妗ヨタ鍖�',
- date: '4432',
- name: '455',
- address: '5999'
- }, {
- shiqu:'鏂板崕鍖�',
- date: '5632',
- name: '145',
- address: '624'
- }]
+ tableHeight: window.innerHeight - nowSize(350)
}
+ },
+ mounted() {
+ },
+ methods: {
+ handleheader(data) {
+ return {
+ lineHeight: '2.5',
+ }
+ },
+ getHeight() {
+ this.tableHeight = window.innerHeight - nowSize(230)
+ },
+ handleCellStyle({rowIndex, columnIndex}) {
+ if(columnIndex == 0) {
+ return { background:'#51D2FF' }
+ }
+ }
+ },
+ created() {
+ window.addEventListener('resize', this.getHeight)
+ },
+ destroyed() {
+ window.addEventListener('resize', this.getHeight)
}
}
</script>
@@ -109,12 +241,11 @@
@import "../../../assets/css/base";
.chengzhenXinzengJiuye-wrap{
width: 100%;
- margin-top: 2rem;
+ margin-top: 0.078125rem /* 20/256 */;
.el-table th.el-table__cell{
background-color:$color-blue;
}
- .el-table tr{
- height: 6.4rem;
+ .el-table .el-table__body-wrapper tr{
}
.el-table tr:nth-child(odd){
background-color: #CEF2FF;
@@ -135,16 +266,52 @@
font-size: $fontSize-28;
color: $color-darkGrey;
font-weight: 300;
- line-height: 1;
+ line-height: 0.265625rem /* 68/256 */;
+ height: 0.265625rem /* 68/256 */;
+ padding-left: 0;
}
.el-table td.el-table__cell, .el-table th.el-table__cell.is-leaf{
- border-bottom:1px solid $color-grey; /*no*/
+ border-bottom:1Px solid $color-grey; /*no*/
}
.el-table--border .el-table__cell, .el-table__body-wrapper .el-table--border.is-scrolling-left~.el-table__fixed{
- border-right:1px solid $color-grey; /*no*/
+ border-right:1Px solid $color-grey; /*no*/
+ }
+ .el-table .el-table__cell{
+ padding:0;
}
}
</style>
-<style scoped>
-
+<style lang="scss" scoped>
+ @import "../../../assets/css/base";
+ .sanjiao-box{
+ line-height: 0.265625rem /* 68/256 */;
+ position: relative;
+ .paiming-box{
+ display: block;
+ color: $color-white;
+ position: absolute;
+ width: 0;
+ height: 0;
+ top: 0;
+ left: 0;
+ div{
+ position: relative;
+ left: 0px;
+ top: -0.3125rem /* -80/256 */;
+ color: #fff;
+ width: 0.1328125rem /* 34/256 */;
+ }
+ }
+ .red-sanjiao{
+ border-top: 0.265625rem /* 68/256 */ solid #FF0000;
+ border-right: 0.265625rem /* 68/256 */ solid transparent;
+ }
+ .green-sanjiao{
+ border-top: 0.265625rem /* 68/256 */ solid #3ABF21;
+ border-right: 0.265625rem /* 68/256 */ solid transparent;
+ }
+ .content{
+ /*line-height: 0.265625rem !* 68/256 *!;*/
+ }
+ }
</style>
--
Gitblit v1.9.1