|
|
@@ -1,59 +1,218 @@
|
|
|
<template>
|
|
|
<view class="content">
|
|
|
- <view class="title">库点流向分布</view>
|
|
|
- <iframe id="mainIframe" ref="mainIframe" name="mainIframe" :src="url" class="map"></iframe>
|
|
|
- <view @click='skipContent(index)' class="charts-box" v-for="(item,index) in chartlist" :key='index'>
|
|
|
- <div class="bottom-tip" v-if='index==0||index==3'>统计单位：吨</div>
|
|
|
- <div class="bottom-tip" v-if='index!=0&&index!=3' :class='index==2?"title-margin":""'>统计单位：元</div>
|
|
|
- <view v-if="index==0" class="title">采购合同完成进度</view>
|
|
|
- <qiun-data-charts type="ring" :opts='item.ringoptions' :chartData="item.Ring" background="#24262D" />
|
|
|
- <view v-if="index==2" class="title">销售合同完成进度</view>
|
|
|
+ <view class="content1">
|
|
|
+ <u-navbar back-text="" title="数据统计" :border-bottom='false' :background="background" back-icon-color='white'
|
|
|
+ title-color='white'>
|
|
|
+ </u-navbar>
|
|
|
+ <view class="row2">
|
|
|
+ <view class="left" @click="dateClick">
|
|
|
+ {{nowDate}}
|
|
|
+ <u-icon name="arrow-down-fill" size="16" class="icon"></u-icon>
|
|
|
+ </view>
|
|
|
+ <view class="right">
|
|
|
+ <view :class="typeSelect==index?'type-bgc':''" class="type-style" v-for="(item,index) in moneyList"
|
|
|
+ @click="typeClick(index)">
|
|
|
+ {{item.name}}
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ <view class="row3">
|
|
|
+ <view class="title">
|
|
|
+ 总收入
|
|
|
+ </view>
|
|
|
+ <view class="number">
|
|
|
+ 核算中
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
</view>
|
|
|
- <view class="content2">
|
|
|
- <view class="title">在途信息统计</view>
|
|
|
- <view class="row">
|
|
|
- <view class="item">
|
|
|
- <view class="item-top">在途车辆</view>
|
|
|
- <view class="item-bottom">
|
|
|
- <view style="color: #50cad4;font-size: 50rpx;">{{carCount1}} </view>台
|
|
|
+ <view class="move-content">
|
|
|
+ <view class="content2 content-wrap">
|
|
|
+ <view class="row1">
|
|
|
+ <view class="left title">
|
|
|
+ 合同完成进度
|
|
|
+ </view>
|
|
|
+ <view class="right">
|
|
|
+ <view class="item" :class="contractSelect=='0'?'item-Select':''" @click="htClick(0)">采购</view>
|
|
|
+ <view class="item" :class="contractSelect=='1'?'item-Select':''" @click="htClick(1)">销售</view>
|
|
|
</view>
|
|
|
</view>
|
|
|
- <view class="item">
|
|
|
- <view class="item-top">装车车辆</view>
|
|
|
- <view class="item-bottom">
|
|
|
- <view style="color: rgb(255, 165, 35);font-size: 50rpx;">{{carCount2}}</view>台
|
|
|
+ <u-line color="#EEEEEE" class="u-line" />
|
|
|
+ <view class="row2">
|
|
|
+ <view class="top">
|
|
|
+ 合同总量
|
|
|
+ </view>
|
|
|
+ <view class="bottom">
|
|
|
+ <view class="left">
|
|
|
+ <image src="../../static/img/report/hetongzongliang.png" mode=""></image>
|
|
|
+ </view>
|
|
|
+ <view class="right" v-if="contractSelect=='0'">
|
|
|
+ <view class="top">
|
|
|
+ <view class="left">
|
|
|
+ 已完成量
|
|
|
+ <view class="number">{{dataObj3.percentage}}</view>
|
|
|
+ </view>
|
|
|
+ <view class="right-number">{{dataObj3.total}}吨</view>
|
|
|
+ </view>
|
|
|
+ <view class="bottom">
|
|
|
+ <u-line-progress height="12" active-color="#22C572" :show-percent="false"
|
|
|
+ :striped="true" :percent="dataObj3.percent" :striped-active="true">
|
|
|
+ </u-line-progress>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ <view class="right" v-if="contractSelect=='1'">
|
|
|
+ <view class="top">
|
|
|
+ <view class="left">
|
|
|
+ 已完成量
|
|
|
+ <view class="number">{{dataObj0.percentage}}</view>
|
|
|
+ </view>
|
|
|
+ <view class="right-number">{{dataObj0.total}}吨</view>
|
|
|
+ </view>
|
|
|
+ <view class="bottom">
|
|
|
+ <u-line-progress height="12" active-color="#22C572" :show-percent="false"
|
|
|
+ :striped="true" :percent="dataObj0.percent" :striped-active="true">
|
|
|
+ </u-line-progress>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ <view class="row3">
|
|
|
+ <view class="top">
|
|
|
+ 合同总额
|
|
|
+ </view>
|
|
|
+ <view class="bottom">
|
|
|
+ <view class="left">
|
|
|
+ <image src="../../static/img/report/kaipiao.png" mode=""></image>
|
|
|
+ </view>
|
|
|
+ <view class="right" v-if="contractSelect=='0'">
|
|
|
+ <view class="top">
|
|
|
+ <view class="left">
|
|
|
+ 已开票
|
|
|
+ <view class="number">{{dataObj4.percentage}}</view>
|
|
|
+ </view>
|
|
|
+ <view class="right-number">￥{{dataObj4.total}}</view>
|
|
|
+ </view>
|
|
|
+ <view class="bottom">
|
|
|
+ <u-line-progress height="12" active-color="#FD714F" :show-percent="false"
|
|
|
+ :striped="true" :percent="dataObj4.percent" :striped-active="true">
|
|
|
+ </u-line-progress>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ <view class="right" v-if="contractSelect=='1'">
|
|
|
+ <view class="top">
|
|
|
+ <view class="left">
|
|
|
+ 已开票
|
|
|
+ <view class="number">{{dataObj1.percentage}}</view>
|
|
|
+ </view>
|
|
|
+ <view class="right-number">￥{{dataObj1.total}}</view>
|
|
|
+ </view>
|
|
|
+ <view class="bottom">
|
|
|
+ <u-line-progress height="12" active-color="#FD714F" :show-percent="false"
|
|
|
+ :striped="true" :percent="dataObj1.percent" :striped-active="true">
|
|
|
+ </u-line-progress>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
</view>
|
|
|
</view>
|
|
|
- <view class="item">
|
|
|
- <view class="item-top">卸货车辆</view>
|
|
|
- <view class="item-bottom">
|
|
|
- <view style="color: rgb(36, 131, 255);font-size: 50rpx;">{{carCount3}}</view>台
|
|
|
+ <view class="row4">
|
|
|
+ <view class="top">
|
|
|
+ 合同总额
|
|
|
+ </view>
|
|
|
+ <view class="bottom">
|
|
|
+ <view class="left">
|
|
|
+ <image src="../../static/img/report/hetongzongliang.png" mode=""></image>
|
|
|
+ </view>
|
|
|
+ <view class="right" v-if="contractSelect=='0'">
|
|
|
+ <view class="top">
|
|
|
+ <view class="left">
|
|
|
+ 已结算
|
|
|
+ <view class="number">{{dataObj5.percentage}}</view>
|
|
|
+ </view>
|
|
|
+ <view class="right-number">￥{{dataObj5.total}}</view>
|
|
|
+ </view>
|
|
|
+ <view class="bottom">
|
|
|
+ <u-line-progress height="12" active-color="#5C75DF" :show-percent="false"
|
|
|
+ :striped="true" :percent="dataObj5.percent" :striped-active="true">
|
|
|
+ </u-line-progress>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ <view class="right" v-if="contractSelect=='1'">
|
|
|
+ <view class="top">
|
|
|
+ <view class="left">
|
|
|
+ 已结算
|
|
|
+ <view class="number">{{dataObj2.percentage}}</view>
|
|
|
+ </view>
|
|
|
+ <view class="right-number">￥{{dataObj5.total}}</view>
|
|
|
+ </view>
|
|
|
+ <view class="bottom">
|
|
|
+ <u-line-progress height="12" active-color="#5C75DF" :show-percent="false"
|
|
|
+ :striped="true" :percent="dataObj5.percent" :striped-active="true">
|
|
|
+ </u-line-progress>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
</view>
|
|
|
</view>
|
|
|
+
|
|
|
</view>
|
|
|
- </view>
|
|
|
- <view class="content3">
|
|
|
- <view class="title">粮食总储量</view>
|
|
|
- <qiun-data-charts type="column" :chartData="chartData" :opts='ringoptions' background="none" />
|
|
|
- </view>
|
|
|
- <view class="content4">
|
|
|
- <view class="title">库存成本</view>
|
|
|
- <view class="row">
|
|
|
- <view class="item">
|
|
|
- <view class="item-top">总库存量</view>
|
|
|
- <view class="item-bottom">
|
|
|
- <view style="color: #50cad4;font-size: 50rpx;">{{inventoryCost}}</view>吨
|
|
|
+ <view class="content3 content-wrap">
|
|
|
+ <view class="title">粮食品种占比</view>
|
|
|
+ <u-line color="#EEEEEE" class="u-line" />
|
|
|
+ <qiun-data-charts type="line" class='line-chart' :chartData="chartData" :opts='zringoptions'
|
|
|
+ background="none" :ontouch="true" />
|
|
|
+ </view>
|
|
|
+ <view class="content4 content-wrap">
|
|
|
+ <view class="title">在途信息统计表</view>
|
|
|
+ <u-line color="#EEEEEE" class="u-line" />
|
|
|
+ <qiun-data-charts type="column" class='line-chart' :chartData="carChartData" :opts='ringoptions'
|
|
|
+ background="none" />
|
|
|
+ </view>
|
|
|
+ <view class="content5 content-wrap">
|
|
|
+ <view class="title">库存成本</view>
|
|
|
+ <u-line color="#EEEEEE" class="u-line" />
|
|
|
+ <view class="row1">
|
|
|
+ <view class="left">
|
|
|
+ <image src="../../static/img/report/kuncunliang.png" mode=""></image>
|
|
|
+ <view class="text">
|
|
|
+ 总库存量（吨）
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ <view class="right">
|
|
|
+ {{inventoryCost}}
|
|
|
</view>
|
|
|
</view>
|
|
|
- <view class="item">
|
|
|
- <view class="item-top">库存价值</view>
|
|
|
- <view class="item-bottom">
|
|
|
- <view style="color: rgb(255, 165, 35);font-size: 50rpx;">{{inventoryValue}}</view>元
|
|
|
+ <view class="row2">
|
|
|
+ <view class="left">
|
|
|
+ <image src="../../static/img/report/jiazhi.png" mode=""></image>
|
|
|
+ <view class="text">
|
|
|
+ 库存价值（元）
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ <view class="right">
|
|
|
+ {{inventoryValue}}
|
|
|
</view>
|
|
|
</view>
|
|
|
+ </view>
|
|
|
+ <view class="content6 content-wrap">
|
|
|
+ <view class="title">库点流向分布</view>
|
|
|
+ <u-line color="#EEEEEE" class="u-line" />
|
|
|
+ <iframe class='map' :src='url'></iframe>
|
|
|
+ </view>
|
|
|
|
|
|
+ <view class="content7">
|
|
|
+ <view class="row1" v-for="(item,index) in ztList">
|
|
|
+ <view class="zt">
|
|
|
+ <view class="point"></view>在途
|
|
|
+ </view>
|
|
|
+ <view>{{item.startName}}</view>
|
|
|
+ <img src="https://taohaoliang.oss-cn-beijing.aliyuncs.com/app/tmp/jiantou.png" alt="">
|
|
|
+ <view class="">
|
|
|
+ {{item.endName}}
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
</view>
|
|
|
</view>
|
|
|
+
|
|
|
+ <u-select v-model="showDate" mode="mutil-column" confirm-color='#22C572' :list="dateList" @confirm="confirm">
|
|
|
+ </u-select>
|
|
|
</view>
|
|
|
</template>
|
|
|
|
|
|
@@ -61,51 +220,149 @@
|
|
|
export default {
|
|
|
data() {
|
|
|
return {
|
|
|
- chartlist: [],
|
|
|
- carCount1: '',
|
|
|
- carCount2: '',
|
|
|
- carCount3: '',
|
|
|
inventoryCost: '',
|
|
|
inventoryValue: '',
|
|
|
- ZChart: {},
|
|
|
- // url:"https://datav.aliyuncs.com/share/235518097ffd673bc1eb05011b9a02b6",
|
|
|
+ contractSelect: '0',
|
|
|
url: '',
|
|
|
- flag: true,
|
|
|
+ nowDate: '2021年全年',
|
|
|
+ background: {
|
|
|
+ backgroundColor: '#2E303A',
|
|
|
+ // 导航栏背景图
|
|
|
+ // background: 'url(https://cdn.uviewui.com/uview/swiper/1.jpg) no-repeat',
|
|
|
+ // 还可以设置背景图size属性
|
|
|
+ // backgroundSize: 'cover',
|
|
|
+ // 渐变色
|
|
|
+ // backgroundImage: 'linear-gradient(45deg, rgb(28, 187, 180), rgb(141, 198, 63))'
|
|
|
+ },
|
|
|
+ typeSelect: '0',
|
|
|
+ contractSelect: '0',
|
|
|
+ showDate: false,
|
|
|
chartData: {},
|
|
|
+ carChartData: {},
|
|
|
+ carRingoptions: {},
|
|
|
ringoptions: {},
|
|
|
+ zringoptions: {},
|
|
|
+ moneyList: [{
|
|
|
+ name: '收入'
|
|
|
+ }, {
|
|
|
+ name: '支出'
|
|
|
+ }, {
|
|
|
+ name: '毛利润'
|
|
|
+ }],
|
|
|
+ dataList: [],
|
|
|
+ dataObj0: {
|
|
|
+ percentage: '',
|
|
|
+ total: '',
|
|
|
+ percentage: ''
|
|
|
+ },
|
|
|
+ dataObj1: {
|
|
|
+ percentage: '',
|
|
|
+ total: '',
|
|
|
+ percentage: ''
|
|
|
+ },
|
|
|
+ dataObj2: {
|
|
|
+ percentage: '',
|
|
|
+ total: '',
|
|
|
+ percentage: ''
|
|
|
+ },
|
|
|
+ dataObj3: {
|
|
|
+ percentage: '',
|
|
|
+ total: '',
|
|
|
+ percentage: ''
|
|
|
+ },
|
|
|
+ dataObj4: {
|
|
|
+ percentage: '',
|
|
|
+ total: '',
|
|
|
+ percentage: ''
|
|
|
+ },
|
|
|
+ dataObj5: {
|
|
|
+ percentage: '',
|
|
|
+ total: '',
|
|
|
+ percentage: ''
|
|
|
+ },
|
|
|
+ dateList: [
|
|
|
+ [{
|
|
|
+ value: '1',
|
|
|
+ label: '2020年'
|
|
|
+ },
|
|
|
+ {
|
|
|
+ value: '2',
|
|
|
+ label: '2021年'
|
|
|
+ }
|
|
|
+ ],
|
|
|
+ [{
|
|
|
+ value: '0',
|
|
|
+ label: '全年'
|
|
|
+ },
|
|
|
+ {
|
|
|
+ value: '1',
|
|
|
+ label: '1月'
|
|
|
+ },
|
|
|
+ {
|
|
|
+ value: '2',
|
|
|
+ label: '2月'
|
|
|
+ },
|
|
|
+ {
|
|
|
+ value: '3',
|
|
|
+ label: '3月'
|
|
|
+ },
|
|
|
+ {
|
|
|
+ value: '4',
|
|
|
+ label: '4月'
|
|
|
+ },
|
|
|
+ {
|
|
|
+ value: '5',
|
|
|
+ label: '5月'
|
|
|
+ },
|
|
|
+ {
|
|
|
+ value: '6',
|
|
|
+ label: '6月'
|
|
|
+ },
|
|
|
+ {
|
|
|
+ value: '7',
|
|
|
+ label: '7月'
|
|
|
+ },
|
|
|
+ {
|
|
|
+ value: '8',
|
|
|
+ label: '8月'
|
|
|
+ },
|
|
|
+ {
|
|
|
+ value: '9',
|
|
|
+ label: '9月'
|
|
|
+ },
|
|
|
+ {
|
|
|
+ value: '10',
|
|
|
+ label: '10月'
|
|
|
+ },
|
|
|
+ {
|
|
|
+ value: '11',
|
|
|
+ label: '11月'
|
|
|
+ },
|
|
|
+ {
|
|
|
+ value: '12',
|
|
|
+ label: '12月'
|
|
|
+ },
|
|
|
+ ]
|
|
|
+ ],
|
|
|
+ ztList: []
|
|
|
}
|
|
|
},
|
|
|
onLoad: function(option) {
|
|
|
uni.showLoading({
|
|
|
- title: "加载中",
|
|
|
- mask: true
|
|
|
+ title:"数据加载中...",
|
|
|
+ mask:true
|
|
|
})
|
|
|
- this.url = "https://liangxin.zthymaoyi.com/map.html?id="+uni.getStorageSync('pcUserInfo').compId
|
|
|
+ this.url = "https://liangxin.zthymaoyi.com/map.html?id=" + uni.getStorageSync('pcUserInfo').compId
|
|
|
this.init()
|
|
|
- uni.onWindowResize((res) => {
|
|
|
- console.log('变化后的窗口宽度=' + res.size.windowWidth)
|
|
|
- console.log('变化后的窗口高度=' + res.size.windowHeight)
|
|
|
- this.init()
|
|
|
- })
|
|
|
},
|
|
|
methods: {
|
|
|
- skipContent(index){
|
|
|
- console.log(index)
|
|
|
- if(index<2){
|
|
|
- uni.navigateTo({
|
|
|
- url:'/pages/user/contractLook/purchaseContract'
|
|
|
- })
|
|
|
- }else if(index>2&&index<6){
|
|
|
- uni.navigateTo({
|
|
|
- url:'/pages/user/contractLook/salesContract'
|
|
|
- })
|
|
|
- }
|
|
|
- },
|
|
|
init() {
|
|
|
- this.$api.doRequest('get', '/biInfoController/selectBiInfo?compId='+uni.getStorageSync('pcUserInfo').compId).then(res => {
|
|
|
+ this.$api.doRequest('get', '/biInfoController/selectBiInfo?compId=' + uni.getStorageSync('pcUserInfo')
|
|
|
+ .compId).then(res => {
|
|
|
console.log(res)
|
|
|
uni.hideLoading()
|
|
|
let _list = []
|
|
|
+ this.dataList = res.data.data
|
|
|
for (let i = 0; i < res.data.data.length; i++) {
|
|
|
let _obj = {}
|
|
|
let _color = []
|
|
|
@@ -114,141 +371,70 @@
|
|
|
let _name = ''
|
|
|
let _count = ''
|
|
|
let _data = []
|
|
|
- switch (i) {
|
|
|
- case 0:
|
|
|
- _color = ['#75d1f4', '#3a3b40'];
|
|
|
- _title = '总量合计'
|
|
|
- _data = [{
|
|
|
- name: '已完成量',
|
|
|
- data: Number(res.data.data[i].biViewInfoList[0].count)
|
|
|
- }, {
|
|
|
- name: '待完成量',
|
|
|
- data: Number(res.data.data[i].biViewInfoList[1].count)
|
|
|
- }]
|
|
|
- break;
|
|
|
- case 1:
|
|
|
- _color = ['#247ef4', '#3a3b40'];
|
|
|
- _title = '开票合计'
|
|
|
- _data = [{
|
|
|
- name: '已开票',
|
|
|
- data: Number(res.data.data[i].biViewInfoList[0].count)
|
|
|
- }, {
|
|
|
- name: '待开票',
|
|
|
- data: Number(res.data.data[i].biViewInfoList[1].count)
|
|
|
- }]
|
|
|
- break;
|
|
|
- case 2:
|
|
|
- _color = ['#f49f23', '#3a3b40'];
|
|
|
- _title = '付款合计'
|
|
|
- _data = [{
|
|
|
- name: '已付款',
|
|
|
- data: Number(res.data.data[i].biViewInfoList[0].count)
|
|
|
- }, {
|
|
|
- name: '待付款',
|
|
|
- data: Number(res.data.data[i].biViewInfoList[1].count)
|
|
|
- }]
|
|
|
- break;
|
|
|
- case 3:
|
|
|
- _color = ['#75d1f4', '#3a3b40'];
|
|
|
- _title = '总量合计'
|
|
|
- _data = [{
|
|
|
- name: '已完成量',
|
|
|
- data: Number(res.data.data[i].biViewInfoList[0].count)
|
|
|
- }, {
|
|
|
- name: '待完成量',
|
|
|
- data: Number(res.data.data[i].biViewInfoList[1].count)
|
|
|
- }]
|
|
|
- break;
|
|
|
- case 4:
|
|
|
- _color = ['#247ef4', '#3a3b40'];
|
|
|
- _title = '开票合计'
|
|
|
- _data = [{
|
|
|
- name: '已开票',
|
|
|
- data: Number(res.data.data[i].biViewInfoList[0].count)
|
|
|
- }, {
|
|
|
- name: '待开票',
|
|
|
- data: Number(res.data.data[i].biViewInfoList[1].count)
|
|
|
- }]
|
|
|
- break;
|
|
|
- case 5:
|
|
|
- _color = ['#f49f23', '#3a3b40'];
|
|
|
- _title = '付款合计'
|
|
|
- _data = [{
|
|
|
- name: '待付款',
|
|
|
- data: Number(res.data.data[i].biViewInfoList[0].count)
|
|
|
- }, {
|
|
|
- name: '待完成量',
|
|
|
- data: Number(res.data.data[i].biViewInfoList[1].count)
|
|
|
- }]
|
|
|
- break;
|
|
|
- }
|
|
|
+ if (i < 6) {debugger
|
|
|
+ res.data.data[i].biViewInfoList[0].percent = Number(res.data.data[i].biViewInfoList[0]
|
|
|
+ .percentage.substring(0, res.data.data[i].biViewInfoList[0].percentage.length -
|
|
|
+ 1))
|
|
|
|
|
|
- if (i < 6) {
|
|
|
- _subtitle = Number(Number(res.data.data[i].total).toFixed(0))
|
|
|
- _obj.ringoptions = {
|
|
|
- "type": "ring",
|
|
|
- "animation": true,
|
|
|
- "timing": "easeOut",
|
|
|
- "duration": 1000,
|
|
|
- "color": _color,
|
|
|
- "fontSize": 13,
|
|
|
- "fontColor": "#666666",
|
|
|
- "legend": {
|
|
|
- "show": true,
|
|
|
- "position": "top",
|
|
|
- "padding": 5,
|
|
|
- "margin": 5,
|
|
|
- "backgroundColor": "rgba(0,0,0,0)",
|
|
|
- "borderColor": "rgba(0,0,0,0)",
|
|
|
- "fontSize": 13,
|
|
|
- "fontColor": "#CECECE",
|
|
|
- "hiddenColor": "#CECECE",
|
|
|
- },
|
|
|
- "title": {
|
|
|
- "name": _title,
|
|
|
- "fontSize": 15,
|
|
|
- "color": "#fff",
|
|
|
- },
|
|
|
- "subtitle": {
|
|
|
- "name": _subtitle,
|
|
|
- "fontSize": 20,
|
|
|
- "color": "#fff",
|
|
|
- },
|
|
|
- "extra": {
|
|
|
- "ring": {
|
|
|
- "ringWidth": 15,
|
|
|
- "centerColor": "#24262D",
|
|
|
- "activeOpacity": 0.5,
|
|
|
- "activeRadius": 10,
|
|
|
- "borderColor": "#24262D",
|
|
|
- "linearType": "none"
|
|
|
- },
|
|
|
+ switch (i) {
|
|
|
+ case 0:
|
|
|
+ this.dataObj0 = {
|
|
|
+ percentage: res.data.data[i].biViewInfoList[0].percentage,
|
|
|
+ total: Number(res.data.data[i].total),
|
|
|
+ percent: Number(res.data.data[i].biViewInfoList[0].percent)
|
|
|
}
|
|
|
- },
|
|
|
- _obj.Ring = {
|
|
|
- "series": _data
|
|
|
- }
|
|
|
-
|
|
|
- _list.push(_obj)
|
|
|
+ break;
|
|
|
+ case 1:
|
|
|
+ this.dataObj1 = {
|
|
|
+ percentage: res.data.data[i].biViewInfoList[0].percentage,
|
|
|
+ total: Number(res.data.data[i].total),
|
|
|
+ percent: Number(res.data.data[i].biViewInfoList[0].percent)
|
|
|
+ }
|
|
|
+ break;
|
|
|
+ case 2:
|
|
|
+ this.dataObj2 = {
|
|
|
+ percentage: res.data.data[i].biViewInfoList[0].percentage,
|
|
|
+ total: Number(res.data.data[i].total),
|
|
|
+ percent: Number(res.data.data[i].biViewInfoList[0].percent)
|
|
|
+ }
|
|
|
+ break;
|
|
|
+ case 3:
|
|
|
+ this.dataObj3 = {
|
|
|
+ percentage: res.data.data[i].biViewInfoList[0].percentage,
|
|
|
+ total: Number(res.data.data[i].total),
|
|
|
+ percent: Number(res.data.data[i].biViewInfoList[0].percent)
|
|
|
+ }
|
|
|
+ break;
|
|
|
+ case 4:
|
|
|
+ this.dataObj4 = {
|
|
|
+ percentage: res.data.data[i].biViewInfoList[0].percentage,
|
|
|
+ total: Number(res.data.data[i].total),
|
|
|
+ percent: Number(res.data.data[i].biViewInfoList[0].percent)
|
|
|
+ }
|
|
|
+ break;
|
|
|
+ case 5:
|
|
|
+ this.dataObj5 = {
|
|
|
+ percentage: res.data.data[i].biViewInfoList[0].percentage,
|
|
|
+ total: Number(res.data.data[i].total),
|
|
|
+ percent: Number(res.data.data[i].biViewInfoList[0].percent)
|
|
|
+ }
|
|
|
+ break;
|
|
|
+ }
|
|
|
} else if (i == 6) {
|
|
|
this.carCount1 = res.data.data[i].biViewInfoList[0].count
|
|
|
this.carCount2 = res.data.data[i].biViewInfoList[1].count
|
|
|
this.carCount3 = res.data.data[i].biViewInfoList[2].count
|
|
|
- } else if (i == 7) {
|
|
|
- this.inventoryCost =Number(res.data.data[i].biViewInfoList[0].count)
|
|
|
- this.inventoryValue =Number(res.data.data[i].biViewInfoList[1].count)
|
|
|
- } else if (i == 8) {
|
|
|
|
|
|
let _x = []
|
|
|
let _y = []
|
|
|
for (let k = 0; k < res.data.data[i].biViewInfoList.length; k++) {
|
|
|
_x.push(res.data.data[i].biViewInfoList[k].name)
|
|
|
- _y.push( Number(res.data.data[i].biViewInfoList[k].count))
|
|
|
+ _y.push(Number(res.data.data[i].biViewInfoList[k].count))
|
|
|
}
|
|
|
- this.chartData = {
|
|
|
+ this.carChartData = {
|
|
|
categories: _x,
|
|
|
series: [{
|
|
|
- "name": '储量',
|
|
|
+ "name": '车辆',
|
|
|
"data": _y
|
|
|
}]
|
|
|
}
|
|
|
@@ -260,10 +446,13 @@
|
|
|
"animation": true,
|
|
|
"timing": "easeOut",
|
|
|
"duration": 1000,
|
|
|
+ "color": [
|
|
|
+ "#22C572"
|
|
|
+ ],
|
|
|
"padding": [
|
|
|
15,
|
|
|
15,
|
|
|
- 20,
|
|
|
+ 0,
|
|
|
5
|
|
|
],
|
|
|
"rotate": false,
|
|
|
@@ -276,16 +465,15 @@
|
|
|
"dataLabel": true,
|
|
|
"dataPointShape": true,
|
|
|
"dataPointShapeType": "solid",
|
|
|
- "legend": {
|
|
|
- "show": false,
|
|
|
- },
|
|
|
+ "tapLegend": true,
|
|
|
"xAxis": {
|
|
|
"disabled": false,
|
|
|
- "axisLine": true,
|
|
|
+ "axisLine": false,
|
|
|
"axisLineColor": "#CCCCCC",
|
|
|
"calibration": false,
|
|
|
"fontColor": "#666666",
|
|
|
"fontSize": 13,
|
|
|
+ "rotateLabel": false,
|
|
|
"itemCount": 5,
|
|
|
"boundaryGap": "center",
|
|
|
"disableGrid": true,
|
|
|
@@ -297,30 +485,33 @@
|
|
|
"scrollAlign": "left",
|
|
|
"scrollColor": "#A6A6A6",
|
|
|
"scrollBackgroundColor": "#EFEBEF",
|
|
|
- "rotateLabel": true,
|
|
|
+ "format": ""
|
|
|
},
|
|
|
"yAxis": {
|
|
|
- "disabled": false,
|
|
|
- "disableGrid": false,
|
|
|
+ "disabled": true,
|
|
|
+ "disableGrid": true,
|
|
|
"splitNumber": 5,
|
|
|
"gridType": "solid",
|
|
|
"dashLength": 8,
|
|
|
"gridColor": "#CCCCCC",
|
|
|
"padding": 10,
|
|
|
"showTitle": false,
|
|
|
- "data": [{
|
|
|
- "type": "value",
|
|
|
- "position": "left",
|
|
|
- "disabled": false,
|
|
|
- "axisLine": false,
|
|
|
- "axisLineColor": "#CCCCCC",
|
|
|
- "calibration": false,
|
|
|
- "fontColor": "#666666",
|
|
|
- "fontSize": 13,
|
|
|
- "textAlign": "right",
|
|
|
- "titleFontSize": 13,
|
|
|
- "titleFontColor": "#666666",
|
|
|
- }]
|
|
|
+ "data": []
|
|
|
+ },
|
|
|
+ "legend": {
|
|
|
+ "show": false,
|
|
|
+ "position": "bottom",
|
|
|
+ "float": "center",
|
|
|
+ "padding": 5,
|
|
|
+ "margin": 5,
|
|
|
+ "backgroundColor": "rgba(0,0,0,0)",
|
|
|
+ "borderColor": "rgba(0,0,0,0)",
|
|
|
+ "borderWidth": 0,
|
|
|
+ "fontSize": 13,
|
|
|
+ "fontColor": "#666666",
|
|
|
+ "lineHeight": 11,
|
|
|
+ "hiddenColor": "#CECECE",
|
|
|
+ "itemGap": 10
|
|
|
},
|
|
|
"extra": {
|
|
|
"column": {
|
|
|
@@ -328,8 +519,8 @@
|
|
|
"width": 30,
|
|
|
"seriesGap": 2,
|
|
|
"categoryGap": 3,
|
|
|
- "barBorderCircle": false,
|
|
|
- "linearType": "none",
|
|
|
+ "barBorderCircle": true,
|
|
|
+ "linearType": "none",
|
|
|
"linearOpacity": 1,
|
|
|
"colorStop": 0,
|
|
|
"meterBorder": 1,
|
|
|
@@ -359,80 +550,438 @@
|
|
|
"labelBgColor": "#FFFFFF",
|
|
|
"labelBgOpacity": 0.7,
|
|
|
"labelFontColor": "#666666"
|
|
|
+ },
|
|
|
+ "markLine": {
|
|
|
+ "type": "solid",
|
|
|
+ "dashLength": 4,
|
|
|
+ "data": []
|
|
|
}
|
|
|
}
|
|
|
}
|
|
|
- } else if (i == 9) {
|
|
|
|
|
|
+ } else if (i == 7) {
|
|
|
+ this.inventoryCost = Number(res.data.data[i].biViewInfoList[0].count)
|
|
|
+ this.inventoryValue = Number(res.data.data[i].biViewInfoList[1].count)
|
|
|
+
|
|
|
+ } else if (i == 8) {
|
|
|
+ let _x = []
|
|
|
+ let _y = []
|
|
|
+ for (let k = 0; k < res.data.data[i].biViewInfoList.length; k++) {
|
|
|
+ _x.push(res.data.data[i].biViewInfoList[k].name)
|
|
|
+ _y.push(Number(res.data.data[i].biViewInfoList[k].count))
|
|
|
+ }
|
|
|
+ this.chartData = {
|
|
|
+ categories: _x,
|
|
|
+ series: [{
|
|
|
+ "name": '储量',
|
|
|
+ "data": _y
|
|
|
+ }]
|
|
|
+ }
|
|
|
+ this.zringoptions = {
|
|
|
+ "type": "line",
|
|
|
+ "canvasId": "",
|
|
|
+ "canvas2d": false,
|
|
|
+ "background": "none",
|
|
|
+ "animation": true,
|
|
|
+ "timing": "easeOut",
|
|
|
+ "duration": 1000,
|
|
|
+ "color": [
|
|
|
+ "#91CB74",
|
|
|
+ ],
|
|
|
+ "padding": [
|
|
|
+ 15,
|
|
|
+ 10,
|
|
|
+ 0,
|
|
|
+ 15
|
|
|
+ ],
|
|
|
+ "rotate": false,
|
|
|
+ "errorReload": true,
|
|
|
+ "fontSize": 13,
|
|
|
+ "fontColor": "#666666",
|
|
|
+ "enableScroll": true,
|
|
|
+ "touchMoveLimit": 60,
|
|
|
+ "enableMarkLine": true,
|
|
|
+ "dataLabel": true,
|
|
|
+ "dataPointShape": true,
|
|
|
+ "dataPointShapeType": "hollow",
|
|
|
+ "tapLegend": true,
|
|
|
+ "xAxis": {
|
|
|
+ "disabled": false,
|
|
|
+ "axisLine": false,
|
|
|
+ "axisLineColor": "#CCCCCC",
|
|
|
+ "calibration": false,
|
|
|
+ "fontColor": "#666666",
|
|
|
+ "fontSize": 13,
|
|
|
+ "rotateLabel": false,
|
|
|
+ "itemCount": 4,
|
|
|
+ "boundaryGap": "center",
|
|
|
+ "disableGrid": false,
|
|
|
+ "gridColor": "#CCCCCC",
|
|
|
+ "gridType": "dash",
|
|
|
+ "dashLength": 4,
|
|
|
+ "gridEval": 1,
|
|
|
+ "scrollShow": false,
|
|
|
+ "scrollAlign": "left",
|
|
|
+ "scrollColor": "#A6A6A6",
|
|
|
+ "scrollBackgroundColor": "#EFEBEF",
|
|
|
+ "format": ""
|
|
|
+ },
|
|
|
+ "yAxis": {
|
|
|
+ "disabled": true,
|
|
|
+ "disableGrid": true,
|
|
|
+ "splitNumber": 5,
|
|
|
+ "gridType": "dash",
|
|
|
+ "dashLength": 2,
|
|
|
+ "gridColor": "#CCCCCC",
|
|
|
+ "padding": 10,
|
|
|
+ "showTitle": false,
|
|
|
+ "data": []
|
|
|
+ },
|
|
|
+ "legend": {
|
|
|
+ "show": false,
|
|
|
+ "position": "bottom",
|
|
|
+ "float": "center",
|
|
|
+ "padding": 5,
|
|
|
+ "margin": 5,
|
|
|
+ "backgroundColor": "rgba(0,0,0,0)",
|
|
|
+ "borderColor": "rgba(0,0,0,0)",
|
|
|
+ "borderWidth": 0,
|
|
|
+ "fontSize": 13,
|
|
|
+ "fontColor": "#666666",
|
|
|
+ "lineHeight": 11,
|
|
|
+ "hiddenColor": "#CECECE",
|
|
|
+ "itemGap": 10
|
|
|
+ },
|
|
|
+ "extra": {
|
|
|
+ "line": {
|
|
|
+ "type": "straight",
|
|
|
+ "width": 2
|
|
|
+ },
|
|
|
+ "tooltip": {
|
|
|
+ "showBox": true,
|
|
|
+ "showArrow": true,
|
|
|
+ "showCategory": false,
|
|
|
+ "borderWidth": 0,
|
|
|
+ "borderRadius": 0,
|
|
|
+ "borderColor": "#000000",
|
|
|
+ "borderOpacity": 0.7,
|
|
|
+ "bgColor": "#000000",
|
|
|
+ "bgOpacity": 0.7,
|
|
|
+ "gridType": "dash",
|
|
|
+ "dashLength": 4,
|
|
|
+ "gridColor": "#22C572",
|
|
|
+ "fontColor": "#FFFFFF",
|
|
|
+ "splitLine": true,
|
|
|
+ "horizentalLine": false,
|
|
|
+ "xAxisLabel": false,
|
|
|
+ "yAxisLabel": false,
|
|
|
+ "labelBgColor": "#FFFFFF",
|
|
|
+ "labelBgOpacity": 0.7,
|
|
|
+ "labelFontColor": "#666666"
|
|
|
+ },
|
|
|
+ "markLine": {
|
|
|
+ "type": "solid",
|
|
|
+ "dashLength": 4,
|
|
|
+ "data": []
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ } else if (i == 9) {
|
|
|
+ for (let k = 0; k < res.data.data[i].biViewInfoList.length; k++) {
|
|
|
+ var obj = res.data.data[i].biViewInfoList[k]
|
|
|
+ obj.startName = obj.name.split('→')[0].substring(0, 5) + '...'
|
|
|
+ obj.endName = obj.name.split('→')[1]
|
|
|
+ }
|
|
|
+ this.ztList = res.data.data[i].biViewInfoList
|
|
|
+ // this.prizeScroll();
|
|
|
}
|
|
|
}
|
|
|
this.chartlist = _list
|
|
|
-
|
|
|
+ uni.hideLoading()
|
|
|
})
|
|
|
},
|
|
|
- getdata(e) {
|
|
|
+ getHeight(Class) {
|
|
|
+ let query = uni.createSelectorQuery().in(this);
|
|
|
+ query
|
|
|
+ .selectAll(Class)
|
|
|
+ .boundingClientRect(data => {
|
|
|
+ this.height = data[0].height;
|
|
|
+ })
|
|
|
+ .exec();
|
|
|
+ },
|
|
|
+ prizeScroll() {
|
|
|
+ let speed = 50;
|
|
|
+ let animation = uni.createAnimation({
|
|
|
+ duration: this.getHeight('.content7') / speed,
|
|
|
+ timingFunction: 'linear',
|
|
|
+ delay: 0
|
|
|
+ });
|
|
|
+ // this.animation = animation;
|
|
|
+ setInterval(() => {
|
|
|
+ if (this.scrollHeight >= this.height) {
|
|
|
+ animation.translateY(0).step();
|
|
|
+ this.scrollHeight = 0;
|
|
|
+ this.animationData = animation.export();
|
|
|
+ } else {
|
|
|
+ this.scrollHeight = this.scrollHeight + 1;
|
|
|
+ animation.translateY(-this.scrollHeight).step();
|
|
|
+ this.animationData = animation.export();
|
|
|
+ }
|
|
|
+ }, speed);
|
|
|
+ },
|
|
|
+ confirm(e) {
|
|
|
console.log(e)
|
|
|
+ },
|
|
|
+ dateClick() {
|
|
|
+ this.showDate = true
|
|
|
+ },
|
|
|
+ typeClick(index) {
|
|
|
+ this.typeSelect = index
|
|
|
+
|
|
|
+ console.log(index)
|
|
|
+ },
|
|
|
+ htClick(index) {
|
|
|
+ // this.itemSelect = index
|
|
|
+ this.contractSelect = index
|
|
|
}
|
|
|
}
|
|
|
}
|
|
|
</script>
|
|
|
|
|
|
+<style scoped lang="scss">
|
|
|
+ .title {
|
|
|
+ font-size: 32rpx;
|
|
|
+ font-weight: 400;
|
|
|
+ color: #343434;
|
|
|
+ }
|
|
|
|
|
|
+ .content-wrap {
|
|
|
+ background: white;
|
|
|
+ margin: 0 20rpx;
|
|
|
+ border-radius: 20rpx;
|
|
|
+ padding: 20rpx;
|
|
|
+ }
|
|
|
|
|
|
-<style scoped lang="scss">
|
|
|
- .map {
|
|
|
- top: 90rpx;
|
|
|
- height: 60vh;
|
|
|
- width: 100%;
|
|
|
- border: 0;
|
|
|
+ .u-line {
|
|
|
+ margin: 20rpx 0 !important;
|
|
|
}
|
|
|
|
|
|
- .title {
|
|
|
- background: black;
|
|
|
- color: white;
|
|
|
- text-align: center;
|
|
|
- font-size: 1.25rem;
|
|
|
- padding: 0.625rem;
|
|
|
+ .line-chart {
|
|
|
+ height: 200px;
|
|
|
}
|
|
|
|
|
|
- .content {
|
|
|
- background: black;
|
|
|
- padding-bottom: 100rpx;
|
|
|
+ .content1 {
|
|
|
+ background: #2E303A;
|
|
|
+ padding: 0 20rpx 180rpx 20rpx;
|
|
|
+
|
|
|
+ .row2 {
|
|
|
+ display: flex;
|
|
|
+ justify-content: space-between;
|
|
|
+ color: white;
|
|
|
+ font-size: 32rpx;
|
|
|
+ align-items: center;
|
|
|
+ color: #FFFFFF;
|
|
|
+
|
|
|
+ .icon {
|
|
|
+ margin: 0 10rpx;
|
|
|
+ }
|
|
|
+
|
|
|
+ .right {
|
|
|
+ display: flex;
|
|
|
+ font-size: 26rpx;
|
|
|
+
|
|
|
+ .type-style {
|
|
|
+ margin-left: 38rpx;
|
|
|
+ padding: 6rpx 16rpx;
|
|
|
+ border-radius: 10rpx;
|
|
|
+ color: #A6A6A6;
|
|
|
+ }
|
|
|
+
|
|
|
+ .type-bgc {
|
|
|
+ background: rgba(255, 255, 255, 0.3);
|
|
|
+ color: white;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ .row3 {
|
|
|
+ .title {
|
|
|
+ font-size: 26rpx;
|
|
|
+ font-weight: 400;
|
|
|
+ color: #C5C5C5;
|
|
|
+ margin: 35rpx 0 20rpx 0;
|
|
|
+ }
|
|
|
+
|
|
|
+ .number {
|
|
|
+ font-size: 32rpx;
|
|
|
+ font-weight: 400;
|
|
|
+ color: #E2C4A1;
|
|
|
+ }
|
|
|
+ }
|
|
|
}
|
|
|
|
|
|
- .charts-box {
|
|
|
- // background: black;
|
|
|
+ .move-content {
|
|
|
position: relative;
|
|
|
- // top: 70vh;
|
|
|
+ top: -136rpx;
|
|
|
}
|
|
|
|
|
|
- .content2 .row,
|
|
|
- .content4 .row {
|
|
|
- display: flex;
|
|
|
- justify-content: space-around;
|
|
|
- background: #24262d;
|
|
|
- padding: 40rpx 20rpx;
|
|
|
+ .content2 {
|
|
|
+ .row1 {
|
|
|
+ display: flex;
|
|
|
+ justify-content: space-between;
|
|
|
+
|
|
|
+ .left {}
|
|
|
+
|
|
|
+ .right {
|
|
|
+ display: flex;
|
|
|
|
|
|
- .item-top,
|
|
|
- .item-bottom {
|
|
|
- color: #d5d5d5;
|
|
|
+ .item {
|
|
|
+ background: #F1F1F1;
|
|
|
+ border-radius: 30px;
|
|
|
+ margin-left: 20rpx;
|
|
|
+ font-size: 2rpx;
|
|
|
+ color: #333333;
|
|
|
+ padding: 13rpx 27rpx;
|
|
|
+ }
|
|
|
+
|
|
|
+ .item-Select {
|
|
|
+ background-color: black;
|
|
|
+ color: white;
|
|
|
+ }
|
|
|
+ }
|
|
|
}
|
|
|
|
|
|
- .item-bottom {
|
|
|
+ .row2,
|
|
|
+ .row3,
|
|
|
+ .row4 {
|
|
|
+ .top {
|
|
|
+ font-size: 26rpx;
|
|
|
+ color: #929292;
|
|
|
+ margin: 0;
|
|
|
+ }
|
|
|
+
|
|
|
+ .bottom {
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ margin: 10rpx;
|
|
|
+
|
|
|
+ .left {
|
|
|
+ margin-left: 20rpx;
|
|
|
+
|
|
|
+ image {
|
|
|
+ width: 45rpx;
|
|
|
+ height: 45rpx;
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ .right {
|
|
|
+ width: 100%;
|
|
|
+ padding-left: 20rpx;
|
|
|
+
|
|
|
+ .top {
|
|
|
+ display: flex;
|
|
|
+ justify-content: space-between;
|
|
|
+ width: 100%;
|
|
|
+ margin-top: 10px;
|
|
|
+
|
|
|
+ .left,
|
|
|
+ .right-number {
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ font-size: 26rpx;
|
|
|
+ color: #343434;
|
|
|
+
|
|
|
+ .number {
|
|
|
+ font-size: 26rpx;
|
|
|
+ font-weight: 400;
|
|
|
+ color: #929292;
|
|
|
+ margin-left: 10rpx;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ .bottom {
|
|
|
+ margin: 30rpx 0 30rpx 20rpx;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ .content3,
|
|
|
+ .content4,
|
|
|
+ .content5,
|
|
|
+ .content6 {
|
|
|
+ margin-top: 20rpx;
|
|
|
+ }
|
|
|
+
|
|
|
+ .content5 {
|
|
|
+
|
|
|
+ .row1,
|
|
|
+ .row2 {
|
|
|
display: flex;
|
|
|
+ justify-content: space-between;
|
|
|
align-items: center;
|
|
|
+ margin: 40rpx 0;
|
|
|
+
|
|
|
+ .left {
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+
|
|
|
+ .text {
|
|
|
+ font-size: 28rpx;
|
|
|
+ font-weight: 400;
|
|
|
+ color: #707575;
|
|
|
+ margin-left: 20rpx;
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ .right {
|
|
|
+ font-size: 34rpx;
|
|
|
+ font-weight: 500;
|
|
|
+ color: #333333;
|
|
|
+ }
|
|
|
+
|
|
|
+ image {
|
|
|
+ width: 54rpx;
|
|
|
+ height: 54rpx;
|
|
|
+ }
|
|
|
}
|
|
|
}
|
|
|
|
|
|
- .bottom-tip {
|
|
|
- position: absolute;
|
|
|
- z-index: 11;
|
|
|
- color: #8c8c8d;
|
|
|
- right: 10px;
|
|
|
- bottom: 10px;
|
|
|
+ .content6 {
|
|
|
+ .map {
|
|
|
+ border: 0;
|
|
|
+ width: 100%;
|
|
|
+ height: 500rpx;
|
|
|
+ }
|
|
|
}
|
|
|
|
|
|
- .title-margin {
|
|
|
- bottom: 120rpx;
|
|
|
+ .content7 {
|
|
|
+ position: relative;
|
|
|
+
|
|
|
+ .row1 {
|
|
|
+ background: #FAFAFA;
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ justify-content: space-between;
|
|
|
+ margin: 20rpx;
|
|
|
+ padding: 20rpx;
|
|
|
+ color: #707575;
|
|
|
+
|
|
|
+ .point {
|
|
|
+ width: 15rpx;
|
|
|
+ height: 15rpx;
|
|
|
+ border-radius: 50%;
|
|
|
+ background: #22C572;
|
|
|
+ margin-right: 10px;
|
|
|
+ }
|
|
|
+
|
|
|
+ .zt {
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ }
|
|
|
+ }
|
|
|
}
|
|
|
</style>
|
wangchao
