医废处置公司小程序
This commit is contained in:
@@ -0,0 +1,228 @@
|
||||
<template>
|
||||
<view class="container">
|
||||
<view class="top-container">
|
||||
<image class="bg-img" :src="apiHost+'/miniapp/static/mybg.png'"></image>
|
||||
<view class="mybox">
|
||||
<view class="box">
|
||||
<view class="item">
|
||||
<view style="color:#4652C0;font-weight:bold;">诊疗次数</view>
|
||||
<view style="color:#4652C0;font-weight:bold;font-size:50rpx">N/A</view>
|
||||
<hr color="#E5E5E5" size="1px"/>
|
||||
<view style="color:#000;font-size:20rpx">
|
||||
<text>本月 N/A</text>
|
||||
<text style="display:inline-block;margin-left:30rpx">总计 N/A</text>
|
||||
</view>
|
||||
</view>
|
||||
<view class="item">
|
||||
<view style="color:#4652C0;font-weight:bold;">清洗次数</view>
|
||||
<view style="color:#4652C0;font-weight:bold;font-size:50rpx">7</view>
|
||||
<hr color="#E5E5E5" size="1px"/>
|
||||
<view style="color:#000;font-size:20rpx">
|
||||
<text>本月 0</text>
|
||||
<text style="display:inline-block;margin-left:30rpx">总计 7</text>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
<view class="content">
|
||||
<tui-card class="mycard">
|
||||
<qiun-title-bar title="内镜清洗统计"/>
|
||||
<view class="tui-flex-box">
|
||||
<tui-tag margin="20rpx 20rpx 0 0" padding="12rpx" :type="colorM1" @click="timeRange('m1')">月</tui-tag>
|
||||
<tui-tag margin="20rpx 20rpx 0 0" padding="12rpx" :type="colorD1" @click="timeRange('d1')">天</tui-tag>
|
||||
</view>
|
||||
<view class="charts-box">
|
||||
<qiun-data-charts type="column" :chartData="chartsDataColumn" :echartsH5="true" :echartsApp="true"/>
|
||||
</view>
|
||||
</tui-card>
|
||||
<tui-card class="mycard">
|
||||
<qiun-title-bar title="内镜清洗合规统计"/>
|
||||
<view class="tui-flex-box">
|
||||
<tui-tag margin="20rpx 20rpx 0 0" padding="12rpx" :type="colorM2" @click="timeRange('m2')">月</tui-tag>
|
||||
<tui-tag margin="20rpx 20rpx 0 0" padding="12rpx" :type="colorD2" @click="timeRange('d2')">天</tui-tag>
|
||||
</view>
|
||||
<view class="charts-box">
|
||||
<qiun-data-charts type="area" :eopts="{seriesTemplate:{areaStyle:{opacity:0.2}}}" :chartData="chartsDataLine" :echartsH5="true" :echartsApp="true"/>
|
||||
</view>
|
||||
</tui-card>
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import myapp from '@/common/js/myapp.js'
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
apiHost: myapp.apiHost,
|
||||
chartsDataColumn:{},
|
||||
chartsDataLine:{},
|
||||
colorM1: 'blue',
|
||||
colorD1: 'btn-gray',
|
||||
colorM2: 'blue',
|
||||
colorD2: 'btn-gray',
|
||||
}
|
||||
},
|
||||
onReady: function() {
|
||||
setTimeout(() => {
|
||||
this.chartsDataColumn = {
|
||||
"legend": {
|
||||
"show":false
|
||||
},
|
||||
"categories": ["1月", "2月", "3月", "4月", "5月"],
|
||||
"series": [{
|
||||
"name": "清洗次数",
|
||||
"data": [35, 36, 31, 33, 13],
|
||||
"color": "#70A3FC"
|
||||
}]
|
||||
}
|
||||
this.chartsDataLine = {
|
||||
"categories": ["1月", "2月", "3月", "4月", "5月"],
|
||||
"series": [{
|
||||
"name": "合规",
|
||||
"data": [70, 40, 65, 100, 44, 68],
|
||||
"color": "#5087EC"
|
||||
}, {
|
||||
"name": "不合规",
|
||||
"data": [35, 8, 25, 37, 4, 20],
|
||||
"color": "#68BBC4"
|
||||
}]
|
||||
}
|
||||
}, 1000)
|
||||
setTimeout(() => {
|
||||
let mycanvas = document.getElementsByTagName('canvas')
|
||||
for (let i = 0; i < mycanvas.length; i++) {
|
||||
mycanvas[i].style.background='#FFF'
|
||||
}
|
||||
}, 1100)
|
||||
},
|
||||
onShow: function() {
|
||||
let user = myapp.checkLogin()
|
||||
uni.setStorageSync('lastPagePath', '/packagePage/pages/overview/overview')
|
||||
},
|
||||
methods: {
|
||||
timeRange: function(tagType) {
|
||||
switch (tagType) {
|
||||
case 'm1':
|
||||
this.colorM1 = 'blue'
|
||||
this.colorD1 = 'btn-gray'
|
||||
break;
|
||||
case 'd1':
|
||||
this.colorM1 = 'btn-gray'
|
||||
this.colorD1 = 'blue'
|
||||
break;
|
||||
case 'm2':
|
||||
this.colorM2 = 'blue'
|
||||
this.colorD2 = 'btn-gray'
|
||||
break;
|
||||
case 'd2':
|
||||
this.colorM2 = 'btn-gray'
|
||||
this.colorD2 = 'blue'
|
||||
break;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style>
|
||||
@import '../../../static/style/thorui.css';
|
||||
|
||||
page {
|
||||
background-color: #F5F6FA;
|
||||
}
|
||||
|
||||
.mybox {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: center;
|
||||
position: relative;
|
||||
z-index: 2;
|
||||
margin-top: 30rpx;
|
||||
margin-bottom:20rpx;
|
||||
margin-left:28rpx;
|
||||
margin-right:28rpx;
|
||||
background-color:transparent;
|
||||
}
|
||||
|
||||
.mycard {
|
||||
margin-bottom: 40rpx;
|
||||
}
|
||||
|
||||
.container {
|
||||
position: relative;
|
||||
padding-bottom: 100rpx;
|
||||
}
|
||||
|
||||
.top-container {
|
||||
height: 320rpx;
|
||||
position: relative;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
.bg-img {
|
||||
position: absolute;
|
||||
width: 100%;
|
||||
height: 460rpx;
|
||||
}
|
||||
|
||||
.content {
|
||||
padding-top: 150rpx;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
flex: 1;
|
||||
position:absolute;
|
||||
top:90rpx;
|
||||
width:100%
|
||||
}
|
||||
|
||||
.charts-box {
|
||||
width: 100%;
|
||||
height: 300px;
|
||||
background-color: #FFF;
|
||||
}
|
||||
|
||||
.box {
|
||||
display: flex;
|
||||
display: -webkit-flex;
|
||||
justify-content: space-between;
|
||||
flex-direction: row;
|
||||
flex-wrap: wrap;
|
||||
box-sizing: border-box;
|
||||
border:none;
|
||||
}
|
||||
|
||||
.item {
|
||||
width: 48%;
|
||||
padding: 20rpx 0rpx 20rpx 30rpx;
|
||||
box-sizing: border-box;
|
||||
border-radius: 8rpx;
|
||||
color: #fff;
|
||||
margin-bottom: 30rpx;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: space-between;
|
||||
font-size: 30rpx;
|
||||
margin:0;
|
||||
background-color:#FFF;
|
||||
}
|
||||
|
||||
.mybtn {
|
||||
padding:0;
|
||||
width:10px;
|
||||
}
|
||||
|
||||
.tui-flex-box {
|
||||
width: 100%;
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
flex-direction: row-reverse;
|
||||
justify-content: flex-start;
|
||||
align-items: flex-start;
|
||||
margin-bottom: 26rpx;
|
||||
position: relative;
|
||||
top:-80rpx;
|
||||
}
|
||||
</style>
|
||||
Reference in New Issue
Block a user