From b46bc2dba51a3885a68e4c58316b41a31ea16bb2 Mon Sep 17 00:00:00 2001
From: loulijun2021 <1694218219@qq.com>
Date: 星期二, 14 二月 2023 13:35:03 +0800
Subject: [PATCH] 1.存货档案修改
---
src/views/xtsy/index.vue | 105 ++++++++++++++++++++++++++++++++++++++++------------
1 files changed, 80 insertions(+), 25 deletions(-)
diff --git a/src/views/xtsy/index.vue b/src/views/xtsy/index.vue
index a1c8a2e..2906260 100644
--- a/src/views/xtsy/index.vue
+++ b/src/views/xtsy/index.vue
@@ -1,6 +1,6 @@
<template>
<!-- <div>-->
- <div class="body">
+ <div class="body" style=" padding: 30px 10px 0 20px;background-color: #eaecef;" :style="{height:mainHeight+'px'}">
<div style="">
<div class="title"><i class="el-icon-s-fold" style="margin-right: 5px" />瀹炴椂鏁版嵁</div>
<div class="top">
@@ -11,12 +11,16 @@
<div class="top_card_content_flex">
<div class="content" style="width: 84%">
<div class="content_title1">浠婃棩鐧诲綍</div>
- <div class="content_end1" :style="{color:`rgb(${barTopColor01[0]})`}">1/409</div>
+ <div class="content_end1" :style="{color:`rgb(${barTopColor01[0]})`}">1/
+ <countTo :start-val="0" :end-val="999" :duration="3000" />
+ </div>
</div>
<div id="barTop01" class="barTop" style="width: 100%;" />
<div class="content" style="width: 84%">
<div class="content_title1">鏄ㄦ棩鐧诲綍</div>
- <div class="content_end1">0/409</div>
+ <div class="content_end1">0/
+ <countTo :start-val="0" :end-val="999" :duration="3000" />
+ </div>
</div>
<div id="barTop02" class="barTop" />
</div>
@@ -29,12 +33,16 @@
<div class="top_card_content_flex">
<div class="content" style="width: 84%">
<div class="content_title1">浠婃棩娲昏穬</div>
- <div class="content_end1" :style="{color:`rgb(${barTopColor02[0]})`}">0/409</div>
+ <div class="content_end1" :style="{color:`rgb(${barTopColor02[0]})`}">0/
+ <countTo :start-val="0" :end-val="999" :duration="3000" />
+ </div>
</div>
<div id="barTop03" class="barTop" />
<div class="content" style="width: 84%">
<div class="content_title1">鏄ㄦ棩娲昏穬</div>
- <div class="content_end1">0/409</div>
+ <div class="content_end1">0/
+ <countTo :start-val="0" :end-val="999" :duration="3000" />
+ </div>
</div>
<div id="barTop04" class="barTop" />
</div>
@@ -47,12 +55,16 @@
<div class="top_card_content_flex">
<div class="content" style="width: 84%">
<div class="content_title1">浠婃棩娲昏穬</div>
- <div class="content_end1" :style="{color:`rgb(${barTopColor03[0]})`}">0/409</div>
+ <div class="content_end1" :style="{color:`rgb(${barTopColor03[0]})`}">0/
+ <countTo :start-val="0" :end-val="999" :duration="3000" />
+ </div>
</div>
<div id="barTop05" class="barTop" />
<div class="content" style="width: 84%">
<div class="content_title1">鏄ㄦ棩娲昏穬</div>
- <div class="content_end1">0/409</div>
+ <div class="content_end1">0/
+ <countTo :start-val="0" :end-val="999" :duration="3000" />
+ </div>
</div>
<div id="barTop06" class="barTop" />
</div>
@@ -65,12 +77,16 @@
<div class="top_card_content_flex">
<div class="content" style="width: 84%">
<div class="content_title1">浠婃棩娲昏穬</div>
- <div class="content_end1" :style="{color:`rgb(${barTopColor04[0]})`}">0/409</div>
+ <div class="content_end1" :style="{color:`rgb(${barTopColor04[0]})`}">0/
+ <countTo :start-val="0" :end-val="999" :duration="3000" />
+ </div>
</div>
<div id="barTop07" class="barTop" />
<div class="content" style="width: 84%">
<div class="content_title1">鏄ㄦ棩娲昏穬</div>
- <div class="content_end1">0/409</div>
+ <div class="content_end1">0/
+ <countTo :start-val="0" :end-val="999" :duration="3000" />
+ </div>
</div>
<div id="barTop08" class="barTop" />
</div>
@@ -81,19 +97,23 @@
<div class="center">
<div class="title" style="margin-top: 20px"><i class="el-icon-s-fold" style="margin-right: 5px" />鐢ㄦ埛姒傚喌</div>
<div class="center_content">
- <div class="content">
+ <div class="content" :style="{height: isIpad?'300px':'400px'}">
<div class="content_title">娲昏穬鏃舵</div>
<div>
- <div style="width: 100%;height: 300px;margin: 20px 0 0 10px">
- <div id="line01" style="width: 100%;height:100%" />
- </div>
+ <div
+ id="line01"
+ style="width: 100%;"
+ :style="{height:isIpad?'200px':'300px'}"
+ />
</div>
</div>
- <div class="content">
+ <div class="content" :style="{height: isIpad?'300px':'400px'}">
<div class="content_title">Top鐢ㄦ埛</div>
- <div style="width: 100%;height: 300px;margin: 20px 0 0 10px">
- <div id="bar01" style="width: 100%;height:100%" />
- </div>
+ <div
+ id="bar01"
+ style="width: 100%;"
+ :style="{height:isIpad?'200px':'300px'}"
+ />
</div>
</div>
</div>
@@ -103,24 +123,44 @@
<script>
import { bar01, barTop, line01, loadEcharts } from '@/utils/myEcharts'
+import countTo from 'vue-count-to'
export default {
name: 'Index',
+ components: { countTo },
data() {
return {
+ isIpad: false,
+ mainHeight: 0,
+ tableHeight: 0,
barTopColor01: ['42,197,137', '187,236,218'],
barTopColor02: ['248,216,76', '255,250,238'],
barTopColor03: ['42,197,137', '187,236,218'],
barTopColor04: ['232,103,103', '253,240,240']
-
}
},
created() {
+
},
mounted() {
- this.handleEcharts()
+ window.addEventListener('resize', this.getHeight)
+ this.getHeight()
+ setTimeout(() => {
+ this.handleEcharts()
+ }, 10)
},
methods: {
+ // 鑾峰彇椤甸潰楂樺害
+ getHeight() {
+ this.$nextTick(() => {
+ this.mainHeight = window.innerHeight - 120
+ // this.mainHeight = window.innerHeight - 200
+ // this.tableHeight = this.mainHeight - 100
+
+ // this.isIpad = this.mainHeight <= 768
+ this.isIpad = window.innerHeight < 769
+ })
+ },
handleEcharts() {
this.getTopData()
this.getBar01()
@@ -154,6 +194,12 @@
loadEcharts('bar01', bar01(data))
},
async getLine01() {
+ // if (this.isIpad) {
+ // document.getElementById('line01').style.height = '200px'
+ // } else {
+ // document.getElementById('line01').style.height = '300px'
+ // }
+ // console.log(document.getElementById('line01'))
const data2 = [
{ key: '2', value: 0 },
{ key: '4', value: 0.2 },
@@ -203,23 +249,23 @@
.images {
width: 69px;
height: 69px;
- margin: 30px;
+ margin: 30px calc((10% - 20px));
}
.images1 {
- background: url("../../assets/images/dlyy.png") no-repeat;
+ background: url("../../assets/images/msg_app.png") no-repeat;
}
.images2 {
- background: url("../../assets/images/hyyyy.png") no-repeat;
+ background: url("../../assets/images/msg_huoyue.png") no-repeat;
}
.images3 {
- background: url("../../assets/images/webhy.png") no-repeat;
+ background: url("../../assets/images/msg_web.png") no-repeat;
}
.images4 {
- background: url("../../assets/images/apphy.png") no-repeat;
+ background: url("../../assets/images/msg_zhuceyonghu.png") no-repeat;
}
.content {
@@ -230,6 +276,10 @@
}
}
+ }
+
+ .top_card:hover{
+ transform: scale(1.02);
}
}
@@ -244,7 +294,8 @@
.content {
width: 49%;
- height: 400px;
+ //height: 400px;
+
background-color: #fff;
border-radius: 5px;
@@ -252,6 +303,10 @@
margin: 20px;
}
}
+
+ .content:hover{
+ transform: scale(1.01);
+ }
}
}
--
Gitblit v1.9.3