今日概况调整

common/apiurl.js

@@ -9,10 +9,12 @@ export const apiurl = {
 	getParameterUrl: '/admin/config/configKey/',
 	// 今日概况模块接口
 	todayOverview: {
-		// 获取今日概况接口
+		// 获取今日路段概况
 		getTodayDataUrl: '/admin/overview/today',
 		// 获取路段概况接口
-		getRoadDataUrl: '/admin/overview/roadspacecount'
+		getRoadDataUrl: '/admin/overview/roadspacecount',
+		// 获取今日停车概况
+		getParkDataUrl: '/admin/overview/todaypark',
 	},
 	// 运营分析模块接口
 	operationalAnalysis: {

common/http.api.js

@@ -14,13 +14,17 @@ const install = (Vue, vm) => {
 	let getParameterApi = (params = {}) => vm.$u.http.get(apiurl.getParameterUrl + params.key);
 	// 今日概况
 	let todayOverviewApi = {
-		// 获取今日概况
+		// 获取今日路段概况
 		getTodayDataApi: (params = {}) => vm.$u.http.get(apiurl.todayOverview.getTodayDataUrl, {
 			params
 		}),
 		// 获取路段概况
 		getRoadDataApi: (params = {}) => vm.$u.http.get(apiurl.todayOverview.getRoadDataUrl, {
 			params
+		}),
+		// 获取今日停车场概况
+		getParkDataApi: (params = {}) => vm.$u.http.get(apiurl.todayOverview.getParkDataUrl, {
+			params
 		})
 	};
 	// 运营分析

components/p-countUp/countUp.vue

@@ -0,0 +1,160 @@
+<template>
+  <view class="number-box">
+    <block v-for="(myIndex, index) in indexArr" :key="index">
+      <swiper
+        class="swiper"
+        vertical="true"
+        :current="myIndex"
+        circular="true"
+        v-bind:style="{
+          color: color,
+          width: myIndex == 10 ? '7px' : width + 'px',
+          height: height + 'px',
+          lineHeight: height + 'px',
+          fontSize: fontSize + 'px'
+        }"
+      >
+        <swiper-item>
+          <view class="swiper-item">0</view>
+        </swiper-item>
+        <swiper-item>
+          <view class="swiper-item">1</view>
+        </swiper-item>
+        <swiper-item>
+          <view class="swiper-item">2</view>
+        </swiper-item>
+        <swiper-item>
+          <view class="swiper-item">3</view>
+        </swiper-item>
+        <swiper-item>
+          <view class="swiper-item">4</view>
+        </swiper-item>
+        <swiper-item>
+          <view class="swiper-item">5</view>
+        </swiper-item>
+        <swiper-item>
+          <view class="swiper-item">6</view>
+        </swiper-item>
+        <swiper-item>
+          <view class="swiper-item">7</view>
+        </swiper-item>
+        <swiper-item>
+          <view class="swiper-item">8</view>
+        </swiper-item>
+        <swiper-item>
+          <view class="swiper-item">9</view>
+        </swiper-item>
+        <swiper-item>
+          <view class="swiper-item">.</view>
+        </swiper-item>
+      </swiper>
+    </block>
+  </view>
+</template>
+
+<script>
+export default {
+  props: {
+    num: [String, Number],
+    color: {
+      type: String,
+      default: '#000000'
+    },
+    width: {
+      type: String,
+      default: '15'
+    },
+    height: {
+      type: String,
+      default: '15'
+    },
+    fontSize: {
+      type: String,
+      default: '15'
+    }
+  },
+  data() {
+    return {
+      indexArr: []
+    };
+  },
+  created() {
+    let { num } = this;
+    let arr = new Array(num.toString().length);
+    arr.fill(0);
+    this.indexArr = arr;
+  },
+  watch: {
+    num: function (val, oldVal) {
+      // 处理新老数据长度不一样的情况
+      let arr = Array.prototype.slice.apply(this.indexArr);
+      let newLen = val.toString().length;
+      let oldLen = oldVal.toString().length;
+      if (newLen > oldLen) {
+        for (let i = 0; i < newLen - oldLen; i++) {
+          arr.push(0);
+        }
+        this.indexArr = arr;
+      }
+      if (newLen < oldLen) {
+        for (let i = 0; i < oldLen - newLen; i++) {
+          arr.pop();
+        }
+        this.indexArr = arr;
+      }
+      this.numChange(val);
+    }
+  },
+  mounted() {
+    //定时器作用：app显示数字滚动
+    this._time = setTimeout(() => {
+      this.numChange(this.num);
+      clearTimeout(this._time);
+    }, 100);
+  },
+  methods: {
+    /**
+     * 数字改变
+     * @value 数字
+     */
+    numChange(num) {
+      this.$nextTick(() => {
+        let { indexArr } = this;
+        let copyIndexArr = Array.prototype.slice.apply(indexArr);
+        let _num = num.toString();
+        for (let i = 0; i < _num.length; i++) {
+          if (_num[i] === '.') {
+            copyIndexArr[i] = 10;
+          } else {
+            copyIndexArr[i] = Number(_num[i]);
+          }
+        }
+        this.indexArr = copyIndexArr;
+      });
+    }
+  }
+};
+</script>
+
+<style lang="scss">
+.number-box {
+  display: flex;
+  flex-wrap: wrap;
+  justify-content: center;
+}
+
+.swiper {
+  position: relative;
+  font-family: PingFangSC-Heavy, PingFang SC;
+  text-align: center;
+}
+
+.swiper:after {
+  content: '';
+  position: absolute;
+  left: 0;
+  top: 0;
+  width: 100%;
+  height: 100%;
+}
+</style>

pages/dataOverview/todayOverview - 副本/todayOverview.scss

@@ -0,0 +1,104 @@
+.overview {
+	padding: 15px;
+	&-module {
+		font-family: PingFangSC-Regular, PingFang SC;
+		&-1 {
+			background-color: #fff;
+			border-radius: 5px;
+			padding: 15px;
+			margin-bottom: 14px;
+			&-title {
+				font-size: 20px;
+				color: #434343;
+				text-align: center;
+			}
+			&-content {
+				display: flex;
+				&-revenue {
+					background-color: #EDF3FF;
+					border-radius: 5px;
+					margin-top: 10px;
+					padding: 17px 0;
+					width: calc(50% - 6px);
+					text-align: center;
+					margin-right: 12px;
+					margin-bottom: 12px;
+					.title {
+						color: #535353;
+						font-size: 15px;
+					}
+					.content {
+						display: flex;
+						justify-content: center;
+						&-left {
+							color: #878787;
+							font-size: 14px;
+							text {
+								font-size: 30px;
+								color: #1767F2;
+								font-weight: bold;
+							}
+						}
+					}
+					&:last-child {
+						margin-right: 0;
+					}
+				}
+			}
+			&-revenue {
+				background-color: #EDF3FF;
+				border-radius: 5px;
+				margin-top: 10px;
+				padding: 17px 18px;
+				.title {
+					color: #535353;
+					font-size: 15px;
+				}
+				.content {
+					display: flex;
+					justify-content: space-between;
+					&-left {
+						color: #1767F2;
+						font-size: 20px;
+						text {
+							font-size: 30px;
+							font-weight: bold;
+						}
+					}
+				}
+			}
+			&-menu {
+				// background-color: #EDF3FF;
+				border-radius: 5px;
+				padding: 15px 0;
+				margin-top: 10px;
+				margin-bottom: 9px;
+				.list {
+					display: flex;
+					justify-content: space-between;
+					&-item {
+						width: 33%;
+						text-align: center;
+						border-right: solid 1px #EDF3FF;
+						&:last-child {
+							border-right: none;
+						}
+						&-total {
+							color: #303030;
+							font-size: 12px;
+							text {
+								font-size: 16px;
+								font-weight: bold;
+								color: #FF0000;
+							}
+						}
+						&-title {
+							color: #878787;
+							font-size: 11px;
+						}
+					}
+				}
+			}
+		}
+	}
+}

pages/dataOverview/todayOverview - 副本/todayOverview.vue

@@ -0,0 +1,157 @@
+<!-- 今日概况 -->
+<template>
+	<view class="overview">
+		<view class="overview-module">
+			<!-- 今日概况 -->
+			<view class="overview-module-1">
+				<view class="overview-module-1-title">
+					<text>今日概况</text>
+				</view>
+				<!-- 今日营收 -->
+				<view class="overview-module-1-revenue">
+					<view class="title">今日营收</view>
+					<view class="content">
+						<view class="content-left">
+							<text>{{ todayData.amtIn || 0 }}</text>元
+						</view>
+						<view class="content-right">
+							<u--image :src="require('@/static/icons/trending-up-icon.svg')" width="59px" height="36px">
+							</u--image>
+						</view>
+					</view>
+				</view>
+				<view class="overview-module-1-menu">
+					<view class="list">
+						<view class="list-item">
+							<view class="list-item-total">
+								<text>{{ todayData.amtOwe || 0 }}</text>元
+							</view>
+							<view class="list-item-title">今日欠费</view>
+						</view>
+						<view class="list-item">
+							<view class="list-item-total">
+								<text>{{ todayData.countVehicle || 0 }}</text>次
+							</view>
+							<view class="list-item-title">今日停车</view>
+						</view>
+						<view class="list-item">
+							<view class="list-item-total">
+								<text>{{ todayData.countQr || 0 }}</text>次
+							</view>
+							<view class="list-item-title">今日扫码</view>
+						</view>
+					</view>
+				</view>
+			</view>
+			<!-- 路段概况 -->
+			<view class="overview-module-1">
+				<view class="overview-module-1-title">
+					<text>路段概况</text>
+				</view>
+				<view class="overview-module-1-content">
+					<view class="overview-module-1-content-revenue">
+						<view class="title">路段总数</view>
+						<view class="content">
+							<view class="content-left">
+								<text>{{ roadData.roadTotal || 0 }}</text>个
+							</view>
+						</view>
+					</view>
+					<view class="overview-module-1-content-revenue">
+						<view class="title">泊位总数</view>
+						<view class="content">
+							<view class="content-left">
+								<text>{{ roadData.spaceTotal || 0 }}</text>个
+							</view>
+						</view>
+					</view>
+				</view>
+			</view>
+			<!-- 停车场概况 -->
+			<view class="overview-module-1">
+				<view class="overview-module-1-title">
+					<text>停车场概况</text>
+				</view>
+				<view class="overview-module-1-content">
+					<view class="overview-module-1-content-revenue">
+						<view class="title">停车场总数</view>
+						<view class="content">
+							<view class="content-left">
+								<text>{{ roadData.parkingTotal || 0 }}</text>个
+							</view>
+						</view>
+					</view>
+					<view class="overview-module-1-content-revenue">
+						<view class="title">泊位总数</view>
+						<view class="content">
+							<view class="content-left">
+								<text>{{ roadData.parkingSpaceTotal || 0 }}</text>个
+							</view>
+						</view>
+					</view>
+				</view>
+			</view>
+		</view>
+		<u-toast ref="uToast"></u-toast>
+	</view>
+</template>
+
+<script>
+	export default {
+		data() {
+			return {
+				todayData: {},
+				roadData: {}
+			}
+		},
+		onShow() {
+			this.getTodayData();
+			this.getRoadData();
+		},
+		methods: {
+			/**
+			 * 获取今日概况
+			 */
+			getTodayData() {
+				uni.$u.api.todayOverviewApi.getTodayDataApi().then(res => {
+					if (res.code === 200) {
+						this.todayData = res.data
+					} else {
+						this.$refs.uToast.show({
+							loading: true,
+							message: res.msg || '获取今日概况失败!',
+							type: 'error'
+						})
+					}
+				})
+			},
+			/**
+			 * 获取路段概况
+			 */
+			getRoadData() {
+				uni.$u.api.todayOverviewApi.getRoadDataApi().then(res => {
+					if (res.code === 200) {
+						this.roadData = res.data
+					} else {
+						this.$refs.uToast.show({
+							loading: true,
+							message: res.msg || '获取路段概况失败!',
+							type: 'error'
+						})
+					}
+				})
+			}
+		}
+	}
+</script>
+
+<style lang="scss">
+	page {
+		min-height: calc(100vh - 44px);
+		background-color: #1767F2;
+	}
+</style>
+
+<style lang="scss" scoped>
+	@import './todayOverview.scss';
+</style>

pages/dataOverview/todayOverview/todayOverview.scss

@@ -1,104 +1,54 @@
 .overview {
-	padding: 15px;
-	&-module {
-		font-family: PingFangSC-Regular, PingFang SC;
-		&-1 {
-			background-color: #fff;
-			border-radius: 5px;
-			padding: 15px;
-			margin-bottom: 14px;
-			&-title {
-				font-size: 20px;
-				color: #434343;
+  padding: 15px;
+  &-tabs {
+    width: 100%;
+    border: solid 1px #fff;
+    display: flex;
+    justify-content: space-between;
+    border-radius: 5px;
+    margin-bottom: 18px;
+    &-item {
+      width: 50%;
+      text-align: center;
+      line-height: 49px;
+      color: #fff;
+      font-size: 20px;
+      font-family: PingFangSC-Regular, PingFang SC;
+    }
+    .active {
+      background-color: #fff;
+      color: #434343;
+    }
+  }
+  &-content {
+    padding: 26px 15px;
+    background-color: #fff;
+    border-radius: 5px;
+    &-item {
+      display: flex;
+      justify-content: space-between;
+      align-items: center;
+      padding: 15px;
+      background-color: #edf3ff;
+      border-radius: 5px;
+      margin-bottom: 10px;
+      &:last-child {
+        margin-bottom: 0;
+      }
+      .title {
+        color: #535353;
+        font-size: 15px;
+        font-family: PingFangSC-Regular, PingFang SC;
+				margin-bottom: 5px;
+      }
+			&-right {
+				width: 60px;
+				height: 35px;
+				line-height: 35px;
 				text-align: center;
+				font-size: 30px;
+				font-weight: bold;
 			}
-			&-content {
-				display: flex;
-				&-revenue {
-					background-color: #EDF3FF;
-					border-radius: 5px;
-					margin-top: 10px;
-					padding: 17px 0;
-					width: calc(50% - 6px);
-					text-align: center;
-					margin-right: 12px;
-					margin-bottom: 12px;
-					.title {
-						color: #535353;
-						font-size: 15px;
-					}
-					.content {
-						display: flex;
-						justify-content: center;
-						&-left {
-							color: #878787;
-							font-size: 14px;
-							text {
-								font-size: 30px;
-								color: #1767F2;
-								font-weight: bold;
-							}
-						}
-					}
-					&:last-child {
-						margin-right: 0;
-					}
-				}
-			}
-			&-revenue {
-				background-color: #EDF3FF;
-				border-radius: 5px;
-				margin-top: 10px;
-				padding: 17px 18px;
-				.title {
-					color: #535353;
-					font-size: 15px;
-				}
-				.content {
-					display: flex;
-					justify-content: space-between;
-					&-left {
-						color: #1767F2;
-						font-size: 20px;
-						text {
-							font-size: 30px;
-							font-weight: bold;
-						}
-					}
-				}
-			}
-			&-menu {
-				// background-color: #EDF3FF;
-				border-radius: 5px;
-				padding: 15px 0;
-				margin-top: 10px;
-				margin-bottom: 9px;
-				.list {
-					display: flex;
-					justify-content: space-between;
-					&-item {
-						width: 33%;
-						text-align: center;
-						border-right: solid 1px #EDF3FF;
-						&:last-child {
-							border-right: none;
-						}
-						&-total {
-							color: #303030;
-							font-size: 12px;
-							text {
-								font-size: 16px;
-								font-weight: bold;
-								color: #FF0000;
-							}
-						}
-						&-title {
-							color: #878787;
-							font-size: 11px;
-						}
-					}
-				}
-			}
-		}
-	}
-}
+    }
+  }
+}

pages/dataOverview/todayOverview/todayOverview.vue

@@ -1,157 +1,178 @@
 <!-- 今日概况 -->
 <template>
-	<view class="overview">
-		<view class="overview-module">
-			<!-- 今日概况 -->
-			<view class="overview-module-1">
-				<view class="overview-module-1-title">
-					<text>今日概况</text>
-				</view>
-				<!-- 今日营收 -->
-				<view class="overview-module-1-revenue">
-					<view class="title">今日营收</view>
-					<view class="content">
-						<view class="content-left">
-							<text>{{ todayData.amtIn || 0 }}</text>元
-						</view>
-						<view class="content-right">
-							<u--image :src="require('@/static/icons/trending-up-icon.svg')" width="59px" height="36px">
-							</u--image>
-						</view>
-					</view>
-				</view>
-				<view class="overview-module-1-menu">
-					<view class="list">
-						<view class="list-item">
-							<view class="list-item-total">
-								<text>{{ todayData.amtOwe || 0 }}</text>元
-							</view>
-							<view class="list-item-title">今日欠费</view>
-						</view>
-						<view class="list-item">
-							<view class="list-item-total">
-								<text>{{ todayData.countVehicle || 0 }}</text>次
-							</view>
-							<view class="list-item-title">今日停车</view>
-						</view>
-						<view class="list-item">
-							<view class="list-item-total">
-								<text>{{ todayData.countQr || 0 }}</text>次
-							</view>
-							<view class="list-item-title">今日扫码</view>
-						</view>
-					</view>
-				</view>
-			</view>
-			<!-- 路段概况 -->
-			<view class="overview-module-1">
-				<view class="overview-module-1-title">
-					<text>路段概况</text>
-				</view>
-				<view class="overview-module-1-content">
-					<view class="overview-module-1-content-revenue">
-						<view class="title">路段总数</view>
-						<view class="content">
-							<view class="content-left">
-								<text>{{ roadData.roadTotal || 0 }}</text>个
-							</view>
-						</view>
-					</view>
-					<view class="overview-module-1-content-revenue">
-						<view class="title">泊位总数</view>
-						<view class="content">
-							<view class="content-left">
-								<text>{{ roadData.spaceTotal || 0 }}</text>个
-							</view>
-						</view>
-					</view>
-				</view>
-			</view>
-			<!-- 停车场概况 -->
-			<view class="overview-module-1">
-				<view class="overview-module-1-title">
-					<text>停车场概况</text>
-				</view>
-				<view class="overview-module-1-content">
-					<view class="overview-module-1-content-revenue">
-						<view class="title">停车场总数</view>
-						<view class="content">
-							<view class="content-left">
-								<text>{{ roadData.parkingTotal || 0 }}</text>个
-							</view>
-						</view>
-					</view>
-					<view class="overview-module-1-content-revenue">
-						<view class="title">泊位总数</view>
-						<view class="content">
-							<view class="content-left">
-								<text>{{ roadData.parkingSpaceTotal || 0 }}</text>个
-							</view>
-						</view>
-					</view>
-				</view>
-			</view>
-		</view>
-		<u-toast ref="uToast"></u-toast>
-	</view>
+  <view class="overview">
+    <!-- 顶部切换停车场和路段 -->
+    <view class="overview-tabs">
+      <view
+        class="overview-tabs-item"
+        v-for="(item, index) in tabs"
+        :key="index"
+        :class="{ active: tabCur === item.key }"
+        @click="tabCur = item.key"
+      >
+        <text>{{ item.label }}</text>
+      </view>
+    </view>
+    <template v-if="tabCur === 'road'">
+      <view class="overview-content">
+        <view class="overview-content-item" v-for="(item, index) in roadObj.list" :key="index">
+          <view class="overview-content-item-left">
+            <view>
+              <text class="title">{{ item.label }}（{{ item.unit }}）</text>
+            </view>
+            <view>
+              <count-up
+                :num="roadData[item.key] || 0"
+                color="#1767F2"
+                width="20"
+                height="42"
+                fontSize="30"
+              />
+            </view>
+          </view>
+          <view class="overview-content-item-right">
+            <template v-if="roadData[item.flag]">
+              <u--image
+                v-if="roadData[item.flag].indexOf('-') === -1"
+                :showLoading="true"
+                src="/static/icons/upward-trend-icon.svg"
+                width="60px"
+                height="35px"
+              />
+              <u--image
+                v-if="roadData[item.flag].indexOf('-') > -1"
+                :showLoading="true"
+                src="/static/icons/downward-trend-icon.svg"
+                width="60px"
+                height="35px"
+              />
+            </template>
+						<template v-else>--</template>
+          </view>
+        </view>
+      </view>
+    </template>
+		<template v-if="tabCur === 'park'">
+      <view class="overview-content">
+        <view class="overview-content-item" v-for="(item, index) in roadObj.list" :key="index">
+          <view class="overview-content-item-left">
+            <view>
+              <text class="title">{{ item.label }}（{{ item.unit }}）</text>
+            </view>
+            <view>
+              <count-up
+                :num="parkData[item.key] || 0"
+                color="#1767F2"
+                width="20"
+                height="42"
+                fontSize="30"
+              />
+            </view>
+          </view>
+          <view class="overview-content-item-right">
+            <template v-if="parkData[item.flag]">
+              <u--image
+                v-if="parkData[item.flag].indexOf('-') === -1"
+                :showLoading="true"
+                src="/static/icons/upward-trend-icon.svg"
+                width="60px"
+                height="35px"
+              />
+              <u--image
+                v-if="parkData[item.flag].indexOf('-') > -1"
+                :showLoading="true"
+                src="/static/icons/downward-trend-icon.svg"
+                width="60px"
+                height="35px"
+              />
+            </template>
+						<template v-else>--</template>
+          </view>
+        </view>
+      </view>
+    </template>
+    <u-toast ref="uToast"></u-toast>
+  </view>
 </template>
 
 <script>
-	export default {
-		data() {
-			return {
-				todayData: {},
-				roadData: {}
-			}
-		},
-		onShow() {
-			this.getTodayData();
-			this.getRoadData();
-		},
-		methods: {
-			/**
-			 * 获取今日概况
-			 */
-			getTodayData() {
-				uni.$u.api.todayOverviewApi.getTodayDataApi().then(res => {
-					if (res.code === 200) {
-						this.todayData = res.data
-					} else {
-						this.$refs.uToast.show({
-							loading: true,
-							message: res.msg || '获取今日概况失败!',
-							type: 'error'
-						})
-					}
-				})
-			},
-			/**
-			 * 获取路段概况
-			 */
-			getRoadData() {
-				uni.$u.api.todayOverviewApi.getRoadDataApi().then(res => {
-					if (res.code === 200) {
-						this.roadData = res.data
-					} else {
-						this.$refs.uToast.show({
-							loading: true,
-							message: res.msg || '获取路段概况失败!',
-							type: 'error'
-						})
-					}
-				})
-			}
-		}
-	}
+import countUp from '@/components/p-countUp/countUp.vue';
+export default {
+  components: {
+    countUp
+  },
+  data() {
+    return {
+      tabs: [
+        { key: 'road', label: '路段' },
+        { key: 'park', label: '停车场' }
+      ],
+      tabCur: 'road',
+      roadObj: {
+        list: [
+          { key: 'amtIn', label: '今日营收', unit: '元', flag: 'linkRatIn' },
+          { key: 'amtOwe', label: '今日欠费', unit: '元', flag: 'linkRatOwe' },
+          { key: 'countQr', label: '今日停车', unit: '次', flag: 'linkRatQr' },
+          {
+            key: 'countVehicle',
+            label: '今日扫码',
+            unit: '次',
+            flag: 'linkRatVehicle'
+          }
+        ]
+      },
+      roadData: {},
+			parkData: {}
+    };
+  },
+  onShow() {
+    this.getTodayData();
+    this.getRoadData();
+  },
+  methods: {
+    /**
+     * 获取今日路段概况
+     */
+    getTodayData() {
+      uni.$u.api.todayOverviewApi.getTodayDataApi().then((res) => {
+        if (res.code === 200) {
+          this.roadData = res.data;
+        } else {
+          this.$refs.uToast.show({
+            loading: true,
+            message: res.msg || '获取今日概况失败!',
+            type: 'error'
+          });
+        }
+      });
+    },
+    /**
+     * 获取今日停车场情况
+     */
+    getRoadData() {
+      uni.$u.api.todayOverviewApi.getParkDataApi().then((res) => {
+        if (res.code === 200) {
+          this.parkData = res.data;
+        } else {
+          this.$refs.uToast.show({
+            loading: true,
+            message: res.msg || '获取路段概况失败!',
+            type: 'error'
+          });
+        }
+      });
+    }
+  }
+};
 </script>
 
 <style lang="scss">
-	page {
-		min-height: calc(100vh - 44px);
-		background-color: #1767F2;
-	}
+page {
+  min-height: calc(100vh - 44px);
+  background-color: #1767f2;
+}
 </style>
 
 <style lang="scss" scoped>
-	@import './todayOverview.scss';
+@import './todayOverview.scss';
 </style>

static/icons/downward-trend-icon.svg

@@ -0,0 +1,18 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg width="118px" height="71px" viewBox="0 0 118 71" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+    <title>ic_trending_up_px备份</title>
+    <defs>
+        <filter id="filter-1">
+            <feColorMatrix in="SourceGraphic" type="matrix" values="0 0 0 0 0.218898 0 0 0 0 0.830701 0 0 0 0 0.562870 0 0 0 1.000000 0"></feColorMatrix>
+        </filter>
+    </defs>
+    <g id="页面-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+        <g id="今日概况备份-3" transform="translate(-528.000000, -581.000000)">
+            <g id="ic_trending_up_px备份" transform="translate(60.000000, 516.000000)" filter="url(#filter-1)">
+                <g transform="translate(527.000000, 100.500000) scale(1, -1) translate(-527.000000, -100.500000) translate(468.000000, 65.000000)">
+                    <polygon id="路径" fill="#000000" fill-rule="nonzero" points="82.6 0 96.1405 13.57875 67.3484999 42.4225 43.7485001 18.7558333 0 62.6279167 8.34850009 71 43.7485001 35.5 67.3484999 59.1666667 104.4595 21.92125 118 35.5 118 0"></polygon>
+                </g>
+            </g>
+        </g>
+    </g>
+</svg>

static/icons/upward-trend-icon.svg

@@ -0,0 +1,16 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg width="118px" height="71px" viewBox="0 0 118 71" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+    <title>ic_trending_up_px</title>
+    <defs>
+        <filter id="filter-1">
+            <feColorMatrix in="SourceGraphic" type="matrix" values="0 0 0 0 1.000000 0 0 0 0 0.000000 0 0 0 0 0.000000 0 0 0 1.000000 0"></feColorMatrix>
+        </filter>
+    </defs>
+    <g id="页面-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+        <g id="ic_trending_up_px" transform="translate(-528.000000, -377.000000)" filter="url(#filter-1)">
+            <g transform="translate(528.000000, 377.000000)">
+                <polygon id="路径" fill="#000000" fill-rule="nonzero" points="82.6 0 96.1405 13.57875 67.3484999 42.4225 43.7485001 18.7558333 0 62.6279167 8.34850009 71 43.7485001 35.5 67.3484999 59.1666667 104.4595 21.92125 118 35.5 118 0"></polygon>
+            </g>
+        </g>
+    </g>
+</svg>