|
|
@@ -0,0 +1,196 @@
|
|
|
+<template>
|
|
|
+ <view class="content">
|
|
|
+
|
|
|
+ <scroll-view scroll-y="true" scroll-x="true" :scroll-top="scrollTop" :scroll-left="scrollTop" @scroll="scroll">
|
|
|
+
|
|
|
+ <!-- 内容 -->
|
|
|
+ <view class="teamContent" :style="{width:HN_width}">
|
|
|
+ <view v-for="(itemRow,indexRow) in itemData" :key="indexRow">
|
|
|
+ <view class="row" :class="{grayColor:indexRow==0}">
|
|
|
+ <view v-for="(itemCol,indexCol) in itemRow" :key="indexCol" class="colBg" :class="{grayColor:indexCol==0}">
|
|
|
+ <view class="col" v-if="indexCol==0">{{itemCol}}</view>
|
|
|
+ <view class="col" v-else-if="indexRow==0">{{itemCol}}</view>
|
|
|
+ <view class="redCol" v-else-if="indexRow!=0 && indexCol!=0 && itemCol==1"></view>
|
|
|
+ <view class="grayCol" v-else-if="indexRow!=0 && indexCol!=0 && itemCol==0"></view>
|
|
|
+
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+
|
|
|
+
|
|
|
+
|
|
|
+ </scroll-view>
|
|
|
+
|
|
|
+ <view class="leftView">
|
|
|
+ <view v-for="(item,index) in leftData" :key="index" class="leftTitleBg">
|
|
|
+ <view class="leftTitle" :class="{firstRow:index==0}">{{item}}</view>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+
|
|
|
+
|
|
|
+
|
|
|
+
|
|
|
+ <!-- 无数据空白页 -->
|
|
|
+ <nodata v-if="itemData.length==0"></nodata>
|
|
|
+
|
|
|
+ </view>
|
|
|
+</template>
|
|
|
+
|
|
|
+<script>
|
|
|
+ import nodata from '../../components/nodata/nodata.vue'
|
|
|
+ export default {
|
|
|
+ components: {
|
|
|
+ nodata,
|
|
|
+ },
|
|
|
+ data() {
|
|
|
+ return {
|
|
|
+ itemData:[],
|
|
|
+ noMoreShow: false,
|
|
|
+ mileage: '',
|
|
|
+ liyangId: '',
|
|
|
+ scrollTop: 0,
|
|
|
+ old: {
|
|
|
+ scrollTop: 0
|
|
|
+ },
|
|
|
+ leftData:[],
|
|
|
+
|
|
|
+ }
|
|
|
+ },
|
|
|
+ onLoad(opt) {
|
|
|
+ this.mileage = opt.mileage
|
|
|
+ this.liyangId = opt.liyangId
|
|
|
+
|
|
|
+ this.getData()
|
|
|
+
|
|
|
+ },
|
|
|
+ computed: {
|
|
|
+
|
|
|
+ HN_width() {
|
|
|
+ var MaxLength = 2;
|
|
|
+ var Row_Materials = this.itemData[0];
|
|
|
+ if (Row_Materials != null && Row_Materials.length > 0) {
|
|
|
+ MaxLength = Row_Materials.length * (180 + 40)
|
|
|
+ }
|
|
|
+
|
|
|
+ return MaxLength + 'rpx';
|
|
|
+
|
|
|
+ },
|
|
|
+ },
|
|
|
+ methods: {
|
|
|
+
|
|
|
+
|
|
|
+
|
|
|
+ scroll: function(e) {
|
|
|
+
|
|
|
+ this.old.scrollTop = e.detail.scrollTop
|
|
|
+ },
|
|
|
+ getData() {
|
|
|
+ uni.showLoading({
|
|
|
+ title: '加载中'
|
|
|
+ })
|
|
|
+ let url = 'worldKeepCar/worldHome/queryPlan',
|
|
|
+ params = {
|
|
|
+ mileage: this.mileage,
|
|
|
+ liyangId: this.liyangId,
|
|
|
+ }
|
|
|
+ this.$http(url, params, 'GET').then(res => {
|
|
|
+ uni.hideLoading()
|
|
|
+ this.itemData = res.data
|
|
|
+
|
|
|
+ // 首列数据
|
|
|
+ for (var i = 0; i < res.data.length; i++) {
|
|
|
+ var leftArr = res.data[i]
|
|
|
+ this.leftData.push(leftArr[0])
|
|
|
+ }
|
|
|
+
|
|
|
+
|
|
|
+
|
|
|
+ })
|
|
|
+ }
|
|
|
+ },
|
|
|
+
|
|
|
+ }
|
|
|
+</script>
|
|
|
+
|
|
|
+<style scoped>
|
|
|
+ .content {
|
|
|
+ background: #FFFFFF;
|
|
|
+ min-height: 100vh;
|
|
|
+
|
|
|
+ }
|
|
|
+
|
|
|
+ .scroll-view {
|
|
|
+ white-space: nowrap;
|
|
|
+ height: 1000;
|
|
|
+
|
|
|
+ }
|
|
|
+
|
|
|
+ .teamContent {
|
|
|
+ width: 100%;
|
|
|
+ align-items: center;
|
|
|
+ }
|
|
|
+
|
|
|
+ .row {
|
|
|
+ display: flex;
|
|
|
+ justify-content: space-around;
|
|
|
+ width: 100%;
|
|
|
+
|
|
|
+ }
|
|
|
+ .colBg{
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ justify-content: center;
|
|
|
+ padding: 20rpx;
|
|
|
+ width: 180rpx;
|
|
|
+ border: 1rpx #EEEEEE solid;
|
|
|
+
|
|
|
+
|
|
|
+ }
|
|
|
+ .col {
|
|
|
+ color: #333333;
|
|
|
+ font-size: 28rpx;
|
|
|
+
|
|
|
+ }
|
|
|
+ .redCol,
|
|
|
+ .grayCol{
|
|
|
+ width: 24rpx;
|
|
|
+ height: 24rpx;
|
|
|
+ background-color: #FF4F00;
|
|
|
+ border-radius: 12rpx;
|
|
|
+
|
|
|
+ }
|
|
|
+ .grayCol{
|
|
|
+ background-color: #DDDDDD;
|
|
|
+ }
|
|
|
+ .grayColor{
|
|
|
+ background-color: #F7F7F7;
|
|
|
+ }
|
|
|
+ .leftView{
|
|
|
+ display: flex;
|
|
|
+ justify-content: space-around;
|
|
|
+ flex-flow: column;
|
|
|
+
|
|
|
+ position: absolute;
|
|
|
+ left: 0rpx;
|
|
|
+ top: 0rpx;
|
|
|
+ background-color: #FFFFFF;
|
|
|
+ z-index: 99;
|
|
|
+
|
|
|
+ }
|
|
|
+
|
|
|
+ .leftTitleBg{
|
|
|
+
|
|
|
+ padding: 20rpx;
|
|
|
+ width: 180rpx;
|
|
|
+ background-color: #F7F7F7;
|
|
|
+ border: 1rpx #EEEEEE solid;
|
|
|
+ }
|
|
|
+ .leftTitle{
|
|
|
+ color: #333333;
|
|
|
+ font-size: 28rpx;
|
|
|
+ }
|
|
|
+ .firstRow{
|
|
|
+ height: 80rpx;
|
|
|
+ }
|
|
|
+</style>
|
guo