consumoption/subpkg/pages/mintir/PieCharts/PieCharts.vue

<template>
	<view class="cartsList">
		<view class="cartsList-all">
			<view class="cartsList-name">
				科室消耗数据排名
			</view>
			<view class="cartsList-seleven">
				<uni-data-select v-model="value" :localdata="range" @change="change" :clear="false"></uni-data-select>
			</view>
		</view>
		<view class="cartsList-table">
			<UniTable style="height: 100%;">
				<UniTr v-for="(item, index) in dataList" :key="index">
					<UniTd align="center">
						<span v-if="index === 0" style="color: #c13124; font-weight: 800; font-family: sans-serif">
							{{ index + 1 }}
						</span>
						<span v-else-if="index === 1" style="color: #e99d7f; font-weight: 800; font-family: sans-serif">
							{{ index + 1 }}
						</span>
						<span v-else-if="index === 2" style="color: #75f9fd; font-weight: 800; font-family: sans-serif">
							{{ index + 1 }}
						</span>
						<span v-else>{{ index + 1 }}</span>
					</UniTd>
					<UniTd align="left">
						<view>{{ item.dept }}</view>
					</UniTd>
					<UniTd align="left">
						<view>
							{{ item.deptAmt }}
						</view>
					</UniTd>
				</UniTr>
			</UniTable>
		</view>
	</view>
</template>

<script>
	import {
		supData
	} from '../Pie.js';
	import UniTable from '@/subpkg/uni_modules/uni-table/components/uni-table/uni-table.vue';
	import UniTr from '@/subpkg/uni_modules/uni-table/components/uni-tr/uni-tr.vue';
	import UniTh from '@/subpkg/uni_modules/uni-table/components/uni-th/uni-th.vue';
	import UniTd from '@/subpkg/uni_modules/uni-table/components/uni-td/uni-td.vue';

	export default {
		components:{
			UniTable,
			UniTr,
			UniTh,
			UniTd
		},
		data() {
			return {
				value: '1',
				range: supData,
				dataList: []
			}
		},
		methods: {
			listData() {
				this.$http('homePage.deptCosm', {
					monthType: this.value
				}, '加载中').then((res) => {
					this.dataList = res.data
				})
			},
			change(e) {
				this.value = e;
				this.listData({
					monthType: this.value
				})
			},
		},
		created() {
			this.listData()
		}
	}
</script>

<style lang="scss">
	.cartsList {
		padding: 30rpx;

		.cartsList-all {
			width: 100%;
			height: 100rpx;
			display: flex;
			justify-content: space-between;
			background-color: #ffffff;
			padding: 20rpx;
			box-sizing: border-box;
			border-top-left-radius: 20rpx;
			border-top-right-radius: 20rpx;
			border-width: 4rpx 4rpx 4rpx 4rpx;
			border-style: solid;
			border-color: #90ffe4;

			.cartsList-name {
				font-size: 35rpx;
				font-weight: bold;
			}
		}

		.cartsList-table {
			border-bottom-right-radius: 20rpx;
			border-bottom-left-radius: 20rpx;
			border-style: solid;
			border-color: #90ffe4;
			border-width: 0 4rpx 4rpx 4rpx;
		}
	}

	.uni-select {
		width: 130% !important;
	}
</style>