AGV小车功能添加

api/agv/agv.js

@@ -0,0 +1,67 @@
+import request from '@/utils/request'
+
+/**
+ * 1.获取工单列表
+ * @param {查询条件} query
+ */
+export function getWorkorderList(query) {
+	return request({
+		url: '/mes/wm/agv/get_workorder_list',
+		method: 'get',
+		params: query,
+	})
+}
+
+/**
+ * 2.获取当前工单下的所有AGV小车任务
+ * @param query
+ */
+export function GetTask(query) {
+	return request({
+		url: '/mes/wm/agv/GetTask',
+		method: 'get',
+		params: query,
+	})
+}
+
+/**
+ * 3.新增AGV小车任务
+ * @param FkWorkorderId 区域编号
+ * @param sort: 1,				
+ * @param goStartPoint: '', //上料起点				
+ * @param goEndPoint: '', //上料终点	
+ * @param number: 0, //上料数量
+ * @param backStartPoint: '', //返程起点			
+ * @param backEndPoint: '', //返程终点
+ */
+export function addTask(data) {
+	return request({
+		url: '/mes/wm/agv/add_task',
+		method: 'post',
+		data,
+	})
+}
+
+/**
+ * 3.删除AGV小车任务
+ * @param taskId 任务id
+ */
+export function deleteTask(data) {
+	return request({
+		url: '/mes/wm/agv/deleteTask',
+		method: 'get',
+		params: data,
+	})
+}
+/**
+ * 6 获取agv 起点和终点下拉列表
+ * @param Area 区域编号
+ * @param Type 类型（0: 起点，1：终点） 
+ */
+export function getAgvPosition(query) {
+	return request({
+		url: '/mes/wm/agv/get_agv_position',
+		method: 'get',
+		params: query,
+	})
+}

pages.json

@@ -106,6 +106,22 @@
 				"navigationBarTitleText" : "出料",
 				"enablePullDownRefresh" : false
 			}
+		},
+		{
+			"path" : "pages/agv/agv-order/agv-order",
+			"style" : 
+			{
+				"navigationBarTitleText" : "AGV任务",
+				"enablePullDownRefresh" : false
+			}
+		},
+		{
+			"path" : "pages/agv/agv-order/agv-order-add",
+			"style" : 
+			{
+				"navigationBarTitleText" : "创建AGV任务",
+				"enablePullDownRefresh" : false
+			}
 		}
 	]
 

pages/agv/agv-in/agv-in.vue

@@ -1,18 +1,21 @@
 <template>
 	<view class="agv-page">
-		<dateCheck @dateChouse="dateChouse"></dateCheck>
-		<uni-segmented-control :current="queryData.state" :values="items" @clickItem="onClickItem" styleType="button"
+		<dateCheck :loading="loading" @dateChouse="dateChouse"></dateCheck>
+		<uni-segmented-control :current="queryData.status" :values="items" @clickItem="onClickItem" styleType="button"
 			activeColor="#5500ff" class="segmented-control-box"></uni-segmented-control>
 		<scroll-view class="scroll-view-box" :scroll-y="true">
 			<view v-for="(item, index) in list">
-				 <orderItem :data="item"></orderItem>	
-				 <!-- <materialItem style="background-color: darkgray" :materialInfo="item"></materialItem> -->
+				<view @click="handlerOrderItemClick(item)">
+					<orderItem :data="item"></orderItem>
+				</view>
+				<!-- <materialItem style="background-color: darkgray" :materialInfo="item"></materialItem> -->
 			</view>
 		</scroll-view>
 	</view>
 </template>
 
 <script>
+	import * as AgvApi from '@/api/agv/agv.js';
 	import dateCheck from '@/pages/agv/components/dateCheck/index.vue';
 	import orderItem from '@/pages/agv/components/orderItem/index.vue';
 	export default {
@@ -22,34 +25,67 @@
 		},
 		data() {
 			return {
+				loading: false,
 				queryData: {
 					year: 0,
 					week: 0,
 					day: 0,
-					state: 1,
+					status: 1,
 				},
-
 				items: ['全部', '未完成', '已完成'],
-				list: [1,2,3],
+				list: [],
+				// 双击判定
+				touchNum: 0
 			}
 		},
