nkClient/src/views/biz/feed/stark/index.vue

<template>
	<a-card title="料塔余量" style="margin-bottom: 10px">
		<template v-if="starkList.length > 0">
			<splide :options="swiperOption">
				<splide-slide v-for="item in starkList" :key="item.unitId">
					<div class="swiper_item">
						<a-row :gutter="10" align="middle" style="height: 100%">
							<a-col :span="14">
								<div class="swiper_title">{{item.unitName}}</div>
								<div class="swiper_sub_title">余量</div>
								<div class="swiper_num"><strong>{{item.value}}</strong>吨</div>
							</a-col>
							<a-col :span="10">
								<a-progress type="circle" :percent="item.value" :show-info="false" />
							</a-col>
						</a-row>
					</div>
				</splide-slide>
			</splide>
		</template>
		<template v-else>
			<a-empty description="暂无数据" />
		</template>
	</a-card>
	<a-card title="料塔余量曲线">
		<a-form ref="searchFormRef" name="advanced_search" class="ant-advanced-search-form" :model="searchFormState">
			<a-row :gutter="16">
				<a-col :span="4">
					<a-form-item name="unitId">
						<a-select v-model:value="searchFormState.unitId">
							<a-select-option v-for="item in deviceList" :key="item.unitId" :value="item.unitId">{{item.unitName}}</a-select-option>
						</a-select>
					</a-form-item>
				</a-col>
				<a-col :span="1">
					<a-form-item>
						<div :class="['cursor', active === 1 ? 'isActive' : '']" @click="cut(1)">今日</div>
					</a-form-item>
				</a-col>
				<a-col :span="1">
					<a-form-item>
						<div :class="['cursor', active === 2 ? 'isActive' : '']" @click="cut(2)">本周</div>
					</a-form-item>
				</a-col>
				<a-col :span="1">
					<a-form-item>
						<div :class="['cursor', active === 3 ? 'isActive' : '']" @click="cut(3)">本月</div>
					</a-form-item>
				</a-col>
				<a-col :span="4">
					<a-form-item name="date">
						<a-range-picker v-model:value="date" value-format="YYYY-MM-DD" format="YYYY-MM-DD" />
					</a-form-item>
				</a-col>
				<a-col :span="2">
					<a-space>
						<a-button type="primary" @click="search">
							<template #icon><SearchOutlined /></template>
							查询
						</a-button>
						<a-button @click="reset">重置</a-button>
					</a-space>
				</a-col>
			</a-row>
		</a-form>
		<div class="chart_content">
			<chart-stark v-if="list.length > 0" :id="0" :data="{ unit: '吨', list: list }"></chart-stark>
			<a-empty v-else style="padding-top: 100px"/>
		</div>
	</a-card>
</template>

<script setup name="stark">
	import bizFeedStarkApi from "@/api/biz/feed/bizFeedStarkApi"
	import bizFeedDeviceApi from "@/api/biz/feed/bizFeedDeviceApi"
	import { Splide, SplideSlide } from '@splidejs/vue-splide'
	import '@splidejs/splide/dist/css/themes/splide-sea-green.min.css'
	import chartStark from '../chart/chartStark.vue'
	import dayjs from "dayjs";
	const searchFormRef = ref()
	const searchFormState = ref({})
	const active = ref(1)

	const swiperOption = ref({
		rewind: true,
		perPage: 4,
		height: 200,
		autoplay: true,
		gap: 20
	})
	const starkList = ref([])
	const initData = () => {
		bizFeedStarkApi.getStarkData().then((res) => {
			starkList.value = res
		})
	}

	const cut = (val) => {
		if (active.value === val) {
			return
		} else {
			active.value = val
			if(active.value < 4) {
				date.value = []
			}
		}
	}

	const deviceList = ref([])
	const list = ref([])
	const initDevice = async () => {
		await bizFeedDeviceApi.getDeviceData().then((res) => {
			deviceList.value = res
			searchFormState.value.unitId = res[0].unitId
		})
	}
	const date = ref([])
	watch(date, (newVal) => {
		if (newVal.length > 0) {
			active.value = 4
		}
	})

	const reset = () => {
		searchFormRef.value.resetFields()
		table.value.refresh(true)
	}

	const search = async () => {
		let params = {
			type: active.value,
			startTime: date.value.length > 0 ? date.value[0] : '',
			endTime: date.value.length > 0 ? date.value[1] : ''
		}
		await bizFeedStarkApi.getStarkChart(Object.assign(params, searchFormState.value)).then((res) => {
			res.forEach(item => {
				if(active.value === 1) {
					item.time = dayjs(item.uploadTime).format('HH:mm')
				} else {
					item.time = dayjs(item.uploadTime).format('MM-DD')
				}
			})
			list.value = res
		})
	}

	onMounted(async () => {
		initData()
		await initDevice()
		await search()
	})

</script>

<style scoped>
	.cursor {
		cursor: pointer;
	}
	.isActive {
		color: #1890ff;
	}
	.chart_content {
		width: 100%;
		height: 400px;
	}
	.swiper_item {
		width: 100%;
		height: 100%;
		border: 1px solid #ddd;
		border-radius: 5px;
		cursor: pointer;
		/*text-align: center;*/
		box-sizing: border-box;
		padding: 20px;
	}
	.swiper_title {
		font-size: 16px;
		margin-bottom: 10px;
	}
	.swiper_sub_title {
		color: #A6A6A6;
		margin-bottom: 10px;
	}
	.swiper_num strong {
		font-size: 36px;
	}
</style>