yxt_group
/
supervise
5
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity
Browse Source

完善首页面样式

master
guoxing 1 year ago
parent
bdaf201dec
commit
3f76f46d6a
1 changed files with 462 additions and 93 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Unified View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 517
      supervise-uniapp/pages/home/WorkFragment.vue

517
supervise-uniapp/pages/home/WorkFragment.vue
View File

@ -1,21 +1,87 @@
<template> <template>
<view style="width: 100%;height: 100%;"> <view style="width: 100%;height: 100%;">
<view v-show="!isShow" style="width: 100%;height: 100%;"> <view v-show="!isShow" style="width: 100%;height: 100%;">
<image src="https://supervise.yxtsoft.com/img/base/loading.gif" mode="aspectFill" style="width: 100%;height: 100%;"></image> <image src="https://supervise.yxtsoft.com/img/base/loading.gif" mode="aspectFill"
style="width: 100%;height: 100%;"></image>
</view> </view>
<view class="content" v-show="isShow"> <view class="content" v-show="isShow">
<view class="whiteBg" style="display: flex;flex-direction: column;margin-top: 20px;"> <view class="whiteBg" style="display: flex;flex-direction: column;">
<!--circular用来设置循环轮播 indicator-dots设置下面小圆点用来点击 --> <!--circular用来设置循环轮播 indicator-dots设置下面小圆点用来点击 -->
<swiper circular indicator-dots class="swiper" :autoplay="true" :interval="2000" <!-- <swiper circular indicator-dots class="swiper" :autoplay="true" :interval="2000"
v-show="swipers.length>0"> v-show="swipers.length>0"> -->
<!-- v-for循环遍历数组 --> <!-- v-for循环遍历数组 -->
<swiper-item v-for="(item,index) in swipers"> <!-- <swiper-item v-for="(item,index) in swipers">
<image :src="item" @click="swiperClick(index)"></image> <image :src="item" @click="swiperClick(index)"></image>
</swiper-item> </swiper-item>
</swiper> </swiper> -->
<view style="display: flex;flex-direction: row; align-items: center;
background: #FFF6F0; " v-show="textArr.length>0">
<!-- <view style="display: flex;flex-direction: column; margin-left: 16px;">
<text
style="font-size: 18px;font-weight: bold;font-family: sans-serif;color: #FA755C; font-style:oblique;">公告</text>
<text
style="font-size: 18px;font-weight: bold;font-family: sans-serif;color: #31415F; font-style:oblique;">事项</text>
</view>
<view
style="margin-top: 20px;margin-bottom:20px;width: 2px;height: 80%;background: #E7EAF0;margin-left: 15px;margin-right: 15px;">
</view> -->
<div class="textBox">
<div class="marquee-wrap" >
<div class="marquee-list" :class="{'animate-up': animateUp}">
<view v-for="(item, index) in textArr" @click="textClick(item)">
<view style="display: flex;flex-direction: row;width: 100%;">
<image style="width: 18px;height: 18px;"
src="https://supervise.yxtsoft.com/img/newApp/earlyWarning.png"
mode="aspectFit">
</image>
<text style="flex: 1; overflow: hidden;
text-overflow: ellipsis;
display: -webkit-box;
-webkit-line-clamp: 1;
-webkit-box-orient: vertical;">{{item.name}}</text>
<text style="color: #999999;">{{item.date}}</text>
</view>
</view>
</div>
</div>
</div>
</view>
<view class="whiteBg-bom">
<image class="whiteBg-bom-lift" mode="scaleToFill" @click="warehouseClick('5')"
src="https://supervise.yxtsoft.com/img/newApp/allData.png" />
<view class="whiteBg-bom-right">
<image class="whiteBg-bom-right-top" mode="aspectFit" @click="warehouseClick('1')"
src="https://supervise.yxtsoft.com/img/newApp/warehouseList.png" />
<image class="whiteBg-bom-right-bom" mode="aspectFit" @click="warehouseClick('6')"
src="https://supervise.yxtsoft.com/img/newApp/warehouseSecurity.png" />
</view>
</view>
<view style="display: flex;flex-direction: row;"> <view style="display: flex;flex-direction: row;">
@ -56,19 +122,116 @@
</view> </view>
</view> </view>
<view class="whiteBg-bom"> </view>
<image class="whiteBg-bom-lift" @click="warehouseClick('5')" src="https://supervise.yxtsoft.com/img/newApp/allData.png"/>
<!-- <view style="display: flex;flex-direction: row; align-items: center;margin-top:10px;
background: #fff; padding-top: 10px;padding-bottom: 10px;" v-show="textArr.length>0">
<view class="whiteBg-bom-right"> <view style="display: flex;flex-direction: column; margin-left: 16px;">
<text
style="font-size: 18px;font-weight: bold;font-family: sans-serif;color: #FA755C; font-style:oblique;">公告</text>
<text
style="font-size: 18px;font-weight: bold;font-family: sans-serif;color: #31415F; font-style:oblique;">事项</text>
</view>
<view
style="margin-top: 20px;margin-bottom:20px;width: 2px;height: 80%;background: #E7EAF0;margin-left: 15px;margin-right: 15px;">
</view>
<div class="textBox">
<div class="marquee-wrap">
<div class="marquee-list" :class="{'animate-up': animateUp}">
<view v-for="(item, index) in textArr" @click="textClick(item)">
<view style="display: flex;flex-direction: column;">
<view style="display: flex;flex-direction: row;align-items: center;width: 100%;">
<image style="width: 18px;height: 18px;"
src="https://supervise.yxtsoft.com/img/newApp/earlyWarning.png"
mode="aspectFit">
</image>
<text style="width: 100%; overflow: hidden;
text-overflow: ellipsis;
display: -webkit-box;
-webkit-line-clamp: 1;
-webkit-box-orient: vertical;">{{item.name}}</text>
</view>
<text style="color: #999999;margin-top: 8px;">{{item.date}}</text>
</view>
</view>
</div>
</div>
</div>
</view> -->
<image class="whiteBg-bom-right-top" @click="warehouseClick('1')" src="https://supervise.yxtsoft.com/img/newApp/warehouseList.png"/> <view class="top">
<text class="top-title">全部项目 ({{dataList.length}})</text>
<image class="whiteBg-bom-right-bom" @click="warehouseClick('6')"src="https://supervise.yxtsoft.com/img/newApp/warehouseSecurity.png"/> <!-- <view class="top-num">
<image class="top-num-img" src="../../static/baseIcon/project.png"></image>
<text class="top-num-text"></text>
</view> -->
<view class="top-date" @click="openDate">
<text class="top-date-text">{{params.orderDate}}</text>
<image class="top-date-img" src="../../static/baseIcon/calendar.png"></image>
</view>
</view>
<view style="display: flex;flex-direction: row;align-items: center;
justify-content: center;background: #fff;padding-bottom: 16px;margin-top: -5px;">
<view style="flex: 0.5;"></view>
<view style="display: flex;flex-direction: column;flex: 1.6;justify-content: center;">
<text style="color: #666;">总授信</text>
<view style="display: flex;flex-direction: row;align-items: center;margin-top: 5px;">
<text style="color: #3478F5;font-size: 24px;font-weight: bold">{{allCredit}}</text>
<text style="color: #666;margin-left: 4px;">万元</text>
</view>
</view>
<view style="display: flex;flex-direction: column;flex: 1.6;justify-content: center;">
<text style="color: #666;">总用信</text>
<view style="display: flex;flex-direction: row;align-items: center;margin-top: 5px;">
<text style="color: #3478F5;font-size: 24px;font-weight: bold">{{allUseCredit}}</text>
<text style="color: #666;margin-left: 4px;">万元</text>
</view>
</view>
<view style="flex: 0.3;"></view>
</view>
<view class="list">
<view v-for="(item,index) in dataList" class="newslist" @click="itemClick(item)">
<view class="item" :class="{'item2':index==dataList.length-1}">
<view class="item-name">{{item.projectName}}</view>
<text class="item-num" v-show="item.isReport=='2'">当日无数据</text>
<view v-show="item.isReport=='1'">
<text class="item-num"
:class="{'item-num2':item.state=='2'}">{{item.pledgeRatePercent}}%</text>
<text class="item-num">/ {{item.bankPledgeRate}}%</text>
</view>
<image v-show="item.isReport=='1'" src="../../static/baseIcon/zy.png"
style="width: 15px;height: 15px;" mode="aspectFill">
</image>
</view> </view>
</view> </view>
@ -77,7 +240,8 @@
<!-- <view class="whiteBg" style="display: flex;flex-direction: column;padding-top: 20px;margin-top: 20px;">
<!-- <view class="whiteBg" style="display: flex;flex-direction: column;padding-top: 20px;margin-top: 20px;">
<view style="display: flex;flex-direction: row;margin-left: 20px;align-items: center;"> <view style="display: flex;flex-direction: row;margin-left: 20px;align-items: center;">
@ -88,7 +252,7 @@
</view> </view>
<view style=" height: 1px;background: #eee;margin-left: 25px;margin-right: 25px;margin-top: 15px;"> <view style=" height: 1px;background: #eee;margin-left: 25px;margin-right: 25px;margin-top: 15px;">
</view> --> </view>
<!-- <view style="margin-top: 20px;display: flex;flex-direction: row;width: 100%;margin-bottom: 20px;"> <!-- <view style="margin-top: 20px;display: flex;flex-direction: row;width: 100%;margin-bottom: 20px;">
@ -128,7 +292,7 @@
</image> </image>
<text class="centre_text">云仓管理</text> <text class="centre_text">云仓管理</text>
</view> --> </view> -->
<!-- <view class="centre" @click="warehouseClick('2')"> <!-- <view class="centre" @click="warehouseClick('2')">
<image class="centre_img" src="https://supervise.yxtsoft.com/img/newApp/kcfx.png" <image class="centre_img" src="https://supervise.yxtsoft.com/img/newApp/kcfx.png"
mode="aspectFit"> mode="aspectFit">
</image> </image>
@ -147,7 +311,7 @@
<text class="centre_text">机器人巡库</text> <text class="centre_text">机器人巡库</text>
</view> --> </view> -->
<!-- <view class="centre" @click="warehouseClick('5')"> <!-- <view class="centre" @click="warehouseClick('5')">
<image class="centre_img" src="https://supervise.yxtsoft.com/img/newApp/jqrxk.png" <image class="centre_img" src="https://supervise.yxtsoft.com/img/newApp/jqrxk.png"
mode="aspectFit"> mode="aspectFit">
</image> </image>
@ -157,12 +321,17 @@
</view> </view>
</view> --> </view> -->
</view> </view>
<u-datetime-picker ref="datetimePicker" :closeOnClickOverlay='true' @close="cancelClick" @cancel="cancelClick"
@confirm="confirmClick" :show="datetimeShow" v-model="orderDate" mode="date" :formatter="formatter">
</u-datetime-picker>
</view> </view>
</template> </template>
<script> <script>
import {
formatTimeTwo,
beforeDay
} from "@/utils/index";
export default { export default {
data() { data() {
return { return {
@ -187,6 +356,17 @@
// 'https://fuss10.elemecdn.com/2/11/6535bcfb26e4c79b48ddde44f4b6fjpeg.jpeg' // 'https://fuss10.elemecdn.com/2/11/6535bcfb26e4c79b48ddde44f4b6fjpeg.jpeg'
], ],
isShow: false, isShow: false,
datetimeShow: false,
allCredit: "",
allUseCredit: "",
orderDate: beforeDay(null, -1),
params: {
userSid: getApp().globalData.sid,
orderDate: "",
},
dataList: [
],
}; };
}, },
@ -206,13 +386,23 @@
var userSid = getApp().globalData.sid var userSid = getApp().globalData.sid
console.log(">>>>>", userSid) console.log(">>>>>", userSid)
this.getData(userSid, msg) this.getData(userSid, msg)
this.loadData(userSid);
}); });
}, },
onLoad() {
this.params.orderDate = beforeDay(null, -1)
},
mounted() { mounted() {
this.startMove() this.startMove()
this.timer = setInterval(this.scrollAnimate, 1500); this.timer = setInterval(this.scrollAnimate, 1500);
}, },
onReady() {
/* #ifdef MP-WEIXIN */
// 微信小程序需要用此写法
this.$refs.datetimePicker.setFormatter(this.formatter)
/* #endif */
},
// onLoad() { // onLoad() {
// }, // },
@ -224,7 +414,7 @@
if (token != null && token.length != 0) { if (token != null && token.length != 0) {
getApp().globalData.token = token getApp().globalData.token = token
} }
let isLogin =uni.getStorageSync("isLogin") let isLogin = uni.getStorageSync("isLogin")
if (isLogin != null && isLogin == 1) { if (isLogin != null && isLogin == 1) {
getApp().globalData.isLogin = isLogin getApp().globalData.isLogin = isLogin
} }
@ -242,6 +432,7 @@
var userSid = getApp().globalData.sid var userSid = getApp().globalData.sid
console.log(">>>>>", userSid) console.log(">>>>>", userSid)
this.getData(userSid, true) this.getData(userSid, true)
this.loadData(userSid);
// uni.setTabBarBadge({ //显示数字 // uni.setTabBarBadge({ //显示数字
// index: 0, //tabbar下标 // index: 0, //tabbar下标
// text: '100' //数字 // text: '100' //数字
@ -299,7 +490,7 @@
this.textArr = resp.notice this.textArr = resp.notice
this.swipers = resp.urls this.swipers = resp.urls
if(this.dyNum!=0){ if (this.dyNum != 0) {
uni.setTabBarBadge({ //显示数字 uni.setTabBarBadge({ //显示数字
index: 1, //tabbar下标 index: 1, //tabbar下标
text: this.dyNum > 100 ? "99+" : this.dyNum + "" //数字 text: this.dyNum > 100 ? "99+" : this.dyNum + "" //数字
@ -378,10 +569,10 @@
}, },
textClick(item) { textClick(item) {
console.log("111", item) console.log("111", item.name)
uni.showToast({ uni.showToast({
icon: "none", icon: "none",
title: '您点击了公告，内容为：' + item, title: '您点击了公告，内容为：' + item.name,
duration: 2000, duration: 2000,
}); });
}, },
@ -472,29 +663,92 @@
duration: 2000, duration: 2000,
}); });
break; break;
case "5": case "5":
// 数据总览 // 数据总览
// uni.showToast({ // uni.showToast({
// icon: "none", // icon: "none",
// title: '数据总览', // title: '数据总览',
// duration: 2000, // duration: 2000,
// }); // });
uni.navigateTo({ uni.navigateTo({
url: '../index/DataAssembleList2' url: '../index/DataAssembleList2'
}); });
break; break;
case "6": case "6":
uni.navigateTo({ uni.navigateTo({
url: '../index/warehouseSecurity' url: '../index/warehouseSecurity'
}); });
break; break;
default: default:
break; break;
} }
}, },
openDate() {
console.log('openDate')
this.datetimeShow = true
},
formatter(type, value) {
if (type === 'year') {
return `${value}年`
}
if (type === 'month') {
return `${value}月`
}
if (type === 'day') {
return `${value}日`
}
return value
},
cancelClick() {
this.datetimeShow = false
},
confirmClick(date) {
console.log('confirmClick', date)
console.log('date.value', date.value)
console.log('getTime', (new Date(date.value)).getTime())
console.log('formatTimeTwo', formatTimeTwo((new Date(date.value)).getTime(), "Y-M-D"))
this.params.orderDate = formatTimeTwo((new Date(date.value)).getTime(), "Y-M-D")
this.datetimeShow = false
this.loadData(getApp().globalData.sid)
},
loadData(userSid) {
this.params.userSid = userSid
console.log('params', this.params)
this.$api.projectListPageNew(this.params).then((resp) => {
// if (resp.success) {
console.log('1111', resp)
this.allCredit = resp.creditLimitTotal
this.allUseCredit = resp.useLimitTotal
this.dataList = resp.list
}).catch(e => {
console.log('eeeee', e)
})
},
itemClick(item) {
console.log('itemClick', item)
console.log('orderDate', this.params.orderDate)
if (item.isReport == '1') {
uni.navigateTo({
url: '../index/RegulatoryReporting?projectSid=' + item.projectSid + "&orderDate=" + this
.params.orderDate
});
}
}
} }
} }
@ -508,11 +762,9 @@
.whiteBg { .whiteBg {
display: flex; display: flex;
background-color: white; background: #fff;
border-radius: 20px;
padding-left: 12px; // height: 100%;
padding-right: 12px;
height: 100%;
.swiper { .swiper {
width: 100%; width: 100%;
@ -592,47 +844,54 @@
.top_item_text { .top_item_text {
margin-top: 5px; margin-top: 5px;
color: #101010; color: #333;
font-size: 13px; font-size: 14px;
} }
} }
.whiteBg-bom{ .whiteBg-bom {
margin-top: 10px; padding-left: 16px;
display: flex; padding-right: 16px;
flex-direction: row; margin-top: 16px;
justify-content: center; display: flex;
flex-direction: row;
justify-content: center;
.whiteBg-bom-lift {
margin-right: 8px;
flex: 0.75;
width: 100%;
height: 175px;
// border-radius: 10px;
}
.whiteBg-bom-right {
.whiteBg-bom-lift{ flex: 0.8;
margin-right: 8px; margin-left: 8px;
flex: 0.7; display: flex;
flex-direction: column;
.whiteBg-bom-right-top {
// border-radius: 10px;
width: 100%; width: 100%;
height:175px; height: 82px;
} }
.whiteBg-bom-right{
flex: 1; .whiteBg-bom-right-bom {
margin-left: 8px; // border-radius: 10px;
display: flex; margin-top: 10px;
flex-direction: column; width: 100%;
height: 82px;
.whiteBg-bom-right-top{
width: 100%;
height: 82px;
}
.whiteBg-bom-right-bom{
margin-top: 10px;
width: 100%;
height: 82px;
}
} }
}
} }
} }
.textBox { .textBox {
flex: 1; flex: 1;
margin-right: 10px;
// .textBox-swiper{ // .textBox-swiper{
// width: 100%; // width: 100%;
@ -654,8 +913,13 @@
width: 100%; width: 100%;
height: 40px; height: 40px;
overflow: hidden; overflow: hidden;
display: flex;
flex-direction: column;
justify-content: center;
.marquee-list { .marquee-list {
padding-left: 10px;
padding-right: 10px;
li { li {
width: 100%; width: 100%;
height: 100%; height: 100%;
@ -663,7 +927,7 @@
overflow: hidden; overflow: hidden;
white-space: nowrap; white-space: nowrap;
list-style: none; list-style: none;
line-height: 40px; line-height: 50px;
color: #000; color: #000;
font-size: 15px; font-size: 15px;
font-weight: 400; font-weight: 400;
@ -671,12 +935,117 @@
} }
.animate-up { .animate-up {
transition: all 0.8s ease-in-out; transition: all 1s ease-in-out;
transform: translateY(-40px); transform: translateY(-40px);
} }
} }
} }
.top {
margin-top: 10px;
padding: 20px 16px;
background: #fff;
display: flex;
flex-direction: row;
align-items: center;
.top-title {
flex: 1;
color: #000;
font-size: 18px;
font-family: sans-serif;
font-weight: 600;
}
.top-num {
margin-left: 20px;
flex: 1;
display: flex;
flex-direction: row;
align-items: center;
.top-num-img {
width: 14px;
height: 14px;
}
.top-num-text {
margin-left: 5px;
color: #E99D42;
font-size: 14px;
}
}
.top-date {
display: flex;
flex-direction: row;
align-items: center;
.top-date-text {
color: #717171 100%;
font-size: 14px;
margin-right: 10px;
}
.top-date-img {
width: 14px;
height: 14px;
}
}
}
.list {
margin-top: 10px;
background: #fff;
.newslist {
width: 100%;
display: flex;
flex-direction: row;
align-items: center;
.item {
width: 100%;
padding: 20px 20px;
display: flex;
flex-direction: row;
align-items: center;
border-bottom: 1px #eee solid;
.item-name {
flex: 1;
color: #191919;
font-size: 15px;
font-weight: 600;
font-family: sans-serif;
overflow: hidden;
text-overflow: ellipsis;
display: -webkit-box;
-webkit-line-clamp: 1;
-webkit-box-orient: vertical;
margin-right: 20px;
}
.item-num {
margin-right: 5px;
color: #999999;
font-size: 12px;
}
.item-num2 {
color: #FF5006;
}
}
.item2 {
border-bottom: none;
}
}
}
// .slide-enter-active, // .slide-enter-active,
// .slide-leave-active { // .slide-leave-active {

Write Preview
Loading…
Cancel
Save