+		onShow() {
+			// this.getList();
+		},
 		methods: {
 			getList() {
+				this.loading = true;
+				setTimeout(() => {
+					this.loading = false;
+				}, 30000)
 				const queryData = this.queryData;
+				AgvApi.getWorkorderList(queryData).then(res => {
+					if (res.code === 200) {
+						this.list = res.data;
+						this.loading = false;
+					}
+				})
 			},
 			onClickItem(e) {
-				if (this.queryData.state != e.currentIndex) {
-					this.queryData.state = e.currentIndex;
+				if (this.queryData.status != e.currentIndex) {
+					this.queryData.status = e.currentIndex;
 				}
 				this.getList();
 			},
 			dateChouse(data) {
 				this.queryData.year = data.year
 				this.queryData.week = data.week
-				this.queryData.date = data.date
-				console.log(data);
+				this.queryData.day = data.day
 				this.getList();
-			}
+			},
+			// 工单双击
+			handlerOrderItemClick(item) {
+				// 双击判定
+				this.touchNum++;
+				setTimeout(() => {
+					if (this.touchNum >= 2) {
+						uni.navigateTo({
+							url: '/pages/agv/agv-order/agv-order',
+							success: function(res) {
+								// 通过eventChannel向被打开页面传送数据
+								res.eventChannel.emit('orderInfo', {
+									data: item
+								})
+							}
+						})
+					}
+					this.touchNum = 0;
+				}, 250);
+			},
 		}
 	}
 </script>
