首页报警列表样式调整

pages/home/components/alarm.vue

@@ -1,21 +1,37 @@
 <template>
-  <view v-if="list.length>0">
+  <view v-if="list.length > 0">
     <view class="work-title">设备报警</view>
-    <view v-for="(item, index) in list" :key="index" class="alarm-box">
-      <view class="alarm-left" :style="{ borderColor: item.color }">
-        <i>{{ item.alarmName }}</i>
-        <i>{{ item.levelNanme }}</i>
+    <view class="view_box">
+      <view :style="transitionStyle">
+        <view v-for="(item, index) in list" :key="index" class="alarm-box" @click="alarmImg()">
+          <view class="alarm-left" :style="{ borderColor: item.color }">
+            <i>{{ item.alarmName }}</i>
+            <i>{{ item.levelNanme }}</i>
+          </view>
+          <view class="alarm-center">
+            <text>{{ item.deviceName }}</text>
+            <text>品牌:{{ item.brand }}</text>
+            <text>型号:{{ item.model }}</text>
+            <text>报警时间:{{ item.alarmTime }}</text>
+            <view class="alarm-center-btn">一键报送</view>
+          </view>
+          <view class="alarm-right"></view>
+        </view>
       </view>
-      <view class="alarm-center">
-        <text>{{ item.deviceName }}</text>
-        <text>品牌:{{ item.brand }}</text>
-        <text>型号:{{ item.model }}</text>
-        <text>报警时间:{{ item.alarmTime }}</text>
-        <view class="alarm-center-btn">一键报送</view>
-      </view>
-      <view class="alarm-right"></view>
+
     </view>
+
+    <!-- <view class="view_box">
+      <view :style="transitionStyle">
+        <block v-for="(item, index) in list" :key="index">
+          <view>
+            -------------{{ item }}----------
+          </view>
+        </block>
+      </view>
+    </view> -->
   </view>
+
 </template>
 <script>
 export default {
@@ -26,10 +42,17 @@ export default {
         严重: "rgba(233,157,66,1)",
       },
       list: [],
+      transitionStyle: ''
     };
   },
   mounted() {
     this.deviceList()
+    // 示例 模拟接口请求
+    // this.getList().then((res) => {
+    //   console.log(res)
+    //   this.list = [...res.data, ...res.data]
+
+    // })
   },
   methods: {
     deviceList() {
@@ -49,8 +72,40 @@ export default {
             v.color = this.colorList[v.levelNanme]
           });
           this.list = res.data
+          // list赋值后调用初始化
+          this.init()
         }
       })
+    },
+    alarmImg() {
+      uni.previewImage({
+        current: '', // 当前显示图片的 http 链接
+        urls: [require('@/static/images/alarm_icon.png')]
+      })
+    },
+    init() {
+      // 主要通过 transition 的过度时间 控制 滚动速度
+      setTimeout(() => {
+        this.transitionStyle = 'transition: all 10s linear 0s;transform: translateY(-50%);'
+        setInterval(() => {
+          this.transitionStyle = ''
+          setTimeout(() => {
+            this.transitionStyle =
+              'transition: all 10s linear 0s;transform: translateY(-50%);'
+          }, 20)
+        }, 8000)
+      }, 20)
+    },
+    // 模拟接口请求
+    getList() {
+      return new Promise((resolve) => {
+        setTimeout(() => {
+          resolve({
+            code: '200',
+            data: [1, 2, 3, 4, 5, 6, 7, 8, 9]
+          })
+        }, 200)
+      })
     }
   }
 };
@@ -131,4 +186,10 @@ export default {
     }
   }
 }
+
+.view_box {
+  // background-color: #aaa2fb;
+  height: 300rpx;
+  overflow: hidden;
+}
 </style>

pages/home/components/eacharts_nightpie.vue

@@ -54,7 +54,8 @@ export default {
             name: "",
             type: "pie",
             center: ['50%', '50%'],
-            roseType: 'area',
+            radius: ['40%', '70%'],
+            // roseType: 'area',
             label: {
               // 饼图图形上的文本标签，可用于说明图形的一些数据信息，比如值，名称等.
               normal: {