From 988fcd248fc05b3472a1f63992e6e616f031fc70 Mon Sep 17 00:00:00 2001
From: liuqimichale <123456lq>
Date: Fri, 25 Jan 2019 14:56:30 +0800
Subject: [PATCH] 调取接口

---
 src/api/variables.js          |   3 +++
 src/assets/img/index.vue      | 167 +++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++
 src/assets/img/orderMoney.svg |  25 +++++++++++++++++++++++++
 src/assets/img/orderNum.svg   |  28 ++++++++++++++++++++++++++++
 src/assets/img/orderPark.svg  |  22 ++++++++++++++++++++++
 5 files changed, 245 insertions(+), 0 deletions(-)
 create mode 100644 src/api/variables.js
 create mode 100644 src/assets/img/index.vue
 create mode 100644 src/assets/img/orderMoney.svg
 create mode 100644 src/assets/img/orderNum.svg
 create mode 100644 src/assets/img/orderPark.svg

diff --git a/src/api/variables.js b/src/api/variables.js
new file mode 100644
index 0000000..03a045d
--- /dev/null
+++ b/src/api/variables.js
@@ -0,0 +1,3 @@
+const paramsvariables = [10003]
+
+export default { paramsvariables }
diff --git a/src/assets/img/index.vue b/src/assets/img/index.vue
new file mode 100644
index 0000000..d1d015a
--- /dev/null
+++ b/src/assets/img/index.vue
@@ -0,0 +1,167 @@
+<template>
+  <div class="app-orderMessageBox" ref="app_orderMessageBox">
+    <div class="theme-card">
+      <div class="title"><span>订单消息</span></div>
+      <div class="content">
+
+        <ul class="news-wrap">
+          <li class="orderNum">订单编号</li>
+          <li class="orderPark">停车场</li>
+          <li class="orderMoney">收费金额</li>
+        </ul>
+        <div class="nwwest-roll  news-wrap" id="nwwest-roll">
+          <ul id="roll-ul" class="roll-ul" :style="{ top }">
+            <li v-for="(item,index) in list" ref="rollul"  :key="index">
+              <div :title="item.orderId">{{item.orderId}}</div>
+              <div :title="item.plName">{{item.plName}}</div>
+              <div :title="item.orderActFee">{{item.orderActFee|formatMoney}}</div>
+            </li>
+          </ul>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+  import { msgAddress } from '../../api/api'
+  export default {
+    name: "orderMessage",
+    data() {
+      return {
+        orderList:"",//公告列表
+        //marqueeHeight: '100%',
+        name: '订单公告',
+        activeIndex: 0,
+        intnum: undefined,
+        list: []
+      }
+    },
+    computed: {
+      top() {
+        return - this.activeIndex * 26 + 'px';
+      }
+    },
+    created() {
+      this.onLoad()
+    },
+    methods: {
+      onLoad() {
+        msgAddress({
+          orgIds: this.GLOBAL.paramsvariables
+        }).then((response)=>{
+          let  data = response.data.data
+          this.list = data;
+          var that = this
+          this.intnum = setInterval(_ => {
+            if (this.activeIndex < this.list.length) {
+              this.activeIndex += 1;
+              that.list.push(that.list[0]);
+            } else {
+              this.activeIndex = 0;
+            }
+          }, 1000);
+        }).catch((response)=>{
+          console.log(response);
+        })
+      },
+      scroll() {
+        this.animate = !this.animate;
+        var that = this; // 在异步函数中会出现this的偏移问题，此处一定要先保存好this的指向
+        setTimeout(function () {
+          that.list.push(that.list[0]);
+          that.list.shift();
+          that.animate = !that.animate;  // 这个地方如果不把animate 取反会出现消息回滚的现象，此时把ul 元素的过渡属性取消掉就可以完美实现无缝滚动的效果了
+        }, 0)
+      }
+    },
+    filters:{
+      formatMoney: function (value) {
+        return (value/100).toFixed(2)+' 元'
+      }
+    }
+  }
+</script>
+
+<style scoped  lang="scss">
+  .app-orderMessageBox {
+    width: 100%;
+    .content{
+      padding: 0;
+    }
+    .theme-card{
+      height: 100%;
+    }
+    .news-wrap{
+      height: 40px;
+      line-height: 40px;
+      font-size: 14px;
+      .roll-ul{
+        height: 100%;
+        position: relative;
+        transition: top 0.5s;
+      }
+      li{
+        height: 40px;
+        float: left;
+        padding-left: 0;
+        padding-left: 30px;
+        background-size: 14px 14px;
+        background-position: 10px center;
+        background-repeat: no-repeat;
+        list-style: none;
+        overflow: hidden;
+      }
+      .orderNum{
+        width: 80px;
+        background-image: url(../../images/com/orderNum.svg) ;
+      }
+      .orderMoney{
+        width: 80px;
+        background-image: url(../../images/com/orderMoney.svg) ;
+      }
+      .orderPark{
+        width: calc(100% - 250px);
+        background-image: url(../../images/com/orderPark.svg) ;
+      }
+
+    }
+
+    .nwwest-roll {
+      width: 100%;
+      height: calc(100% - 60px);
+      overflow: hidden;
+      transition: all 0.5s;
+      li{
+        width: 100%;
+        height: 26px;
+        line-height: 26px;
+        font-size: 12px;
+        padding-left: 10px;
+        color: #fff;
+        background:rgba(255,255,255,.1);
+        margin-bottom: 10px;
+          div{
+            float: left;
+            overflow: hidden;
+            white-space: nowrap;
+            text-overflow: ellipsis;
+            &:nth-of-type(1){
+              width: 110px;
+            }
+            &:nth-of-type(2){
+              width: calc(100% - 220px);
+            }
+            &:nth-of-type(3){
+              width: 80px;
+            }
+
+          }
+      }
+    }
+  }
+  .anim {
+     transition: all 0.5s;
+
+  }
+</style>
diff --git a/src/assets/img/orderMoney.svg b/src/assets/img/orderMoney.svg
new file mode 100644
index 0000000..456e984
--- /dev/null
+++ b/src/assets/img/orderMoney.svg
@@ -0,0 +1,25 @@
+<?xml version="1.0" encoding="utf-8"?>
+<!-- Generator: Adobe Illustrator 19.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
+<svg version="1.1" preserveAspectRatio="none" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
+	 viewBox="0 2 14 14" style="enable-background:new 0 2 14 14;" xml:space="preserve">
+<style type="text/css">
+	.st0{fill:url(#XMLID_3_);}
+	.st1{fill:#94C4F1;}
+	.st2{fill:#FFFFFF;}
+</style>
+<g id="XMLID_1_">
+	
+		<linearGradient id="XMLID_3_" gradientUnits="userSpaceOnUse" x1="7.1131" y1="11.1822" x2="6.8702" y2="-2.3156" gradientTransform="matrix(1 0 0 1 0 4)">
+		<stop  offset="0" style="stop-color:#00D5FE"/>
+		<stop  offset="1" style="stop-color:#00B9FE"/>
+	</linearGradient>
+	<path id="XMLID_34_" class="st0" d="M7,15.7c-3.7,0-6.8-3-6.8-6.8c0-3.7,3-6.8,6.8-6.8c3.7,0,6.8,3,6.8,6.8S10.7,15.7,7,15.7z"/>
+	<path id="XMLID_27_" class="st1" d="M7,2.5c3.6,0,6.5,2.9,6.5,6.5s-2.9,6.5-6.5,6.5S0.5,12.6,0.5,9S3.4,2.5,7,2.5 M7,2
+		C3.1,2,0,5.1,0,9s3.1,7,7,7s7-3.1,7-7S10.9,2,7,2L7,2z"/>
+</g>
+<path class="st2" d="M10.1,9.2l-2.3,0c0,0,0,0,0,0.1v0.8h1.4c0.2,0,0.4,0.2,0.4,0.4l0,0c0,0.2-0.2,0.5-0.4,0.5H7.7v1.4
+	c0,0.2-0.2,0.4-0.4,0.4H7.1c-0.2,0-0.4-0.2-0.4-0.4V11H5c-0.2,0-0.4-0.3-0.4-0.5l0,0c0-0.2,0.2-0.4,0.4-0.4h1.7V9.3
+	c0-0.1,0-0.1,0-0.1l0,0H3.9c-0.2,0-0.4-0.3-0.4-0.5V8.7c0-0.2,0.2-0.5,0.4-0.5h1.7L3.9,6.7C3.7,6.5,3.7,6.2,3.9,6
+	c0.2-0.2,0.5-0.2,0.7,0L7,8.1L9.4,6c0.2-0.2,0.5-0.2,0.7,0s0.2,0.5,0,0.7L8.4,8.2h1.7c0.2,0,0.4,0.3,0.4,0.5v0
+	C10.5,8.9,10.4,9.2,10.1,9.2z"/>
+</svg>
diff --git a/src/assets/img/orderNum.svg b/src/assets/img/orderNum.svg
new file mode 100644
index 0000000..1986423
--- /dev/null
+++ b/src/assets/img/orderNum.svg
@@ -0,0 +1,28 @@
+<?xml version="1.0" encoding="utf-8"?>
+<!-- Generator: Adobe Illustrator 19.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
+<svg version="1.1" preserveAspectRatio="none" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
+	 viewBox="0 2 14 14" style="enable-background:new 0 2 14 14;" xml:space="preserve">
+<style type="text/css">
+	.st0{fill:url(#XMLID_3_);}
+	.st1{fill:#94C4F1;}
+	.st2{fill:#FFFFFF;}
+</style>
+<g id="XMLID_1_">
+	
+		<linearGradient id="XMLID_3_" gradientUnits="userSpaceOnUse" x1="7.1131" y1="4.9272" x2="6.8702" y2="18.425" gradientTransform="matrix(1 0 0 -1 0 20)">
+		<stop  offset="0" style="stop-color:#00D5FE"/>
+		<stop  offset="1" style="stop-color:#00B9FE"/>
+	</linearGradient>
+	<path id="XMLID_34_" class="st0" d="M7,15.6c-3.7,0-6.8-3-6.8-6.8C0.2,5.1,3.2,2,7,2c3.7,0,6.8,3,6.8,6.8S10.7,15.6,7,15.6z"/>
+	<path id="XMLID_27_" class="st1" d="M7,2.5c3.6,0,6.5,2.9,6.5,6.5s-2.9,6.5-6.5,6.5S0.5,12.6,0.5,9S3.4,2.5,7,2.5 M7,2
+		C3.1,2,0,5.1,0,9s3.1,7,7,7s7-3.1,7-7S10.9,2,7,2L7,2z"/>
+</g>
+<g id="XMLID_4_">
+	<g id="XMLID_49_">
+		<path id="XMLID_50_" class="st2" d="M9.3,6.4H4.7C4.3,6.4,4.1,6.7,4.1,7v0.2c0,0.3,0.2,0.5,0.5,0.5h4.6c0.2,0,0.5-0.2,0.5-0.5V7
+			C9.8,6.5,9.3,6.4,9.3,6.4z M4.7,9.6h2.7C7.7,9.6,8,9.4,8,9.1V8.9c0-0.3-0.2-0.5-0.5-0.5H4.7c-0.3,0-0.5,0.2-0.5,0.5V9
+			C4.2,9.4,4.4,9.6,4.7,9.6z M8.7,10.3h-4c-0.3,0-0.5,0.2-0.5,0.5V11c0,0.3,0.2,0.5,0.5,0.5h4c0.3,0,0.5-0.2,0.5-0.5v-0.2
+			C9.2,10.5,9,10.3,8.7,10.3z"/>
+	</g>
+</g>
+</svg>
diff --git a/src/assets/img/orderPark.svg b/src/assets/img/orderPark.svg
new file mode 100644
index 0000000..2b39d0c
--- /dev/null
+++ b/src/assets/img/orderPark.svg
@@ -0,0 +1,22 @@
+<?xml version="1.0" encoding="utf-8"?>
+<!-- Generator: Adobe Illustrator 19.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
+<svg version="1.1" preserveAspectRatio="none" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
+	 viewBox="0 2 14 14" style="enable-background:new 0 2 14 14;" xml:space="preserve">
+<style type="text/css">
+	.st0{fill:url(#XMLID_3_);}
+	.st1{fill:#94C4F1;}
+	.st2{fill:#FFFFFF;}
+</style>
+<g id="XMLID_1_">
+	
+		<linearGradient id="XMLID_3_" gradientUnits="userSpaceOnUse" x1="7.1131" y1="11.1822" x2="6.8702" y2="-2.3156" gradientTransform="matrix(1 0 0 1 0 4)">
+		<stop  offset="0" style="stop-color:#00D5FE"/>
+		<stop  offset="1" style="stop-color:#00B9FE"/>
+	</linearGradient>
+	<path id="XMLID_34_" class="st0" d="M7,15.7c-3.7,0-6.8-3-6.8-6.8c0-3.7,3-6.8,6.8-6.8c3.7,0,6.8,3,6.8,6.8S10.7,15.7,7,15.7z"/>
+	<path id="XMLID_27_" class="st1" d="M7,2.5c3.6,0,6.5,2.9,6.5,6.5s-2.9,6.5-6.5,6.5S0.5,12.6,0.5,9S3.4,2.5,7,2.5 M7,2
+		C3.1,2,0,5.1,0,9s3.1,7,7,7s7-3.1,7-7S10.9,2,7,2L7,2z"/>
+</g>
+<path class="st2" d="M5,5.8c0.3,0,0.5,0.2,0.5,0.5v5c0,0.3-0.2,0.5-0.5,0.5s-0.5-0.2-0.5-0.5v-5C4.5,6,4.7,5.8,5,5.8z"/>
+<path class="st2" d="M7.5,6.8c0.6,0,1,0.4,1,1s-0.4,1-1,1h-2v-2H7.5 M7.5,5.8h-3v4h3c1.1,0,2-0.9,2-2S8.6,5.8,7.5,5.8L7.5,5.8z"/>
+</svg>
--
libgit2 0.21.4