@@ -67,8 +103,8 @@
 	.scroll-view-box {
 		width: 94%;
 		margin: 0 auto;
-		margin-top: 30px;
-		height: 450px;
+		margin-top: 5px;
+		height: 460px;
 		padding: 10px;
 		background-color: rgba(179, 179, 179, 0.7);
 		border-radius: 5px;

pages/agv/agv-order/agv-order-add.vue

@@ -0,0 +1,286 @@
+<template>
+	<view>
+		<uni-card :isFull="true" padding="10px 0">
+			<form @submit="formSubmit" @reset="formReset">
+				<view class="uni-form-item flex-row">
+					<view class="title">执行顺序:</view>
+					<view class="input-box">
+						<input class="input-size" v-model="formData.sort" type="number" name="input"
+							placeholder="请输入上料数量" />
+					</view>
+				</view>
+				<view class="uni-form-item flex-row" v-if="goStartDict.length>0">
+					<view class="title">上料起点:</view>
+					<view class="input-box">
+						<picker @change="bindPickerChange1" :value="goStartIndex" :range="goStartDict"
+							range-key="coordinate">
+							<view class="input">{{goStartDict[goStartIndex].area+goStartDict[goStartIndex].coordinate}}
+							</view>
+						</picker>
+					</view>
+				</view>
+				<view class="uni-form-item flex-row" v-if="goEndDict.length>0">
+					<view class="title">上料终点:</view>
+					<view class="input-box">
+						<picker @change="bindPickerChange2" :value="goEndIndex" :range="goEndDict"
+							range-key="coordinate">
+							<view class="input">{{goEndDict[goEndIndex].area+goEndDict[goEndIndex].coordinate}}
+							</view>
+						</picker>
+					</view>
+				</view>
+				<view class="uni-form-item flex-row">
+					<view class="title">上料数量:</view>
+					<view class="input-box">
+						<input class="input-size" v-model="formData.number" type="number" name="input"
+							placeholder="请输入上料数量" />
+					</view>
+				</view>
+				<view class="uni-form-item flex-row" v-if="backStartDict.length>0">
+					<view class="title">返程起点:</view>
+					<view class="input-box">
+						<picker @change="bindPickerChange3" :value="backStartIndex" :range="backStartDict"
+							range-key="coordinate">
+							<view class="input">
+								{{backStartDict[backStartIndex].area + backStartDict[backStartIndex].coordinate}}
+							</view>
+						</picker>
+					</view>
+				</view>
+				<view class="uni-form-item flex-row" v-if="backEndDict.length>0">
+					<view class="title">返程终点:</view>
+					<view class="input-box">
+						<picker @change="bindPickerChange4" :value="backEndIndex" :range="backEndDict"
+							range-key="coordinate">
+							<view class="input">{{backEndDict[backEndIndex].area+backEndDict[backEndIndex].coordinate}}
+							</view>
+						</picker>
+					</view>
+				</view>
+				<view class="button-box">
+					<button class="button-width" type="primary" form-type="submit">添加</button>
+					<button class="button-width" type="default" @click="formReset">重置</button>
+				</view>
+			</form>
+		</uni-card>
+	</view>
+</template>
+
+<script>
+	import * as AgvApi from '@/api/agv/agv.js';
+	export default {
+		onLoad: function(option) {
+			let that = this;
+			that.initDict();
+			const eventChannel = this.getOpenerEventChannel();
+			eventChannel.on('orderAddInfo', function(res) {
+				that.orderInfo = res.data;
+			})
+		},
+		data() {
+			return {
+				orderInfo: {},
+				clearData: {},
+				formData: {
+					fkWorkorderId: '',
+					sort: 1,
+					//上料起点
+					goStartPoint: '',
+					//上料终点
+					goEndPoint: '',
+					//上料数量
+					number: 0,
+					//返程起点
+					backStartPoint: '',
+					//返程终点
+					backEndPoint: '',
+				},
+				// 上料下拉
+				goStartDict: [0],
+				goEndDict: [0],
+				goStartIndex: 0,
+				goEndIndex: 0,
+				// 返程下拉
+				backStartDict: [0],
+				backEndDict: [0],
+				backStartIndex: 0,
+				backEndIndex: 0,
+			}
+		},
+		methods: {
+			clear() {
+				this.goStartIndex = 0;
+				this.backEndDict = 0;
+				this.backStartIndex = 0;
+				this.backEndIndex = 0;
+				this.formData.number = 0;
+				this.formData.sort = 1;
+			},
+			initDict() {
+				const goStartDictData = {
+					areaCode: 2,
+					type: 0
+				}
+				AgvApi.getAgvPosition(goStartDictData).then(res => {
+					if (res.code === 200) {
+						this.goStartDict = res.data;
+					}
+				})
+				const goEndDictData = {
+					areaCode: 2,
+					type: 1
+				}
+				AgvApi.getAgvPosition(goEndDictData).then(res => {
+					if (res.code === 200) {
+						this.goEndDict = res.data;
+					}
+				})
+				const backStartDictData = {
+					areaCode: 2,
+					type: 1
+				}
+				AgvApi.getAgvPosition(backStartDictData).then(res => {
+					if (res.code === 200) {
+						this.backStartDict = res.data;
+					}
+				})
+				const backEndDictData = {
+					areaCode: 2,
+					type: 0
+				}
+				AgvApi.getAgvPosition(backEndDictData).then(res => {
+					if (res.code === 200) {
+						this.backEndDict = res.data;
+					}
+				})
+			},
+			formSubmit(e) {
+				const that = this;
+				const _uni = uni;
+				uni.showModal({
+					title: '操作',
+					content: '是否确认添加此任务？',
+					showCancel: true,
+					cancelText: '取消',
+					confirmText: '确认添加',
+					success: (res) => {
+						if (res.confirm) {
+							let addData = {
+								fkWorkorderId: that.orderInfo.id,
+								sort: that.formData.sort,
+								//上料起点
+								goStartPoint: that.goStartDict[that.goStartIndex].coordinate,
+								//上料终点
+								goEndPoint: that.goEndDict[that.goEndIndex].coordinate,
+								//上料数量
+								number: that.formData.number,
+								//返程起点
+								backStartPoint: that.backStartDict[that.backStartIndex].coordinate,
+								//返程终点
+								backEndPoint: that.backEndDict[that.backEndIndex].coordinate,
+							};
+							AgvApi.addTask(addData).then((res2) => {
+								console.log(res2);
+								if (res2.code === 200 && res2.data > 0) {
+									console.log('success');
+									uni.showModal({
+										title: '提示',
+										content: '新增成功',
+										showCancel: false,
+										confirmText: '确认',
+										success: (res3) => {
+											const _eventChannel = that.getOpenerEventChannel();
+											uni.navigateBack({
+												success: (res4) => {
+													_eventChannel.emit(
+														'agvOrderAddBack', {
+															data: 'back'
+														})
+												}
+											})
+										}
+									});
+
+								} else {
+									console.log('error');
+									uni.showModal({
+										title: '提示',
+										content: '添加失败！' + res2.msg,
+										showCancel: false,
+										confirmText: '确认',
+									});
+								}
+							});
+						}
+					}
+				});
+			},
+			formReset(e) {
+				this.clear()
+			},
+			// 上下料选择
+			bindPickerChange1(e) {
+				this.goStartIndex = e.detail.value
+				this.backEndIndex = e.detail.value
+			},
+			bindPickerChange2(e) {
+				this.goEndIndex = e.detail.value
+				this.backStartIndex = e.detail.value
+			},
+			bindPickerChange3(e) {
+				this.backStartIndex = e.detail.value
+			},
+			bindPickerChange4(e) {
+				this.backEndIndex = e.detail.value
+			},
+		}
+	}
+</script>
+
+<style scoped>
+	.border {
+		border: 1px solid #000000;
+	}
+
+	.flex-row {
+		display: flex;
+		flex-direction: row;
+		align-items: center;
+	}
+
+	.button-box {
+		display: flex;
+		flex-direction: row;
+		justify-content: space-around;
+	}
+
+	.button-width {
+		width: 45%;
+	}
+
+	.uni-form-item {
+		margin-bottom: 10px;
+		font-size: 24px;
+	}
+
+	.uni-form-item .title {
+		padding: 10rpx 10rpx;
+		min-width: 120px;
+	}
+
+	.uni-form-item .input {
+		border: 1px solid #d6d6d6;
+		background-color: white;
+		padding: 10rpx 10rpx;
+	}
+
+	.input-size {
+		margin: 0;
+		padding: 0;
+		font-size: 24px;
+	}
+
+	.input-box {
+		width: 98%;
+	}
+</style>

pages/agv/agv-order/agv-order.vue

@@ -0,0 +1,221 @@
+<template>
+	<view>
+		<uni-card :isFull="true" padding="10px 2px">
+			<template v-slot:title>
+				<view class="title-box">
+					<orderItem :data="orderInfo"></orderItem>
+				</view>
+				<view class="button-box">
+					<button class="button-width" size="mini" type="primary" @click="handlerAdd"
+						:loading="loading">添加任务</button>
+					<button class="button-width" size="mini" type="default" @click="getList"
+						:loading="loading">刷新任务</button>
+				</view>
+			</template>
+			<view>
+				<scroll-view class="scroll-view-box" :scroll-y="true">
+					<view v-for="(item, index) in list">
+						<uni-card :is-full="true">
+							<template v-slot:title>
+								<view class="card-title-box">
+									<view class="card-title-text">
+										<text>任务 {{item.sort}}</text>
+										<text class="number">上料数量：{{item.number}}</text>
+									</view>
+									<view>
+										<button size="mini" class="card-title-button" type="warn"
+											@click="handlerDelete(item.id)">删除</button>
+									</view>
+								</view>
+							</template>
+							<view class="uni-body">
+								<view>
+									<text>上料任务：{{item.goStartPoint}} - {{item.goEndPoint}}</text>
+								</view>
+								<view>
+									<text>返程任务：{{item.backStartPoint}} - {{item.backEndPoint}}</text>
+								</view>
+								<view class="button-box-2">
+									<button size="mini" type="default" @click="handlerStart1(item.id)">上料</button>
+									<button size="mini" type="default" @click="handlerStart2(item.id)">返程</button>
+									<button size="mini" type="primary" @click="handlerStop(item.id)">终止</button>
+								</view>
+							</view>
+
+
+						</uni-card>
+					</view>
+				</scroll-view>
+			</view>
+		</uni-card>
+	</view>
+</template>
+
+<script>
+	import * as AgvApi from '@/api/agv/agv.js';
+	import orderItem from '@/pages/agv/components/orderItem/index.vue';
+	export default {
+		components: {
+			orderItem
+		},
+		onLoad: function(option) {
+			let that = this;
+			const eventChannel = this.getOpenerEventChannel();
+			eventChannel.on('orderInfo', function(res) {
+				that.orderInfo = res.data;
+				that.getList();
+			})
+			eventChannel.on('agvOrderAddBack', function(res) {
+				that.getList();
+			})
+		},
+		data() {
+			return {
+				loading: false,
+				orderInfo: {},
+				list: []
+			}
+		},
+		onShow() {
+			this.getList();
+		},
+		methods: {
+			// 获取AGV小车列表
+			getList() {
+				this.loading = true;
+				setTimeout(() => {
+					this.loading = false;
+				}, 30000)
+				const queryData = {
+					workorder_id: this.orderInfo.id
+				}
+				AgvApi.GetTask(queryData).then(res => {
+					if (res.code === 200) {
+						this.list = res.data;
+						this.loading = false;
+					}
+				})
+			},
+			// 添加按钮点击
+			handlerAdd() {
+				const that = this;
+				uni.navigateTo({
+					url: '/pages/agv/agv-order/agv-order-add',
+					success: function(res) {
+						// 通过eventChannel向被打开页面传送数据
+						res.eventChannel.emit('orderAddInfo', {
+							data: that.orderInfo
+						})
+					}
+				})
+			},
+			// 删除按钮
+			handlerDelete(taskId) {
+				uni.showModal({
+					title: '操作',
+					content: '是否确认删除此任务？',
+					showCancel: true,
+					cancelText: '取消',
+					confirmText: '确认删除',
+					success: (res) => {
+						if (res.confirm) {
+							AgvApi.deleteTask(queryData).then(res => {
+								if (res.code === 200 && res.data > 0) {
+									uni.showModal({
+										title: '提示',
+										content: '删除成功',
+										showCancel: false,
+										confirmText: '确认',
+									});
+									this.getList();
+								}
+							})
+						}else{
+							uni.showToast({
+								icon: 'error',
+								title: '删除失败！'
+							});
+						}
+					}
+				});
+				const queryData = {
+					taskId
+				}
+				
+			},
+			handlerStart1() {
+
+			},
+			handlerStart2() {
+
+			},
+			handlerStop() {
+
+			},
+			actionsClick() {
+
+			}
+		}
+	}
+</script>
+
+<style scoped>
+	.title-box {
+		margin-top: 10px;
+	}
+
+	.card-title-box {
+		margin-top: 10px;
+		border-bottom: 1px solid #dddddd;
+		display: flex;
+		flex-direction: row;
+		align-items: center;
+		justify-content: space-between;
+	}
+
+	.card-title-text {
+		font-size: 18px;
+		font-weight: 600;
+	}
+
+	.card-title-button {
+		width: 80px;
+	}
+
+	.button-width {
+		width: 40%;
+	}
+
+	.scroll-view-box {
+		width: 100%;
+		/* margin: 0 auto; */
+		/* margin-top: 30px; */
+		/* margin-bottom: 30px; */
+		height: 452px;
+		padding: 10px;
+		background-color: rgba(179, 179, 179, 0.7);
+		border-radius: 5px;
+	}
+
+	.button-box {
+		margin-top: 10px;
+		display: flex;
+		align-items: center;
+		justify-content: space-around;
+	}
+
+	.button-box-2 {
+		margin-top: 10px;
+		display: flex;
+		align-items: center;
+		justify-content: space-around;
+	}
+
+	.button-box-2 button {
+		width: 30%;
+	}
+
+	.number {
+		margin-left: 10px;
+	}
+</style>

pages/agv/components/createAgvOrder/index.vue

@@ -0,0 +1,8 @@
+<template>
+</template>
+
+<script>
+</script>
+
+<style>
+</style>

pages/agv/components/dateCheck/index.vue

@@ -1,24 +1,30 @@
 <template>
 	<div>
 		<uni-calendar ref="calendar" :insert="false" @confirm="confirm" />
-		<div class="button"><button @click="open">请选择工单时间</button></div>	
-		<div class="text">当前选择：{{year}}年-{{week}}周-{{date}}日</div>
+		<div class="button"><button @click="open" :loading="loading">{{loading?'数据加载中……':'请选择工单时间'}}</button></div>
+		<div class="text">当前选择：{{year}}年-{{week}}周-{{day}}日</div>
 	</div>
 </template>
 
 <script>
 	export default {
+		props: {
+			loading: {
+				default: false,
+				type: Boolean
+			}
+		},
 		data() {
 			return {
-				year:0,
-				week:0,
-				date:0
+				year: 0,
+				week: 0,
+				day: 0
 			}
 		},
 		created() {
 			this.year = new Date().getFullYear();
-			this.week = this.getYearWeek(new Date().getFullYear(), new Date().getMonth()+1, new Date().getDate());
-			this.date = new Date().getDay()
+			this.week = this.getYearWeek(new Date().getFullYear(), new Date().getMonth() + 1, new Date().getDate());
+			this.day = new Date().getDay()
 			this.emitData();
 		},
 		methods: {
@@ -28,16 +34,16 @@
 			confirm(e) {
 				this.year = e.lunar.cYear;
 				this.week = this.getYearWeek(e.lunar.cYear, e.lunar.cMonth, e.lunar.cDay);
-				this.date = e.lunar.nWeek;
+				this.day = e.lunar.nWeek;
 				this.emitData();
 
 			},
 			// 选择日期
 			emitData() {
 				const data = {
-					year:this.year,
-					week:this.week,
-					date:this.date
+					year: this.year,
+					week: this.week,
+					day: this.day
 				}
 				this.$emit('dateChouse', data)
 			},
@@ -58,12 +64,13 @@
 </script>
 
 <style scoped>
-	.text{
+	.text {
 		text-align: center;
-		font-size: 24px;
+		font-size: 20px;
 		font-weight: 700;
 	}
-	.button{
+
+	.button {
 		width: 90%;
 		margin: 0 auto;
 		margin-top: 10px;

pages/agv/components/orderItem/index.vue

@@ -1,22 +1,67 @@
 <template>
 	<div>
-		<uni-list-chat title="uni-app" note="您收到一条新的消息" time="2020-02-02 20:20" clickable>
-			<template v-slot:header>
-				<!-- <image class="slot-image" src="/static/logo.png" mode="widthFix"></image> -->
-			</template>
-			<view class="chat-custom-right">
-				<text class="chat-custom-text">任务</text>
-				<!-- 需要使用 uni-icons 请自行引入 -->
-				<uni-icons type="star-filled" color="#999" size="18"></uni-icons>
+		<uni-card :title="data.clientWorkorder" :extra="data.blankNumber" margin="2px" spacing="2px">
+			<view class="card-body">
+				<view>
+					<text class="uni-body">
+						{{data.productDescription}} {{data.specifications}} {{data.colour}}
+					</text>
+				</view>
+				<view>
+					<view class="previousNumber-text">
+						<text>总上件数：</text>
+						<text class="chat-custom-text">{{data.previousNumber}}</text>
+					</view>
+					<view class="noPreviousNumber-text">
+						<text>未上件数：</text>
+						<text
+							:class="data.noPreviousNumber===0?'chat-custom-text color-green':'chat-custom-text color-red'">
+							{{data.noPreviousNumber}}
+						</text>
+					</view>
+				</view>
 			</view>
-		</uni-list-chat>
+		</uni-card>
+		<!-- <uni-list-chat :show-extra-icon="false" :title="data.id" :note="data.productDescription" clickable @click="handlerClick">
+			<view class="chat-custom-right">
+				<view class="right-box">
+					<view class="previousNumber-text">
+						<text>总上件数：</text>
+						<text class="chat-custom-text">{{data.previousNumber}}</text>
+					</view>
+					<view class="noPreviousNumber-text">
+						<text>未上件数：</text>
+						<text class="chat-custom-text color-red">{{data.noPreviousNumber}}</text>
+					</view>
+				</view>
+			</view>
+		</uni-list-chat> -->
 	</div>
 </template>
 
 <script>
+	// 工单信息
 	export default {
 		props: {
 			data: {
+				default: {
+					// 工单号
+					"id": "WO20240226000",
+					clientWorkorder: "2402261",
+					// 毛坯号
+					"blankNumber": "202461",
+					// 描述
+					"productDescription": "TCROSS口盖",
+					// 颜色
+					"colour": "C9A",
+					// 
+					"specifications": "",
+					"codeNumber": 382042,
+					// 总上件数
+					"previousNumber": 4,
+					// 未上件数
+					"noPreviousNumber": 0,
+				}
 			}
 		},
 		data() {
@@ -25,10 +70,40 @@
 			}
 		},
 		methods: {
-
+			handlerClick() {
+				console.log(this.workorderId);
+			}
 		}
 	}
 </script>
 
-<style>
+<style scoped>
+	.card-body {
+		display: flex;
+		flex-direction: column;
+	}
+
+	.right-box {
+		margin-right: 10px;
+		display: flex;
+		flex-direction: column;
+		align-items: center;
+		justify-content: flex-end;
+	}
+
+	.previousNumber-text {
+		font-size: 16px;
+	}
+
+	.noPreviousNumber-text {
+		font-size: 14px;
+	}
+
+	.color-red {
+		color: red;
+	}
+
+	.color-green {
+		color: green;
+	}
 </style>